Kali ini kita akan membuat setiap orang yang akan membuka/mengunjungi blog kita, harus melewati sebuah tampilan yang berbeda dari biasanya yang dinamakan tampilan intro dari sebuah blog, ibarat sebuah lagu yang akan dinyanyikan pasti ada intronya bukan...? seperti itulah maksud saya hehehehe. Untuk contohnya anda bisa membuka alamat blog ini di Catatan Pena, itupun dengan catatan jika seandainya saya belum merubahnya ya...! karena saya sering sekali merubah penampilan dari blog Catatan Pena ini...maklumlah bro...saya ini orangnya gampang bosanan...hehehehe...seandainya nanti blog Catatan Pena telah berubah, seperti gambar dibawah inilah maksud saya contoh dari tampilan awal (intro) nya, dan tentu tampilannya pasti akan berbeda dengan punya anda ketika nanti anda sudah membuatnya, karena apa..? karena gayaku bukanlah gayamu...dan gayamu juga bukanlah gayaku..hehehe...
Perhatikan gambar diatas, lihat tulisan kecil bertuliskan "Enter" tulisan itu adalah sebuah tombol yang harus di klik oleh sipengunjung untuk dapat masuk ke blog tersebut, dan setelah di klik barulah blog tersebut akan terbuka.
Bagaimana apakah sudah jelas..? kalau sudah jelas maka kita akan memasuki ke tahap berikutnya yaitu cara pembuatannya.
Langkah-langkahnya adalah sebagai berikut:
1. Login ke blog anda.
2. Di halaman Dashboard klik "Rancangan".
3. Kemudian klik "Edit HTML" dan jangan lupa centang kotak kecil yang bertuliskan "Expand Template Widget".
4. Cari kode <div id='header-wrapper'> dan seperti yang ada dibawah inilah kode lengkapnya.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Catatan Pena (Header)' type='Header'>
<b:includable id='title'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Catatan Pena (Header)' type='Header'>
<b:includable id='title'>
5. Perhatikan kode diatas, ada tulisan <b:includable id='title'> dan sekarang silahkan anda copy/paste kode yang ada dibawah ini kemudian letakkan tepat dibawah kode <b:includable id='title'> tersebut.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>body{background-color:#000000;background-image:none;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{padding-top:30px;text-align:center;font-size:14px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>
<style>body{background-color:#000000;background-image:none;}#intro-blog{font-size:80px;padding-top:220px;text-align:center;color:#ff0000;}#navbar-iframe{display:none;}#layout_wrapper{display:none;}#outer-wrapper{display:none;}#es{padding-top:30px;text-align:center;font-size:14px;font-weight:bold;</style><b:else/><style>#es{display:none;}#intro-blog{display:none;}</style></b:if>
6. Langkah selanjutnya adalah mencari kode <body> kemudian copy/paste kode yang ada dibawah ini dan letakkan tepat dibawah kode <body> tesebut.
<div id='intro-blog'><data:blog.pageTitle/></div><div id='es'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=23"'><blink>Masuk</blink></a></div>
Apabila anda menginginkan tampilan intro blog anda adalah sebuah gambar, maka ganti tulisan yang berwarna Merah pada kode diatas dengan URL gambar anda. Kodenya menjadi seperti yang ada dibawah ini.
<div id='intro-blog'><img alt='davotmarbun' border='0' src='http://Alamat URL Gambar Anda.jpg' style='width: 350px; height: 90px;'/></div><div id='es'><a expr:href='data:blog.homepageUrl + "search/label/?max-results=23"'><blink>Masuk</blink></a></div>
7. Langkah terakhir Save Template blog anda.
Keterangan :
* Tulisan yang berwarna Hijau adalah warna latar belakang dari intro blog tersebut, silahkan anda rubah
* Tulisan yang berwarna Biru adalah jumlah postingan yang akan ditampilkan, silahkan anda rubah.
* Untuk mengganti ukuran lebar dan tinggi dari gambar anda, silahkan rubah nilai width dan height pada kode tersebut.
* Yang bertuliskan "Masuk" bisa anda ganti dengan tulisan anda sendiri.
* Tulisan yang berwarna Hijau adalah warna latar belakang dari intro blog tersebut, silahkan anda rubah
* Tulisan yang berwarna Biru adalah jumlah postingan yang akan ditampilkan, silahkan anda rubah.
* Untuk mengganti ukuran lebar dan tinggi dari gambar anda, silahkan rubah nilai width dan height pada kode tersebut.
* Yang bertuliskan "Masuk" bisa anda ganti dengan tulisan anda sendiri.
Mudah bukan...? silahkan anda mencobanya.
Semoga informasi ini bermanfaat.
No comments:
Post a Comment