Cara Membuat Pull Menu

Pull Menu. Ada istilah lain? Sebetulnya saya tidak tahu persis istilah "hewan" ini tepatnya. Sama seperti ketika anda naik gunung dan menemukan satu spesies aneh dan tak tahu apa nama ilmiahnya (nama resmi yang dicatat ilmu biologi), apalagi untum mengerti arti bahasa latinnya. Pull Menu juga seperti itu. Kita tahu bendanya tapi tidak tahu persis istilahnya, jika ada yang tahu persis nama menu ini, silahkan tambahkan di kotak komentar.

Pull menu bisa anda lihat paling atas dengan tulisan Daftar Isi Blog, jika diklik akan muncul semua menu yang disembunyikan. Tiap menu berisi link ke halaman lain dan pada background Pull menu terdapat tulisan latar belakang sesuatu yang kita tonjolkan. Saya jualan texapon, bahan kimia pembuat sabun cair, pembersih lantai dalam kemasan pouch, itulah kenapa jualan saya saya taruh di background Pull Menu. 

Jika ingin mengaplikasikan pull menu ke blog anda berikut inilah caranya.

Caranya adalah:

Pertama:

Masukkan kode berikut ini ke dalam CSS blog anda. Login ke blogger >> Layout >> Edit HTML. Lalu cari kode ]]></b:skin>. Tapi sebelumnya jangan lupa save dulu template anda.

Kedua:

Masukkan kode berikut ini tepat di atasnya.

/* for Internet Explorer to replace :target */ a#pull, a#push {behavior:url(wisencare.blogspot.com)} #pulldown {width:100%; height:400px; left:0; position:fixed; z-index:800; transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; } .close {top:-400px;} #opacity {position:absolute; width:100%; left:0; height:400px; background:#333; border-bottom:1px solid #222; opacity:0.9; filter: alpha(opacity=90); -o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } #contents {height:400px; width:100%; left:0; position:absolute; color:#fff; background:url(cssplay23/top-back.gif) repeat-x; text-align:center; overflow:hidden;} #lowerContent {width:750px; margin:40px auto 0 auto;} #lowerContent dl {width:238px; margin:0 5px; padding:5px 0; background:#555; float:left; text-align:left; border:1px solid #888;} #lowerContent dl dt {color:#ff8000; font:bold 12px/25px arial, sans-serif; padding:0 5px;} #lowerContent dl dd {color:#aaa; font:12px/18px arial, sans-serif; margin:0; padding:0 5px;} #lowerContent dl dd a {color:#ddd;} #lowerContent dl dd a:hover {color:#fff;} a#pull {display:block; position:absolute; z-index:100; bottom:-30px; color:#fff; left:50%; background:url(http://3.bp.blogspot.com/-3hX84CiYm1w/Ta1ZuBXbEkI /AAAAAAAAAhE/ptOUBZDKTso/s400/close.png); z-index:-1; width:200px; margin- left:-100px; height:30px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;} a#push {display:none; position:absolute; z-index:100; bottom:-30px; color:#fff; left:50%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6103K98XJvI9rzsLHc08YE8dRW4GX9EFnTOkJ5xnmeji17B7f4du8dZemEq2LXWZFSUBLiF_CcaZh-scd10YcdYQzIFcbRH_RxjBs-iCoa8j7qNQ8wt23SXFILDM8zbuEW4xZaGA7Lrs/s400/open.png); z-index:-1; width:200px; margin-left:-100px; height:30px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;} #pulldown:target {top:0;} #pulldown:target #pull {display:none;} #pulldown:target #push {display:block;} /* for IE 8 and lower */ .open {top:0;} .open #pull {display:none;} .open #push {display:block;} .close {top:-400px;} .close #pull {display:block;} .close #push {display:none;} /* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */ html {-webkit-animation: safariSelectorFix infinite 1s;} @-webkit-keyframes safariSelectorFix { 0% {zoom:1;} 100% {zoom:1;} } .nav {width:745px; height:36px; background:#666; position:relative; z-index:100; font-family:arial, sans-serif; margin:0 auto; border-top:5px solid #ff8000; border-bottom:1px solid #000; text-align:left;} .menu, .menu ul {padding:0; margin:0; list-style:none;} .menu {width:730px; border-top:1px solid #333; padding-left:15px;} .menu ul.sub {position:absolute; left:-9999px; top:35px; background:#444; padding:0 0 0 10px; z-index:-1; border-top:1px solid #999;} .menu ul.sub1 {width:150px;} .menu ul.sub2 {width:300px;} .menu ul.sub3 {width:450px;} .menu ul.sub h5 {padding:4px 0; margin:0; color:#ff8000; font-size:12px; width:140px; line-height:18px;} .menu li.top-li {float:left; position:relative; background:#666; z-index:50;} .menu li.top-li a.top-a {display:block; float:left; line-height:35px; color:#ccc; padding:0 18px 0 10px; text-decoration:none; font-size:14px;} .menu li.top-li a.top-a:hover {background:#444; color:#fff;} .menu li.top-li:hover > a.top-a {background:#444; color:#fff;} .menu li.has-sub a.top-a:hover {height:36px;} .menu li.has-sub:hover > a.top-a {height:36px;} .menu li.close a {position:absolute; left:50%; top:-30px; width:100px; height:30px; line-height:30px; color:#fff; font-weight:bold; font-size:12px; padding:0; margin:0 0 0 -50px; background:#ff8000; text-align:center; text-decoration:none; display:none;} .menu ul li {width:150px; float:left;} .menu ul li a {line-height:15px; color:#fff; background:#666; display:block; width:120px; margin-bottom:1px; padding:3px 10px; text-decoration:none; font-size:12px;} .menu ul li a:hover {background:#ccc; color:#000;} .menu ul li.bottomLine {width:100%; clear:left; padding:5px 10px 5px 0; background:#333; margin-left:-10px; margin-top:5px; border-top:1px solid #888;} .menu ul li.bottomLine p {padding:0; margin:0; line-height:20px; font-size:12px; color:#ff8000; font-weight:bold; width:100%; padding-left:10px;} .menu ul li.bottomLine a {display:inline; padding:0 3px; line-height:20px; background:none; color:#ccc;} .menu ul li.bottomLine a:hover {color:#fff;} .menu :hover ul.sub {left:0;} .menu :hover ul.left1 {left:-150px;} /* for IE6 */ .menu table {border-collapse:collapse; margin-bottom:-1px;} * html .menu ul.sub {border:0;} * html .menu ul li.bottomLine {padding:5px 0 5px 10px;} * html #pulldown {position:absolute;}

Ketiga:

Klik Element Halaman >> Add Widget HTML/Javascript, pilih tempat yang sesuai menurut anda, lalu kopy paste kode berikut ini:

<div id="pulldown" class="close"> <div id="opacity"></div> <div id="contents"> <div class="nav"> <ul class="menu"> <li class="top-li"><a class="top-a" href="http://wisencare.blogspot.com">Home</a></li> <li class="top-li has-sub"><a class="top-a" href="http://wisencare.blogspot.com/2008/12/wise.html">CSS HTML<!--[if gte IE 7]><!--></a> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub sub3"> <li class="sub"> <h5>Menu CSS</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-tab-view-dengan-css.html">Menu Tabview</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-drop-line-horizontal.html">Menu Drop Line</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-drop-horizontal.html">Menu Drop Hr</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-list-item-ul-li-mendatar.html">List Item Hr</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-label-s-menjadi-menu.html">Label Horizontal</a></li> </ul> <h5>Sidebar Nav.</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sidebar-bergerak-scrolling.html">Sidebar Scrolling</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-slide-out-navigasi.html">Slide Out Nav</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-css-play-photograph.html">Play Photograph</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/mungkin-anda-sering-melihat-posting.html">Emoticon Clikable</a></li> </ul> </li> <li class="sub"> <h5>Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-read-more-baca.html">Buat Readmore</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-bookmark-addthis-di-setiap.html">Bookmark Widget</a></li> <li></a><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-blockquote-pada-blog.html">Bikin Blockquote</a></li> </ul> <h5>Yahoo Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/08/yahoo-messengeronline-indicator.html">YM Online Indicator</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/mengganti-kursor-dengan-gambar.html">Cursor Gambar</a></li> </ul> <h5>Google Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2008/12/google-search-box.html">Google Search Box</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-mebuat-google-sitemap.html">Google Sitemap</a></li> <li><a href="http://wisencare.blogspot.com/2010/07/cara-menghapus-feedburner-badge.html">Hapus Feedburner badge</a></li> </ul> </li> <li class="sub"> <h5>Blog Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-upload-foto-ukuran-besar-di.html">Maximize Photo</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-pasang-file-swf-ke-blog.html">Cara Pasang .swf</a></li> <li><a href="http://wisencare.blogspot.com/2009/09/gempa-bumi-hari-ini-melanda-jawa-barat.html">Zoom Photo</a></li> </ul> <h5>Simplize</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-related-post-pada-blog.html">Buat Related Post</a></li> <li><a href="http://wisencare.blogspot.com/2009/06/favicon-codes-html-for-blogger.html">Ganti Favicon</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/dua-cara-membuat-teks-bergerak.html">Teks Bergerak</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-meta-tag-title.html">Meta Tag Title</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-emoticon-pada-area-posting.html">Emoticon di Posting</a></li> </ul> </li> <li class="bottomLine"> <p>Visit Lapak kami.. Fresh Lime 400ml = Rp.3500, 800ml = Rp.5000.</p> <p><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sabun-cair.html">Sabun Cair Anti Lemak Kemasan Pouch</a>.</p> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top-li has-sub"><a class="top-a" href="#">Index Blog<!--[if gte IE 7]><!--></a><!--<![endif]--> <<!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub sub2"> <li class="sub"> <h5>Blog Pilihan</h5> <ul> <li><a href="http://wisencare.blogspot.com/2010/06/congenital-hypothyroidism.html">Hyphothyroidism</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-memperbaiki-ntldr-or-ntdetectcom.html">NTLDR is Missing</a></li> <<li><a href="http://wisencare.blogspot.com/2011/02/kaya-cepat-cara-rentenir.html">Rentenir Cepat Kaya</a></li> <li><a href="http://wisencare.blogspot.com/2011/02/cara-membuat-warnet-warung-internet.html">Bikin Warnet</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membanned-ip-address-visitor-blog.html">Banned Ip Adress</a></li> </ul> <h5>Jokes</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/08/humor-gusclur.html">Humor Gusclur</a></li> <li><a href="http://wisencare.blogspot.com/2009/06/salah-satu-cara-paling-absolut-untuk.html">Kursus Merayu Pria</a></li> <li><a href="http://wisencare.blogspot.com/2011/02/cara-membuat-bom-rakitan.html">Cara Bikin Bom</a></li> <li><a href="http://wisencare.blogspot.com/2009/08/ramalan-jimmy.html">Ramalan Jimmy</a></li> </ul> </li> <li class="sub"> <h5>Photoshop</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-gambar-keluar-dari-bingkai.html">Foto Keluar Bingkai</a></li> <li><a href="#url">Sofas</a></li> <li><a href="http://wisencare.blogspot.com/2010/01/cara-membuat-hujan-dengan-photoshop.html">Animasi Hujan</a></li> <li><a href="http://wisencare.blogspot.com/2010/01/photo-animasi-gif-dengan-photoshop.html">Animasi Sederhana</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/membuat-tulisan-indah-punch-hole-dengan.html">Tulisan Punch Hole</a></li> <li><a href="http://wisencare.blogspot.com/2010/01/adobe-photoshop-mengedit-foto-dengan.html">Edit Photo Cepat</a></li> <li><a href="http://wisencare.blogspot.com/2010/08/photoshop-cs5-beberapa-efek-dari-curves.html">Efek PS3</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/cara-membuat-brush-gelembung-sabun.html">Bikin Gelembung</a></li> <li><a href="http://wisencare.blogspot.com/2010/05/photoshop-mengedit-photo-bayi-dengan.html">Magic Wand Tool</a></li> <li><a href="http://wisencare.blogspot.com/2010/04/photoshop-preview-luna-maya-diusia-tua.html">Luna Maya 2020</a></li> </ul> </li> <li class="bottomLine"> <p>Ikuti terus trik <a href="#">Photoshop</a> di Blog ini</p> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top-li has-sub"><a class="top-a" href="index.html">Religius.<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub sub1"> <li class="sub"> <h5>Tuhan Kita.</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/07/there-is-god-in-cyber.html">Tuhan Di Cyber.</a></li> <li><a href="http://wisencare.blogspot.com/2009/07/stop-olok-olok-tuhan.html">Stop Hina Tuhan</a></li> <li><a href="http://wisencare.blogspot.com/2009/07/there-is-god-in-cyber.html">Tauhid</a></li> <li><a href="http://wisencare.blogspot.com/2009/08/puasa-jimmy-antara-kapitalisme.html">Jimmy Dan Komunis</a></li> </ul> <h5>Agama Aktual</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/08/puasa-jimmy-antara-kapitalisme.html">Komunis VS Kapitalis</a></li> <li><a href="http://wisencare.blogspot.com/2009/10/tulisan-alquran-di-tubuh-anak-kecil.html">Keajaiban Dagestan</a></li> <li><a href="http://wisencare.blogspot.com/2009/05/facebook-haram_25.html">Facebook Haram?</a></li> </ul> </li> <li class="bottomLine"> <p>More <a href="http://wisencare.blogspot.com">writting</a> online. Stay With Us</p> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top-li has-sub"><a class="top-a" href="#"><span>Javascript</span><b></b><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub sub3 left1"> <li class="sub"> <h5>Menu.</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/03/merias-blog-dengan-jquery-ui-accordion.html">JQuery Accordion</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-label-cloud.html">Label Cloud</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-slide-out-navigasi.html">Slide Out Floating</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-alert-welcome-sebelum.html">Allert Welcome</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-tab-view-widget.html">Tab Widget</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/kode-javascript-bikin-puzzle.html">Puzzle Jigzaw</a></li> </ul> <h5>Merias Blog</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/dua-cara-membuat-teks-bergerak.html">Teks Bergerak</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sidebar-bergerak-scrolling.html">Sidebar Scrolling</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-pausing-up-down-message.html">Pausing Up down</a></li> </ul> </li> <li class="sub"> <h5>Script Bagus</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-jquery-marquee-banner.html">JQuerry Marquee</a> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-image-reflection-otomatis.html">Image Reflection</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-site-map-pada-blogspot.html">Bikin Sitemap</a></li> </ul> <h5>Downloads</h5> <ul> <li><a href="http://wisencare.blogspot.com/2010/05/download-program-kasir-point-of-sale.html">Program Kasir</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/download-photoshop-cs5-crack-keygen.html">Photoshop CS5 Full</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/download-corel-draw-crack-keygen.html">Corel Draw X11</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/download-autocad-2011-terbaru-full.html">Auto CAD 2011</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/cara-membuat-logo.html">AAA Logo Full</a></li> <li><a href="http://wisencare.blogspot.com/2010/05/downloads.html">Serial Number Items</a></li> </ul> <h5>Hosting File</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-hosting-file-di-ziddu-dan-promosi.html">Ziddu</a></li> </ul> </li> <li class="sub"> <h5>Bacaan Ringan</h5> <ul> <li></a><a href="http://wisencare.blogspot.com/2009/06/tujuh-alasan-kenapa-jimmy-tidak-suka.html">7 Alasan Dangdud</a></li> <li><a href="http://wisencare.blogspot.com/2009/11/kuningan-jawa-barat-tuyul-dan-kisah.html">Tuyuk Dari Kuningan</a></li> <li><a href="#url">Shoulder</a></li> <li><a href="http://wisencare.blogspot.com/2009/11/polygami-poliandri-poligami.html">Poligami</a></li> <li><a href="http://wisencare.blogspot.com/2009/07/kita-berasal-dari-satu-bintang-yang.html">Siapa Suruh Jakarta</a></li> <li><<a href="http://wisencare.blogspot.com/2009/06/teori-evolusi-untuk-mengusir-nyamuk.html">Mengusir Nyamuk</a></li> <li><a href="http://wisencare.blogspot.com/2009/06/apa-kata-jimmy- tentang-ganyang-malaysia.html">Ganyang Malaysia</a></li> </ul> </li> <li class="bottomLine"> <p>Apapun Yang anda bayangkan tentang Blog yang indah, belum tentu orang lain setuju. Sisi baiknya adalah: <a href="http://wisencare.blogspot.com">perbedaanlah yang membuat Indah.</a></p> </li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top-li"><a class="top-a" href="http://wisencare.blogspot.com/2009/09/contact-me.html">Contact Us</a></li> <li class="top-li"><a class="top-a last" href="http://www.facebook.com/masri.jakfar">Where to Find Us</a></li> </ul> </div> <div id="lowerContent"> <dl> <dt>Sabun Cair</dt> <dd>Jual Texapon, teksapon wilayah Bogor, Jakarta dan Bekasi (Jabotabek). Jika anda mencari bahan, bahan-bahan pembuat sabun cair, sunlight, sampo mobil, sabun ekonomi cream atau sabun colek ekonomi, Molto Pewangi pakaian, pengilap mobil, motor dan kendaran, pembersih lantai, kami jual bahan pembuatnya. Jika anda memiliki restoran, katering / catering yang berjibaku dalam cuci piring, kami jual sunlight, sabun cair cuci piring dalam bentuk curahan, dan kemasan.</dd> </dl> <dl> <dt>Butuh Produk Ini</dt> <dd>Anda memiliki doorsmer, buka usaha cuci motor/mobil atau memiliki salon mobil dan ingin produk sampo mobil/motor yang berkualitas tinggi dengan harga murah, maka anda mebutuhkan produk kami sekarang. Kualitas produk yang bermutu diperoleh dari tangan yang ahli, kami memiliki sarjana kimia yang mengerti betul bagaimana produk ini harus dibuat. Jika anda berminat<a href="http://wisencare.blogspot.com/2009/09/contact-me.html">Hubungi Kami.</a></dd> </dl> <dl> <dt>Bisnis Tambahan.</dt> <dd>Jika Anda Berminat menjalankan bisnis ini, <a href="http://wisencare.blogspot.com/2009/09/contact-me.html">Hubungi Kami.</a>mari kerjasama, kami siap memberikan bantuan bagi anda untuk mendapatkan bahan-bahan pembuatan produk-produk tersebut diatas sekaligus memberikan pelatihan cara-cara praktis membuat produk serta pemasarannya. </dd> </dl> </div> </div> <a href="#pulldown" id="pull">Daftar Isi Blog</a> <a href="#x" id="push">Close Menu</a>

