merombak layout overlay

Senin

merombak layout overlay

LANGKAH 1: Buat Core Konten Anda
Dengan ini saya maksudkan gambar utama, atau flash, yang akan Anda gunakan sebagai blok bangunan untuk profil Anda.
Saya tidak akan menunjukkan Anda bagaimana untuk melakukan hal ini. Aku tambang di PaintShop.
Anda dapat menggunakan jenis cat program, atau beberapa program online, untuk melakukan pekerjaan ini.
Aku mungkin menyediakan beberapa link ke beberapa kemudian.

Untuk contoh ini kita akan menggunakan ini "inti"gambar:
Klik disini untuk Lihat Gambar
(Aku sedang dalam mood untuk menggambar lingkaran. Ini adalah hal yang baik saya mengambil jurusan Ilmu Komputer Seni bukan :-).

LANGKAH 2: Hide Default Page Content
Aku memilih untuk menyimpan banner iklan, pencarian, cara pintas, menu paling atas, dan bawah Link.

Letakkan kode ini pada About Me.

<a class="i"href="hackingprojectdesign.blogspot.com">
MySpace Code dan Tutorial oleh badrun
Sembunyikan Konten untuk Div Tampilan
<style>
. i, div.clearfix i i.i (display: none;)
table table table,
td.text table table table.blurbs (display: none)

td.text table table table (display: block;)

(! blog; hapus garis bawah untuk menampilkan blog!)
td.text table table table.latestBlogEntry (display: none)

(! teman; hapus garis bawah untuk menunjukkan teman-teman!)
td.text table table table.friendSpace (display: none)

(! Komentar; hapus garis bawah untuk menampilkan komentar!)
td.text table table table.friendsComments (display: none)

(! pesan status; menghapus garis bawah untuk menunjukkan status!)
td.text table table table.extendedNetwork (display: none)

(! menghapus batas dari link images!)
a img (border: none! penting)

(! ruang yang jelas ke kiri!)
table td img (display: none)
(! sembuh div img!)
table td div img (display: block)

(! menyingkirkan ruang yang lebih berlebihan!)
table td (height: auto! penting;)
table table br (display: none)
meja meja div.myCoreDiv br (display: block;)

</ style>
Akhir Sembunyikan Kode Untuk Div Tampilan </ a>

Jika Anda ingin menyembunyikan apa pun konten dalam pencarian atas / menu daerah lihat artikel ini:
Gaya atau Hapus konten dalam Top Search / Menu daerah
Langkah 3: Buat Core Div untuk menempatkan kami Isi kami di, Antara atas dan Bottom Menu Link
Tempatkan blok ini di bagian kepentingan.

Aku akan menggunakan "Umum"kepentingan Section.

Aku selanjutnya paste kode di bawah blok ke Seksi Kepentingan Umum:

<span class=i>
Sembunyikan hal untuk mempersiapkan Div Tampilan
<a href="http://xiii.us/ms/div-overlay"> myspace div kode overlay tutorial oleh Eileen </ a>
</ i>
<span class=i>!-Mulailah Blok untuk mengatur dan Buka Tabel Tingkat kustom Div-! </ i>
<span SEMUA class=i> Tutup tabel terbuka sehingga span kami tidak terpengaruh oleh hal-hal yang kami telah menghapus </ i>
</ tr> </ tr> </ table>
</ tr> </ tr> </ table>
</ tr> </ tr> </ table>

<span class=i>!! Buat dan ukuran div kami.!! </ i>
<div class="myCoreDiv"style="width:900px; height:auto !important; border:1px ungu solid; position:relative; top:0px; overflow:hidden; z-index:0;">
<span class=i> !!----- START Core Custom KONTEN ------!! </ i>



<span class="i"> Core !!------- END CUSTOM KONTEN --------!! </ i>

