TUTORIAL BLOG GUAH

Malam ini saya akan bagi lagi dua buah template untuk teman-teman blogger semua. Template ini sudah lama saya buat, waktu bulan puasa kemarin, pas waktu itu lagi sibuk ngurus kerjaan ya jadinya baru sekarang sempat di publish. Sudah agak lama, ya kira-kira satu bulan kalau tidak salah saya tidak berbagi template untuk teman-teman blogger. Saya rencana mau membuat template blogger sampai jumlahnya sekitar seratus, setelah itu saya berpikir untuk memutuskan mencoba membuat theme untuk Wordpress, ya itu sih hanya rencana saja realisasinya tergantung bagaimana nanti, karena membuat theme untuk Wordpress di samping butuh pengetahuan tentang kode script yang lebih, juga dibutuhkan banyak biaya, seperti mesti punya domain dan hosting sendiri dengan kapasitas yang besar.

Kedua template ini mempunyai header dan navigasi yang sama hanya berbeda warna, untuk template yang satu bertipe magazine dan satunya lagi template dua kolom, lebih sederhana dan tidak terlalu sulit untuk memasangnya. Baiklah langsung saja, berikut ini kedua template tersebut :

Johny Sompret Banget

Demo | Download

Jika Anda ingin menyimpan semua javascript yang ada pada template ini silahkan klik link download di bawah ini :

Download Javascript

Template ini bertipe magazine, banyak sekali fitur yang saya pasang pada template ini. Tidak terlalu susah untuk memasangnya, apalagi jika Anda sudah tebiasa dengan template buatan saya akan sangat mudah untuk memahaminya. Untuk lebih memudahkan dalam pemasangan widget pada template ini perhatikan screenshot layout di bawah ini :

Saya sengaja menggunakan layout Old Blogger Interface untuk memudahkan semua tampilan, soalnya kalau layout blogger baru ada fitur scroll-nya jadi tidak bisa sampai ke bawah. Berikut ini cara pemasangan fitur-fitur yang ada pada template ini :

1. Slider
   
   Slider pada template ini bekerja otomatis menampilkan postingan terbaru, Cara memasangnya, perhatikan kolom pada layout diatas yang sudah saya beri tulisan slider. Setelah itu masukkan kode berikut ini ke dalamnya :
   <div id='featuredContent'>
   <div id='slideshow'>
   <div id='slideshowThumbs'>
   <ul><script>    
   document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
   </script> </ul>
   </div>
   <div class='post' id='slideshowContent'>
   <script>    
   document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
   </script></div>
   </div>
   <script type='text/javascript'>
   $(function() {
   $("#slideshowThumbs ul").tabs("#slideshowContent > div", {
   effect: 'fade',
   fadeOutSpeed: 1000,
   rotate: true
   }).slideshow({
   clickable: true,
   autoplay: true,
   interval: 3000
   });
   });
   </script>
   <div class='clear'>
   </div>
   </div>
2. Tab View Widget per Label
   
   
   
   
   
   Perhatikan gambar diatas, untuk merubah judul tab (diary, jazz dan sebagainya) cari kode berikut ini di Edit HTML :

   Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"

   Setelah ketemu ganti tulisan berwarna biru diatas dengan judul yang ingin Anda tampilkan pada tab view widget kategori.
   
   Sedangkan untuk mengisi widget tersebut dengan label, masih pada Edit HTML cari kode berikut ini (jangan lupa untuk mencentang expand widget template) :
   
   <div class='tabber' id='tab1'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab2'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/lifestyle?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab3'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/economics?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab4'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/diary?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='tabber' id='tab5'>
   <script>
   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/health?max-results=&quot;+numposts9+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts9\&quot;&gt;&lt;\/script&gt;&quot;);
   </script></div>
   <div class='clear'>
   </div>
   Tulisan warna merah diatas adalah kelima label yang saya masukkan pada widget tabber kategori ini, silahkan Anda ganti dengan label Anda dan sesuaikan dengan judul tab view yang sudah dibuat.
3. Widget Label
   
   Yang termasuk dalam widget label pada layout template ini adalah : Label 1, Label 2, Label 4, Label 4, Label 5 dan Video Category. Anda tinggal memasukkan atau ketik nama label yang sudah Anda buat pada kotak tersebut. Seperti contoh gambar di bawah :
   
