Cara merampingkan / Mengecilkan Alexa Rank

Cara Merampingkan / Mengecilkan Alexa Rank –

Siapa yang tidak menginginkan alexa ranknya terus meramping ? pasti semua blogger menginginkannya bukan ? ya ! sebab alexa rank yang ramping atau dengan digit yang kecil menandakan bahwa blog tersebut memiliki rangking yang bagus secara global maupun negara. Hal ini dikarenakan alexa memberikan sebuah layanan yang mana membuat suatu rangking sebuah blog secara global (dunia) maupun negara. Jadi jelas bagi blog yang beralexa ramping menandakan rangkingnya sangat bagus. Akan tetapi untuk membuat rangking alexa menjadi ramping tidak mudah loh,,, ada yang perlu dilakukan dan di usahakan. Berikut cara untuk Menurunkan Alexa Rank

Cara Menurunkan / Mengecilkan Digit Alexa Rank

1. Pasang widget alexa di blog anda untuk memantau keadaan blog anda.
Cara paling mudah dan murah meriah adalah dengan Blogwalking dan meninggalkan komentar di Blog-blog dengan Alexa Rank yang lebih tinggi dari Blog anda .

2. Daftar Blog ke Search Engine Terutama Google, Yahoo dan MSN                                      
Ini dilakukan agar blog kita cepat terindek di mesin pencari terutama yang sudah terkenel dan besar seperti Google, Yahoo, MSN dll, baru setelah itu ke search engine lainnya.

3. Daftar Blog ke Technorati                                                                                          
Technorati  merupakan salah satu direktori blog yang sudah terkenal, bia juga berfungsi sebagai blogsearch, tags aggregator, online bookmarks, juga bisa mengetahui  blog mana saja yg memasang link blog kita..

4. Cari Backlink
Cari backlink sebanyak-banyaknya dan berkualitas sebaiknya sih sesuai kategori blog, karena google menilai berdasarkan kuantitas dan kualitas link, tapi akhirnya mana saja yang mau bertukar link.. saya terima.

5. Bookmark  Blog Sebagai Homepage Browser
Bookmark blog sebagai homepage di komputer yang sering digunakan untuk browsing ini juga baru kemarin saya lakukan di komputer rumah sebenarnya sih ini bisa juga dikantor, diwarnet atau dimana saja, makin banyak tentu semakin baik.

6. Update blog 2 hari sekali , 1 minggu 2 kali atau 1 bulan sekali . bila perlu setiap hari justru lebih bagus lagi.

7. Tulis artikel Tentang Alexa
Tulis artikel tentang Alexa misalnya seperti yang sedang sobat baca tentang Cara Meningkatkan Alexa Rank ini dan ajak para pembaca untuk men-download Alexa Toolbar.  Jangan lupa saat membuat artikel tentang Alexa, selalu gunakan label atau kategori dengan keyword :  Alexa, Alexa rank, Alexa traffic rank, Rangking Alexa, dsb. Intinya ada kata ' Alexa '.

8. Melakukan Ping
Lakukan ping secara berkala , saya baru lakukan ini dua kali , ping ini untuk merefresh blog kita di data base mesin pencari.

9. Minta teman untuk mereview dan merating profil blog Anda di Alexa. Memang belum ada bukti, namun mungkin saja cara ini berguna.

Download / Instal Alexa toobar Disini

Semoga bermanfaat.

Read More ->>

Cara membuat "Related Post" di Bloger

Panduan Blogger untuk blogger pemula. Panduan blogger yang akan membahas dan menjelaskan tentang Panduan Cara Membuat "Related Post" di blog. Related post atau Artikel Terkait pada blog mempunyai peran penting untuk blog itu sendiri dan akan memudahkan para pengunjung blognya untuk menemulan artikel yang mungkin mereka anggap menarik. Dalam hal ini penggunaan Related Post atau Artikel Terkait memang membantu pengunjung blog dan juga membantu pemilik blog itu sendiri, sehingga setiap artikel / postingan dapat dimungkinkan untuk dibaca oleh pengunjung.

Berikut Panduannya / langkah" nya :

