Cara Membuat Panel Name Beranimasi

Panel Beranimasi ini adalah Widget dari Jquery dan dikembangkan oleh Jon Phillips Dan Widget Dikembangkan oleh jQeasy. Di posting kali ini saya akan menjelaskan cara untuk membuatnya di blogger anda. Animasi Panel Name ini mempunyai Fitur utamanya yaitu sebagai tampilan Koten seperti Tulisan Dan sebagainya. Animasi ini Tidak menggunakan banyak tempat dan jika di klik akan melebar. Jikan anda ingin membuatnya anda harus mengedit HTML template anda. untuk itu anda harus ikuti cara berikut ini:

• Silahkan Login Ke Blogger Anda.
• Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML untuk mengedit HTML anda.
• Lalu, Cari Kode </head> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini Diatas kode </head>  (Abaikan langkah ini jika blog Anda sudah punya Plugin Jquery) :

< Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" tipe = "text / javascript" ></ Script >

• Setelah itu, Masukan Juga Kode Berikut ini Diatas kode </head> :

<script src="http://widgets.way2blogging.org/blogger-widgets/jquery.slidePanel.min.js" type="text/javascript"></ Script >

                                                                                                 By Way2Blogging

• Lalu, Cari kode </body> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini Diatas kode </body> :

<style type='text/css'> a.w2btrig137{position: absolute;background:#88BBD4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1EEexMoC3NygHu44j_rHhSzJ-_ZRn5F-jfPZ_zSbkD8ucTdAUWkffnQaOQRSCsMIZIVYcC4l_tljO92lrd8pbvBAphUSNRL0BKa2W7sD98WdpO_P5wi7TM5nexfUxmKlzwVfgMRN7RQOA/s143/w2b_plus.png) 6% 50% no-repeat;text-decoration: none;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#FFFFFF;padding:4px 12px 6px 24px;font-weight: bold;z-index:99999;} a.w2btrig137.right {right: 0;-webkit-border-top-left-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-topleft: 5px;-moz-border-radius-bottomleft: 5px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;} a.w2btrig137:hover {background-color:#5599BB;} a.active.w2btrig137 {background:#666666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3CKPWVLGxMzs-6iTixj3zzG2sGeKcly5fbhn_VhAySpGRxJQheX7AF4qY85AW2HJkmU4nhxHVGxORZVmWO_G-uErw21Le_8tF2pIgJMo3vsSUHMsjr1AP8eB0ZezdlEl8tgE1UzdyYGC/s143/w2b_minus.png) 6% 50% no-repeat;} .w2bpane137 {color:#CCCCCC;position: absolute;display: none;background: #000000;width: 300px;height: auto;z-index:99997;} .w2bpane137.right {right: 0;padding: 20px 100px 20px 30px;border-bottom-left-radius: 15px;border-top-left-radius: 15px;-moz-border-radius-bottomleft: 15px;-moz-border-radius-topleft: 15px;-webkit-border-bottom-left-radius: 15px;-webkit-border-top-left-radius: 15px;} </style> <script type='text/javascript'> jQuery(document).ready(function($){ $('#myw2bpane137').slidePanel({ triggerName: '#myw2btrig137', triggerTopPos: '20px', panelTopPos: '10px' }); }); </script> <a class='w2btrig137 right' href='#' id='myw2btrig137'>Panel</a> <div class='w2bpane137 right' id='myw2bpane137'> Selamat Datang Di Icat-IrsyadAslam, Icat-IrsyadAslam Adalah Sebuah Bog yang memperkenalkan seseorang yang bernama Irsyad Aslam yang sering dipanggil Icat </div>

Keterangan:

1. Ganti Tulisan Selamat Datang Di Icat-IrsyadAslam, Icat-IrsyadAslam Adalah Sebuah Bog yang memperkenalkan seseorang yang bernama Irsyad Aslam yang sering dipanggil Icat dengan deskripsi anda.
2. Ganti Tulisan Panel dengan Judul Panel yang anda mau.

• Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukes.

Your-BelajarBLOG