Cara Membuat Sliding Panel di Blog

Gosipadan.com – Sliding panel sama dengan drop down panel yang merupakan sebuah panel aktif bila bersentuhan dengan kursor. Pembuatan sliding panel dengan css3 dan html dengan efek transisi, sehingga tampilan sliding penel lebih cantik dan atraktif, serta tidak memberatkan loading, dijamin!!! Sliding panel ini juga dilengkapi dengan daftar menu, gambar yang bisa dijadikan author profile, dan bisa di edit sesuai kebutuhan. Ilustrasinya ketika link panel tersentuh kursor, maka sliding panel akan meluncur jatuh atau melorot, jadi bukan celana yang melorot ya gan, tapi bagian dalamnya..alias sliding panelnya, hehehehee. Baiklah, sekarang mari kita bahas cara membuat sliding panel di blog. Silahkan ikuti langkah berikut.

Cara Membuat Sliding Panel dengan CSS di Blog

1. Login ke akun blogger Anda

2. Pilih menu Theme/Tema

3. Klik Edit HTML

4. Masukan kode ini tepat diatas kode </head>


<style scope="scope" type="text/css">
#melorotpanel{-moz-transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out;-o-transition:all 2s ease-in-out;transition:all 2s ease-in-out;background:0;height:284px;color:#fff;position:relative;padding-top:10px;margin-top:-280px;border-left:0;border-right:0;border-bottom:8px solid #333;border-top:none;}
.paneldalam{background:#333;background-position:0 110%;position:relative;margin-right:auto;margin-left:auto;width:880px;box-shadow:0 4px 6px #ddd;-moz-box-shadow:0 4px 6px #ddd;-webkit-box-shadow:0 4px 6px #ddd;border-bottom:2px solid #996633;border:2px solid #555;border-top:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;-moz-border-radius-bottomleft:12px 8px;-moz-border-radius-bottomright:12px 8px}
#melorotpanel:hover{margin-top:0}
.paneltrigger:hover #melorotpanel{margin-top:0}
#panelmenu{line-height:0}
#panelmenu .melorotkiri{overflow:auto;float:left;width:260px;height:230px;border:1px solid #666;padding:15px 6px;margin:5px;border-border-bottom-left-radius:8px;-webkit-border-bottom-left-radius:8px;-moz-border-radius-bottomleft:8px}
#panelmenu .melorottengah{overflow:auto;float:right;width:286px;height:230px;border:1px solid #666;padding:15px 6px;margin:5px}
#panelmenu .melorotkanan{overflow:auto;float:right;width:260px;height:230px;border:1px solid #666;padding:15px 6px;margin:5px;border-border-bottom-right-radius:8px;-webkit-border-bottom-right-radius:8px;-moz-border-radius-bottomright:8px}
#panelmenu .melorotkiri ul,#panelmenu .melorottengah ul,#panelmenu .melorotkanan ul{margin:0;padding:0;list-style:none}
#panelmenu .melorotkiri li,#panelmenu .melorottengah li,#panelmenu .melorotkanan li{margin:0;padding:0;list-style:none;background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/DoubleRedArrow.gif) left top no-repeat;background-position:0 7px;border-bottom:1px dotted #555}
#panelmenu .melorotkiri li:hover,#panelmenu .melorottengah li:hover,#panelmenu .melorotkanan li:hover{background-image:none}
#panelmenu .melorotkiri li a,#panelmenu .melorottengah li a,#panelmenu .melorotkanan li a{text-decoration:none;font:11px Tahoma;color:#fff;line-height:22px;padding-left:20px}
#panelmenu .melorotkiri li a:hover,#panelmenu .melorottengah li a:hover,#panelmenu .melorotkanan li a:hover{color:lime}
a.paneltrigger{background:transparent;bottom:-63px;color:#000;display:block;font-size:18px Times;font-weight:bold;height:30px;padding:3px 10px 2px;position:absolute;right:150px;text-align:center;text-decoration:none;z-index:100;line-height:normal;border:2px solid #22313F;border-top:none;border-bottom-left-radius:8px;border-bottom-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;-moz-border-radius-bottomleft:12px 8px;-moz-border-radius-bottomright:12px 8px;box-shadow:0 6px 6px #888;-moz-box-shadow:0 6px 6px #888;-webkit-box-shadow:0 6px 6px #888}
</style>

5. Selanjutnya, masukan kode dibawah ini, sesudah kode <body>


<div id="melorotpanel">
<div id="panelmenu" class="paneldalam">
<div class="melorotkiri"><div align="center"><img  width="200" height="260" src="http://full.creative.touchtalent.com/Doa-Perdamaian-prayer-of-peace-painting-446644.jpg" /></div>
<ul>
<p style="text-align:center">Doa Perdamaian</p>
    <li><a href="Link-1" target="_blank">Facebook</a></li>
    <li><a href="Link-2" target="_blank">Twitter</a></li>
    <li><a href="Link-3" target="_blank">Google Plus</a></li>
</ul>
</div>
<div class="melorotkanan">
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
    <li><a href="Link-10" target="_blank">Link Title-10</a></li>
</ul>
</div>
<div class="melorottengah">
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
    <li><a href="Link-10" target="_blank">Link Title-10</a></li>
</ul>
</div>
<div style="clear:both;"></div>
<a href="#" class="paneltrigger">Melorot Menu</a>
</div>
</div>

Catatan: ganti tulisan yang diberi warna merah, dengan link gambar yang mau kamu beri

6. Simpan Tema/Theme

7. Selesai.

Demikian cara membuat sliding penel di blog. Semoga artikel sliding penel ini bisa bermanfaat bagi semua. Selamat mencoba dan sukses selalu, amin. Salam sahabat blogger.

Leave a Comment