Simpan HTML CSS anda dan lihat hasilnya. Hampir selesai kecuali Mengganti Link milik saya dengan link anda. Tapi jika anda orang yang murah hati, akan lebih baik meninggalkan satu saja link saya. Jika anda melakukan itu, informasikan ke saya dan saya akan link balik ke blog anda. 

Selamat Mencoba...


source: http://wisencare.blogspot.com/2011/04/cara-membuat-pull-menu.html#x

Read More

Cara Membuat Box Scroll Pada Linklist

Pada tulisan sebelumnya saya membahas tentang cara membuat scrollpada Bloglist (Daftar Blog). Maka pada tulisan kali ini saya akan membahas tentang cara membuat scroll pada saudaranya, yaitu Linklist (Daftar Link), sebuah widget yang disediakan oleh blogger/blogspot.

Karena kemudahannya gadget Linklist ini banyak digunakan oleh sobat blogger yang enggan menuliskan syntax link pada setiap link yang ingin dimasukkan. Dengan gadget Linklist ini, cukup memasukkan URL-URL situs maka selesai deh. Hanya saja, sebagaimana pada gadget Bloglist, padagadget Linklist inipun jika tidak dibuatkan scroll, akan memanjang ke bawah memenuhi halaman blog.

Bagi kamu yang ingin membuat scroll pada Linklist-nya dapat mengikuti langkah-langkah berikut:

• Dari halaman dasbor, klik Tata Letak - Edit HTML.
• Beri tanda centrang pada Expand Template Widget.
• Kemudian cari kode type='LinkList' (gunakan Control F atau F3).
• Perhatikan kode yang ada di bawahnya, seperti ini: 
  

  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>

• Tambahkan perintah style='overflow:auto; height:200px' pada kode yangberwarna biru, sehingga menjadi seperti ini:
  

  <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content' style='overflow:auto; height:200px'>

• Atur ukuran tinggi (height)-nya sesuai kebutuhan.
• Simpan hasil editing ini dan ucapkan Alhamdulillah.....

Nah, selesai deh. Sekarang coba cek Linklist pada blog kamu.

Read More

Cara Menambahkan Scroll Untuk Label Pada Blog

 Cara menambahkan scroll pada label blog, dapat memudahkan pencarian artikel berdasarkan golongannya dengan menambahkan fungsi scroll di label agar tampilan label tidak memanjang bagi yang memiliki banyak lebel. Memperepat dan merapikan tampilan misalkan anda sedang menyusun label satu demi link demi link akan membutuhkan waktu yang agak lama dengan fungsi scroll lebih cepat selesai dan terlihat rapi. Untuk contohnya bisa anda lihat pada gambar tersebut. Sekarang untuk cara menambahkan scroll pada label blog adalah sebagai berikut.
1. login Blog anda kemudian menuju menu edit HTML
2. Beri tanda centang pada Expand widget template
3. Cari kode dibawah ini dengan menekan F3 atau CTRL+F untuk memudahkan pencarian

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

Bila template anda tidak ada kode seperti diatas atau anda tidak menemukan kode diatas silahkan cari kode seperti dibawah ini

<div class='widget-content'>

4. Letakan kode berikut tepat dibawah kode diatas

<div style='overflow:auto; width:ancho; height:300px;'>

5. Kemudian tambahkan kode </div> seperti berikut ini.

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:300px;'> 
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Tambahkan kode </div> seperti pada teks yang berwarna merah diatas.
Setelah selesai klik simpan. Selamat mencoba semoga bermanfaat

source: http://madiuncool.blogspot.com/2012/03/cara-menambahkan-scroll-pada-label-blog.html#ixzz1o3s7TpD4

Read More

Cara Membuat Kotak Pada Postingan

Biasanya kalo kita menuliskan tentang tutorial blog maka akan banyak kode script , php ,html atau kode xml yang kita tuliskan di didalam postingan kita jika kita mengimginkan code-code tersebut berada didalam kotak maka akan keliatan lebih menarik ,lebih cantik,lebih sedap dipandang mata dan lebih rapi,untuk cara membuatnya ini ada beberapa kode yang saya ulas :
Cara membuat postingan kode html dalam kotak 
Contoh tampilan yang akan dihasillkan akan seperti ini :

Isi dengan tulisan anda disini

Untuk variasi kode penulisannya sebagai berikut :
1. penulisan untuk tampilan Dashed Border

<div style="border: 2px &lt;span style=">#FF0000 solid; padding: 10px; background-lt;span >#FFCC00</span>; overflow: auto; height: 50px; width: 300px; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span> </div>

2. tampilan Dashed Border

<div style="border: 2px &lt;span style=">#FF0000 dashed; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span> </div>

3.tampilan Border dengan scroll, lebar dan tinggi

<div style="border: 2px &lt;span style=">#FF0000 solid; padding: 10px; background-lt;span >#FFCC00</span>; overflow: auto; height: 50px; width: 300px; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span> </div&gt


4.untuk tampilan Solid Border

<div style="border: 2px &lt;span style=">#FF0000solid; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

5.untuk tampilan Ridge Border

<div style="border: 2px &lt;span style=">#FF0000 ridge; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

6.tampilan Groove Border

<div style="border: 2px &lt;span style=">#FF0000 ridge; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

7.tampilan Inset Border

<div style="border: 2px &lt;span style=">#FF0000 inset; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

8.tampilan Outset Border

<div style="border: 2px &lt;span style=">#FF0000 outset; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

9.tampilan Double Border

<div style="border: 2px &lt;span style=">#FF0000 double; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

