Template Blogspot Gratis Johny Crottmag by : http://www.maskolis.com

sumber artikel http://www.maskolis.com

Demo | Download

Template ini sama persisi dengan Johny Sompret Banget cuma beda warna saja, untuk pemasangannya silagkan dilihat disini 2 Template Kurang Kerjaan. 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 :

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>
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(" <script src=\"/feeds/posts/default/-/sport?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/lifestyle?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/economics?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/diary?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/health?max-results="+numposts9+"&orderby=published&alt=json-in-script&callback=showrecentposts9\"><\/script>");
</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.
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 :
Widget Subscribe me
Letaknya pada sidebar sebelah kanan paling atas, masih di layout kemudian pilih kotakHTML/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/AVvXsEgneTrChn5g4oaInjmgj9c98ePGizenlTbWvUbWT1GAGhEJxxg1Ruom-dMqsR4kuu83EUnZuZwQWLJ-JkHz6OscmJLSlBjwsP1PRNLeq52slZ0XNOdsC4g5VGEiEeO8HPHaObQam8Nr2Xo/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/AVvXsEgneTrChn5g4oaInjmgj9c98ePGizenlTbWvUbWT1GAGhEJxxg1Ruom-dMqsR4kuu83EUnZuZwQWLJ-JkHz6OscmJLSlBjwsP1PRNLeq52slZ0XNOdsC4g5VGEiEeO8HPHaObQam8Nr2Xo/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/AVvXsEhQHzsKUEB4WTd88RtGQ3YsmagnLpZqE_Ah2pEWCkfZI62UfmF7w9WCzS3yrOzO37r2mjJpXe6BuwtqCY431rBqeVI3c4mtUjojfU-kc4sU_0pMX1x4O-Bhz_pBn_Y_plsj6cbyoZcq2F8/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/AVvXsEjS7m63QIKANwdXsTcXKCZQpPhJNpOQ00NBhByOqqocotMJAekXs5KzcsRkWqR6gyKoq3bQ1meMwEA4B2djJFbESziwZYkltdU8ti6xGcPy_W9ApGwAqZ831PRSzh2kZM5aA-b_AeaBjeY/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/AVvXsEi8Tq-NlmYy-DmrLOjvgL0SuopFdVjzO5wtY8vTkd91PNXqlEw_JO-47_dZ98BT743jylifz0WZOUiNrVPAovK9KexGBgFZBjdeqUHhuowzLaJV1BT29fhBiRxN55zdo0tXj7U9f2zcvDw/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/AVvXsEi4jY9eg66juU5TUBff22iC7rxFwdgcR-7o64R4lN7pNvGcgPbJJpT4od7hVU2d6RMuag9L8V09coaEMd5-AY1hilfHgq2IeMOwxgLPpx6az_-IAlN0AJU-aiuL6f0_9lLoqhmjYwgi0_Q/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/AVvXsEg6xCG0PZjKb2UHgdG3KYN1bkXAG94i_FBZdtcCxS4tKwJY5XM0oBNiF26i8kOBQ2MmhyphenhyphenruQY-D1yG5x02Kuj2BaVV-oi6XJmMkE4Lk4QHD5cBtAxnJ5TftP_X_v3cEaNCGwN6kb23Cmjs/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 == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div></div></center>
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

So jika ada di antara teman-teman blogger yang berkeinginan untuk membagikan template hasil karya sendiri ataupun modifikasi template yang sudah ada, silahkan kirim ke email saya disini ncmajid@gmail.com. Jika template itu sudah bebas dari bug dan layak untuk dikonsumsi, akan saya publish disini. Demikian tadi artikel singkat tentang 5 template modifikasi, bagi yang berminat silahkan dipakai. Jika ada yang kurang jelas bisa langsung ditanyakan lewat kotak komenta. Semoga bermanfaat.........

Oya saya mau tanya bagi teman-teman yang tahu, saya sering jumpai kata ini cmiiw biasanya ada pada akhir komentar, itu artinya apa ya?

NB : Untuk mas Sholah dan Panjz Online diharap untuk menjawab pertanyaan seputar template yang Anda buat ya.

Template Blogspot Gratis Johny Crottmag by : http://www.maskolis.com

Related Articles :

Popular

Arsip Blog

Followers

Total Pageviews

Labels