Browse: Home > Tips dan Trik Blog-Q > Cara Memasang Vertical Sliding Panel jQuery

Cara Memasang Vertical Sliding Panel jQuery

Diposting oleh al-Ly Oman

Vertical Sliding Panel jQuery? Mungkin Anda bertanya-tanya tentang hal ini. Yang saya maksud dengan Vertical Sliding Panel mengggunakan jQuery tersebut adalah sebuah Panel dimana di dalamnya bisa kita isikan link-link menu content atau terserah Anda bagaimana memodifikasikannya. Tentunya berfungsi untuk menghemat tempat di blog kita, sebab panel ini bersifat "slide" bisa muncul dan sembunyi.

Baiklah tidak usah panjang lebar saya menjelaskannya. Kalau Anda ingin memasang lihat demo-nya silahkan klik di blogOman di sana saya telah memasang panel ini. Sementara ini saya terapkan pada blogspot. Untuk langkah-langkah pemasangannya sebagai berikut:

1. Login ke Dashbor Anda
2. Pilih menu Rancangan lantas buka Edit HTML
3. Jangan lupa centang pada kotak Expand Widget
4. Bila perlu Dowload full template Anda (saya sarankan) untuk berjaga-jaga seandainya tidak berhasil dalam pemasangannya.
5. Copas kode-kode berikut ini:
(Perhatikan dengan seksama di mana kode-kode tersebut harus diletakkan)

Langkah pertama, Letakkan kode CSS berikut ini tepat di atas kode ]]></b:skin> pada template Anda. Gunakan tombol F3 atau Ctrl+F untuk mempercepat pencarian kode tersebut.

#container {clear: both;margin: 0;padding: 0;}#container a{float: right;background: #9FC54E;border: 1px solid #9FC54E;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomleft: 20px;-webkit-border-bottom-left-radius: 20px;text-decoration: none;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#fff;padding: 20px;font-weight: 700;}#container a:hover{float: right;background: #a0a0a0;border: 1px solid #cccccc;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomleft: 20px;-webkit-border-bottom-left-radius: 20px;text-decoration: none;font-size: 16px;letter-spacing:-1px;font-family:verdana,helvetica, arial, sans-serif;color:#fff;padding: 20px;font-weight:700;}.content {font-style:normal;font-family:helvetica, arial, verdana,sans serif;color:#ffffff;background:#333333;border:1px solid #444444;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomleft: 20px;-webkit-border-bottom-left-radius: 20px;margin: 30px 0 50px;padding: 15px 0;}.content p {margin: 10px 0;padding: 15px 20px;}.panel {position: absolute;top: 250px;left: 0;display: none;background: #000000;border:1px solid #111111;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomright: 20px;-webkit-border-bottom-right-radius: 20px;width: 330px;height: auto;padding: 30px 30px 30px 130px;filter: alpha(opacity=85);opacity: .85;}.panel p{margin: 0 0 15px 0;padding: 0;color: #cccccc;}.panel a, .panel a:visited{margin: 0;padding: 0;color: #9FC54E;text-decoration: none;border-bottom: 1px solid #9FC54E;}.panel a:hover, .panel a:visited:hover{margin: 0;padding: 0;color: #ffffff;text-decoration: none;border-bottom: 1px solid #ffffff;}a.trigger{position: absolute;text-decoration: none;top: 250px; left: 0;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#fff;padding: 20px 40px 20px 15px;font-weight: 700;<br /> background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGHAXhKFXJ8lhEfHCAO0noYUyWoP5HD4SEx45FdLRZI8THoY0AL56mCh_2G1RLVfXPFEFgvwc9Sf-8fqybA4PB9iPrbMEEf4C7VukUjNq-Uj1DDHYrVvgU1KxmaDFI6NPl549wqRURpY/s320/plus.png) 85% 55% no-repeat;border:1px solid #444444;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomright: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomleft: 0px;-webkit-border-bottom-left-radius: 0px;display: block;}a.trigger:hover{position: absolute;text-decoration: none;top: 250px; left: 0;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#fff;padding: 20px 40px 20px 20px;font-weight: 700;<br /> background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGHAXhKFXJ8lhEfHCAO0noYUyWoP5HD4SEx45FdLRZI8THoY0AL56mCh_2G1RLVfXPFEFgvwc9Sf-8fqybA4PB9iPrbMEEf4C7VukUjNq-Uj1DDHYrVvgU1KxmaDFI6NPl549wqRURpY/s320/plus.png) 85% 55% no-repeat;border:1px solid #444444;-moz-border-radius-topright: 20px;-webkit-border-top-right-radius: 20px;-moz-border-radius-bottomright: 20px;-webkit-border-bottom-right-radius: 20px;-moz-border-radius-bottomleft: 0px;-webkit-border-bottom-left-radius: 0px;display: block;}a.active.trigger {background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4t9IVlRHF8KfwXi5jzSNcsVF8hsM3_NBKvScLMGNOd4y7fe-YOuAcSaCVlWhEnFxI-QMHoaB1i4DtQGVMYPtF9jlGlCf-HYsLAG4TpCD7fzMghTe4vhR8SyG7aLaCrKO4Vx_yWHqf73c/s320/minus.png) 85% 55% no-repeat;}.columns{clear: both;width: 330px;padding: 0 0 20px 0;line-height: 22px;}.colleft{float: left;width: 130px;line-height: 22px;}.colright{float: right;width: 130px;line-height: 22px;}ul{padding: 0;margin: 0;list-style-type: none;}ul li{padding: 0;margin: 0;list-style-type: none;}

