Menu Tab Autoopen dengan 10 Recent Post dan 10 Recent Comments di blooger

Untuk menghemat tempat dan sekaligus agar blog kita terlihat lebih bagus kita membutuhkan menu tab untuk ditampilkan di halaman blog. cara memasangnya juga tidak terlalu sulit. berikut ini langkah-langkah untuk membuat menutab seperti ini :

 

1. Login Ke dahsbord bolgger anda –> Layout –> Edit HTML
2. Masukan kode CSS di bawah ini diantara <b:skin><![CDATA[/* dan ]]></b:skin>

   /* tabs--*/

   div.TabTampil div.TTs
   {margin-top:1em; height: 30px; overflow: hidden; }
   div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
   {color:red;height: 28px; background-color:  #ffffff; }
   div.TabTampil div.Halamans
   { clear: both; border:1px solid #DDDDDD; overflow: hidden; background-color: #ffffff;}
   div.TabTampil div.Halamans div.Halaman
   { height: 100%; padding: 0px; overflow: hidden; }
   div.TabTampil div.Halamans div.Halaman div.Alas
   { padding: 3px 5px; }
   div.TabTampil div.TTs a
   { background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBvQJOeM1ykFCIt3Bd0m0pQCrvkVEjNs1TzoBCeYuidoyr6NLD2vOcydWKB4WpZ5MBDAvLg0uVwyDfUJf4Wko9AN_XvCWY2saWKbiOfoAPNeXlh1MkThKeZj6sI5024bTgvkuxPUsiR4h/s800/post_top.gif) no-repeat scroll center top; border-left:1px solid  #DDDDDD; border-right:1px solid  #DDDDDD; border-top:1px solid #DDDDDD; border-bottom:0px solid  #DDDDDD; float: left;
   display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
   font-size: 12px; font-weight: 900; color: #222}

3. Masukkan Kode javascript berikut sebelum tag </head> 
   , kode javascript ini yang akan mengambil 10 recent posts dan 10 rcent comments dari blog anda
   
   

   <script type='text/javascript'>
   //credit to hoctro. code to create top recent posts
   function c1(){document.getElementById(&#39;link_page&#39;).onclick();}
   function rp(json) {
   document.write(&#39;&lt;ul&gt;&#39;);for (var i = 0; i &lt; numposts; i++) {
   document.write(&#39;&lt;li&gt;&#39;);
   var entry = json.feed.entry[i];
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k &lt; entry.link.length; k++) {
   if (entry.link[k].rel == &#39;alternate&#39;) {
   posturl = entry.link[k].href;
   break;
   } }
   var posttitle = entry.title.$t;
   posttitle = posttitle.link(posturl);
   var readmorelink = &quot;(more)&quot;;
   readmorelink = readmorelink.link(posturl);
   var postdate = entry.published.$t;
   var cdyear = postdate.substring(0,4);
   var cdmonth = postdate.substring(5,7);
   var cdday = postdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = &quot;Jan&quot;;
   monthnames[2] = &quot;Feb&quot;;
   monthnames[3] = &quot;Mar&quot;;
   monthnames[4] = &quot;Apr&quot;;
   monthnames[5] = &quot;May&quot;;
   monthnames[6] = &quot;Jun&quot;;
   monthnames[7] = &quot;Jul&quot;;
   monthnames[8] = &quot;Aug&quot;;
   monthnames[9] = &quot;Sep&quot;;
   monthnames[10] = &quot;Oct&quot;;
   monthnames[11] = &quot;Nov&quot;;
   monthnames[12] = &quot;Dec&quot;;
   if (&quot;content&quot; in entry) {
   var postcontent = entry.content.$t;
   } else if (&quot;summary&quot; in entry) {
   var postcontent = entry.summary.$t;
   } else
   var postcontent = &quot;&quot;;
   var re = /&lt;\S[^&gt;]*&gt;/g;
   postcontent = postcontent.replace(re, &quot;&quot;);
   document.write(posttitle);
   if (showpostdate == true) document.write(&#39; - &#39; + monthnames[parseInt(cdmonth,10)] + &#39; &#39; + cdday);
   if (showpostsummary == true) {
   if (postcontent.length &lt; numchars) {
   document.write(postcontent);
   } else {
   postcontent = postcontent.substring(0, numchars);
   var quoteEnd = postcontent.lastIndexOf(&quot; &quot;);
   postcontent = postcontent.substring(0,quoteEnd);
   document.write(postcontent + &#39;...&#39; + readmorelink);
   } }
   document.write(&#39;&lt;/li&gt;&#39;);
   }
   document.write(&#39;&lt;/ul&gt;&#39;);
   }

   var numposts = 10; 
   var showpostdate = false; 
   var showpostsummary = false; 
   var numchars = 200;
   </script> 

4. Masukan Kode berikut pada bagian yang akan anda pasang widget ini : misalnya setelah kode <div id='sidebar-wrapper'>
   
   

   <form action='tabtampil.html' method='get'>
   <div class='TabTampil' id='TabTampil'>
   <div class='TTs' style='width: 350px;'> <a onmouseover='tabtampil_ubah(&quot;TabTampil&quot;,1);'> Recent Post</a> <a href='#' onmouseover='tabtampil_ubah(&quot;TabTampil&quot;,2);'> Comments</a> <a href='#' onmouseover='tabtampil_ubah(&quot;TabTampil&quot;,3);'> Links</a></div>
   <div class='Halamans' style='width: 350px; height: 300px;'>
   <div class='Halaman'>
   <div class='Alas'>
   <b:section class='tabcontent' id='recpost' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML233' locked='false' title='10 Recent Post' type='HTML'/>
   </b:section>
   </div>
   </div>

   <div class='Halaman'>
   <div class='Alas'>
   <b:section class='tabcontent' id='reccom' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML3' locked='false' title='10 Recent Comments' type='HTML'/>
   </b:section>
   </div>
   </div>

   <div class='Halaman'>
   <div class='Alas'>
   <b:section class='tabcontent' id='reccon' maxwidgets='1' showaddelement='no'>
   <b:widget id='HTML5' locked='false' title='Friends Links' type='HTML'/>
   </b:section>
   </div>

   </div>
   </div>

   </div></form>
   <script src='http://menutab-c11774.googlecode.com/files/newscriptab.js' style='text/javascript'/>
   <script type='text/javascript'>tabtampil_inisial(&#39;TabTampil&#39;);</script>

   
   

5. Selamat Mencoba
   
   mohon maaf jika script yang saya tampilkan sebelumnya bermasalah yang disebabkan oleh kesalahan penggunaab syntax highlighter
   
   
   

Baca Juga

Cari yang lain: