Mas Paper Magazine 2 Blogger Template Mas Paper Magazine 2 Blogger Template

Demo | Download

Fitur :

1. Slider carousel dan featured slider otomatis
2. Multi level drop down menu.
3. Automatic widget per category
4. Pagination ready
5. Ads ready dan widget twitter
6. Dan masih banyak lagi

Slider

Menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :

<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>

Keterangan :

Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.

Widget Label

Perhatikan layout template diatas, untuk kolom Your label here, Label 1, Label 2, Label 3 sampai dengan Label 6 Anda tinggal masukkan label pada kotak HTML/Javascript seperti contoh gambar di bawah ini :

Untuk contoh dari gambar diatas, label 3 Anda ganti dengan judul widget. entertainment silahkan diganti dengan label Anda sendiri. Perlu diingat besar kecil huruf harus sama dengan label yang sudah Anda buat sebelumnya.

Twitter Widget

Untuk membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZWxZejFeWk5GH3oio0vd0m8u8VZTmFPdAJoTYTFVvXhXjhVOJez3sS3B0TtfYTEy5APUMB3S1WXUNwmbxnpRxO_FXQrMKyD0A9HzEKp9RP-8zHa-97iZc_1r3jOwT9PyoJEjoMT0h1Ps/s1600/tweet.png) no-repeat;padding-top:45px;padding-left:8px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 123,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#135a9e'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('maskolis').start();
</script>
</div>

Ganti maskolis dengan twitter username anda.

Mohon maaf sebelumnya karena buru-buru soalnya disuruh bos ke bandara jemput tamu penting katanya. jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Sementara itu aja dulu, nanti malam disambung lagi.

Penting :

Isi semua Label 1 sampai dengan Label 6 dan  usahakan dalam meletakkan label, pilih yang jumlahnya minimal 5. Sehingga untuk blog yang baru dan belum memiliki banyak postingan,  penataan widget akan tersusun ke bawah, jadi perbanyak postingan dan label terlebih dahulu sebelum mengajukan pertanyaan lainnya.

Pesan dari bang Johny :
Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa

Salam - Johny Template

Template Mas Paper 2 warna yang gelap, baru diproses

Update Templates

My Google Code was banned again, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Read More --►

Membuat Slider Otomatis Sporty Magazine 2 Template Membuat Slider Otomatis Sporty Magazine 2 Template

Tutorial kali ini menjawab pertanyaan dari Mr. Copas pada artikel membuat Image Slider Otomatis, yang menginginkan slider pada template Sporty Magazine 2 made in Borneo Templates yang dipakainya menjadi otomatis. Ketika saya berselancar atau bahasa kerennya surfing di internet, beberapa kali menemukan banyak sekali pengguna template ini baik dari dalam maupun dari luar negeri. Template ini memang fenomenal dan banyak sekali peminatnya, dengan tampilan dasar mirip nbcsports.msnbc.com, template ini menjadi salah satu template blogger dengan pengguna paling banyak.

Pada kesempatan kali ini saya akan mencoba untuk membuat slider bawaan dari template tersebut yang masih mengisikan URL dan keterangan slider satu persatu, menjadi otomatis. Tinggal memasukkan beberapa kode ke kotak HTML/Javascript dengan merubah label tertentu, maka slider pada template ini menjadi otomatis, Sehingga setiap postingan baru dengan label yang diletakkan pada slider, secara otomatis akan muncul.

DEMO

Langsung saja pada langkah pembuatannya :

1. Masuk ke Blogger dengan akun anda
2. Di dashboard pilih blog, kemudian pilih template >> Edit HTML. Jangan lupa untuk mencentang kotak Expand Widget Templates.
3. Setelah itu letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #featured{width:640px;height:250px;position:relative;margin:0;padding:0}
   #featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
   #featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
   #featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
   #featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
   #featured .ui-tabs-panel img{width:400px;height:250px}
   #featured .ui-tabs-hide{display:none}
   #featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
   #featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
   #featured li.ui-tabs-selected{position:absolute}
   #featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
   #featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
   #featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
   #featured .info a{text-decoration:none;color:#eee}
   #featured .info a:hover{color:#FE9A2E;text-decoration:underline}
   #featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
   #featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}
   Catatan :
   
   Bagi pengguna template Sporty Magazine 2 langkah itu tidak perlu dilakukan karena kode ini sudah ada. Untuk pengguna template lain, silahkan ukurannya disesuaikan.
4. Masih dalam posisi Edit HTML, letakkan kode berikut diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>
   
   <script type='text/javascript'>
       $(document).ready(function(){
           $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
       });
   </script>
   
   <script type='text/javascript'>
   //<![CDATA[
      imgr = new Array();
   
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
   
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 70;
   summaryTitle = 20;
   
   numposts1 = 4;
   
   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 showrecentposts4(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;
   
       //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
       var month = [1,2,3,4,5,6,7,8,9,10,11,12];
       var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
       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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
   
   
       var trtd = '<div class="ui-tabs-panel ui-tabs-hide" id="post-'+i+'"><a href="'+posturl+'"><img width="400" height="246" src="'+img[i]+'"/></a><div class="info"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...<a href="'+posturl+'"></a></p></div></div>';
   
       document.write(trtd);
   
       j++;
   }
   
   }
   
   function showrecentposts5(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;
   
       //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
       var month = [1,2,3,4,5,6,7,8,9,10,11,12];
       var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
       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 = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
   
   
       var trtd = '<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="80" height="50" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';
   
       document.write(trtd);
   
       j++;
   }
   
   }
   
    //]]>
   </script>
   Catatan :
   
   Untuk pengguna template Sporty Magazine 2, hapus dulu kode script bawaan slider, kemudian baru letakkan kode diatas.
5. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
   <div id='featured'>
   <ul class="ui-tabs-nav">
   <script>
   document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
   </script>
   </ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.
6. Untuk pengguna template Sporty Magazine 2, tinggal memasukkan kode diatas pada kolom kosong diatas blog post (kalau tidak salah... hehehe). Dan untuk pengguna lain mesti buat dulu satu kolom diatas blog post. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

7. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

   

Selamat mencoba dan semoga bermanfaat.

Read More --►

Membuat Static Page pada Template Magazine Membuat Static Page pada Template Magazine

Postingan kali ini saya tulis khusus untuk pengguna template blogger magazine buatan saya dan mungkin bisa juga dipakai untuk template lain yang tampilannya magazine. Banyak sekali yang bertanya lewat kotak komentar maupun email tentang bagaimana menambahkan halaman statis (static page) pada template tersebut. Mohon maaf karena kesibukan di dunia nyata saya tidak sempat bereksperimen untuk menambahkan fitur static page, baru sekarang saya mengutak-atik template dan menambahkan statc page pada template-template magazine tersebut.

Tutorial membuat static page pada template blogger style magazine ini sudah saya coba dan terapkan disini, dan yang jelas pasti akan saya bagikan penemuan saya ini kepada para teman-teman blogger pengguna template magazine. Oke langsung saja pada cara pembuatannya :

1. Langkah awal login ke blogger dengan Akun anda.
2. Masuk ke Template kemudian klik Edit HTML
3. Jangan lupa untuk mencentang kotak expand widget templates, dan untuk berjaga-jaga backup dulu template Anda.
4. Kemudian cari kode seperti dibawah ini, letaknya dibawah ]]></b:skin> :
   

   <style type='text/css'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   

   #main-wrapper {width: 370px;padding-left:10px;}

   h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}

   .post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6DNymFYMnbqrndevgeuToZOyBBfDYAKGcZm2EN00FbJVot_ZzE-A_KEWRvk0eo75oECUTIOBB6WylKWSmFGH33m-R2YN_oUmWz1BZYv0AtJUYVaknB_mhzd1nkErBnJ0_G7X1GOdllus/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}

   .post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}

   .post h3 strong, .post h3 a:hover {color:#FF8000;}

   .post {border:none}

   .post {border-bottom:1px dotted silver;margin:0px;padding:0px;}

   #blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}

   </b:if>
   </style>

5. Yang harus Anda perhatikan adalah kode diatas yang berwarna merah, kode lain (yang berwarna hitam) berbeda-beda tiap template. Ganti kode warna merah dengan kode berikut :
   

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style type='text/css'>
   ...................................
   ...................................
   ...................................
   </style>
   </b:if></b:if>

   Sehingga susunannya akan seperti ini :
   

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <style type='text/css'>

   #main-wrapper {width: 370px;padding-left:10px;}

   h2.date-header, .post-timestamp, .post-body, .post-footer, .feed-links {display:none}

   .post h3 {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6DNymFYMnbqrndevgeuToZOyBBfDYAKGcZm2EN00FbJVot_ZzE-A_KEWRvk0eo75oECUTIOBB6WylKWSmFGH33m-R2YN_oUmWz1BZYv0AtJUYVaknB_mhzd1nkErBnJ0_G7X1GOdllus/s1600/arrowList_2.gif) no-repeat 0px 3px;font:normal 12px Arial;margin:0 0 0 2px;padding:4px 6px 4px 15px;line-height:1.3em;position:relative;}

   .post h3 a, .post h3 a:visited, .post h3 strong {font-weight:normal}

   .post h3 strong, .post h3 a:hover {color:#FF8000;}

   .post {border:none}

   .post {border-bottom:1px dotted silver;margin:0px;padding:0px;}

   #blog-pager {font:normal 11px Arial;text-align:left;margin:6px 0 1px 0;padding:7px 0px 7px 0px;}

   </style>
   </b:if></b:if>

6. Masih pada posisi Edit HTML, scroll jauh ke bawah temukan kode berikut ini :
   

       <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
   <div id='artikel'>
         <data:post.body/>
   </div>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

7. Kode yang saya cetak tebal diatas, tiap template berbeda-beda, setelah ketemu ganti dengan kode di bawah ini :
   

       <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:blog.pageType != &quot;static_page&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>
   </b:if>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>

8. Terakhir Save Templates, langkah membuat static page selesai.

Sebenarnya sampai pada langkah ini static page (halaman statis) pada template Anda sudah muncul. Tapi biasanya widget yang ada di tengah atau disebelah postingan terbaru akan nampak pada halaman statis. Untuk menghilangkan widget tersebut dari halaman statis ikuti langkah di bawah ini :

1. Pada posisi Edit HTML (centang expand widget templates) cari dulu ID widget yang ikut muncul pada halaman statis. Di bawah ini adalah contoh dari ID widget (perhatikan kode yang dicetak tebal)

   <b:section class='sidebarleft' id='sidebarleft' preferred='yes'>

   Sebagai contoh saya ambil dari template Johny Simple Magazine 2, widget Adsense dan World News mempunyai ID : sidebarleft
2. Setelah itu cari kode <div id='sidebarleft-wrapper'>, kemudian tambahkan kode berikut ini diatasnya :
   

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

3. Scroll ke bawah sampai Anda menemukan kode </div> penutup dari <div id='sidebarleft-wrapper'>. Kemudian letakkan kode </b:if> di bawahnya sebagai penutup. Susunannya seperti ini :
   

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
         <div id='sidebarleft-wrapper'>
   ........................................................
   ........................................................
   ........................................................
       </div>
   </b:if>

4. Jika Anda ingin format timestamp tidak tampak pada halaman statis, cari kode di bawah ini :
   

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <span class='post-timestamp'><data:post.timestamp/></span>

   </b:if>

5. Ganti dengan kode berikut :
   

   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <span class='post-timestamp'><data:post.timestamp/></span>
   </b:if>
   </b:if>

6. Terakhir Save Templates, langkah membuat statis page untuk template magazine sudah selesai dan lihat hasilnya.

Langkah-langkah diatas saya khususkan bagi para pengguna template magazine buatan saya, seperti Johny Simple Magazine 2, Johny Magazine, Johny Magazine 2 Light, Johny Portal dan Johny Portal 2, Mas Paper Template, Johny Papers Magazine. Silahkan Anda coba dulu jika masih ada kesulitan bisa ditanyakan lewat kotak komentar yang ada di bawah. Demikian tutorial singkat kali ini, selamat mencoba dan semoga bermanfaat.

Read More --►

Membuat Related Post Thumbnail dan Kotak Feedburner Membuat Related Post Thumbnail dan Kotak Feedburner

Artikel ini menjawab pertanyaan beberapa teman blogger yang ingin membuat fitur Related Post Thumbnail sekaligus dengan kotak Feedburner. Fitur related post thumbnail dan kotak feedburner ini menjadi satu bagian utuh dan letaknya biasanya di bawah postingan. Sebelumnya saya juga pernah membahasnya pada tutorial menambah dua kolom di bawah postingan, tapi hasilnya terlalu sederhana dan mungkin kurang menarik bagi minat pengunjung untuk berlama-lama di blog, apalagi perkembangan blogger sekarang ini, banyak sekali tutorial baru dengan menggunakan jQuery sehingga blogger menjadi salah satu CMS yang tidak bisa dipandang sebelah mata.

Sebenarnya saya masih pengin berlama-lama ngobrol ngalor ngidul, tapi karena nanti malam ada pertandingan bola antara Barcelona versus AC Milan mesti cepet-cepet tidur biar bisa bangun nanti malem. Oke langsung saja, saya akan berikan tutorial untuk membuatnya, contohnya seperti gambar diatas demonya bisa dilihat disini di bawah postingan :

1. Pertama Anda mesti login ke blogger dulu
2. Kemudian klik Template > pilih Edit HTML centang expand widget templates
3. Jangan lupa backup dulu templatenya, untuk berjaga-jaga jika nanti ada kesalahan dalam pengeditan.
4. Setelah itu, letakkan kode berikut di atas kode ]]></b:skin>
   
   #related{background:#222; border:1px solid #000; border-bottom:1px solid #444; border-right:1px solid #444;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px}
   ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
   #related .related-posts{font-weight:400;width:50%;float:right}
   #related .related-posts p{margin:0}
   ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
   *html ul.rp#related-posts li{margin:0 13px}
   ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
   ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
   ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
   ul#related-posts li img{bottom:0;padding:0!important}
   ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
   #related .subscribe{width:43%;float:left;color:#bdbdbd;}
   #related .subscribe p.intro{font-weight:400}
   #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Rh9EG1Gmhr59iGOmF_ZavXEhDn2yMAh2vwTOmCJ41mg-j4TgV0dHmPe-5VGbZf-y77d9P5un5-Jqs3egRCoXaCXXqjizvs6mtsAtrynUFDa9y04Iy3oOvwS1YakeQ194E-RY-l-4awU/) 0 50% no-repeat;vertical-align:middle}
   .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
   .clearfix{display:inline-block}
5. Masih pada posisi Edit HTML, letakkan kode di bawah ini setelah <data:post.body/> (jika ada 2 atau 3 pilih kode yang terakhir)
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='clearfix' id='related'>
   <div class='related-posts'>
   <p>Related Articles</p>
   <script type='text/javascript'>
   var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg&quot;;
   var maxresults=6;
   </script>
   <script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
   <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 class='subscribe'>
   <p class='intro'>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.</p>
   <p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
   <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
   <input name='uri' type='hidden' value='JohnyTemplate'/>
   <input name='loc' type='hidden' value='en_US'/>
   <input id='botsub' name='email' 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;;}' type='text' value='Enter your email....'/>
   <input id='botsubbutton' type='submit' value='Submit'/><br/>
   <small>Your information will not be shared. Ever.</small><br/>
   <a href='http://feeds.feedburner.com/JohnyTemplate'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/JohnyTemplate?bg=ceaa6c&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a>
   </form>
   </div>
   </div>
   </b:if>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   Warna merah : ganti dengan URL anda.
   
6. Terakhir Save Templates, dan lihat hasilnya di bawah postingan Anda.

Tutorial membuat fitur related post thumbnail dengan feedburner diatas cocok untuk blog yang mempunyai warna background atau latar hitam. Tapi jika blog Anda mempunyai warna latar putih atau warna cerah anda tinggal modifikasi pada kode CSS nomer 4 diatas. Demikian tutorial kali ini selamat mencoba dan semoga bermanfaat.

Read More --►

Cara Daftar di Technorati Cara Daftar di Technorati

Pertama jangan kasih komentar untuk artikel ini ya, ini hanya artikel agar diterima di Technorati dengan menyertakan claim token dari situs itu dan kalau sudah keterima lagi paling juga saya hapus post ini. Daripada nanti isinya cuma kode claim token aja mending saya repost tulisan ini. Dulu waktu blog ini beralamat http://www.maskolis.co.cc sudah keterima di Technorati, sekarang setelah domain co.cc didepak saya kembalikan blog ini ke blogspot, jadi Technoratinya juga ikut ilang.

