Dexto Share: Membuat Panel Info Slide Vertikal Dengan JQuery™

Home ♠ Design Blog » Membuat Panel Info Slide Vertikal Dengan JQuery

Membuat Panel Info Slide Vertikal Dengan JQuery

Kemarin ada sobat dexto yg sms,,Din gmn cara buat panel info itu,,,hehehe ya bkan bermaksud sokpinter/menggurui karna saya jg masih belajar,bisa jg di bilang anak baru,yah hanya sekedar share kepada sobat2 dexto semua,bik kali ini saya akan share tentang cara Membuat Panel Info Slide Vertikal Dengan Jquery,,,oke kita langsung keeeeeee TKP.hehe kyak OVJ ja

Langkah Nya

1.Login di blogger Anda

-Masuk ke Dasbor

-Pilih Tata Letak / Rancangan Dan Edit HTML

-Klik "Expand Template Widget"

-Jangan lupa untuk memback-up template anda terlebih dahulu

2. Cari kode

]]></b:skin>

Setelah ketemu Taruh/pasteken kode dibawah ini tepat di atasnya

.panel{position:fixed;top:20px;left:0;
background:#000;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
border:1px solid #940000;width:320px;
height:auto;filter:alpha(opacity=85);
-moz-opacity:0.85;opacity:0.85;
display:none;padding:10px 30px 30px 100px}
.panel p{color:#ffffff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#940000;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5-eHhh9K9ObwpR8665vk9qhss9AfEAT8YHLoUj5kCvHK-p_9n9nPhl75bsLhYsc6AtlqG3sB5FTo8Bk_3j_piihFBzslj5pt9vH7uvXSHZCkJKmnK5LGxPxVON20vfzCjTGPB4u0YQs/) 85% 55% no-repeat;border:2px solid #940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 35px 10px 10px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYAkfhrioFGNUBCdwikuRSDh5N1ClRpHoSpTnz5TztZ1qIRExQAI_A2PHZbC8ohfAo7VtLYY81e9s_-g5fqJnZ08kuh887hecokq3TG7uTWDmMkxPNySXVhdxMA6vLAplLpa25NYT-Qg/) 85% 55% no-repeat;border2px solid #940000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 40px 10px 10px}
a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvYAkfhrioFGNUBCdwikuRSDh5N1ClRpHoSpTnz5TztZ1qIRExQAI_A2PHZbC8ohfAo7VtLYY81e9s_-g5fqJnZ08kuh887hecokq3TG7uTWDmMkxPNySXVhdxMA6vLAplLpa25NYT-Qg/) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #FFFFFF;float:right;margin:3px 3px 6px 5px;padding:3px}
.panel h3{border-bottom:1px solid #FFFFFF;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#940000;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

3.Cari kode

</head>

Setelah Ketemu Taruh Kode ini Di atasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

4.Pada langkah ini Silahkan cari Kode

</body>

Dan letakan kode ini tepat diatasnya

<div class='panel'>

<h3>Selamat Datang Di Dexto Share</h3>

<p style='text-align:justify'>Semeoga Blog Yang Sangat Sederhana Ini Dapat Membantu Anda.Mohon Do'a Dan Saran Sobat Bloger Demi Kemajuan Blog Ini <a href='http://www.facebook.com/pages/Dexto-Share/321611497851955' title='Miftachudin Online'>Dexto In Facebook</a></p>

<h3>Sekilas Tentang Miftachudin</h3>

<p>Nama saya Miftachudin,Saya Orang Jawa Yang Terlahir Di Lampung,Ini Semua Berawal Dari Rasa Keingintahuan Dan Sekarang Malah Menjadi Hobi,Saat Ini Saya Sedang Menyelesaikan Studi S1 Saya Di Salah Satu Universitas Di Lampung.Begitulah Sekilas Tentang Sosok Pria Sederhana Ini</p>

<div style='clear:both;'/>

<div class='columns'>

<div class='colleft'>

<h3>Navigasi</h3>

<ul>

<li><a href='http://dextoshare.blogspot.com/p/daftar-isi_26.html' title='Daftar Isi'>Daftar Isi</a></li>

<li><a href='http://www.facebook.com/pages/Dexto-Share/321611497851955?sk=wall' title='contact'>Contact</a></li>

<li><a href='http://dextoshare.blogspot.com/p/link-exchange.html' title='Blog Sahabat'>Link Exchange Url</a></li>

</ul>

</div>

<div class='colright'>

<h3>My Social Stuff</h3>