1. Login  ke akun blog sobat
2. Setelah login, klik EDIT HTML
3. Centang "Expand Widget Templates"
4. Sekarang cari kode </head> ,untuk pencarian termudah silahkan sobat tekan Ctrl + F pada keyboard komputer sobat.
5. Copy dan Paste kode di bawah ini persis diatas kode </head> :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
 height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZaM_YUJDFk8o1PbsriNrNM3V9qxDTSkKHLs4tLoxHj7jI8kAWFGp3IU2GD1xtK-EuOz7dyp5aFSrVXgyZ80nTXAXxa3lElGuZGi2bKu4r4uoEJLCzuzNoyoDD5aQgqpQ6E6u8AUbKGbY/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

   

       

    8.   Langkah selanjutnya sobat cari kode :

       <div class='post-footer-line post-footer-line-1'>

     9.   Cara mencarinya sama seperti panduan no. 4

   10.   Jika sobat tak menemukan kode tersebut,silahkan sobat cari kode:

       <p class='post-footer-line post-footer-line-1'>  

   11.   Copy dan Paste kode di bawah ini dan letakkan di bawah kode di atas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

 
  12. Simpan, dan lihat hasilnya.....

Semoga Bermanfaat.......

Read More ->>

Cara Membuat Posting Blog Terpisah

Bagaimana sudah jelas bukan tentang kolom postingan terpisah? kalau sudah jelas mari kita lihat langkah-langkah pembuatannya

1. Login ke blogger
2. masuk ke Tata Letak => Edit HTML
3. lalu cari kode di bawah ini
   
   .post {
   ..............
   }
4. titik-titik di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
5. setelah ketemu ganti dengan kode di bawah ini
   
   .post {
   background:#fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXt78YM0k0OsmmCwBphJsX8EvGgCWGpvczuwds5vFD4J2XPQm_DFMo_MNZkhT9bomR4lfPfJgaohipnKVlyNGETm5PQja7AWRTiexcjYHNAAsA4a_oUz9kgv5o2oCly8Qa5PH4EXaq48_/s1600/Sidebar.jpg") repeat-x bottom;
   border:5px solid #000;
   margin:0 0 0.5em;
   padding:0.5em;
   color:#000;
   font-family:"Trebuchet MS";
   -moz-border-radius-topleft: 20px;
   }
   
   
   Penjelasan :
   
   • fff : menunjukan warna latar belakang dari kolom postingan, sobat bisa menggantinya dengan kode warna yang lain
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXt78YM0k0OsmmCwBphJsX8EvGgCWGpvczuwds5vFD4J2XPQm_DFMo_MNZkhT9bomR4lfPfJgaohipnKVlyNGETm5PQja7AWRTiexcjYHNAAsA4a_oUz9kgv5o2oCly8Qa5PH4EXaq48_/s1600/Sidebar.jpg : menunjukan gambar yang berada di bawah kolom postingan, sobat juga dapat menggantinya tapi dengan ukuran yang kecil
   • 000 : menunjukan dari warna garis pada kolom postingan terpisah, sobat bisa ganti akan tetapi harus di sesuaikan dengan warna main-wrapper agar terlihat terpisah
   • 000 : warna dari tulisan pada klolom postingan, sobat dapat mengganti dengan warna yang berlawanan dengan warna latar belakang agar terlihat jelas
6. Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Dengan modifikasi tampilan Kolom Postingan memungkinkan pengunjung blog sobat dapat menikmati dan mendalami postingan yang sobat tulis. Semoga bermanfaat dan salam bogging.

Sumber : Febridriver.blogspot.com

Read More ->>

Cara membuat sidebar terpisah

 

Banyak cara untuk membuat kotak sidebar blog kita kelihatan menarik. Contohnya adalah seperti tips kali ini. Terkadang sidebar blog perlu ditata dengan baik, supaya pengunjung blog kita merasa nyaman dengan konten-konten yang ada dalam sidebar blog kita. Selain ditata dengan bagus, tentu kita harus memberi tampilan yang menarik pula pada sodebar blog kita. Nah untuk menampilkan sidebar yang lebih menarik lagi, anda perlu mengikuti langkah-langkah di bawah ini:

1. Login ke blogger.com
2. Pada dasbor blog Sobat, silahkan berkunjung ke Edit HTML.
3. Jangan Lupa Expand Widget Templates
4. Kemudian silahkan cari kode yang mirip seperti kode berikut ini.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

(kode di atas berlaku buat template minimal) Jika sudah ketemu, silahakan pisah kedua konten kode di atas menjadi seperti kode di bawah ini.

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu kode pada Sidebar . Widger dimodifikasi menjadi seperti kode di bawah ini
:

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}

Semoga Bermanfaat......., Di like y....

Read More ->>

Cara membuat Breaking News

Salam sejahtera untuk Sobat blogger semua. Setelah sekian lama saya tidak update artikel kali ini saya akan share kepada Sobat semua bagaimana cara membuat breaking news di blog. Breaking news pada blog berfungsi untuk memperindah tampilan, terlihat lebih profesional, dan bisa jadi menambah link in yang akan berefek baik pada nilai SEO blog Sobat. Mungkin ada diantara Sobat blogger yang belum pernah liat breaking news itu kaya apa, silahkan lihat screenshootnya.

Langkah-Langkah Cara Membuat Breaking News di Blog :

1. Login ke akun blog Sobat, kemudian masuk ke Dashboard
2. Setelah itu masuk ke menu Template
3. Klik Edit HTML, kemudian klik Lanjutkan, dan centang (checkclist) Expand Widget Template.
4. Cari kode ]]></b:skin> (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)
5. Setelah itu, salin kode dibawah ini tepat diatas kode ]]></b:skin> tersebut
   

   .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4C1JORW6VwKSRQwt2LCLf-VTgatn0lQ7cXi9zyhPoUx6zi8QIfSscMacPgZ86-HOWa6dyUkVEDogZe4Iv2wVpecLFmq2K4OBWednx5evNFas1JE9ELrC-12vRsFbsXvs81EoXImT-Us/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
   .news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
   .news a:link, .news a:visited{color:#fff;text-decoration:none;}
   .news a:hover {color:#ddd;text-decoration:underline;}

6. Setelah itu cari lagi kode </head>
7. Jika sudah ketemu, salin kode dibawah ini tepat diatas kode </head> tersebut
   

   <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
   <script type='text/javascript'>
   //<![CDATA[
   var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
   
   var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
   //]]>
   </script>
   <style type='text/css'>
   .titlefield{ /*CSS for RSS title link in general*/
   text-decoration: none;}
   .labelfield{ /*CSS for label field in general*/
   color:#aaa;font-size: 100%;}
   .datefield{ /*CSS for date field in general*/
   color:#aaa;font:normal 14px Arial;text-transform:none;}
   #example1{ /*Demo 1 main container*/
   width: 780px;
   height: 14px;
   border: 0px solid #aaa;
   padding: 0px;
   font:bold 16px Arial;
   text-transform:none;
   text-align:left;
   background-color:transparent;}
   code{ /*CSS for insructions*/
   color: #fff;}
   #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
   #example1 a:hover {color:#C8D3F2;text-decoration:none;}
   </style>

8. Kemudian cari kode yang biasa dipakai untuk menu navigasi seperti kode dibawah ini
   

   <div class='menu horizontal'>
   ...........................................
   ...........................................
   </div>

9. Jika sudah ketemu kode navigasi blog Sobat (atau kalaupun tidak ada Sobat bisa cari kode </head>) kemudian letakan kode dibawah ini tepat dibawah kode tersebut
   

   <div class='newspic'>
   
   <div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
   <script type='text/javascript'>
   var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
   cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://septia-mujizat.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
   cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
   cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
   cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
   cssfeed.entries_per_page(1)
   cssfeed.init()
   </script>
   </div>
   <div style='clear:both;'/>
   </div>

10. Ganti tulisan yang berwarna merah dengan alamat (url) blog Sobat, kemudian simpan template blog Sobat

Nah, itu dia cara membuat breaking news di blog yang dapat saya sampaikan pada Sobat. Sekian saja postingan saya kali ini, mohon maaf apabila masih banyak kekurangannya.

Read More ->>

Cara Membuat Slide Show Berdasarkan Kategori

Cara Membuat Slide Show berdasarkan Kategori/Label - Cara Membuat Slideshow otomatis - Slideshow memang akan menjadi widget yang bisa memperindah layout template Anda. Pada posting sebelumnya, saya pernah membahas tengan cara membuat slideshow. Namun, slideshow yang dibuat menggunakan cara manual. Yaitu, kita memasukkan gambar dan deskripsi satu persatu.
Kali ini, kita akan membuat slideshow content yang dibuat berdasarkan kategori/label secara otomatis. Jadi nanti, Anda tinggal mengubah kategori untuk mengubah tampilan slide-nya. Langsung saja :

• Login ke blogger.
• Klik Design/Tata Letak --> Edit HTML --> centang "Expand Widget Templates"
• Backup dulu template anda dengan mengklik "Download Template Lengkap". Untuk berjaga-jaga bila terjadi error.
• Cari kode : ]]></b:skin>
• Letakkan kode berikut di atas kode ]]></b:skin>

 #featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