Ngomong-ngomong apa Anda sudah mengenal tentang Technorati ? Bagi yang belum mengenalnya, saya akan kasih penjelasan singkat tentang Technorati, Technorati adalah sebuah direktori terbesar saat ini dan memiliki fasilitas/fungsi yang cukup besar yaitu sebagai BlogSearch, Tags Aggregator dan Online Bookmarks. Dengan mendaftar di Technorati, akan meningkatkan traffic pengunjung ke blog kita, dan blog/website yang kita kelola lebih dapat dikenal oleh blogger lain, dan ini pun bisa disebut sebagai salah satu strategi SEO untuk blog/website kita.

Dengan mendaftarkan blog kita di Technorati, kita juga bisa mengetahui situs atau blog mana saja yang memasang link ke blog kita. Untuk mempersingkat waktu, ikuti langkah-langkah di bawah ini untuk mendaftar di Technorati :

• Masuklah ke alamat Technorati.com
• lalu Klik menu Join (seperti gambar dibawah ini :

• Isilah data secara lengkap lalu klik join
• Setelah itu, akan muncul sebuah confirmation code. Lalu cek email anda yang telah didaftarkan di technorati tadi, lalu klik link yang telah diberikan melalui email anda.
• Setelah itu masukan url blog Anda (seperti gambar dibawah ini), dan kemudian klik Begin Claim.

• Setelah itu, Anda tinggal menunggu Proses Claim, dan lakukan Complete Claim seperti gambar dibawah ini :

• Anda akan dihadapkan pada Form seperti ini :

• Salin kode berikut dan publikasikannya dalam sebuah posting di blog Anda. Technorati harus dapat menemukan kode klaim dalam blog Anda via feed (RSS atau Atom). Caranya adalah dengan menerbitkan posting baru dan menyisipkan kode klaim di dalamnya.
• Untuk Kode Klaim Blog/Website ini adalah : 3S6YXY4VKCDR
• Dan sesudah itu, Anda tinggal klik Complete Claim
• Berikutnya, Anda tinggal menunggu Kode Klaim yang sudah di masukkan dalam Postingan Anda di periksa oleh Technorati, untuk memastikan bahwa memang benar alamat URL yang diberikan, benar-benar milik Anda.
• Dan yang terakhir (karena blog inipun belum terdaftar di Technorati), anda buat satu link dengan kode seperti dibawah ini, dan tampilkan di blog anda.

<a href=”http://technorati.com/faves?sub=addfavbtn&add=http://url blog anda”><img alt=”3S6YXY4VKCDR” src=”http://static.technorati.com/pix/fave/btn-fave2.png”/></a>

• Gantilah kode url blog anda diatas dengan kode URL anda.

Itu tadi sedikit informasi mengenai Cara Mendaftar di Technorati, semoga bermanfaat bagi Anda semua. Terimakasih.

Read More --►

Masalah Threaded Comment Pada Template Blogger Lama Masalah Threaded Comment Pada Template Blogger Lama

Berawal dari pertanyaan teman blogger dari Malaysia Haz Issac tentang Threaded Comments yang ada pada salah satu template buatan saya (Mas paper), yang menanyakan bagaimana caranya agar Threaded Comments pada template bisa berfungsi? Setelah mengganti beberapa kode script yang ada, tampilan komentar sudah ada fungsi reply dan delete, tapi permasalahan yang terjadi kemudian fitur reply tidak berfungsi normal, atau ketika diklik hanya ada tulisan javascript pada bagian bawah browser.

Terus terang kebanyakan dari template yang saya buat masih menggunakan fitur blogger lama, sehingga secara default belum dilengkapi fungsi reply atau Threaded Comments yang sudah dikembangkan oleh Blogger baru-baru ini. Kali ini saya akan mencoba memberikan satu tutorial bagi para pengguna template blogger lama (bukan klasik), bagaimana cara mengatasi permasalahan Threaded Comment khususnya bagi mereka yang sudah mengganti kode dengan menambahkan Threaded Comments tapi fitur reply tidak berfungsi normal.

Langkah Pertama

Cara atau metode pertama ini harus Anda lakukan agar Threaded Coments pada blog Anda berfungsi.

1. Login ke blogger dengan akun Anda
2. Pada dashboard pilih blog yang akan diberikan Threaded Comments (blogger new interface)
3. Setelah itu masuk ke Settings >> Posts and Comments
4. Kemudian pilih Comment Location setting pada posisi Embedded.
5. Kembali lagi ke Setting, kali ini klik Other, pada Allow blog post pada baris pertama pilih posisi Full.
6. Terakhir Save, kemudian lihat hasilnya apakah Threaded Comments sudah ada pada blog Anda. Jika belum ikuti langkah kedua di bawah ini.

Langkah Kedua

1. Masuk ke Template kemudian pilih Edit HTML.
2. Jangan lupa untuk centang Expand Widget Templates. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, lebih baik backup dulu template Anda.
3. Kemudian cari kode di bawah ini :
   

           <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <b:include data='post' name='comments'/>
           </b:if>
           <b:if cond='data:blog.pageType == &quot;item&quot;'>
             <b:include data='post' name='comments'/>
           </b:if>

4. Setelah ketemu ganti dengan kode berikut :
   

           <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
             <b:if cond='data:post.showThreadedComments'>
               <b:include data='post' name='threaded_comments'/>
             <b:else/>
               <b:include data='post' name='comments'/>
             </b:if>
           </b:if>
           <b:if cond='data:blog.pageType == &quot;item&quot;'>
             <b:if cond='data:post.showThreadedComments'>
               <b:include data='post' name='threaded_comments'/>
             <b:else/>
               <b:include data='post' name='comments'/>
             </b:if>
           </b:if>

5. Terakhir Save template, lihat dulu hasilnya.

Biasanya setelah Anda melakukan langkah kedua ini, Threaded Comments sudah ada pada blog Anda, tapi harus dicek satu persatu fungsinya. Permasalahan yang sering muncul adalah banyak sekali template yang masih menggunakan script blogger classic sehingga fitur reply (balas) tidak berfungsi normal. Jika fungsi Reply tidak berjalan, ikuti langkah ketiga berikut ini :

Langkah Ketiga

Langkah ini hanya dilakukan jika fungsi Reply tidak berjalan atau biasanya hanya keluar tulisan javascript pada browser bawah. Jika pada langkah kedua Threaded Comments sudah berfungsi normal langkah ini tinggalkan saja.

1. Masih pada posisi Edit HTML (centang Expand Widget Templates), cari kode di bawah ini :
   
   <script type='text/javascript'>
   (function() {
   var items = <data:post.commentJso/>;
   var msgs = <data:post.commentMsgs/>;
   var postId = &#39;<data:post.id/>&#39;;
   var feed = &#39;<data:post.commentFeed/>&#39;;
   var authorName = &#39;<data:post.author/>&#39;;
   var authorUrl = &#39;<data:post.authorUrl/>&#39;;
   var blogId = &#39;<data:top.id/>&#39;;
   var baseUri = &#39;<data:post.commentBase/>&#39;;
   
   // <![CDATA[
   feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
   var cursor = null;
   if (items && items.length > 0) {
   cursor = parseInt(items[items.length - 1].timestamp) + 1;
   }
   
   var bodyFromEntry = function(entry) {
   if (entry.gd$extendedProperty) {
   for (var k in entry.gd$extendedProperty) {
   if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
   return '<span class="deleted-comment">' + entry.content.$t + '</span>';
   }
   }
   }
   return entry.content.$t;
   }
   
   var parse = function(data) {
   cursor = null;
   var comments = [];
   if (data && data.feed && data.feed.entry) {
   for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
   var comment = {};
   // comment ID, parsed out of the original id format
   var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
   comment.id = id ? id[2] : null;
   comment.body = bodyFromEntry(entry);
   comment.timestamp = Date.parse(entry.published.$t) + '';
   if (entry.author && entry.author.constructor === Array) {
   var auth = entry.author[0];
   if (auth) {
   comment.author = {
   name: (auth.name ? auth.name.$t : undefined),
   profileUrl: (auth.uri ? auth.uri.$t : undefined),
   avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
   };
   }
   }
   if (entry.link) {
   if (entry.link[2]) {
   comment.link = comment.permalink = entry.link[2].href;
   }
   if (entry.link[3]) {
   var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
   if (pid && pid[1]) {
   comment.parentId = pid[1];
   }
   }
   }
   comment.deleteclass = 'item-control blog-admin';
   if (entry.gd$extendedProperty) {
   for (var k in entry.gd$extendedProperty) {
   console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
   if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
   comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
   }
   }
   }
   comments.push(comment);
   }
   }
   return comments;
   };
   
   var paginator = function(callback) {
   if (hasMore()) {
   var url = feed;
   if (cursor) {
   url += '&published-min=' + new Date(cursor).toISOString();
   }
   window.bloggercomments = function(data) {
   var parsed = parse(data);
   cursor = parsed.length < 50 ? null
   : parseInt(parsed[parsed.length - 1].timestamp) + 1
   callback(parsed);
   window.bloggercomments = null;
   }
   url += '&callback=bloggercomments';
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;
   document.getElementsByTagName('head')[0].appendChild(script);
   }
   };
   var hasMore = function() {
   return !!cursor;
   };
   var getMeta = function(key, comment) {
   if ('iswriter' == key) {
   var matches = !!comment.author
   && comment.author.name == authorName
   && comment.author.profileUrl == authorUrl;
   return matches ? 'true' : '';
   } else if ('deletelink' == key) {
   return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
   } else if ('deleteclass' == key) {
   return comment.deleteclass;
   }
   return '';
   };
   
   var replybox = null;
   var replyUrlParts = null;
   var replyParent = undefined;
   
   var onReply = function(commentId, domId) {
   if (replybox == null) {
   // lazily cache replybox, and adjust to suit this style:
   replybox = document.getElementById('comment-editor');
   if (replybox != null) {
   replybox.height = '250px';
   replybox.style.display = 'block';
   replyUrlParts = replybox.src.split('#');
   }
   }
   if (replybox && (commentId !== replyParent)) {
   document.getElementById(domId).insertBefore(replybox, null);
   replybox.src = replyUrlParts[0]
   + (commentId ? '&parentID=' + commentId : '')
   + '#' + replyUrlParts[1];
   replyParent = commentId;
   }
   };
   
   var tok = 'comment-form_';
   var hash = window.location.hash || '';
   var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;
   
   // Configure commenting API:
   var configJso = {
   'maxDepth': 2
   };
   var provider = {
   'id': postId,
   'data': items,
   'loadNext': paginator,
   'hasMore': hasMore,
   'getMeta': getMeta,
   'onReply': onReply,
   'rendered': true,
   'initReplyThread': startThread,
   'config': configJso,
   'messages': msgs
   };
   
   var render = function() {
   if (window.goog && window.goog.comments) {
   var holder = document.getElementById('comment-holder');
   window.goog.comments.render(holder, provider);
   }
   };
   
   // render now, or queue to render when library loads:
   if (window.goog && window.goog.comments) {
   render();
   } else {
   window.goog = window.goog || {};
   window.goog.comments = window.goog.comments || {};
   window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
   window.goog.comments.loadQueue.push(render);
   }
   })();
   // ]]>
   </script>