Langkah kedua, Letakkan kode script berikut ini di tag <head> .. </head> Atau letakkan diatas kode </head>. Gunakan F3 atau Ctrl+F untuk mencarinya. Ingat, tepat diatas kode tersebut.

Langkah ketiga, SIMPAN TEMPLATE ANDA (Saya sarankan PRATINJAU terlebih dahulu, agar kita tahu sudah benar atau salah kode-kode kita di template)

Masih belum selasai kawan. heehe..

Langkah keempat, Silahkan Anda klik menu Elemen laman lalu klik Add Gadget pilih HTML/Javascript. Kemudian letakkan kode HTML berikut ini tanpa judul.

<div class="panel"><h2>Silakan pilih kategori:</h2><div style="clear:both;"></div><div class="columns"><div class="colleft"><h3>Bisnis Online</h3><ul><li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=bisnis+online&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Bisnis Gratis">Bisnis Gratis</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=domain&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Domain Gratis">Domain Gratis</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=pasang+iklan+gratis&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=bisnis+tanpa+modal&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=uang+gratis&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Uang Gratis Free!">Uang Gratis Free!</a></li> </ul></div><div class="colright"><h3>Ngemis Dollar Internet</h3><ul><li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=bisnis+online&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=domain&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Domain Gratis">Baru! Domain Gratis</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=pasang+iklan+gratis&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=bisnis+tanpa+modal&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Bisnis di Rumah">Bisnis di Rumah</a></li> <li><a href="http://marshaaruan.blogspot.com/?cx=partner-pub-7754036656352309%3Ats44k6-oawo&cof=FORID%3A10&ie=ISO-8859-1&q=uang+gratis&sa=Search!&siteurl=marshaaruan.blogspot.com%2F" title="Gratis Uang Jajan">Gratis Uang Jajan</a></li> </ul></div></div><div style="clear:both;"></div></div><a class="trigger" href="#">Check!</a>

Nah, selesai sudah pemasangan Vertical Sliding Panel di blog kita. Lihat hasilnya.

Catatan: Jika belum berhasil seperti langkah-langkah di atas, coba Anda otak-atik kembali sampai berhasil. Ganti kode position pada kode CSS-nya karena pada beberapa template mungkin ini tidak bisa diterapkan. Pastikan setiap tag yang digunakan dengan kode unik, misalnya #columns mungkin akan berbenturan dengan style #columns pada template bawaan. Pandai-pandailah Anda untuk membuat agar tidak berbenturan dengan kode pada template bawaan. Selamat mencoba, semoga sukses! Salam bloger...

Rating: 4.5

Label: Tips dan Trik Blog-Q

0 komentar:

Posting Komentar

Komentar Anda merupakan bahan analisa bagi Admin. Berikan kritik dan saran yang membangun dan bermanfaat. Teriring do'a, Jazaakumullah Khairan Katsiira. Terima kasih telah membaca artikel ini.

Kolom Teknologi & Informasi

Kategori Lain
Temukan di sini:

Cara Memasang Vertical Sliding Panel jQuery

Artikel Terkait Tentang:

0 komentar:

Posting Komentar

Menu Kategori

Headlines Artikel

Komentar Pembaca

Arsip Blog

Facebook Fans Page

Kolom Teknologi & Informasi

Kategori Lain Temukan di sini:

Cara Memasang Vertical Sliding Panel jQuery

Artikel Terkait Tentang:

0 komentar:

Posting Komentar

Menu Kategori

Headlines Artikel

Komentar Pembaca

Arsip Blog

Facebook Fans Page

Kategori Lain
Temukan di sini: