Membuat Trigger jQwerty

Akhirnya bisa posting juga setelah penantian panjang dari hari ke hari kali ini saya akan memposting cara membuat Qwerty yang di mana di namakan trigger qwerty atau apalah namanya :

Funsinya hampir sama seperti membuat sub menu navigasi yang pernah saya buat kemrin, namun bedanya disini hanya menggunakan fitur qwerty terlebih dahulu sehingga membuat tampulan lebih rapi.

Nah langsung ke tutorialnya. (khusus untuk blogger.com saja)
masuk ke dalam akun sobat dulu langsung ke "Rancangan" ==> "Edit HTML"
Back Up dulu untuk mencegah sesuatu yang tidak di inginkan sob, Ets juga jangan lupa "mencentang Expant Template widget".

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/AVvXsEhs8HJTOmONrVXpkghUNJyQVATCJspvk0sj8lHXOR-rcSBcuDazkYKLm7Fo3tB8EpVdgZ5dbsiu3hOfAFfGxZf5QMSpwS2loCTTWtiKhoGX0pdvgYp-6pXLIylVWojzohyqohzwRMYGbaI/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/AVvXsEhs8HJTOmONrVXpkghUNJyQVATCJspvk0sj8lHXOR-rcSBcuDazkYKLm7Fo3tB8EpVdgZ5dbsiu3hOfAFfGxZf5QMSpwS2loCTTWtiKhoGX0pdvgYp-6pXLIylVWojzohyqohzwRMYGbaI/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/AVvXsEjXA0Df-exIabmYVI9jij5Zz7e_1_V7wQnZjSGzV5PoyhKlJdVzgmZQfCvMFDRq33Ovq0Smct0uSxQ4PwMGbwti6ahsAPmcYG6Qyi2CnTzi1m_btrx6cSMJk_GLQmBciMlJO-jl-HlQvmQ/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)





(4)


(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></h3>
<ul>
<li><a href="http://sukarianta.blogspot.com/" title="Home">Beranda</a></li>
<li><a href="http://sukarianta.blogspot.com/2011/03/daftar-isi-blog-ilham-am.html" title="Daftar Isi">Daftar Isi</a></li>
<li><a href="http://sukarianta.blogspot.com/2010/04/link-sahabat.html" title="Link Sahabat">Link Sahabat</a></li>
<li><a href="http://sukarianta.blogspot.com/2010/04/sponsor-list.html" title="Sponsor List">List Sponsor</a></li>
<li><a href="http://sukarianta.blogspot.com/2010/04/banner-list.html" title="Baner Sahabat">Baner Sahabat</a></li>
</ul>
</div>

<div class="colright">
<h3></h3>
<ul>
<li><a href="http://sukarianta.blogspot.co/2010/04/tukar-link.html" title="Tukar Link">Tukar Link</a></li>
<li><a href="http://sukarianta.blogspot.co/2010/04/tentang-penulis.html" title="Domain Gratis">Tentang penulis</a></li>
<li><a href="http://sukarianta.blogspot.co/?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://sukarianta.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=sukarianta.blogspot.com%2F" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
<li><a href="http://sukarianta.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=sukarianta.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>

terKHIR TINGGAl di save/////////

Tips tricks yang populer lainnya:

Triks Blog

• cara memasang jam dan kalender di blog
• Cara Memasang Nomor Urut Pada Kotak Komentar Blog
• Cara Membuat Kotak Area Dengan Efek Membesar Saat Disorot Mouse
• Cara Membuat Foto/gambar Efek Memutar-mutar Dan Membesar Saat Disorot Mouse
• Kostumisasi Avatar Komentar
• Cara Membuat Artikel Terkait Di Bawah Postingan
• How To Enrol Into Blog Search Engine Google
• How to Guestbook Show Hide from above
• Buku Tamu Tersembunyi Versi 2 Di Blog
• Cara Sembunyikan Buku Tamu Facebook
• Menambahkan Scroll Pada Daftar Link (Blogroll)
• Cara Membuat Kotak Admin
• Free Backlink Qualified
• Blog Comment With Kaskus Emote Ver 2
• Cara Membuat Popular Post di Blog
• Delphi 7 error di windows 7
• Cara Memasang Adsense di Web/Blog
• Award setetes embun
• Cara Pasang Back to top di Blog
• Cara Mudah Membuat Desain Header Blog
• Membuat Emotion Pada Komentar Blog
• Membuat Buku Tamu Tersembunyi
• Cara Membuat Tulisan Posting Baru, Posting Lama dan Home Dengan Icon
• Membuat Tanda Tangan Online di mylivesignature