• Masih dalam dalam posisi Edit HTML. Cari kode </head>
• Sekarang letakkan kode berikut ini di atas kode </head>

<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFXfy-4AZoqVy1FCeYx7uWRRzLrYhaDo7FB0aH4H8jIySwQSR8M3g0I2DHTSaLmfMpmK-7qiV3MWmWArEOlKYDGtuSRgUY8MggRDvy6Thxw6IYGvtn-pmOrACOWvtCJPQT7m484BEGTfE/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "berita";

function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}
     
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';   
document.write(trtd);    
j++;
}}
//]]>
</script>

1. Perhatikan kode yang di beri huruf tebal label1 = "berita". Itu adalah label atau kategori yang akan ditampilkan di slider, di sini dipilih label berita. Anda nanti tinggal mengganti dengan label yang diinginkan.
2. Perhatikan juga kode img width="370" height="240"  itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan  template Anda.

• Kemudian, cari kode </body>
• Letakkan kode di bawah ini sebelum kode </body>

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>

• Kemudian, cari kode <div id='main-wrapper'>, jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya  :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

• Save/simpan template.

Yang perlu diperhatikan di sini adalah kode label1 = "berita". berita adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. 

Selamat mencoba..... Semoga Bermanfaat .....

Read More ->>

Cara Membuat Daftar Isi Di Blogger

Daftar Isi atau yang sering kita sebut Sitemap pada umumnya kita gunakan sebagai petunjuk atau informasi sudah berapa banyak artikel yang selama ini sudah kita buat di dalam blog kita. Kadang kita merasa malas apabila kita harus membuat dan mengisi daftar isi tersebut secara manual setiap kali kita selesai meng update artikel. Maka dari itu kali ini saya akan berbagi informasi tentang bagaimana cara membuat daftar isi atau sitemap berdasarkan label secara otomatis mengisi sendiri setiap kita selesai membuat artikel. Berikut tutorialnya.

Buka menu Posting atau Posts kemudian kita klik Entri Baru atau New Post. Setelah masuk ke dalam halaman editor posting pilih dalam mode HTML bukan Compose. Lalu copy paste kan kode di bawah ini ke dalam halaman editor posting :

<script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://clyfirst.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Ganti text yang berwarna merah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label dari blog KiosBisnis.com.

Namun misal anda menginginkan menggunakan fungsi scroll karena daftar isi dirasa sudah terlalu banyak dan terlalu banyak memakan tempat (memanjang ke bawah) maka bisa menambahkan kode berwarna biru di bawah ini.

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://clyfirst.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Jangan lupa untuk mengganti teks berwarna merah dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label menggunakan fungsi scroll dari blog KiosBisnis.com.

Selamat mencoba.......    Semoga Bermanfaat....... 

Read More ->>

Cara Membuat Menu Dropdown Pada Blogger

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.

1. Klik menu / tulisan Template

2. Klik menu Edit HTML

3. Klik tulisan / menu Lanjutkan
4. Beri centang pada Expand Template Widget

Kode Yang Harus Di Cari / Temukan

Cari kode :

<div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>

Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<br />
<div id="cat-nav">
<ul class="fl" id="secnav">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="">Menu + Sub Menu</a>
<ul id="sub-custom-nav">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu + Sub</a>
<ul id="sub-custom-nav">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
<li><a href="#">Sub 6</a></li>
</ul>
</li>
</ul>
</div>

Hasilnya seperti ini :

• Home
• Menu 1
• Menu + Sub Menu
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu
• Menu + Sub
  • Sub 1
  • Sub 2
  • Sub 3
  • Sub 4
  • Sub 5
  • Sub 6

Catatan:

Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.

Hal-hal yang mungkin akan ditanyakan :

1. Kode yang harus dicari tidak ada di blog saya ?

Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan  kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.

2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu ?

Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman.

Update 25 Juni 2012
Jika susah pasang menu horizontal nya  pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:

1. Klik Tata Letak
2. Klik Tambah Gadget/Add Gadget
3. Pilih Gadget Html/JavaScript
4. Simpan/Save
5. Selesai

Untuk mengubah lebar menu horizontal nya silakan cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

Kemudian tambahkan kode (width:900px) di atrara { dan }, sehingga menjadi seperti ini

#cat-nav {background:#156994;width:900px;margin:0 15px;padding:0;height:35px;}

Ingat, angka 900px hanya sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang kamu inginkan (yang sesuai dengan template kamu)

Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara <style> dan </style>.

. Bagaimana cara menambahkan menu ?Untuk menambahkan menu pada kode menu horizontal di atas silakan tambahkan kode berikut

<li><a href='#'>Menu</a></li>

Pasang kode di atas sebelum kode

</ul>
</div>

Maka kodenya jadi seperti ini

<li><a href='#'>Menu</a></li>

</ul>
</div>

Dengan menambahkan kode di atas itu artinya kamu sudah menambahkan 1 menu, jika ingin menambahkan dua menu maka silakan masukkan kode tambahan tersebut 2 x

<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
</div>

Untuk menambahkan menu yang ada sub menu nya maka silakan tambahkan kode berikut

<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>

Caranya sama dengan cara menambahkan menu
Bagaimana cara menambahkan sub menu saja?
untuk menambkan sub menu saja caranya hampir sama dengan cara menambahkan menu, silakan sisipkan kode

<li><a href='#'>Sub Menu</a></li>

Sebelum kode

</ul>
</li>

Sehingga jadinya seperti ini

<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>

Nah itulah cara menambahkan menu dan sub menu, selamat mencoba.

Semoga bermanfaat. 

Read More ->>

Cara Membuat "Read More" Otomatis Pada Blogger

Oke gak perlu berlama-lama lagi saya langsung aja ke tutorial.

Sebelumnya silahkan sobat download dulu templatenya biar kalo terjadi kesalahan bisa langsung dikembalikan ke template sebelumnya.

PERTAMA, silakan masuk ke acount blogger anda kemudian pilih Edit Html, jangan lupa memberikan tanda ceklis pada bacaan "Expand Widget Template" atau lihat gambar di bawah ini :

cari kode </head> kemudian masukkan script di bawah ini persis dibawah kode tersebut.
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>


KEDUA, cari kode html berikut ini :
<data:post.body/> atau <p><data:post.body/></p>
ganti kode tersebut dengan kode di bawah ini :

<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 class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan : tulisan yang berwarna merah adalah yang bisa anda ganti.
==> Summary noimg 430 = tinggi artikel terpenggal tanpa image
==> Summar img 430 = tinggi artikel terpenggal dengan image
==> Readmore bisa anda ganti dengan Baca Selengkapnya, full read dll...


KETIGA, klik save template

Selanjutnya anda bisa melakukan postingan dan lihat hasilnya, Readmore atau baca selengkapnya akan secara otomatis terpasang setelah anda publish postingannya.

Selamat mencoba......... Semoga bermanfaat........

Read More ->>

Cara Membuat Menu Horizontal Pada Blogger

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.

1. Klik menu / tulisan Template

2. Klik menu Edit HTML

3. Klik tulisan / menu Lanjutkan
4. Beri centang pada Expand Template Widget

Kode Yang Harus Di Cari / Temukan

Cari kode :

<div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>

Bila Sulit Untuk Menuemukan Kode tersebutKlik CTRL+F
Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya

<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<br />
<div id="cat-nav">
<ul class="fl" id="secnav">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="">Menu + Sub Menu</a>
<ul id="sub-custom-nav">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu + Sub</a>
<ul id="sub-custom-nav">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
<li><a href="#">Sub 5</a></li>
<li><a href="#">Sub 6</a></li>
</ul>
</li>
</ul>
</div>

Hasilnya seperti ini :

• Home
• Menu 1
• Menu + Sub Menu
  • Sub Menu 1
  • Sub Menu 2
  • Sub Menu 3
• Menu
• Menu + Sub
  • Sub 1
  • Sub 2
  • Sub 3
  • Sub 4
  • Sub 5
  • Sub 6

Catatan:

Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.

Hal-hal yang mungkin akan ditanyakan :

1. Kode yang harus dicari tidak ada di blog saya ?

Solusinya, silakan pasang kode menu horizontak tersebut di tempat yang kira-kira pas dengan yang kamu mau, kemudian klik Preview (Pratinjau). Jika masih belum pas silakan pindahkan  kode tersebut kemudian Pratinjau lagi. Lakukan sampai menunya sudah berada ditempat yang kamu mau.

2. Bagaimana cara memasukkan beberapa artikel dalam 1 menu ?

Agar bisa menampilakan beberapa artikel dalam 1 menu maka kamu harus pasang Link Label pada menu tersebut, caranya sama, yaitu dengan cara mengganti tanda pagar (#) dengan link label yang ada di blog teman.

Update 25 Juni 2012
Jika susah pasang menu horizontal nya  pada bagian Edit HTML silakan pasang pada Gadget/Widget (dibawah header), caranya:

1. Klik Tata Letak
2. Klik Tambah Gadget/Add Gadget
3. Pilih Gadget Html/JavaScript
4. Simpan/Save
5. Selesai

Untuk mengubah lebar menu horizontal nya silakan cari kode:

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

Kemudian tambahkan kode (width:900px) di atrara { dan }, sehingga menjadi seperti ini

#cat-nav {background:#156994;width:900px;margin:0 15px;padding:0;height:35px;}

Ingat, angka 900px hanya sebagai contoh saja, silakan rubah angka 900 dengan ukuran lebar yang kamu inginkan (yang sesuai dengan template kamu)

Untuk mengedit tampilan yang lainnya seperti warna, font, dsb. Silakan dicoba edit sendiri CSS nya ya, yang saya maksud CSS itu adalah kode yang ada di antara <style> dan </style>.

. Bagaimana cara menambahkan menu ?Untuk menambahkan menu pada kode menu horizontal di atas silakan tambahkan kode berikut

<li><a href='#'>Menu</a></li>

Pasang kode di atas sebelum kode

</ul>
</div>

Maka kodenya jadi seperti ini

<li><a href='#'>Menu</a></li>

</ul>
</div>

Dengan menambahkan kode di atas itu artinya kamu sudah menambahkan 1 menu, jika ingin menambahkan dua menu maka silakan masukkan kode tambahan tersebut 2 x

<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
</div>

Untuk menambahkan menu yang ada sub menu nya maka silakan tambahkan kode berikut

<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
</ul>
</li>

Caranya sama dengan cara menambahkan menu
Bagaimana cara menambahkan sub menu saja?
untuk menambkan sub menu saja caranya hampir sama dengan cara menambahkan menu, silakan sisipkan kode

<li><a href='#'>Sub Menu</a></li>

Sebelum kode

</ul>
</li>

Sehingga jadinya seperti ini

<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>

Nah itulah cara menambahkan menu dan sub menu, selamat mencoba.

Semoga bermanfaat. 

Read More ->>