2. Setelah ketemu ganti dengan kode berikut :
   
   <script type='text/javascript'>
   (function() {
   var items = <data:post.commentJso/>;
   var msgs = <data:post.commentMsgs/>;
   var config = <data:post.commentConfig/>;
   
   // <![CDATA[
   var cursor = null;
   if (items && items.length > 0) {
   cursor = parseInt(items[items.length - 1].timestamp) + 1;
   }
   
   var bodyFromEntry = function(entry) {
   if (entry.gd$extendedProperty) {
   for (var k in entry.gd$extendedProperty) {
   if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
   return '<span class="deleted-comment">' + entry.content.$t + '</span>';
   }
   }
   }
   return entry.content.$t;
   }
   
   var parse = function(data) {
   cursor = null;
   var comments = [];
   if (data && data.feed && data.feed.entry) {
   for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
   var comment = {};
   // comment ID, parsed out of the original id format
   var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
   comment.id = id ? id[2] : null;
   comment.body = bodyFromEntry(entry);
   comment.timestamp = Date.parse(entry.published.$t) + '';
   if (entry.author && entry.author.constructor === Array) {
   var auth = entry.author[0];
   if (auth) {
   comment.author = {
   name: (auth.name ? auth.name.$t : undefined),
   profileUrl: (auth.uri ? auth.uri.$t : undefined),
   avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
   };
   }
   }
   if (entry.link) {
   if (entry.link[2]) {
   comment.link = comment.permalink = entry.link[2].href;
   }
   if (entry.link[3]) {
   var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
   if (pid && pid[1]) {
   comment.parentId = pid[1];
   }
   }
   }
   comment.deleteclass = 'item-control blog-admin';
   if (entry.gd$extendedProperty) {
   for (var k in entry.gd$extendedProperty) {
   if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
   comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
   }
   }
   }
   comments.push(comment);
   }
   }
   return comments;
   };
   
   var paginator = function(callback) {
   if (hasMore()) {
   var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
   if (cursor) {
   url += '&published-min=' + new Date(cursor).toISOString();
   }
   window.bloggercomments = function(data) {
   var parsed = parse(data);
   cursor = parsed.length < 50 ? null
   : parseInt(parsed[parsed.length - 1].timestamp) + 1
   callback(parsed);
   window.bloggercomments = null;
   }
   url += '&callback=bloggercomments';
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = url;
   document.getElementsByTagName('head')[0].appendChild(script);
   }
   };
   var hasMore = function() {
   return !!cursor;
   };
   var getMeta = function(key, comment) {
   if ('iswriter' == key) {
   var matches = !!comment.author
   && comment.author.name == config.authorName
   && comment.author.profileUrl == config.authorUrl;
   return matches ? 'true' : '';
   } else if ('deletelink' == key) {
   return config.baseUri + '/delete-comment.g?blogID='
   + config.blogId + '&postID=' + comment.id;
   } else if ('deleteclass' == key) {
   return comment.deleteclass;
   }
   return '';
   };
   
   var replybox = null;
   var replyUrlParts = null;
   var replyParent = undefined;
   
   var onReply = function(commentId, domId) {
   if (replybox == null) {
   // lazily cache replybox, and adjust to suit this style:
   replybox = document.getElementById('comment-editor');
   if (replybox != null) {
   replybox.height = '250px';
   replybox.style.display = 'block';
   replyUrlParts = replybox.src.split('#');
   }
   }
   if (replybox && (commentId !== replyParent)) {
   document.getElementById(domId).insertBefore(replybox, null);
   replybox.src = replyUrlParts[0]
   + (commentId ? '&parentID=' + commentId : '')
   + '#' + replyUrlParts[1];
   replyParent = commentId;
   }
   };
   
   var hash = (window.location.hash || '#').substring(1);
   var startThread, targetComment;
   if (/^comment-form_/.test(hash)) {
   startThread = hash.substring('comment-form_'.length);
   } else if (/^c[0-9]+$/.test(hash)) {
   targetComment = hash.substring(1);
   }
   
   // Configure commenting API:
   var configJso = {
   'maxDepth': config.maxThreadDepth
   };
   var provider = {
   'id': config.postId,
   'data': items,
   'loadNext': paginator,
   'hasMore': hasMore,
   'getMeta': getMeta,
   'onReply': onReply,
   'rendered': true,
   'initComment': targetComment,
   'initReplyThread': startThread,
   'config': configJso,
   'messages': msgs
   };
   
   var render = function() {
   if (window.goog && window.goog.comments) {
   var holder = document.getElementById('comment-holder');
   window.goog.comments.render(holder, provider);
   }
   };
   
   // render now, or queue to render when library loads:
   if (window.goog && window.goog.comments) {
   render();
   } else {
   window.goog = window.goog || {};
   window.goog.comments = window.goog.comments || {};
   window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
   window.goog.comments.loadQueue.push(render);
   }
   })();
   // ]]>
   </script>
