Browse » Home » » Widget Sliding disebelah Sidebar Kiri Blog

Widget Sliding disebelah Sidebar Kiri Blog

Kali ini ID Creative posting tentang jquery untuk widget sliding disebelah sidebar kiri blog liat contohnya dibawah ini. Setelah kemaren sibuk optimasi artikel "Mari berkomunitas di Faceblog" tapi akhirnya nyerah, karena belum saatnya junior turun gunung.

Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.


Vertical Sliding Panel mengggunakan jQuery .


Langkah cara membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery ini sobat bisa lakukan langkah -langkah berikut:

Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).
Lihat Gambar ya :D




Cara membuat Sexy Vertical Sliding Panel mengggunakan jQuery.
(1)





javascript - Combine hover and click functions (jQuery) ?.
(2)





Membuat Vertical Sliding Info Panel With JQuery.
(3)


Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> 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;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oiy0k46_ERZmDG2gKGk_ePYFqGW_vLBVwAiqhFc0X_GE1_20SPiey3oLtVtsZ025fpb5P95fxNZ0EA8hvz515ZEBLAEsCEgEw8vblyZUknlKr4uf9b7S2VWEctyZ6sPpjD7mHYwuDFo/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;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3oiy0k46_ERZmDG2gKGk_ePYFqGW_vLBVwAiqhFc0X_GE1_20SPiey3oLtVtsZ025fpb5P95fxNZ0EA8hvz515ZEBLAEsCEgEw8vblyZUknlKr4uf9b7S2VWEctyZ6sPpjD7mHYwuDFo/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/AVvXsEg0Oe3SGFXIlkOY1Hnj3PSO6L1ldyNbBGkOcb4user-89hGSxGPlAphM6b4SWpKVxmar8IxV1e_Oq1HT0VlWT6ABhkcGqf0sMWzDBacTHBBgWSWx2Rt3AjXS7dELWaGrmqHf4U65ictixc/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;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

Lalu simpan templates.
Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)




googlecode.com/files/jquery-1.3.2.js.
(4)

javascript - Jquery 1.3.2 error on Internet Explorer.
(5)


Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+online&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=domain&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=pasang+iklan+gratis&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+tanpa+modal&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=uang+gratis&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+online&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=domain&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=pasang+iklan+gratis&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=bisnis+tanpa+modal&amp;sa=Search!&amp;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&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=uang+gratis&amp;sa=Search!&amp;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="#">Surf!</a>

Nah,sekarang simpan dan sobat bisa langsung lihat hasilnya,dan script ini akan bekerja dengan baik di browser mozilla dan Google Chrome ya gan(oya,edit dan ulik sendiri ya kabuuur...Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery selesai.).
Good luck!
Terima kasih sudah singgah di blog ID CREATIVE   «« jangan lupa tinggalkan komentarnya "thanks.
,
Related Posts Plugin for WordPress, Blogger...
 
©ID Creative Blogs | By Blog templatewithConcert Tickets,Menopause symptoms
Powered by Blogger