 Menu slider ini sebenarnya dapat anda temukan di template zinmag-primus yang dapat anda download di beberapa situs yang menyediakan layanan template gratis. Menu silder ala zinmag-primus ini cukup menarik untuk diletakkan dibawah header. Selain atraktif karena bentuknya yang dinamis, menu slider ini cukup efektif mengundang pengunjung blog untuk melihat dan mengklik post yang anda letakkan di menu slider tersebut. Ada beberapa perubahan yang saya lakukan dalam menu ini, selain warna background, model tulisan, dan warna tulisan, saya juga merubah waktu jeda ( Delay ) antara post yang satu dengan yang lain. Baiklah, langsung pada tutorialnya aja ya, langsung ke setting HTML template blog anda : 1. Login ke Blogger. 2. Langsung tuju ke Edit HTML. 3. Jangan lupa backup template anda terlebih dahulu. 4. Kemudian klik Expand Template Widget. 5. Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin> /*Menu Slider*/ 6. kemudian letakkan kode berikut dibawah / setelah kode ]]></b:skin> Silahkan anda Download Kodenya Disini 7. Setelah itu cari bagian header yang letaknya setelah <body>, atau kira-kira seperti ini kode-nya : <div id='header-wrapper'> 8. Letakkan kode berikut ini dibawah / setelah kode header ( seperti diatas ) : <!-- Casing --> <div id='casing'> <!-- Slider --> <div id='slider'> <div id='mover'> <div class='slide'> <span class='slmet'> Posted by DeddyCamp </span> <h2><a href='http://deddycamp.com/2010/03/memilih-template-untuk-blog.html'>Tips Memilih Template ( Free Blogger Template )</a></h2> <p>Sekilas Tentang Template Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti Background warna putih, kolom-kolom di samping kanan, serta semua yang anda lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.</p> <img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/StDT8ObEDDI/AAAAAAAACBk/iQrI6pf269w/RED%20-%20H%20Image_thumb%5B1%5D.jpg?imgmax=800'/> </div> <div class='slide'> <span class='slmet'> Posted by DeddyCamp </span> <h2><a href='http://www.deddycamp.com/2010/06/pasang-avatar-mybloglog-di-kotak.html'>Avatar Mybloglog di Kotak Komentar</a></h2> <p>Tutorial cara memasang avatar mybloglog di kotak komentar sebenarnya sudah lama, tapi dari beberapa kali saya berkunjung ke beberapa blog anda, jarang sekali yang mengaplikasikannya. Padahal menurut saya, tutorial memasang avatar di kotak komentar yang di populerkan oleh Amanda ini sangat bagus, karena kita bs melihat wajah yang memberi komentar dengan syarat telah menjadi member mybloglog.</p> <img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/Sqf1T4ve8NI/AAAAAAAAA3k/Nv9CaQU17us/Avatar_thumb%5B2%5D.jpg?imgmax=800'/> </div> </div> <!-- /Mover --> </div> <!-- /Slider --> </div> <div class='clear'/> 9. Kemudian Simpan Template. Sekarang coba lihat hasilnya, jika berhasil maka menu slider akan berada dibawah header pada blog anda. Apa saja yang harus anda edit ? 1. Kode javascript diatas menggunakan delay waktu var delayLength = 5000 yang berarti 5 detik, silahkan anda buka kode javascript yang diatas kemudian ubah delay waktu sesuai keinginan anda. Sebagai catatan, 1 detik = 1000 (jika sudah sesuai, tidak usah dirubah) 2. Silahkan anda ubah tulisan dan url-nya dengan milik anda : <div class='slide'> <span class='slmet'> Posted by DeddyCamp </span> <h2><a href='http://deddycamp.com/2010/03/memilih-template-untuk-blog.html'>Tips Memilih Template ( Free Blogger Template )</a></h2> <p>Sekilas Tentang Template Template adalah desain-desain halaman web ataupun blog beserta seluruh komponennya (misal : gambar, stylesheet, dsb) baik berupa file statis maupun file dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web. Seperti yang sobat lihat sekarang, seperti Background warna putih, kolom-kolom di samping kanan, serta semua yang anda lihat sekarang adalah salah satu bentuk dari desain template. Memilih template yang cantik sangatlah perlu, karena dengan tampilan template yang menarik untuk di lihat maka akan membuat para pengunjung dari blog kita menjadi betah untuk berlama-lama berada di blog kita selain tentunya isi dari blog kita juga sangat menunjang.</p> <img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/StDT8ObEDDI/AAAAAAAACBk/iQrI6pf269w/RED%20-%20H%20Image_thumb%5B1%5D.jpg?imgmax=800'/> </div> Untuk kode berwarna merah yang pertama adalah untuk url yang hendak dituju, sedangkan kode berwarna merah yang kedua adalah alamat url dari gambar. Tulisan yang saya tandai tebal adalah judul tulisan, dan huruf miring dibawahnya adalah isi dari tulisan anda. |
Kamis, 13 Oktober 2011
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar