2 Style Menu Multi Tab View Keren

Tutorial cara membuat widget Multi Tab Menu View di Blogger atau Menu Tab Navigasi untuk popular post, arsip, recent comment, artikel terbaru ,dll. dengan meggunakan CSS dan jQuery. Cara memasang widget Multi Tab Menu View di blog tanpa edit HTML Template Blog. Penggunaan widget tab menu dapat mejadi solusi bagi yang ingin menghemat ruang blog dan efisien untuk memuat banyak konten baik link-link, artikel, gambar, maupun widget lainnya. Ayo ikuti panduan cara membuatnya dibawah ini Sob.

Pada kali ini saya juga akan memberikan Dua Contoh dan Dua Demo Widget Menu Multi Tab View, yaitu Organic Tab View dan Cool Tab View. Sehingga Anda dapat leluasa membandingkan widget mana yang Anda sukai dan yang lebih cocok untuk Blog Anda. Kita tentu akan membahas satu persatu mengenai 2 widget ini untuk mempermudah tutorial.

DEMO MENU ORGANIC TAB VIEW

DEMO MENU COOLEST TAB VIEW

Menu Multi Tab View Organik

Rencananya adalah membangun sebuah menu tab (area tab) yang sangat sederhana dengan jQuery untuk membuatnya berkerja lebih menarik dan baik. Tentu saja, akan tetap sederhana, markup bersih dan semantik.Ide dari fungsi tab menu ini akan didasarkan pada kemampuan ekspan area dalam menyesuaikan konten menu, dengan kata lain ekspansi sebanyak yang dibutuhkan.

HTML

Struktur memiliki elemen pembungkus (wrapper element) yang akan berisi seluruh konten tab. Tab ini memiliki href atribut sama dengan ID dari daftar unordered bawahnya yang berkaitan dengan konten ( nama id menu masing-masing tab, seperti Recent Posts, Arsip, Comment dan Daftar Isi. Konten menu tab yang disebut "Isi Menu" adalah isi menu sebenarnya dapat berupa widget seperti contoh demo, bisa link-link, blogroll, gambar, javascript atau yang lainnya.


<div id="example-one">
		<ul class="nav">
                <li class="nav-one"><a href="#recentpost" class="current">Recent Posts</a></li>
                <li class="nav-two"><a href="#arsip">Arsip</a></li>
                <li class="nav-three"><a href="#recentcomment">Comment</a></li>
                <li class="nav-four last"><a href="#daftarisi">Daftar Isi</a></li> 
                  </ul>
	<div class="list-wrap">
                <ul id="recentpost">
			<li>Isi Menu</li>
                  </ul>
		<ul id="arsip" class="hide">
			<li>Isi Menu</li>
		  </ul>
		<ul id="recentcomment" class="hide">
			<li>Isi Menu</li>
		  </ul>
		 <ul id="daftarisi" class="hide">
			<li>Isi Menu</li>
		  </ul>
       </div> <!-- END List Wrap -->
 </div> <!-- END Organic Tabs (Example One) -->

Keterangan :

Sebagaimana telah dijelaskan diatas tab-tab menu akan memiliki konten (Isi Menu) yang berbeda tentunya, disini saya hanya memberikan sesuai dengan contoh demo tab menu organic diatas. Tapi bukan berarti Anda tidak bisa mengganti dengan konten lainya yang Anda inginkan.

Berikut konten isi menu yang telah disediakan, ganti tulisan Isi Menu dengan kode-kode script widget dibawah ini:

1. Recent Posts

Script Recent Posts:


<script type='text/javascript'>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;

}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)

}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>1) 
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
</script>
<div id="categorylist">
<script type="text/javascript" src="http://problogiz.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script>

2. Arsip

Arsip widget:


<div class='rbbox'>
<div style='margin:0; padding:2px;height:300px;overflow:auto;border:1px solid white;'>
<script src="https://problogizjs.googlecode.com/files/arsip.js">
</script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
</div></div>

3. Recent Comment

Recentcomment widget:


<script style="text/javascript" src="https://problogizjs.googlecode.com/files/comments.js"></script>
<script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://problogiz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

4. Daftar Isi

Daftarisi widget:

<script src="https://problogizjs.googlecode.com/files/problogiz.toc.js"></script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://problogizjs.googlecode.com/files/TOCaccordion.js" type="text/javascript"></script>

note:

Ganti kode yang berwarna merah dengan Alama URL Blog Anda
Jika ada widget diatas yang tidak bekerja semestinya, silahkan Anda tanyakan di form komentar.
Javascript diatas semuanya ringan dan kapasitasnya rata-rata 900 byte -3 kb, jangan khawatir akan membuat loading page blog lambat, namun alangkah baiknya jika pilih widget-widget yang perlu saja.

CSS

Tidak ada yang istimewa sebenarnya dari desain menu tab view organic ini, oleh karena itu Anda dapat berkreasi lebih jauh untuk membuatnya lebih cantik. Anda dapat ber-eksperimen dengan warna-warna sendiri, font, ukuran lebar menu sesuaikan saja dengan kebutuhan atau yang lainnya pada kode CSS berikut.

/*
	 Organic Tabs View by http://css-tricks.com
         Modified by http://problogiz.blogspot.com
*/
* { margin: 0; padding: 0; }
body { font: 12px Georgia, serif; }
html { overflow-y: scroll; }
a { text-decoration: none; }
a:focus { outline: 0; }
p { font-size: 15px; margin: 0 0 20px 0; }
#page-wrap { width: 450px; margin: 80px auto; }

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }


/* Specific to example one */

#example-one { background: #eee; width: 450px; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 95px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background:#959290; color: white; font-size: 12px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }
#example-one ul li.nav-one a.current, #example-one ul.recentpost li a:hover { background-color: #0575f4; color: white; }
#example-one ul li.nav-two a.current, #example-one ul.arsip li a:hover { background-color: #d30000; color: white; }
#example-one ul li.nav-three a.current, #example-one ul.recentcomment li a:hover { background-color: #8d01b0; color: white; }
#example-one ul li.nav-four a.current, #example-one ul.daftarisi li a:hover { background-color: #FE4902; color: white; }

Yang unik dari CSS ini adanya teknik untuk menyembunyikan semua panel konten kecuali default-nya, yaitu menggabungkan teknik CSS (.hide {.}) dengan Javascript teknik untuk mendapatkan hasil yang lebih baik saat load.

jQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://problogizjs.googlecode.com/files/organictabs.jquery.js"></script>
    <script>
        $(function() {
    
            $("#example-one").organicTabs({
            "speed": 200 });
        });
    </script>

Ok Sob, sekarang telah lengkap semua kode-kode yang diperlukan untuk membuat widget Menu Multi Tab View Organic. Untuk memasangnya di blog Anda tinggal kumpulkan semua kode diatas HTML, CSS dan Javascript dan gunakan sebgai widget blogger.

Kode Final Menu Multi Tab View Organik

Final Code Tab Menu:


<style>
/*
	 Organic Tabs View by http://css-tricks.com
         Modified by http://problogiz.blogspot.com
*/
* { margin: 0; padding: 0; }
body { font: 12px Georgia, serif; }
html { overflow-y: scroll; }
a { text-decoration: none; }
a:focus { outline: 0; }
p { font-size: 15px; margin: 0 0 20px 0; }
#page-wrap { width: 450px; margin: 80px auto; }

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }


/* Specific to example one */

#example-one { background: #eee; width: 450px; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 95px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background:#959290; color: white; font-size: 12px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }
#example-one ul li.nav-one a.current, #example-one ul.recentpost li a:hover { background-color: #0575f4; color: white; }
#example-one ul li.nav-two a.current, #example-one ul.arsip li a:hover { background-color: #d30000; color: white; }
#example-one ul li.nav-three a.current, #example-one ul.recentcomment li a:hover { background-color: #8d01b0; color: white; }
#example-one ul li.nav-four a.current, #example-one ul.daftarisi li a:hover { background-color: #FE4902; color: white; }

</style>
<div id="example-one">
			
    <ul class="nav">
                <li class="nav-one"><a href="#recentpost" class="current">Recent Posts</a></li>
                <li class="nav-two"><a href="#arsip">Arsip</a></li>
                <li class="nav-three"><a href="#recentcomment">Comment</a></li>
                <li class="nav-four last"><a href="#daftarisi">Daftar Isi</a></li>
    </ul>
	
    <div class="list-wrap">
	
		<ul id="recentpost">
			<li><script type='text/javascript'>
var relatedpoststitle="";
</script>
<script type='text/javascript'>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;

}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currentposturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)

}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>1) 
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
</script>
<div id="categorylist">
<script type="text/javascript" src="http://problogiz.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"></script>
<script type="text/javascript">
var currentposturl="";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script></li>
		</ul>
		 
		 <ul id="arsip" class="hide">
			<li><div class='rbbox'>
<div style='margin:0; padding:2px;height:300px;overflow:auto;border:1px solid white;'>
<script src="https://problogizjs.googlecode.com/files/arsip.js">
</script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
</div></div>
</li>
		 </ul>
		 
		 <ul id="recentcomment" class="hide">
			<li><div class='rbbox'>