<span class="i">!! Buka jumlah meja yang sama kami tertutup.!!
</ i>
<td class="myTclass0"> <table class="hideIfInInterests">
<table class="i"> <tr> <td>
<table> <tr> <td>
<span class="off">!-END Custom Blok ke Tetapkan Tabel Tingkat dan Membuat Custom Div-! </ i>


Atur lebar ke Lebar citra inti Anda sendiri. Aku digunakan 900px.

Langkah 4: Tempatkan Core Image.
Di bawah di mana dikatakan "<span class="off">! --- START CUSTOM KONTEN -----------! </ Core span>"
Sisipkan gambar Anda, i.e.

<img src="http://i178.photobucket.com/albums/w275/madeline_fogg/core2_cbg.gif">

Ganti gambar saya URL dengan URL gambar Anda sendiri.

Jika Anda memiliki beberapa gambar, daftar mereka satu demi satu. (Dengan asumsi mereka bersih irisan gambar horizontal).
[JANGAN Slice kecuali gambar Anda terlalu besar untuk situs yang host gambar Anda.]

Memastikan bahwa lebar gambar Anda adalah sama dengan lebar yang ditetapkan untuk div. Aku memilikinya set ke 900px. Jika itu tidak lebar gambar Anda, Anda akan perlu untuk mengubah nilai lebar.

Langkah 5: Membuat Link
Asumsi di sini, adalah bahwa link telah ditarik ke citra inti Anda. Saya akan menunjukkan bagaimana untuk menempatkan jenis link lain kemudian dalam artikel ini.

Dapatkan Pengukuran. Karena kita mengukur dari sudut kiri atas Div Utama kita (dan citra inti kami) Cara termudah untuk mendapatkan pengukuran dapat menempatkan kotak di atas gambar kita.

Saya telah membuat grid untuk tujuan ini.
Aku tempatkan kode berikut di bawah kode aku ditempatkan di atas (tepat di bawah gambar inti).
Kode ini hanya sementara dan kita akan menghapus kode ini ketika kami sudah selesai.

<span class="off">! SEMENTARA Untuk Tempat Grid !!! </ span>
<div class="grid"style="width:900px; height:800px; overflow:hidden; position:absolute; top:0px; left:0px; z-index:0; ">
<img src="http://i11.tinypic.com/4pczehk.gif"> </ div>

Garis hitam ditarik setiap 50px dan garis-garis merah muda setiap 10px.
Link pertama saya adalah daerah dengan teks "Be My Friend"
Aku mendapatkan ini:
top: 210px; left: 120px
Aku mendapatkan ukuran
width: 60px; height: 50px
Aku akan membuat link saya dengan menempatkan gif yang jelas atas wilayah ini, dan mengubah gif menjadi link. Saya akan menggunakan gif yang jelas sama MySpace menggunakan kode standar mereka.
Saya mendapatkan berikut:

<a href = "http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=6221"
style = "position: absolute; top: 210px; left: 120px;">
<img src = "http://x.myspace.com/images/clear.gif"
style = "width: 60px; height: 40px;"> </ a>

Aku meletakkan di Tom's Friend ID (6221), Anda akan ingin menggunakan ID Teman Anda.
Aku menempatkan kode blok, di dalam area isi inti saya, tepat di bawah blok terakhir saya ditempatkan di sini.
[Akan ada perbatasan biru, merah di hover, area di atas link. Ketika kami selesai kami akan menghapus ini. Untuk saat ini mereka baik untuk melihat dengan tepat di mana link kita.]

Saya menggunakan teknik yang sama untuk menempatkan seluruh link.

Langkah 6: Tempatkan Custom Content ke Halaman.
Aku akan meletakkan gambar.
Aku ingin profil Berkas pada halaman saya, tapi mengerti bahwa impor itu, tidak semudah menambahkan kode untuk menempatkan gambar.

Saya ingin menempatkan gambar top: 30; left: 270px. Ingat, pengukuran-pengukuran dari sudut kiri atas div inti kita (dan kita citra inti).
Saya menggunakan kode ini untuk menempatkan gambar:

<img style="position:absolute; top:25px; left:270px"src="http://a542.ac-images.myspacecdn.com/images01/100/m_d1f8240914a1aed367f3d960ba407195.gif">


Karena di atas perlu DALAM div saya, saya menempatkan blok ini inside my Core Div, tepat di bawah item terakhir aku menambahkan.
Dibutuhkan untuk pergi di atas di mana dikatakan END CUSTOM Core KONTEN

Anda dapat menggunakan teknik yang sama untuk menempatkan jenis konten lainnya.

Saya perhatikan saya tidak menyertakan link untuk "View All Comments"ketika aku menciptakan citra inti saya.
Aku dapat dengan mudah menambahkan link, menyediakan teks yang diperlukan dengan link.

Aku memilih lokasi berikut untuk link: top: 400px left: 640px

Untuk contoh ini saya akan menggunakan kedua blok konten dan gaya blok.
Blok konten saya berjalan di bagian Konten (dalam Core saya Div)
Saya menggunakan kode berikut:

<a class="myViewCommentLink"href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=6221">
View <br> Komentar </ a>

(catatan: menggunakan id teman Anda sendiri bukan Tom's).
Aku meletakkan <br> antara dua kata dalam link, untuk memaksa carriage return antara dua kata.
Perhatikan Aku diberi sebuah kelas. Saya akan menggunakan kelas, untuk menciptakan gaya blok.

Sebelum kita menciptakan gaya blok, perhatikan di mana link berakhir.
Seharusnya berakhir tepat di bawah gambar inti Anda.
Seharusnya diambil pada atribut style standar untuk sebuah link (biru dan digarisbawahi).
Kita akan menggunakan gaya blok untuk mengubah warna, font-size, font-family, dan lokasi link.

Aku akan menaruh gaya saya blok, yang pergi dengan konten saya ditempatkan di inti saya, di bagian musik.

<style>
a.myViewCommentLink (color: black; font-size: 16px;
font-family: comic sans ms;
position: absolute; top: 400px; left: 650px;)
</ style>

Saya melakukan pekerjaan yang cukup baik yang cocok gaya font yang digunakan untuk saya link saya melukis langsung ke citra inti saya.

Menciptakan Sebuah "Tentang"Bagian
Sungguh ini hanya akan menjadi tempat untuk menulis beberapa hal yang ingin ditampilkan di Tampilan Div Anda.

Cara termudah adalah dengan hanya membuat sebuah div, di dalam Div Core Anda, untuk menahan konten ini.
JIKA konten statis ukurannya (Bukan hanya dari waktu ke waktu, tetapi di seluruh browser yang berbeda dan resolusi yang anda harapkan halaman yang dapat dilihat dalam) maka Anda dapat menggunakan posisi mutlak, untuk menempatkan konten ke daerah pada Core Image.
Namun, jika isi ukuran tidak statis, di seluruh platform, hal ini dapat menjadi masalah. Sebuah kotak gulir dapat memecahkan masalah ini.
Atau, Anda dapat memastikan Anda memperbolehkan cukup ruang, untuk menjelaskan ini.

Jika Anda ingin konten yang akan lebih dinamis dalam ukuran; Anda dapat menempatkan konten bukannya sehingga hanya jatuh ke div Anda, dan Anda tumbuh sebagai div konten mengembang. Ini TIDAK bekerja dengan penempatan mutlak.

Aku akan melakukan salah satu dari masing-masing di sini.
Pertama, saya akan membuat Div, meletakkan Teks di Div, dan kemudian benar-benar berada pada div di salah satu di Lingkaran Core Image.

[Catatan: Hindari penggunaan tag <p>, jika Anda ingin konten untuk ukuran konsisten di seluruh platform. Saya telah menemukan bahwa <p>, <br> dan pt font sizing adalah penyumbang terbesar untuk menilai inkonsistensi.]

Aku memang menggunakan beberapa tag <span> isi teks saya, jadi saya bisa format beberapa teks yang berbeda dari teks lain.

Aku akan menempatkan kode ini, di dalam saya Div. Ini berarti bahwa saya akan menempatkannya atas rentang di mana saya memiliki Core END CUSTOM KONTEN
Aku menempatkan ke Div berikut:

<div class="myText1">
<span class="myTextH"> Tentang Red Teman </ span>
<br>
(aka Elmo) <br>
<br>
Saya salah satu dari jutaan Elmo Toy Klon.
Saya bukan tertawa Versi epilepsi, atau pm saya menyanyi Versi.
Saya hanya Plush Versi sederhana.
My Ayub menjadi Cute, sehingga anak-anak kecil akan meminta orangtua mereka untuk membeli saya.
Saya sangat baik pada saya Ayub.
</ div>

Perhatikan Aku tidak menyertakan tag gaya inline, dalam Tag Div.
Aku bisa.
Tapi bukannya saya akan menciptakan blok Gaya terpisah untuk gaya dan tempat teks saya div. Aku akan menempatkan blok gaya saya, yang pergi dengan barang-barang saya dimasukkan ke div inti saya, di bagian musik. Mereka bisa pergi hampir di mana saja.

<style>
div.myText1 (color: darkred; line-height: 25px;
font-size: 16px; font-family: comic sans ms;
position: absolute; top: 250px; left: 300px;
width: 270px; height: 270px;
)
div.myText1 br (line-height: 10px;)
div.myText1 span.myTextH (color: red; font-weight: bold; font-size: 20px;)
</ style>




7: Import Content dari Default Page
JIKA anda tidak memasukkan kode baris, untuk menyembunyikan konten yang ingin Anda impor, saat ini konten ini harus menjadi BAWAH div inti Anda (dengan pengecualian pemutar musik).
Posisi Status Box (Apa yang tadinya Jaringan Perpanjangan Box).

Aku harus memastikan saya tidak memiliki Box Status diterjemahkan (display: none).

table.extendedNetwork (display: none;)


Jika Anda memiliki garis di atas, dalam kode menyembunyikan Anda, keluarkanlah.
Perhatikan hasilnya, adalah menempatkan Status Kotak di BOTTOM, di bawah Core Anda.
Perhatikan bahwa link bagian bawah pindah ke bawah untuk mengakomodasi Box.

Posisi dan Ukuran Status Box.
Aku akan menempatkan Status Box di Top Waktu Core saya.
Aku telah menggambar kotak di sana untuk itu.
Saya ingin posisi kotak di sini:
top: 20px; left: 20px;

Saya juga ingin mengubah ukuran / bentuk kotak, sesuai dalam ruang ini.
width: 220px; height: 150px;

Saya ingin mengatur font dan line-height untuk tetap nilai-nilai px, sehingga ukuran teks yang sama di platform yang berbeda. (The myspace style sheet pt menggunakan ukuran font yang lebih besar ukuran px variasi di px platform daripada ukuran font. Karena semua posisi saya didasarkan pada jarak px, Saya ingin menggunakan ini untuk font dan line-height sizing).

Aku berakhir dengan blok kode ini:

<style>
(! Status ukuran dan posisi kotak!)
table.extendedNetwork (position: absolute;
top: 20px; left: 20px; width: 220px; height: 150px;)
table.extendedNetwork, table.extendedNetwork td (border: 0px! penting;)
table.extendedNetwork span.blacktext12 span (color: darkred; font-size: 15px! penting; line-height: 20px! penting;)
</ style>

Ini adalah gaya lengkap blok.
Aku akan menempatkan blok ini pada akhir "About Me"section, tepat di bawah gaya blok sudah di bagian tersebut.

Mengimpor Friend Space (friendSpace)

JIKA Anda termasuk baris kode, untuk menyembunyikan friendSpace, hapus baris kode.

table.friendSpace (display: none;)



Sekarang friendSpace Anda akan terlihat di bagian bawah profil Anda.
Jika Anda telah meninggalkan ruang, pada Core Anda, cukup besar untuk menampung Friend Space, dan diharapkan setiap Resize karena teman-teman Anda mengubah gambar, anda dapat sekarang hanya memindahkan Friend Space ke lokasi yang diinginkan.

Aku akan menggerakkan teman Ruangan untuk kotak di kanan bawah gambar inti saya.
Aku masih punya grid di tempat, sehingga mudah untuk mendapatkan pengukuran yang dibutuhkan:
top: 570px; left: 30px

<style>
(! posisi friendSpace!)
table.friendSpace (position: absolute; top: 570px; left: 30px;)
</ style>

Aku melihat friendSpace saya adalah di tepi ruang saya, sedikit, jadi saya ingin kembali ukuran agar sesuai lebih baik.
Jika Anda ingin menyesuaikan ukuran friendSpace, lihat artikel ini:
Sizeing dan Styling MySpace Friend Space

Mengimpor Komentar (friendsComments) ke Div Tampilan

Memastikan Anda tidak memiliki baris kode berikut, jika Anda menghapusnya:

table.friendsComments (display: none;)


Komentar Anda akan muncul pusat bawah.
Aku sangat Kenalkan meninggalkan Komentar ada kecuali jika Anda ingin menyembunyikan teman-teman Anda.
Anda TIDAK dapat menaruh komentar di kotak scroll, atau berbuat banyak untuk mengontrol panjang mereka, KECUALI Anda langsung menyembunyikan teman-teman Anda atau membuat teman-teman Anda dalam kotak yang sama gulir.
Jika Anda hanya meninggalkan mereka di bawah, mereka akan mendorong link di bawah saat mereka tumbuh. Anda memiliki lebar penuh halaman untuk memperluas mereka, untuk menampung gambar yang besar orang-orang cenderung untuk meninggalkan sebagai komentar.

Namun, jika Anda memang ingin menempatkan Friends Comments dalam kotak gulir lihat artikel ini:
MySpace Friends Comments Dalam Gulir Box, Tempat di mana saja pada Halaman

Mengimpor the Blogs

Jika Anda termasuk baris kode berikut, Hapus ini:

table.latestBlogEntry (display: none;)


The blog seharusnya muncul di bagian bawah Gambar inti Anda (tapi di atas komentar Anda dan / atau teman-teman jika mereka masih dalam ruang ini).

Anda tidak dapat meletakkan blog dalam sebuah kotak gulir KECUALI Anda melakukan salah satu dari berikut ini:

- Sertakan status dalam kotak yang sama gulir
- Sembunyikan Status
- Re-Ciptakan Blog Data (ini sebenarnya cukup mudah)

Untuk menemukan blog, ke lokasi lain pada halaman, lakukan hal berikut:

<style>
(! posisi blog!)
table.latestBlogEntry (position: absolute; top: 20px; left: 470px;)
</ style>



8: Clean Up
Hapus garis biru dari seluruh link kami gambar. Tempat gaya ini blok di bagian bawah bagian gaya (Anda dapat benar-benar menempatkannya di mana saja kecuali di dalam blok gaya lain).

<style>
(! menghapus batas dari link images!)
a img (border: none! penting)
</ style>

Hapus the Grid. Menemukan blok kode berikut ini, itu harus tepat di bawah baris yang Anda tambahkan di citra inti:

<span class="off">! SEMENTARA Untuk Tempat Grid !!! </ span>
<div class="grid"style="width:900px; height:800px; overflow:hidden; position:absolute; top:0px; left:0px;">
<img src="http://i11.tinypic.com/4pczehk.gif"> </ div>


Menghapusnya.


Apakah ada bagian lain orang yang tertarik dalam menunjukkan?



Terima kasih untuk Mengunjungi; Have a Nice Day :-)