Searching...
Monday 25 June 2012

Membuat Tampilan Blog Berbeda

Kali ini saya akan membuat setiap orang yang akan membuka/mengunjungi blog saya, harus melewati sebuah tampilan yang berbeda dari biasanya yang dinamakan tampilan intro dari sebuah blog, ibarat sebuah lagu yang akan dinyanyikan pasti ada intronya, kadang kita suka bosan dengan langsung muncul blog yang kita kunjungin langsung ke page blognya. Oleh itu saya akan membuat Tampilan saat buka blog lebih menarik dan unik, bisa juga dengan gambar.







Perhatikan gambar diatas, lihat tulisan kecil bertuliskan "Klik" tulisan itu adalah sebuah tombol yang harus di klik oleh pengunjung untuk dapat masuk ke blog saya, dan setelah di klik barulah blog tersebut akan terbuka.


Bagaimana menarik kan? untuk lebih detailnya maka saya akan mengasih tau tahap cara pembuatannya.


Langkah-langkahnya adalah sebagai berikut:


1. Login ke blog Kamu


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'>


5. Perhatikan kode diatas,  ada tulisan <b:includable id='title'> dan sekarang silahkan kamu 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>


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 + &quot;search/label/?max-results=23&quot;'><blink>Masuk</blink></a></div>


Apabila kamu menginginkan tampilan intro blog kamu 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 + &quot;search/label/?max-results=23&quot;'><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 kamu rubah
*  Tulisan yang berwarna Biru adalah jumlah postingan yang akan ditampilkan, silahkan kamu rubah.
*  Untuk mengganti ukuran lebar dan tinggi dari gambar kamu, silahkan rubah nilai width danheight pada kode tersebut.
*  Yang bertuliskan "Masuk" bisa anda ganti dengan tulisan anda sendiri.

0 comments:

Post a Comment