10.tampilan Dotted Border

<div style="border: 2px &lt;span style=">#FF0000 dotted; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

Read More

Cara Membuat Efek Roaming Pada Blog

Mungkin Kamu pernah di kagetkan saat membuka sebuah blog/web yang tiba-tiba roming(mengalami gangguan,seperti bergetar). Belum Pernah? ya sudah nih tak kasih contohnya, silakan klik disini. Sudah tahu kan?Nha,Membuat effect roming seperti itu memang bisa dilakukan,caranya pun mudah.
Nih tak kasih Script rahasianya,

1.Copy Kode berikut ini:

<script type='text/javascript'>
//<![CDATA[
scrW=screen.availWidth
scrH=screen.availHeight
window.resizeTo(10,10)
window.focus()
for(a=0;a<80;a++){
window.moveTo(0,0)
window.resizeTo(0,scrH*a/80)
}
window.resizeTo(0,0)
for(b=0;b<80;b++){
window.moveTo(0,scrH/1)
window.resizeTo(scrW*b/80,0)
}
for(c=0;c<80;c++){
window.moveTo(scrW/1,scrH/1)
window.resizeTo(0,scrH*c/80)
}
for(d=0;d<80;d++){
window.moveTo(scrW/1,0)
window.resizeTo(scrW*d/80,0)
}
for(e=0;e<80;e++){
window.resizeTo(scrW*e/80,scrH*e/80)
}
window.moveTo(0,0)
window.resizeTo(scrW,scrH)
//]]>
</script>

2.Login ke Blogger kamu => Layuot=> Edit HTML
3.Kemudian paste-kan kode tadi sebelum kode </head>
4.Kemudian Save Template
5.Selesai

note : efek roaming ini hanya berlaku ketika dibuka pada new window sedangkan new tab tidak

Read More

Cara Memasang Animasi di Blog

Cara Memasang Animasi di Blog -Animasi merupakan suatu elemen penting bagi blog mereka yang bertema personal dan berisi kisah-kisah blogger tersebut sehari-hari. Dengan kehadiran animasi ini juga akan memperindah blog tersebut, namun harus ada konsekwensi yang harus ditanggung. Yaitu berat blog yang akan berebihan nantinya sehingga Google agak susah dalam melakukan perayapan ke situs kita, tapi jika itu memang tidak penting menurut kita ya silakan lanjutkan membaca artikel ini namun bagi yang menomor satukan kecepatan blog silakan baca artikel Kumpulan Wallpaper Bergerak, hehe.

Pada postingan kali ini saya akan membahas mengenai cara memasang animasi pada blog. Berikut adalah tutorialnya:

1. Pertama-tama buka dahulu http://www.flashvortex.com.

2. Disana sudah tersedia pilihan banner-banner animasi unik yang bisa kita sisipkan teks kita sendiri, silakan pilih sesuai keinginan kalian.

3. Jika sudah kita pilih yang dirasa pas, silakan ganti teks dengan yang kita inginkan, ukuran teks dan halaman/page yang akan dituju jika kita mengklik banner animasi tersebut (yang ini bisa dikosongkan).

4. Lalu klik 'Generate Animation' di bagian bawah.

5. Terakhir copy kode yang telah diberikan dan paste di bagian yang ingin kita pasang banner animasi dengan cara klik Add a Gadget  > HTML/Javascript.

6. Selesai, banner animasi kini telah tertempel di blog kalian.

Ada juga animasi-animasi lucu yang bisa kalian pasang dan nantinya akan muncul di pojok blog, cara memasangnya hampir sama tinggal memasang script seperti ini:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" /></a></div>

Kode tersebut adalah kode animasi gajah loncat, untuk yang lainnya yang lebih lengkap silakan kunjungi situs INI.

Semoga artikel cara memberi animasi di blog ini bisa bermanfaat bagi kita semua. :)

Read More