Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang.
Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :
Login ke blogger dengan akun anda
Kemudian pada dasbor klik Rancangan >> Edit HTML
Tambahkan Script JQuery berikut diatas kode </head>
Saya sebelumnya ucapkan terima kasih kepada temen-temen yang telah setia mengunjungi blog ini. Saya akan terus berikan apa yang saya tahu tentang tutorial membuat website kepada anda semua. Nah, kali ini saya akan memberikan satu lagi tutorial blog mengenai cara membuat multi level drop down menu dengan jQuery. Memang sebelumnya saya sudah pernah posting cara membuat menu drop down yang sederhana, kali ini saya akan berikan lagi cara membuat menu drop down lagi, bedanya kali ini lebih menarik karena terdapat beberapa sub menu yang dapat ditampilkan setelah menu utama. Jika anda penasaran silahkan lihat gambar di bawah ini atau langsung saja klik disini.
Gimana, menarik kan? Nah, jika temen-temen berminat membuatnya simak langkah-langkah pembuatannya :
Login ke Blogger dengan akun
Kemudian pada dasbor klik Tata Letak >> Edit HTML centang expand template widget
Jangan lupa untuk download template anda, berjaga-jaga jika nanti ada kesalahan.
Letakkan script JQuery berikut sebelum tag </head>
/*Top level list items*/ .jqueryslidemenu ul li{ position: relative; display: inline; float: left; }
/*Top level menu link items style*/ .jqueryslidemenu ul li a{ display: block; background: #414141; /*background of tabs (default state)*/ color: white; padding: 8px 10px; border-right: 1px solid #778; color: #2d2b2b; text-decoration: none; }
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; }
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: white; }
.jqueryslidemenu ul li a:hover{ background: black; /*tab link background during hover state*/ color: white; }
/*1st sub level menu*/ .jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; }
/*Sub level menu list items (undo style from Top level List Items)*/ .jqueryslidemenu ul li ul li{ display: list-item; float: none; }
/*All subsequent sub menu levels vertical offset after 1st level sub menu */ .jqueryslidemenu ul li ul li ul{ top: 0; }
/* Sub level menu links style */ .jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/ padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; }
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/ background: #eff9ff; color: black; }
/* ######### CSS classes applied to down and right arrow images ######### */
Setelah itu tambahkan kode HTML berikut diatas <div id='header-wrapper'>(menu drop down diatas header), jika ingin meletakkan di bawah header cari kode penutup header seperti ini </div><!-- end header-wrapper --> kemudian letakkan dibawahnya :
Silahkan ganti kode yang saya beri warna dengan tulisan anda sendiri, itu dulu tutorial kali ini selamat mencoba dan jangan sungkan jika bingung anda bisa isi kotak komentar di bawah.
Temen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuery kan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.
Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :
Login ke blogger dengan akun anda.
Kemudian klik rancangan
Pilih Edit HTML jangan lupa centang "Expand Template Widget"
Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut
Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.
<div class='panel'> <h3>Selamat Datang bahasa inggrisnya welcome</h3> <p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>
<h3>Sekilas tentang maskolis</h3> <img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgniNGVKDencKCb7hE_zAm-EU3Qj3Dc4HFCEwvw4EpG_PWd5UFYz3p1a3oxuvKC5O4TtPHZ9pIB1F4gnk92u33hnE1AwuMaHxdk1lJDKw4nQBToH_sMZQD-StLhoDt7qkF47vCTUU9zX40/s1600/maskolis.jpeg' width='73px'/> <p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>
Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba dan semoga bermanfaat.
Perlu temen-temen ketahui blog saya ini baru berusia 2 bulan, mulai dari bulan Desember kemarin saya bikin blog ini. Kalau temen-temen nanya masalah komentar yang masuk, yah tentu saja masih sedikit. Nah, tutorial kali ini ada hubungannya dengan komentar, setelah sebelumnya saya sudah membahas tentang memasang reply pada kotak komentar, kali ni saya akan berbagi ilmu dengan anda tentang cara menampilkan dan menyembunyikan komentar yang masuk kalau bahasa inggrisnya show hidden comment.
Sebenarnya fungsi dari show hidden comment ini terutama untuk blog yang sering kebanjiran komentar dari pengunjung seperti blognya Kang Rohman, Mas Doyok, O-om tiga orang pendekar blogger yang sudah mempunyai ilmu yang sangat tinggi. Dengan menyembunyikan komentar dapat menambah ruang pada blog. Cara kerjanya sepeti ini : komentar dari pengunjung akan disembunyikan dan akan muncul apabila anda atau pengunjung menge-klik tulisan seperti ini [+/-]Click to Show or Hide Old Comments. Untuk langkah-langkah pembuatannya adalah sebagai berikut :
Jika anda seorang blogger, login dulu dengan akun anda
Kemudian pilih rancangan
Terus klik Edit HTML Jangan lupa centang Expand Template Widget.
Cari kode berikut ]]></b:skin> setelah itu masukkan kode ini diatasnya.
Setelah ketemu letakkan kode script di bawah ini tepat diatas kode </head>
<script type='text/Javascript'> function togglecomments (postid) { var whichpost = document.getElementById(postid); if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; } } </script>
Langkah berikutnya cari lagi kode berikut ini <dl id='comments-block'> Kemudian copy kode dibawah ini tepat sebelum kode tersebut.
<a aiotitle='click to expand' href='javascript:togglecomments("comments-block")'rel='nofollow'><b>
+/-]Click to Show or Hide Old Comments</b></a>
<dl class='commenthidden' id='comments-block'>
Klik Simpan.
Anda bisa ganti tulisan yang saya cetak tebal "+/-]Click to Show or Hide Old Comments" dengan tulisan yang bercetak tipis, eh salah.... Dengan tulisan yang anda inginkan, selamat mencoba dan happy blogging.
0 komentar:
Posting Komentar