3. Setelah itu save templates.

Langkah ketiga ini dibuat oleh http://modification-blog.blogspot.com. Setelah Anda melakukan langkah ini fungsi Reply bisa berjalan normal, tapi permasalahan yang saya dapat kemudian (setelah Anda melakukan langkah ini) jika Anda masih memakai browser internet lama terkadang akan susah untuk membuka postingan yang ada pada blog.

Threaded Comment di blog Anda sekarang sudah ada, sekarang anda tinggal modifikasi sendiri bentuk dari kotak komentar. Jika Anda menginginkan kotak komentar Admin berbeda, ikuti langkah sederhana berikut ini (contohnya seperti gambar diatas) :

1. Pada posisi Edit HTML letakkan kode berikut ini persis diatas kode </body> :
   

   <script src='http://code.jquery.com/jquery-latest.js'/>
   <script>
   $(function() {
   function highlight(){
   $('.user.blog-author,.ssyby').closest('.comment-block')
   .css('border', '1px solid #e1e1e1')
   .css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9VKdpsYjw7cJHAv8wNXYuH94AZCGd7OwxXuJk9UqQ3f4-BpGNSwvGDuYXtm0Mov688dtL3I6yTicuDgnHiqed4984nBDJs5ktL6tMFdQB2YA0ds7xEnqohFpxY2zWre3h0VZzhbzebVc/s1600/admin2.png") no-repeat bottom right')
   .css('padding', '10px');
   }
   $(document).bind('ready scroll click', highlight);
   });
   </script>
   

2. Kemudian save templates.

Demikian tadi tutorial singkat untuk mengatasi masalah yang sering muncul dalam membuat Threaded Comments pada template blogger classic. Jika masih ada yang kurang jelas silahkan tinggalkan komentar Anda di bawah. Selamat mencoba dan semoga bermanfaat.

Read More --►

Dua Template Gratis Untuk Pecinta Music dan Game Dua Template Gratis Untuk Pecinta Music dan Game

Di malam yang dingin ini saya akan kembali berbagi kepada teman-teman blogger semua, dua buah template warna hitam gratis. Template pertama saya namakan Johny Darkmusic dibuat khusus untuk teman blogger yang mempunyai blog konten musik atau selebritis. Dan template kedua Johny Darkgamer 2 sesuai namanya template ini cocok untuk blog yang mempunyai konten game atau sejenisnya.

Kedua template ini saya lengkapi dengan fitur slider carousel otomatis, anda tinggal memasukkan kode script yang sudah saya siapkan di bawah pada kotak HMTL/Javascript. Slider carousel yang saya gunakan disini adalah Tiny Carousel dari Maarten Baijs yang sudah dimodifikasi oleh seorang master blogger Indonesia Taufik Nurrohman, sehingga kita tidak perlu lagi memasukkan keterangan dan URL slider satu persatu. Baiklah, langsung saja karena saya juga sudah ngantuk berat, berikut ini kedua template tersebut :

Johny Darkmusic

Demo | Download

Template ini saya buat bagi Anda yang suka dengan konten music atau selebritis. Template ini bertipe magazine, terdapat 3/4 kolom sidebar. Fitur-fitur yang terdapat pada template ini antara lain :

1. Slider Carousel
   
   Untuk mengganti slider anda hanya perlu memasukkan kode di bawah ini pada kotak HTML/Javascript. Di dashboard masuk ke layout kemudian pilih kolom kosong di bawah header >> add gadget >> HTML/Javascript :
   <script type="text/javascript">
       showPostDate_g  = false;
       showComm_g      = false;
       slideOpenNewTab = true;
       idMode          = true;
       slidebyLabels   = false;
   var slideLabelName  = "label",
       pBlank          = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg",
       text            = "comment",
       numposts_g      = 12,
       numchars_g      = 0,
       showText        = "Show at",
       postText        = "Posts",
       tinyprevNav     = "&lt;",
       tinynextNav     = "&gt;",
       home_page       = "http://johnydarkmusic.blogspot.com/";
   </script>
   <script src="http://yourjavascript.com/123714512522/tinycarousel-hompimpa.js" type="text/javascript"></script>
   Ganti URL warna biru diatas dengan URL blog Anda, kemudian save.
   
2. Kategory dengan thumbnail (Category with thumbnail)
   
   Letaknya di sidebar tengah (satu thumbnail), cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
   <script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
   
   <script type="text/javascript" src="/feeds/posts/default/-/jazz?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
   
   <script type="text/javascript">
   function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 0; i < json.feed.entry.length; i++)
    {
       for (var j = 0; j < json.feed.entry[i].link.length; j++) {
         if (json.feed.entry[i].link[j].rel == 'alternate') {
           break;
         }
       }
   var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
   var entryTitle = json.feed.entry[i].title.$t;
   var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
    document.write(item);
    }
    document.write('</ul>');
    }
   </script>
   <script src="http://johnydarkmusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
   <a href="http://johnydarkmusic.blogspot.com/search/label/jazz" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
   Keterangan :
   Warna biru (jazz) : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
   Warna merah : Ganti URL dengan URL blog anda.
   
3. Latest Post
   
   Untuk mengatur latest post yang ada di homepage caranya adalah, di dashboard blogger pilih setting, kemudian klik posts and comments. Pada bagian paling atas (Show at most) pilih berapa posts yang ingin ditampilkan pada homepage. Kemudian masuk ke Language and formatting, agar blog Anda seperti pada demo template ini pada Timestamp format pilih hanya jam/waktu (00:00).
4. Kotak feedburner di bawah postingan
   Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :
   
   <div class='subscribe'>
   <p class='intro'>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.</p>
   <p class='feed'><a href='http://johnytemplate.blogspot.com/feeds/posts/default'>Subscribe via RSS Feed</a></p>
   <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
   <input name='uri' type='hidden' value='JohnyTemplate'/>
   <input name='loc' type='hidden' value='en_US'/>
   <input id='botsub' name='email' 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;;}' type='text' value='Enter your email....'/>
   <input id='botsubbutton' type='submit' value='Submit'/><br/>
   <small>Your information will not be shared. Ever.</small>
   </form>
   </div>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   Warna merah : ganti dengan URL anda.
   Ganti juga URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.
   
