Mencoba Modifikasi Template cmssekolahku

Beberapa waktu yang lalu aku browsing tentang website sekolah ternyata menemukan CMSSEKOLAHKU. Fitur-fiturnya sudah lumayan cukup memenuhi kebutuhan web sekolah. Cmssekolahku ini masih tergolong baru dan masih membutuhkan pengembangan baik dari segi plugin maupun tema atau template, agar ke depan bisa lebih baik lagi.

Sebagai seorang yang sedang belajar, kehadiran cmssekolahku lumayan membantuku dalam mengasah keterampilan me-layout sebuah halaman web. Memang yang namanya belajar pasti butuh pengorbanan terutama waktu dan kuota internet. Namun semua itu akan terbayar manakala bisa menghasilkan karya yang sesuai harapan qolbu.

Dalam memodifikasi template cmssekolahku ada beberapa elemen yang kurubah, terutama pada style.css dan custom.css. Lebar halaman ditambah jadi 980px, ada tambahan 20pixel. Header juga dibuat tidak full, ada ruang di sisi kiri dan kanan header.

Layout Frontpage masih tetap tiga kolom namun ada pengurangan margin di aside-primary, sedangkan ketika buka readmore tampilan berubah menjadi dua kolom yaitu dengan membuang aside-primary. Hal ini dimaksudkan agar ada pebedaan tampilan antara Frontpage dengan halaman Post.

Perubahan lainnya adalah pada nabigasi utama primary-navigator dimana tulisan Home diganti dengan gambar icon rumah putih, sehingga menimbulkan kesan artistik. Hal serupa juga dilakukan pada RSS dan Peta Situs yang dirubah dari text menjadi image.

Dengan sedikit sentuhan seperti yang diuraikan di atas, maka tampilan website sekolah tidak kaku lagi dan akan dapat memanjakan mata pengunjung.

Itulah hal-hal yang aku lakukan dalam Modifikasi Template cmssekolahku. Hasilnya bisa anda lihat pada gambar di bawah ini, Klik Gambarnya biar besar. Sedangkan untuk Panduan cara modifikasinya akan saya share pada postingan berikutnya. Tunggu saja tanggal mainnya. Bersambung kesini...
Selamat Berkarya.

Klik Gambar berikut ini biar jelas

Memasang Breadcrumbs Pada Template Blogspot

Sekedar ikut-ikutan menerapkan tips-tips dari para blogger sebelumnya, salah satunya adalah memasang fitur breadcrumbs pada template blogspot.  Sobat bisa mengamati blog-blog tetangga dimana di atas judul postingan biasanya terdapat link dengan teks yang berukuran agak kecil. Link tersebut dapat berfungsi sebagai navigasi yang mana sebagai penanda bahwa kita sedang berada pada postingan di dalam kategori tertentu.

Susunan breadcrumbs biasanya seperti ini:
Home > Nama Label > Judul Posting

Kata master SEO, breadcrumbs sangat membantu meningkatkan kualitas SEO sebuah blog di mata search engine.  Karena banyak yang mempercayai dan membenarkan pernyataan tersebut, maka tidak ada salahnya kita mengikuti jejak para pendahulu, siapa tahu bisa mengangkat blog kita agar lebih SEO.

Untuk memasang Breadcrumbs, pertama-tama kita harus login dulu, lalu masuk ke edit html template. Setelah itu :
1. Letakkan kode di bawah tepat di atas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:90%; line-height: 1.4em; border-bottom:3px double #eee;}

2. Kemudian cari lagi kode seperti di bawah ini:

<b:includable id='main' var='top'>

3. Setelah ketemu lalu Anda ganti kode di atas tadi dengan kode yang ada di bawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

4. Apabila semua sudah dilakukan selanjutnya klik Simpan Perubahan. Dan jika tahap yang Anda lakukan sudah sesuai dengan apa yang saya jelaskan diatas, maka Breadcrumb seharusnya sudah terlihat seperti contoh pada gambar dibawah ini.

Memiliki blog yang keren dengan berbagai pernak-pernik tentu menjadi salah satu kebanggan tersendiri, dan kini blog anda boleh bisa disejajarkan dengan blog-blog lain setelah dipasang breadcrumbs.

Cara Mereset Mozilla Firefox

Mozilla Firefox browser andalan kita terkadang tidak bekerja normal, itu disebabkan oleh banyak hal entah itu terserang malware maupun virus jahat di internet. Bisa juga karena salah pengaturan dan salah menggunakan tools firefox.

Bagi sebagian developer web blog tentu tidak asing lagi dengan add-ons si rubah merah. Kesemuanya bertujuan untuk memudahkan dalam mengembangkan webblog. Tapi tidak sedikit pula yang menyalahgunakan untuk hal-hal yang merugikan orang lain.

Alasan mengapa firefox perlu direset adalah untuk mengembalikan ke pengaturan awal seperti baru diinstal di laptop. Dan biasanya sesuatu yang baru pasti enak. Contohnya mobil baru tentu enak jika dikendarai.

Beberapa waktu lalu saya menemukan keganjilan dengan browser, yakni munculnya Ask.com search di browser. Akibatnya pencarian tidak lagi dilakukan oleh mbah gugel tetapi Askcom. Hal ini menurutku tidak nyaman. Memang di internet banyak sekali juragan blogger yang memposting tentang solusi memusnahkan ask.com dari browser. Tapi setelah kucoba ternyata tidak berhasil. Atau mungkin karena ilmuku yang masih terlalu dangkal.

Muter-muter sampai ke Amerika akhirnya bertemu bule yang baik hati dan mau berbagi pengalaman atas masalah yang sedang ku alami. Dia bilang, kalau diterjemahkan dalam bahasa kita, “Mengapa musti bingung, tinggal direset saja semua kembali normal seperti sedia kala.”

Nah.. untuk mereset Firefox caranya sebagai berikut:
1. Klik tombol Firefox
2. Klik Help
3. Klik Restart with add-ons disabled…
4. Setelah itu tunggu sampai muncul tombol finish lalu klik tombol tersebut.

Dengan demikian firefox anda telah direset.

Memasang MP3 di Blog dari Embed 4shared

Suatu kebanggaan tersendiri jika blog kita tampil eksentrik, termasuk dapat didendangkannya alunan musik sembari baca artikel blog. Sebetulnya tips ini bukanlah hal baru, tapi bagi sebagian pendatang baru mungkin masih kesulitan bagaimana caranya agar dapat memasang musik mp3 di blognya.

Jika ingin memasang MP3 di blog maka anda membutuhkan hosting untuk menyimpan file MP3 yang nantinya akan dipanggil di blog. Berdasarkan pengalaman saya pernah menguploadnya di Google Site, waktu itu sukses dan lancar jaya diputar di blogspot. Tetapi setelah blog ini dicustom domain (dotcom), mp3 yang di google site tidak mau jalan. Akhirnya aku upload mp3 lagi ke 4shared. Dan alhasil lagu MP3 pun dapat didengarkan kembali.

Pada kesempatan ini saya mencoba sharing pengalaman memasang MP3 di blog, dimana MP3 didapat dari hasil upload ke 4shared.

Langkah-langkahnya sebagai berikut:
1. Siapkan musik/lagu dalam format MP3 lalu upload di 4shared, untuk bisa mengupload anda harus registrasi dulu di 4shared.

2. Setelah file berhasil diupload, klik file mp3 tadi sehingga muncul tab baru (lihat gambar)

3. Klik embed seperti dalam gambar di bawah ini hingga muncul kode embed mp3 lalu copy paste di notepad atau ms.word agar tidak lupa.

4. Kode embed yang didapat dari 4shared adalah seperti ini :

<embed src="http://www.4shared.com/embed/3839155509/e935a766" width="420" height="250" allowfullscreen="true" allowscriptaccess="always"></embed>

5. Kode embed yang saya beri warna merah kemudian copas dan tempel di addressbar browser anda, sehingga muncul link baru di addressbar (lihat gambar)

6. Copy paste link tersebut ke notepad atau ms.word, sehingga didapat link seperti ini:

http://static.4shared.com/flash/player/5.10/player.swf?file=http://dc700.4shared.com/img/3839155509/e935a766/dlink__2Fdownload_2FBsOolA2P_3Ftsid_3D20130824-012246-942b9f56/preview.mp3&duration=216.0&logo.link=http://www.4shared.com/mp3/BsOolA2P/Hymneguru.html&logo.hide=false&logo.file=http://dc700.4shared.com/images/logo.png&logo.position=top-left&image=http://dc700.4shared.com/images/icons/misc/mp3_bg.png&plugins=revolt-1,sharing-2&sharing-2.link=http://www.4shared.com/mp3/BsOolA2P/Hymneguru.html&sharing-2.code=%3Cembed%20src%3D%22http://www.4shared.com/embed/3839155509/e935a766%22%20width%3D%22420%22%20height%3D%22250%22%20allowfullscreen%3D%22false%22%20allowscriptaccess%3D%22always%22%20%2F%3E&sign=88d225a341b0bed2c4e7a853ff645b58

7. Ambil link yang saya beri warna biru, lalu sisipkan ke kode embed ajaib berikut ini :
Kode embed ajaib:

<center><embed src="LINK_BERWARNA_BIRU&image=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsjvVYY3YIjJPuVldmnSvwTxJwoIal7B3lwmzOsC9sVyfxdqg2fEV9UsBnq6RKqA7MolqJ8uvZoYcC-xtJiZxsmWTTrWCwlA1B2GOmMOi9lonQQgfLUtPhYHCQP8_EBgn5ggPjF5K65Kc/s1600/Untitled.png&repeat=always&autostart=true&frontcolor=cccccc&lightcolor=428cdb&backcolor=111111" width="0" height="0" allowscriptaccess="always"></embed></center>

Setelah link biru disipkan, maka hasilnya menjadi Kode embed MP3 seperti ini:

<center><embed src="http://static.4shared.com/flash/player/5.10/player.swf?file=http://dc700.4shared.com/img/3839155509/e935a766/dlink__2Fdownload_2FBsOolA2P_3Ftsid_3D20130824-012246-942b9f56/preview.mp3&image=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsjvVYY3YIjJPuVldmnSvwTxJwoIal7B3lwmzOsC9sVyfxdqg2fEV9UsBnq6RKqA7MolqJ8uvZoYcC-xtJiZxsmWTTrWCwlA1B2GOmMOi9lonQQgfLUtPhYHCQP8_EBgn5ggPjF5K65Kc/s1600/Untitled.png&repeat=always&autostart=true&frontcolor=cccccc&lightcolor=428cdb&backcolor=111111" width="0" height="0" allowscriptaccess="always"></embed></center>

8. Copy Paste Kode Embed MP3 tersebut ke dalam widget HTML, atau bisa juga dimasukkan ke dalam postingan. Tapi jika ingin memasukkannya di postingan harus dalam mode HTML bukan Compose.
Sekarang anda bisa menikmati mp3 di blog, dan anda juga bisa menggantinya dengan lantunan ayat alqur’an dalam format MP3. Tapi perlu diingat harus mempertimbangkan pula loadingnya agar tidak memberatkan blog. Upload ayat yang pendek saja jangan 30 juz

Memasang Widget Komentar Pengunjung dengan Foto bulat

Salah satu kebanggaan jika blog yang kita kelola mendapatkan banyak pengunjung. Apalagi jika setelah membaca artikel kemudian mengomentarinya.

Hampir semua blog memasang widget komentar pengunjung. Ada yang memasangnya di sidebar, blog-page, bahkan ada juga yang memasang widget komentar blog di halaman posting. Tergantung selera masing-masing pemilik blog.

Kalau saya sendiri lebih suka dipasang di blog-page. Alasannya adalah untuk menghemat ruang sehingga tidak memberatkan loading blog. Jika memasang widget komentar di blog-page maka tidak akan tampil sebelum link yang mengarah ke blog-page di klik pengunjung.

Apabila anda ingin memasang widget komentar di blog-page, anda harus membuat halaman terlebih dahulu. Kemudian anda tinggal mengcopy paste kode script yang saya ambil dari banyak sumber di internet, lalu tempel di halaman blog (blog-page). Kode scriptnya adalah sebagai berikut:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
    var
 numComments  = 6,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 70,
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-drDG5J-THxTEYZL4YbEJ0hCVVYnML1A7nVIYJM5YmKyuaV4dwa5BePXHScd9_p-AmLvlhN-PrDtEk_f7HIrgXNOZCSKOejTurZDQfKKZd6lEPtDW7W2KCUi1MAvhfdsBZitsyoOoRQVH/s30/logobloggerabu.png",
 hideCredits = true;
 maxfeeds=20,
 adminBlog='Alip Handicom';
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('7 D=D||5,9=9||19,A=A||1a,m=m||"h://W.S.g/16/?d=18",E=E||" 1p &1f;",v=(p v===\'o\')?j:v,z=(p z===\'o\')?Z:z,n=(p n===\'o\')?j:n,M=(p M===\'o\')?Z:n;1l 12(L){7 b;b=\'<Y C="12">\';H(7 i=0;i<D;i++){7 x,y,2,k;4(i==L.14.8.q)1g;b+="<X>";7 8=L.14.8[i];H(7 l=0;l<8.I.q;l++){4(8.I[l].1j==\'1o\'){x=8.I[l].w}}H(7 a=0;a<8.K.q;a++){y=8.K[a].1i.$t;2=8.K[a].1h$1k.N}4(2.f("/O/")!=-1){2=2.u("/O/","/s"+9+"-c/")}e 4(2.f("/T/")!=-1){2=2.u("/T/","/s"+9+"-c/")}e 4(2.f("/U-c/")!=-1&&2.f("h:")!=0){2="h:"+2.u("/U-c/","/s"+9+"-c/")}e 4(2.f("G.g/B/1n-P.J")!=-1){2="h://3.13.Q.g/-1m-1e/17/1c/1b/s"+9+"/15.R"}e 4(2.f("G.g/B/1d-P.J")!=-1){2="h://3.13.Q.g/-1R/1U/1P/1K/s"+9+"/1J.R"}e 4(2.f("G.g/B/1M.J")!=-1){4(m.f("S.g")!=-1){2=m+"&s="+9}e{2=m}}e{2=2}4(v==j){4(n==j){k="1O"}e{k=""}b+="<V C=\\"1T "+k+"\\"><B C=\\""+k+"\\" N=\\""+2+"\\" 1H=\\""+y+"\\" 1w=\\""+9+"\\" 1I=\\""+9+"\\"/></V>"}b+="<a w=\\""+x+"\\">"+y+"</a>";7 11=8.1v.$t;7 6=11.u(/(<([^>]+)>)/1u,"");4(6!=""&&6.q>A){6=6.1r(0,A);6+="&1s;";4(z==j){6+="<a w=\\""+x+"\\">"+E+"</a>"}}e{6=6}b+="<r>"+6+"</r>";b+="</X>"}b+=\'</Y>\';7 F="";4(M==j){F="10:1F;"}b+="<r 1G=\\"1E-1D:1A;10:1B;1C-1S:1z;"+F+"\\">1y 1t<a w=\\"h://W.1x.1L/\\">1Q</a></r>";1N.1q(b)}',62,119,'||authorAvatar||if||commBody|var|entry|avatarSize||commentsHtml|||else|indexOf|com|http||true|avatarClass||defaultAvatar|roundAvatar|undefined|typeof|length|span|||replace|showAvatar|href|commentlink|authorName|showMorelink|characters|img|class|numComments|moreLinktext|hideCSS|blogblog|for|link|gif|author|w2b|hideCredits|src|s1600|rounded|blogspot|png|gravatar|s220|s512|div|www|li|ul|false|display|commHTML|w2b_recent_comments|bp|feed|w2b_blogger_logo|avatar|TxMKLVzQ5BI|mm|60|40|QYau8ov2blE|AAAAAAAABYY|openid16|1X32ZM|raquo|break|gd|name|rel|image|function|AaI8|b16|alternate|More|write|substring|hellip|by|ig|content|width|way2blogging|Widget|right|10px|block|text|size|font|none|style|alt|height|w2b_openid_logo|8iasY0xpLzc|org|blank|document|avatarRound|AAAAAAAABYc|Way2Blogging|9lSeVyNRKx0|align|avatarImage|TxMKMIqMNuI'.split('|'),0,{}))
//]]>
</script>
<script type="text/javascript" src="http://www.roomantik.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Beberapa script yang perlu anda edit, yaitu:
1. yang berwarna merah diganti dengan Nama Anda
2. yang berwarna biru diganti dengan Blog Anda

Jika anda melakukannya dengan benar, maka hasilnya bisa anda lihat pada gambar di awal postingan ini.
Selamat memasang Widget Komentar pengunjung di blog.

Menampilkan Judul Posting Label Tertentu

Widget Judul posting label tertentu

Blogspot memang sangat asyik untuk dikostumisasi, termasuk menampilkan judul artikel postingan pada satu label tertentu, dapat dilakukan dengan memasukkan script ajaib.

Pada tips blogging kali ini akan saya share sebuah script ajaib dimana hasilnya nanti Judul posting yang tergabung pada satu label dapat ditampilkan di halaman blog. Anda tidak perlu khawatir apakah nanti tidak memberatkan blog.? Tentu jawabnya Tidak.

Widget Menampilkan Judul Posting Label Tertentu ini tidak memberatkan blog karena isi scriptnya ringan. Selain itu gambar posting dan artikel tidak muncul dalam widget ini. Yang ditampilkan hanyalah daftar judul posting yang tersusun vertikal. Dengan begitu tidak akan memberatkan blog.

Cara membuatnya cukup mudah, anda tinggal memasukkan script berikut ini ke dalam postingan maupun blog-page (halaman) blogspot.

Script Menampilkan Judul Posting Label Tertentu:

<script style="text/javascript"> var numposts = 50; var standardstyling = true; </script> <script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script><ul><script src="/feeds/posts/default/-/tikom8?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>

Pada script tersebut ada teks yang berwarna merah adalah NAMA_LABEL. Tugas anda adalah mengganti teks yang berwarna merah itu dengan LABEL milik anda. Jika Nama Label mengandung spasi maka penulisan spasi diganti dengan %20 (contoh: tips blog ditulis tips%20blog).

Setelah halaman tersebut diterbitkan, lalu ambil linknya yang berada di addressbar. Pasang link tersebut di tempat yang anda sukai, misalnya di sidebar atau di menu horisontal. Jika link tersebut di-klik pengunjung maka akan terbuka halaman yang Menampilkan Judul Posting Label Tertentu.

Menambah menu dropdown pada Tabs Horisontal Blogger Standar

Blogger semakin hebat saja, tidak kalah dengan pesaingnya disana. Kini siapa pun dapat memiliki blog dengan penampilan yang menarik.

Ditambah lagi sekarang banyak bermunculan pebloger hebat di tanah air. Sebuah widget blogspot yang satu ini ( Tabs horisontal )boleh dikatakan wajib untuk dimiliki dan dipasang pada blog.

Dengan adanya Navigasi ini maka pengunjung menjadi terbantu dalam mengeksplorasi konten yang ada dalam sebuah blog. Blogger memberi nama navigasi itu dengan sebutan Tabs Horisontal. Blogger menyediakan widget Tabs horisontal yang letaknya berada di bawah Header.  Akan tetapi Tabs horisontal ini tidak akan muncul sebelum kita mengaktifkannya.

Tetapi sayangnya Tabs horisontal bawaan blogger standar tidak dilengkapi dengan submenu atau menu di bawah menu utama, alias dropdown menu, sehingga masih kurang begitu menarik.
Selama ini yang kita tahu untuk dapat membuat navigasi horisontal plus menu dropdown adalah dengan menambahkan banyak css maupun js yang begitu ribed.  Belum lagi setelah diterapkan malah merusak konstruksi template.

Jika saat ini anda sedang mencari tips tentang cara Menambah menu dropdown pada Tabs Horisontal sedangkan template yang dipakai adalah template Blogger yang masih standar, maka anda termasuk orang yang beruntung karena pada kesempatan ini akan saya berikan rahasianya.

Silahkan perhatikan dan ikuti langkah berikut ini :
1. Pastikan bahwa anda memakai template blogger standar (Template bawaan blogger)
2. Pastikan anda telah mengaktifkan fitur Laman.

Kalau belum silahkan aktifkan dulu, caranya lihat gambar di bawah ini :

3. Klik Simpan Setelan
4. Setelah itu masuk ke Edit HTML template
5. Klik Expand Template Widget
6. Cari kode ini ]]></b:skin>
7. Setelah ketemu, masukkan kode berikut ini, tepat di atas kode pada langkah no.6

.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
width: 220px;}

8. cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan kemudian perhatikan kode <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan kode dengan format berikut ini tepat di bawah kode <b:/loop>.

<li><a href='#'>Menu</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
</ul>
</li>

9. Simpan Template
Jika anda melakukannya dengan benar maka hasilnya seperti pada blog demo berikut ini:
LIHAT DEMO