4. Widget Subscribe me
   
   Letaknya pada sidebar sebelah kanan paling atas, masih di layout kemudian pilih kotak HTML/Javascript kemudian masukkan kode berikut ini di dalamnya :
   <style type='text/css'>
   .social a{color: #6e6e6e;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
   .social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
   .social a:active{color:#000;border-color: #444;}
   .sub-box{width:300px;background:();padding: 2px 5px 7px 2px;font-family:Droid Sans,Helvetica,Arial;}
   .emailform{margin:16px 0 0; display:block; clear:both;}
   .emailtext{margin:10px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipW3b9GiUuKZbFLiHPrOVey67Dt_8I_Yx065vm1BybBahwev9Ujl8Xam03S2hcDemh1TOtFz7_azB45OR18JMCjB7BTD31leYWK1ScYiq288os19qLjXekKdKPtU2rEajPB5RBmZIzisY/s1600/email.png) no-repeat scroll 4px center;padding:6px 5px 6px 34px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:175px;}
   .emailtext:hover{background: #f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipW3b9GiUuKZbFLiHPrOVey67Dt_8I_Yx065vm1BybBahwev9Ujl8Xam03S2hcDemh1TOtFz7_azB45OR18JMCjB7BTD31leYWK1ScYiq288os19qLjXekKdKPtU2rEajPB5RBmZIzisY/s1600/email.png) no-repeat scroll 4px center;border-color:#999;}
   .emailtext:focus{outline:none;}
   .sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:5px 10px; border:1px solid #666;cursor:pointer;background:#999}
   .sub-button:hover{color:#444;border-color: #999;background:#ccc}
   </style>
   <center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
   <table><tbody><tr><td>
   <a href='http://feedburner.google.com/fb/a/mailverify?uri=maskolis' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw1gGYEuucghRn1UvimW0j1c1ZvZYs-lhW-AR0Obk7HAEujKQ-eQOP-VkUjqCesW48Fb8g7ux_9dkH-8sRmMF-0GxDHW2IAkC14DrC3zwYPAmC8Jwu-Rxo2CO4wP71eIgz9CjTay0I-3k/s1600/mail.png" border="0" title='newsletters'/></a> </td>
   <td> <a href='http://feeds.feedburner.com/maskolis' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigKA51e04YUqbBIlFp9JXRP7KH2oUgfMrUuhyphenhyphenKVzzLNz1OXsdqw8TbIEzo0bASJy9MK0bnRd_sFTD_2xZVq7q3QTiCkB-OiJxQcT4zIQr8DY1vqycHr6YF2wIDmnY7CfAHS4wUItVQbQc/s1600/rss.png" border="0" title='rss'/></a> </td>
   <td> <a href='http://twitter.com/maskolis' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-iY5OtxksXIpzkN5zRbzjq3nxngpnogXN1nV2ORKnwuy7Vmml4bV631jc4qu5L0jddFMB8Uhs9nj3ZxzWhhGiYRMaq9yKgDnAfFz6vXAtbl_smAWHVBMQugOxPrbDYJy-jd2VwpuBfg/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
   <td> <a href='http://www.facebook.com/maskolis' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3CNh0PPnrUupFjrdPbD2e_0SaKf7Gj1uS3KPsqZwonpvQ1OX-eH5iBs4H8JOQckXJhGJZEsh90IOt1pD5mqbBdSLqBtE8YcomdXdtpemVysbflRAuKMOaUSFhFeQYdCFUAoJPJJajgc/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
   <td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0sTxPJce3o1yLVGiXYmoU9xHiqQcudAuB267ELhXsJB9be0iGjVT-IzGoQ5m7gZj08IfekaodrN7hk7xpGxSc6qZUtybnB51yuRpd8amLXW3DN3Hx7WRWnDGCj6Wz87Rfcc9rZoTcGKU/s1600/youtube.png"  border="0" title='youtube'/></a>
   </td></tr></tbody></table> </div></center>
   <center>
   <div class='sub-box'>
   <div style="text-align: left; display: inline-block;">
   <h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
   <small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'>
   <b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maskolis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <input type="hidden" value="maskolis" name="uri"/>
   <input type="hidden" name="loc" value="fr_FR" />
   <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
   <input type="submit" class="sub-button" value="Enter" title='' alt='' />
   </form></div></div></center>
5. Reply Comment
   
   Untuk mengaktifkan fungsi reply pada komantar pada template ini, ganti Blog ID pada template ini pada Edit HTML (jangan lupa centang expand widget template) : 6056708173853814595 setelah ketemu ganti dengan blog ID anda

Johny Ganteng Banget

Demo | Download

Download Javascript

Bagi Anda yang menginginkan tampilan seperti template Johny Sompret Banget tapi dengan bentuk lebih sederhana dan lebih ringan yang pasti, saya juga menyiapkan satu lagi template yang bisa anda gunakan. Template ini dinamakan demikian karena disesuaikan dengan yang bikin.... hehehehehe. Pada template ini hanya ada dua fitur yang Anda perlu diperhatikan, yaitu :

1. Recent Post
   
   Terdapat pada sidebar kanan paling atas, cara pasanganya, masuk ke layout kemudian pilih HTML/Javascript kemudian masukkan kode berikut ini ke dalamnya :
   <style type='text/css'>
   #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
   #terbaru{margin:0px}
   .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
   .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
   .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
   .mas-elemen:hover{background-color:#c3c3c3}
   .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
   #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4SI1pBz37ywtOOGa-dSVxhKdk2IHg1GnhtebP-ndMLHz4q30jd3Hh4YfilHcvlZnu8JwHiGT3T07S_EVmAxO0EgDw_P3u8SB1hI6wEp8op_oDA3J-HC-SbE6qM4TC1y6BeeDmXxIsgrw/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
   #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
   #mas-navigasifeed:hover{background-color:#c3c3c3}
   #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
   #mas-navigasifeed span{padding:5px 10px}
   #mas-navigasifeed .next{float:right}
   #mas-navigasifeed .previous{float:left}
   #mas-navigasifeed .home{text-align:center}
   #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
   </style>
   <script type='text/javascript'>
   //<![CDATA[
   var numfeed = 5;
   var startfeed = 0;
   var urlblog = "http://johny-gantengbanget.blogspot.com/";
   var charac = 100;
   var urlprevious, urlnext;
   
   function maskolisfeed(johny,banget){
   var showfeed = johny.split("<");
   for(var i=0;i<showfeed.length;i++){
   if(showfeed[i].indexOf(">")!=-1){
   showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
   }
   }
   showfeed =  showfeed.join("");
   showfeed = showfeed.substring(0,banget-1);
   return showfeed;
   }
   function showterbaru(json) {
   var entry, posttitle, posturl, postimg, postcontent;
   var showblogfeed = "";
   urlprevious = "";
   urlnext = "";
   for (var k = 0; k < json.feed.link.length; k++) {
   if (json.feed.link[k].rel == 'previous') {
   urlprevious = json.feed.link[k].href;
   }
   if (json.feed.link[k].rel == 'next') {
   urlnext = json.feed.link[k].href;
   }
   }
   for (var i = 0; i < numfeed; i++) {
   if (i == json.feed.entry.length) { break; }
   entry = json.feed.entry[i];
   posttitle = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   if ("content" in entry) {
   postcontent = entry.content.$t;
   } else if ("summary" in entry) {
   postcontent = entry.summary.$t;
   } else {
   postcontent = "";
   }
   if ("media$thumbnail" in entry) {
   postimg = entry.media$thumbnail.url;
   } else {
   postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijvgyEQ0F9asOxKovBERAS4lPRs8klkUi4BZ6NEr0L8dFQhPHZDRVf9PWk0VZrng4I41T59s9KrHNIzooxdec-3uFzMpyw3pmfUR2l3wT0lIq0M9wC6fj6SP-cDPSafx_hIAw5w-_UGoI/s1600/no+image.jpg";
   }
   showblogfeed += "<div class='mas-elemen'>";
   showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
   showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
   showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
   showblogfeed += "</div>";
   }
   document.getElementById("terbaru").innerHTML = showblogfeed;
   showblogfeed = "";
   if(urlprevious) {
   showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
   } else {
   showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
   }
   if(urlnext) {
   showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
   } else {
   showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
   }
   showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
   document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
   }
   
   function navigasifeed(url){
   var p, parameter;
   if(url==-1) {
   p = urlprevious.indexOf("?");
   parameter = urlprevious.substring(p);
   } else if (url==1) {
   p = urlnext.indexOf("?");
   parameter = urlnext.substring(p);
   } else {
   parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
   }
   parameter += "&callback=showterbaru";
   incluirscript(parameter);
   }
   function incluirscript(parameter) {
   if(startfeed==1) {removerscript();}
   document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
   document.getElementById("mas-navigasifeed").innerHTML = "";
   var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
   var terbaru = document.createElement('script');
   terbaru.setAttribute('type', 'text/javascript');
   terbaru.setAttribute('src', archievefeed);
   terbaru.setAttribute('id', 'MASLABEL');
   document.getElementsByTagName('head')[0].appendChild(terbaru);
   startfeed = 1;
   }
   function removerscript() {
   var elemen = document.getElementById("MASLABEL");
   var parent = elemen.parentNode;
   parent.removeChild(elemen);
   }
   onload=function() { navigasifeed(0); }
   //]]>
   </script>
   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>
2. Reply Comment
   
   Untuk mengaktifkan fungsi reply pada komantar pada template ini, ganti Blog ID pada template ini pada Edit HTML (jangan lupa centang expand widget template) : 149656394876047094 setelah ketemu ganti dengan blog ID anda.

Itu tadi dua template kurang kerjaan yang saya bagikan malam ini sambil sesekali ngantuk, saya bagikan kepada semua teman blogger di seluruh dunia secara gratis, silahkan dipakai atau di download jika Anda berminat. Jika ada hal lain tentang kedua template diatas yang kurang jelas, silahkan tinggalkan komentar, saya berusaha sebisa mungkin untuk menjawab. Akhir kata selamat mencoba semoga bermanfaat