5. Headline News (Di bawah navigasi menu atas atau news ticker)
   
   Untuk menggantinya di dashboard pilih template kemudian klik Edit HTML jangan lupa centang expand widget templates kemudian cari dengan menggunakan control + F URL http://johnydarkmusic.blogspot.com ganti dengan blog URL anda.

Johny Darkgamer 2

Demo | Download

Sesuai namanya template ini adalah versi kedua dari serial template Johny Darkgamer.  Dengan warna dasar hitam dan hijau pada bagian navigasi menu, template ini sangat cocok untuk konten game. Fitur-fitur yang terdapat pada template ini hampir sama dengan template Johny Darkmusic, malah lebih sederhana pada hompage hanya terdapat 3 kolom sidebar yang tidak terlalu sulit untuk memasang widget yang ada disitu. Cara memasang slider pada template ini sama dengan template Johny Darkmusic, anda tinggal memasukkan kode script pada langkah nomer satu ke kotak HTML/Javascript. Demikian juga dengan kotak Feedburner yang ada di bawah postingan cara untuk menggantinya sama pada langkah nomer 4.

Kedua template ini support dengan halaman statis (static page) klik sample page yang terdapat pada navigasi menu atas. Dan juga template ini sudah dilengkapi dengan fitur threaded comment dengan fungsi reply bawaan dari blogger, anda bisa modifikasi sesuai keinginan. Kekurangan template ini belum ada fitur kotak pencari (search box), saya yakin Anda semua pasti bisa untuk menambahkan kotak pencari pada kedua template ini terserah mau memakai bawaan dari blogger atau memodifikasi sendiri.

Tutorial untuk pemasangan fitur-fitur yang ada pada kedua template diatas saya asumsikan Anda memakai blogger new interface bagi yang masih memakai old interface saya kira juga gampang dan mudah dimengerti, sampai disini dulu mas/mbak sudah larut malam selamat mencoba dan semoga bermanfaat.

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Johny Darkgamer 2
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Johny Darkmusic
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Read More --►

Membuat Recent Comment Avatar Tanpa Edit HTML Membuat Recent Comment Avatar Tanpa Edit HTML

Tutorial ini sebenarnya sudah banyak sekali beredar di internet, tapi karena ada salah satu teman blogger yang menanyakan via email cara membuat komentar terbaru dengan avatar, tidak ada salahnya kalau pada malam hari ini saya akan berbagi satu lagi tutorial blog mengenai cara membuat komentar terbaru dengan avatar. Meletakkan widget recent comment akan sangat berguna jika blog yang anda kelola sudah ramai pengunjung, karena terkadang kita sulit untuk mengetahui komentar-komentar yang baru masuk. Kecuali jika pemberitahuan komentar baru atau recent comments diarahkan pada satu email yang sudah kita setting di bagian "Comment Notification Email". Jika sudah diatur, maka dengan sendirinya anda dapat membaca tiap komentar yang masuk hanya dengan membuka email.

Sebenarnya ada alternatif lain untuk mengetahui komentar baru di blog kita, yaitu dengan cara mengecek satu persatu artikel dan melihat komentar yang masuk. Apakah Anda sanggup dan punya banyak waktu untuk melakukan itu? Nah, cara yang ini tentu saja sangat merepotkan karena harus melihat satu-persatu artikel yang ada komentarnya. Untuk itu agar lebih mudah mengetahui komentar terbaru yang masuk ke blog, anda bisa menambahkan widget "Recent Commets" yang sudah disediakan blogger. Selain widget recent comments yang disediakan blogger, anda juga dapat membuat sendiri widget recent comment ini dengan menambahkan fitur avatar agar lebih memperindah tampilan widget tersebut.

Karena prolognya sudah terlalu panjang, sekarang bagaimana cara membuat widget recent commment avatar tanpa harus Edit HTML? Widget ini nantinya seperti gambar diatas, jika anda ingin melihat demonya disini(klik comment pada tab view)

1. Login ke blogger dengan akun Anda.
2. Di dashboard masuk ke layout
3. Setelah itu anda pilih add gadget >> HTML/Javascript
4. Masukkan kode-kode di bawah ini pada kotak HMTL/Javascript
   

   <style type="text/css">
   ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
   .tb_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;}
   .tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
   .tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
   .tb_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  = 5,
   showAvatar  = true,
   avatarSize  = 50,
   characters  = 60,
   defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
   hideCredits = true;
   //]]>
   </script>
   <script type="text/javascript" src="http://yourjavascript.com/211271156231/rcentcmmntavr.js"></script>
   <script type="text/javascript" src="http://creatingwebsite-maskolis.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

   Keterangan :
   Warna merah (5) : adalah jumlah komentar yang ditampilkan
   Warna kuning (50) : ukuran pixel avatar
   Warna hijau (60) : Jumlah karakter huruf komentar
   Warna biru : ganti dengan URL blog Anda.
   
5. Terakhir save, membuat recent comment dengan avatar telah selesai.

Mudah bukan? widget ini terserah mau anda letakkan dimana saja di homepage blog. Misalnya di bagian sidebar atau footer, asalkan bisa dengan mudah dilihat oleh pengunjung blog. Widget recent comments sebenarnya adalah widget yang tidak wajib untuk sebuah blog, tapi daripada Anda kesulitan dalam mencari komentar baru yang masuk? Segitu dulu tutorial kali ini, selamat mencoba dan semoga bermanfaat.

Sebagai referensi tambahan untuk sahabat blogger semua dalam kegiatan ngeblog bisa dibaca pada dua artikel di bawah ini :

• Cara Membuat Blog Yang Menarik
• Bagaimana Membuat Blog Yang Menarik?

Read More --►