<div style='margin:0; padding:2px;height:300px;overflow:auto;border:1px solid white;'>
<script style="text/javascript" src="https://problogizjs.googlecode.com/files/comments.js"></script>
<script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://problogiz.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div></div>
</li>
		 </ul>
		 
		 <ul id="daftarisi" class="hide">
			<li><div class='rbbox'>
<div style='margin:0; padding:2px;height:300px;overflow:auto;border:1px solid white;'>
<script src="https://problogizjs.googlecode.com/files/problogiz.toc.js"></script>
<script src="http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://problogizjs.googlecode.com/files/TOCaccordion.js" type="text/javascript"></script>
</div></div>
</li>
		 </ul>
		 
    </div> <!-- END List Wrap -->
 
 </div> <!-- END Organic Tabs (Example One) -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://problogizjs.googlecode.com/files/organictabs.jquery.js"></script>
    <script>
        $(function() {
    
            $("#example-one").organicTabs({
            "speed": 200 });
        });
    </script>

Untuk memasang di blog, >> pilih Tata Letak Blogger > Tambahkan Gadget > pilih HTML/JavaScript > pastekan semua kode final diatas > Simpan

Silahkan pasang di sidebar atau dimana saja diperlukan pada blog Anda sebagai widget tab menu view baru Anda. Selamat Mencoba!!

Coolest Menu Multi Tab View

Ini menu tab view yang cukup keren Sob, sudah lihat DEMO-nya yang kedua?

Tampilan memang berbeda, menu ini juga dilengkapi gambar thumbnail pada item-item isi menu, seperti pada menu NewPosts atau pada New Comment. Cara buatnya pun cukup mudah dan tanpa edit HTML template sama seperti menu tab view yang pertama.

Disini banyak menggunakan warna background yang calm atau bisa dirubah warna ekstreem seperti merah misalnya. Pada HTML-nya menggunakan wrap sama dengan yang pertama disini dinamai "Page", dan fungsi scroll pada setiap bagain page menu tab. Juga pada Javascript dan jQuery terdiri dari beberapa script yang ringan untuk menu tabnya dan widget isi menu tab. Saya juga memberi widget recent comment dari W2B, mudah-mudahan berhasil diterapkan di semua blog.

Code Source widget Coolest Menu Multi Tab View

Script Menu Tab:

<style>
/*
	 Coolest Menu Tabs View
         Modified by http://problogiz.blogspot.com
*/
/*menu Tab Views*/
div.TabView div.Tabs{width:auto;text-align:center;
}
div.TabView div.Tabs a {background:#8BB8DA;padding:5px;border-radius:5px 5px 0 0;border:3px #ddd;text-decoration: none; font:bold 13px georgia;color:#fff;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #313437;font-style:italic;
}
.Pages {width:auto;height:320px;border:4px double #ddd;background:#8BB8DA;overflow:hidden;margin-top:6px;color:#000;
}
.Page {width:auto;height:300px;overflow:auto;
}
.Page a{color:#fff;
}
/*NEW POST*/
#rp_plus_img{width:auto;height:300px;overflow:hidden;font-size:14px;color:#fff;padding:5px;
}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;
}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;
}
#rp_plus_img li{height:48px;padding:5px;list-style:none;border-radius:10px;border:1px solid #fff;-moz-box-shadow:inset 0 0 30px #000;-webkit-box-shadow:inset 0 0 30px #000;box-shadow:inset 0 0 30px #000;
}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold;text-align:center;text-transform:uppercase;
}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal;color:#000;text-align:left;text-transform:capitalize;
}
#rp_plus_img img{float:left;margin-right:14px;padding:2px;width:40px;height:35px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:4px double #fff;
}
/*Archive*/
.judul-label{background-color:#424242;text-align: center;padding:5px;font:bold 16px Baumans;text-transform:uppercase;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 10px #fff;-moz-box-shadow:1px 1px 10px #fff;box-shadow:0 1px 10px #fff;color:#ddd;border:2px solid #fff;
}
.data-list a{font-size:14px;
}
/*Koment*/
    ul.w2b_recent_comments {
    list-style: none;padding:5px;
    }
    .w2b_recent_comments li {
    background:#ddd;
    margin:6px !important;
    padding:6px !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
    border-radius: 10px;
    border:1px solid #000;
    }
    .w2b_recent_comments li .avatarImage {
    padding: 3px;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
    }
    .avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border:2px solid #000;
    box-shadow:inset 0 0 10px #000,0 0 10px #000;
    }
    .w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
    }
    .w2b_recent_comments li span {
    margin-top: 4px;
    color: #000;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    }
</style>

<script src="https://problogizjs.googlecode.com/files/cooltabmenu.js" type="text/javascript">
</script>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs">
<a>NEW POST</a><a>CATEGORY</a><a>NEW COMMENT</a></div>
<div class="Pages">
<div class="Page">
<script src='https://problogizjs.googlecode.com/files/rpthumb.js' type='text/javascript'>
</script>
<ul id='rp_plus_img'><script>
var numposts = 6;
var numchars = 70;
</script> <script src='http://problogiz.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt'>
</script></ul>
</div>

<div class="Page">
<script src='https://problogizjs.googlecode.com/files/problogiz.toc.js'></script>
<script src='http://problogiz.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc'></script><script type='text/javascript'>var accToc=true;</script>
</div>
<div class="Page">
<script src="https://problogizjs.googlecode.com/files/commentbaru.js" type="text/javascript">
</script>
<script src="http://problogiz.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=5" type="text/javascript"></script>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</form>

note:

ganti code warna pink dengan Url Blog kamu
sesuaikan "width" yang warna biru dengan blog
sesuaikan "background-color" yang berwarna merah dengan blog
jika Anda ingin memasangnya di sidebar atur "width" sesuai ukuran sidebar atau buat semua menjadi "auto"

Akhirnya selesai tutorial 2 Style Menu Multi Tab View Keren dari saya, dengan harapan agar dapat membantu memberi sentuhan desain baru di Blog Sobat Blogger. Selamat mencoba, dan jangan lewatkan update desain-desain blog terbaru di waktu yang akan datang dari Problogiz.

Salam,

Untuk mempermudah Anda mengedit melihat hasil atau test menu tab diatas cobalah gunakan CSS/Editor Tool kami.

18 komentar

Anonim

2 Mei 2013 pukul 08.25

thanks banget tutornya sob... aq lagi nyari2 info ini. Tutorialnya lengkap n jelas. Mudah2an lancar aq pasang yah.. mau aq coba nih...

Unknown Author

2 Mei 2013 pukul 09.58

Salam bro, mantap bro artikel nya, buat nambah pengetahuan ku.

2 Mei 2013 pukul 12.28

ky gitu gamabr untuk menu bisa d buat sendiri yah,, kunjungan perdana gan,, di tunggu kunjungna na

cillasmartcorp

2 Mei 2013 pukul 14.49

Tutorial yang mantap mas bro... bisa dipraktekan nih...

2 Mei 2013 pukul 22.25

Selamat Malam Sobat, Izinkan saya untuk membaca isi postingan blog mu ya..

Jangan lupa anda mampir ke blog saya yang sederhana...

Oiya Kalo bisa sihh Klik juga G+ nya...

Makasih Sebelumnya..

Selamat malam, selamat beristirahat...

3 Mei 2013 pukul 00.49

sama2 sob, silahkan dicoba dulu

3 Mei 2013 pukul 00.56

@Saiful Anas
iya silahkan, siap ke blog Anda nanti juga saya akan klik G+-nya:)
thanks

@Budi Siswanto
terima kasih sob, silahkan dicoba

@i putu febri aditia
menunya tidak pake gambar tapi CSS aja, Anda bisa edit sesuka Anda:)

@TCC Sampit
Thanks sob, semoga bisa membantu

beginerblog

3 Mei 2013 pukul 04.33

wah mantab sekali infonya.....
saya izin coba dulu di blg saya yang baru ya,,,,

Hari Muhlia

3 Mei 2013 pukul 07.40

oke sob,,,kapan2 ijin share nya

3 Mei 2013 pukul 15.20

Mantab buat diblog saya nihh..

Jangan Lupa Koment Back ya Sobat...

Oiya Jangan Lupa Klik G+ nya ya Makaish Sebelumnya....

3 Mei 2013 pukul 15.27

@Saiful Anas
sip mas, saya sudah keblog Anda juga share n klikG+ post joke2 Anda
salam semoga sukses

@tolongbaca.co.in
sip, silahkan dicoba
nanti saya berkunjung

@Hary Muhlia, @I Putu Sumahendra
silahkan mas dicoba
thanks udh berkunjung

9 Juni 2013 pukul 01.00

mau tanya ni gan ..
kalo bikin menu home,daftar isi , tutorial,optimasi blog .. kayak punya agan gmn ya ,,
soal nya keren abis ,,..

please

9 Juni 2013 pukul 03.44

banyak artikel tentang menu mas di blog ini, silahkan dicek aja ya.
klo ingin yang seperti saya, nanti saya bagikan artikelnya

Ahmad Maryuki

31 Juli 2013 pukul 22.55

mau tanya, jika ingin mengganti warna pada judulnya gimana ya? itu kan sudah berubah warna kan? saya ingin menambah menu lagi dengan berbeda warna pula. thanks

ajibondhankottama

14 September 2013 pukul 12.57

thanks sob, ijin ngopi kode recent post sama recent comment ya ,,