Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger) Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada yang ketinggalan,hihihi)

Kwick Menu Navigasi Blogger dengan jQuery

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.

Jika sebelumnya telah dipublikasikan bagaimana menerapkan jQuery di blogspot dalam beberapa trik membuat slide show widget,sliding panel dan slick tab view menggunakan jQuery,kini ada trik satu lagi yang tak kalah menarik.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Sobat pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini sobat dapat lihat di:

http://www.jeremymartin.name/examples/kwicks.php?example=1

atau yang telah berhasil saya buat di :

http://pujiantoroblog.blogspot.com/

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(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.


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.kwicks&#39;).kwicks({
duration: 500,
max: 170,
spacing: 0
});
});
</script>


**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Lalu simpan templates sobat.
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:

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://pujiantoro.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://pujiantoro.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>


Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.
Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!

Read more > Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Posting Otomatis dari Google Reader ke Gmail,Mungkinkah?

Apakah Ada Rahasia Antara Google Reader dan Gmail?

Copas? bukan jamanya lagi sob,hari gini masih copy paste kelaut aja deh,hehe(jd nyindir diri sendiri nih pent-)
Tapi kini justru,bukan tukang copasnya yang berkembang namun tekniknya yang dibuat sedemikian rupa hingga sang copaster tak merasa bersalah dan disalahkan :D

Salah satunya dengan mengambil RSS dari suatu blog korban.
Ini pernah saya singgung pada membuat autoblog blogger di posting beberapa bulan lalu.

• Nah,apakah ada rahasia antara Google Reader dengan Blogger?
• Apakah item pada Google Reader mampu memposting otomatis ke blogger blogspot?
• Apakah kita dapat Mengirim dari Google reader ke Gmail,Yahoo Mail (Ymail),atau Email selainnya?
• Bagaimana cara mengirimkan otomatis dari Google Reader ke dalam Gmail (Google Reader into Email or Gmail Auto)?

Semua pertanyaan tersebut akan kita jawab sob,tentu tujuannya baik ya dan jangan dijadikan sebagai alat nypam atau sejenisnya,OK?

Sobat pasti sudah mengerti bagaimana mempublikasikan atau memposting otomatis dari Email/Gmail ke dalam blog.Tutorial ini sudah diposting dalam membuat auto blog.
Kini,kita cari tahu terlebih dahulu cara 'mempublikasikan / memposting dari Google Reader ke flatform blogger'.

Posting Otomatis dari Google Reader ke Gmail,Mungkinkah Gan?

Pertama,jika belum memiliki akun Google Reader,pastikan sobat daftar terlebih dahulu ya.
Selanjutnya pada Dashboard Google Reader,sobat perhatikan,klik Setting atau Setelan (gb.1),lalu pilih tab Send To dan contrenglah checklist Blogger(gb.2).

(gb.1)


(gb.2)



Lalu,kembalilah ke Dashboard Google Reader Sobat dan masukkan url feeds,bisa menggunakan RSS maupun Atom pada tempat yang disediakan (gb.3).


(gb.3)

Contoh url feed:

Feed Rss:
http://pelajaran-blog.blogspot.com/feeds/posts/default
Feed Atom:
http://pelajaran-blog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=100

Setelah itu,nanti akan muncul item rss feed korban,dan pada sebelah bawah nanti akan terdapat tab send to dan pilihlah blogger.(gb.4)


(gb.4)

Setelah sobat klik,nanti akan keluar jendela Blog This yang mana akan mempublikasikan item dari Google Reader ke dalam blogger yang sobat miliki.
Lalu gimana ya pak cara agar item goog rss feed di google reader dapat terkirim secara otomatis ke dalam blogger dan email (gmail,ymail,dll)?
Adalah dengan membuatnya sebagai rss baru dan publikasikan secara otomatis dengan jasa rss into inbox :D,hasilnya lihat di SINI

Jadi,sudah ga penasaran khan gan,gimana operasi mereka dalam nyolong artikel kita :D
Sekali lagi,jangan jadi jahat dan berkreasilah untuk sesuatu yang baru.Moga berhasil ya :D

Demam Jquery?

• Belajar Membuat Trigger Hover JQuery / Vertical Sliding Panel Mengggunakan JQuery
• Membuat Widget Gambar Slide Show / Slideshow Javascript Dan Css Di Blogger
• Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget

Read more > Posting Otomatis dari Google Reader ke Gmail,Mungkinkah?

Membuat Read More Otomatis / Auto ReadMore di Blogger

UPdate! Trik Read mOre oToMaTiS tanpa jQuery,Sudah Direvisi! Dijamin Berhasil 100%
(mohon maklum ya sob,ada kode yang ketinggalan,hihihi)

Read More Otomatis pada Template Blogger

Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya

Read more > Membuat Read More Otomatis / Auto ReadMore di Blogger

Mengukur Ukuran dan Waktu Loading Blog

Cara Mengukur Berat dan Ukuran Blog untuk Search Engine Optimization

Untuk mengukur ukuran blog dan mengetahui waktu loading sebuah blog sobat dapat menggunakan beberapa situs jasa yang memberikan fasilitas gratis untuk mengukur berat / loading blog kita

