Tutorial Tempalate Blogspot Friendly SEO, Johny Sompret Banget

Tutorial Tempalate Blogspot Friendly SEO, Johny Sompret Banget

Artikel ini mungkin terlalu panjang, semoga teman-teman blogger tidak bosan membacanya. Tapi jika Anda memakai salah satu dari ketiga template ini mesti membacanya sampai selesai. Awalnya saya hanya mencoba untuk membuat readmore tanpa menggunakan Javascript, akhirnya jadilah dua template ini. Pada dua template awal di artikel ini saya menggunakan fitur Readmore dengan tidak meletakan kode Javascript di dalamnya, yang tentu saja karakternya jadi terbatas, yang pertama ukuran maksimum pixel untuk thumbnail hanya 72 x 72 px, Anda tentu saja bisa memperbesar ukuran ini dengan merubah width dan height kode CSS .post-thumbnail pada template ini tapi dengan konsekuensi gambarnya menjadi semakin kabur. Yang kedua adalah jumlah huruf untuk summary juga hanya dibatasi sampai 100 karakter dan ini fixed dari platform Blogger tidak bisa lagi untuk ditambah dan dikurangi. Jadi untuk kedua kasus diatas sengaja saya jelaskan dulu disini agar Anda tidak menanyakan lagi kedua hal tersebut.

Ketiga template ini sebenernya pengembangan dari template sebelumnya, Johny Classicsite. Karena terlalu sederhana dan minim sekali fitur yang saya pasang pada template itu, saya mencoba untuk memodifikasi kembali agar tampak lebih menarik. Untuk judul artikel ini jangan pernah menanyakan kenapa artikel ini saya kasih judul seperti itu, karena dari dulu memang saya tidak pernah perduli dengan judul yang penting isinya bung....!!

Johny Sompret

Demo | Download

Template ini adalah paling sompret sedunia, karena bikinnya waktu pusing dan saya sering bilang sompret waktu bikin jadi namanya Johny Sompret (nggak nyambung blasssss....). Fitur yang terdapat pada template ini apa ya..? Bisa dilihat sendiri pada demo, untuk slider yang saya pasang otomatis menampilkan artikel terbaru. Jika anda ingin mengganti dengan tampilan per label Anda bisa baca petunjuknya di artikel Johny Blackstore template, karena slider yang saya pasang sama, cuma beda kode CSS saja.

Untuk mengaktifkan fungsi reply pada kotak komentar sama dengan template Johny Classicsite, caranya masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=119520779966455589&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk kedashbord, seperti gambar di bawah ini :

Tutorial Tempalate Blogspot Friendly SEO, Johny Sompret Banget

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 :

Tutorial Tempalate Blogspot Friendly SEO, Johny Sompret Banget

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 HTMLcari 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/AVvXsEjRRfRqyNN_ns137Ftzq96UeEAyykS8lA5TuW-irYY06hloJW2YYnPHOIO6nXPOa9vVqRx95Pitq1xE3OEVbj6v-2iOMgg5hk24sON3y3_qQv7gGBRj-xg84dXIXeGSpBL02X1NrugB0_Y/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/AVvXsEjRRfRqyNN_ns137Ftzq96UeEAyykS8lA5TuW-irYY06hloJW2YYnPHOIO6nXPOa9vVqRx95Pitq1xE3OEVbj6v-2iOMgg5hk24sON3y3_qQv7gGBRj-xg84dXIXeGSpBL02X1NrugB0_Y/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/AVvXsEg69apRdV95cbXLOCD4mykZkjCCAxLiA_FxQTHSOdTdKtQb8kk_V6TF2Jme_yLDdTQIDnqVAXR5AuRlIa0FhJq1iQi1RVVZk9yfPVO1ANfNMMCvI4arTXivFMDJBY9x2UlKVAOqOM3U7_M/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/AVvXsEh0PMUU1NKgM7eHK-hhI5fq01HTfVrMJh8xNMIUnhKfe9x8fNFZWcAcRRustEqgLxs0cK5UPjbue9yyckKW8hDbU_TJQ0SUWG1DGTaLib2Ee-tcX18-9cnJdUTCfGhHdz7IabjeSxcjHFw/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/AVvXsEiximymBW9mk_3LpkCCXH-8zDisaMU6s1tVVjj3o6nDYfErQlRPlfxopztXt-3JU5wcwU7chrJYw4pcf-jltfpjct0A6euBAO54zIUfrhNOB0zVCwVrNMT-HPuzB09eAQ6vRXkGE6PC4QQ/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/AVvXsEgjiWpZpR0Q6tf07bbPmFUGfdQgIZKpLgDocgYNW89TEFBIG1O9bk_ebzksPbZ23Qm2UrVfpQlgktmvl15zW0Ee3QYycm7aZCZtyhtV0huxE9Lerul0RKTlffhibPKAaA_Ef58nWrqranA/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/AVvXsEh_JsY4x3xnJd1oWQFLObSPj0J6ACOOcRQZwxa2PxOpIc9rigmTBZvIMd567vrjUj7L8ty9BcgWmKFx5n01jCbB214Vy9-2XJLSP8cOqJ7UqvorEWTwJ0rN11R-CRUalTdw1Qc8PbicJZ8/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 IDpada template ini pada Edit HTML (jangan lupa centang expand widget template) : 149656394876047094 setelah ketemu ganti dengan blog ID anda
   
   

Sorana-id

Title Post: Tutorial Tempalate Blogspot Friendly SEO, Johny Sompret Banget
Rating: 100% based on 99998 ratings. 5 user reviews.
Author: Unknown

Terimakasih sudah berkunjung di blog Sorana Indonesia, Jika ada kritik dan saran silahkan tinggalkan komentar