Di tahun ini tutorial seo 2011 untuk Search Engine Google salah satunya adalah ditentukan ukuran dan waktu loading sebuah blog.
Berangkat dari masalah ini,sebuah blog yang memiliki ukuran besar maupun loading yang sangat berat akan berpengaruh terhadap hasil serp (search engine result page).

Sampai disini saya kira sobat sudah memiliki pandangan bagaimana supaya blog atau hasil posting yang kita lakukan mampu terindex google dengan cepat.
Mari kita ukur dan ciptakan loading blog agar lebih ringan,untuk yang satu ini sudah pernah saya bagikan masalah bagaimana 'Tips Cara Membuat Blog Ringan Saat Loading'.

Nah,untuk mengukur ukuran blog dan mengetahui waktu loading sebuah blog sobat dapat menggunakan beberapa situs jasa yang memberikan fasilitas gratis untuk mengukur berat / loading blog kita.

Diantara situs-situs yang meberikan fasilitas untuk mengukur ukuran dan waktu loading blog adalah:

1. http://www.iwebtool.com/
2. http://tools.pingdom.com/
3. http://www.numion.com/Stopwatch/
4. http://websiteoptimization.com/services/analyze/
5. http://internetsupervision.com/
6. http://www.webslug.info/
7. http://www.octagate.com/service/SiteTimer/
8. http://site-perf.com/
9. http://www.linkvendor.com/seo-tools/speedtester.html
10. http://www.uptrends.com/aspx/free-html-site-page-load-check-tool.aspx
11. http://webwait.com/

Setelah kita mengetahui berapa ukuran dan waktu yang dibutuhkan untuk membuka sebuah blog,kini kita sobat yang dapat menentukannnya sendiri.
Ingat ya teman,di 2011 ini Google sangat memperhatikan kecepatan loading dan seberapa besar ukuran dari sebuah blog atau situs.
See you and Keep post!

Read more > Mengukur Ukuran dan Waktu Loading Blog

Bisnis Adsense for Search Sukses!!!

Saat sobat mengunjuungi situs yang tampil dalam kotak (yang diberi tanda lingkaran) akan tampil situs (saya tidak bertanggung jawab jika situs yang muncul kontent dewasa ya,hihihi pent-),yang akan membayar kita nantinya.
Tidak harus menggunakan berbagai software seperti autoclick dan sejenisnya.

Sekedar bocoran saja ya gan,pelajaran blog ada sedikit trik agar Google Adsense yang kita miliki dapat tampil dan menghasilkan dollar.
Bagaimana caranya?
Jika masalah seo sudah saya kumpulkan di tutorial seo blogger minggu lalu,kini untuk memonetize dan menghasilkan dollarnya (bagi yang ga kebagian adsense for content) masih ada kesempatan besar.

Mengetahui siapa sih yang membayar kita?silkan klik DISINI,dan nanti akan tampil jendela window seperti ini:

Saat sobat mengunjuungi situs yang tampil dalam kotak (yang diberi tanda lingkaran) akan tampil situs (saya tidak bertanggung jawab jika situs yang muncul kontent dewasa ya,hihihi pent-),yang akan membayar kita nantinya.
Tidak harus menggunakan berbagai software seperti autoclick dan sejenisnya.

Selama kita rajin posting yang bermanfaat tentunya,adsense for search yang kita miliki dapat menghasilkan dollar yang sudah lebih dari cukup untuk sekedar membeli sesuap nasi :D
Jadi,mari mulai optimasi blog yang kita miliki,rugi khan sudah punya blog tapi tidak dapat menghasilkan apa-apa :p (Rampok Dollar Yuuk!

Read more > Bisnis Adsense for Search Sukses!!!

Cara Membuat Vertikal Sliding Panel Widget dengan jQuery di Blogger

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery Sudah Direvisi! Dijamin Berhasil 100%

Membuat Vertical Sliding di Sudut Blog dengan Animasi menggunakan jQuery

Sepertinya pelajaran blog sedang demam ya dengan jquery,hehehe (begitulah,ini juga dari hasil copas sana sini kok mas,weqz???? pent-)
Contoh tampilannya lihat gambar dibawah ini ya,sedang untuk demo-nya sobat bisa lihat di SINI.

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

(1)



(2)



(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(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/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(http://2.bp.blogspot.com/_qHkYFLlP0Ms/SvJqelIzLFI/AAAAAAAAAKo/a6py-YJ9UOY/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(http://4.bp.blogspot.com/_qHkYFLlP0Ms/SvJqhwz89bI/AAAAAAAAAKw/A9pygIXoy-g/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='https://sites.google.com/site/pujiantoroinc/Home/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>Bisnis Online</h3>
<ul>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Gratis">Bisnis Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Gratis">Pasang Iklan Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis Tanpa Modal">Bisnis Tanpa Modal</a></li>
<li><a href="http://marshaaruan.blogspot.com/" 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/" title="Bisnis Gratis">Bisnis Gratisan (Baru)</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Domain Gratis">Baru! Domain Gratis</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Pasang Iklan Langsung!">Pasang Iklan Langsung!</a></li>
<li><a href="http://marshaaruan.blogspot.com/" title="Bisnis di Rumah">Bisnis di Rumah</a></li>
<li><a href="http://marshaaruan.blogspot.com/" 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...).
Good luck!

Read more > Cara Membuat Vertikal Sliding Panel Widget dengan jQuery di Blogger