Berikut beberapa template yang sekiranya sangat sesuai untuk blog atau situs majalah atau papper. Bisa juga digunakan untuk blog berita. Ada juga tipe template untuk blog pribadi. Langsung aja ke TKP guys:
1. Johny Papper Magazine
Cara pemasangan widget-widget yang ada pada template ini adalah :
1. Latest Post
Letaknya di sebelah kiri, fitur ini
otomatis, maksudnya jika anda membuat postingan terbaru maka artikel itu
akan muncul otomatis pada latest post. Cara setting agar seperti dalam
demo template sebagai berikut (blogger new interface) :
2. Di dashboard pilih setting kemudian klik formatting and language kemudian pada timestamp format pilih hanya jam saja, karena lebar pada timestamp di latest post saya setting untuk tampilan jam (lihat demo). Untuk mengatur jumlah post yang akan ditampilkan masih pada setting, pilih post and comment >> show at most pilih berapa post yang akan ditampilkan pada kolom latest post.
3. Slider
Untuk mengganti image pada slider, cari kode berikut :
numposts1 = 7;
label1 = "kesehatan";
Keterangan :
Angka 7 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. kesehatan
adalah label atau kategori yang ditampilkan pada slider, silahkan Anda
ganti dengan label yang ingin ditampilkan pada slider (Ingat hurufnya
harus sama dengan label yang sudah Anda buat).
4. Label 1, label 2 dan label 3
Letaknya di bawah banner 468 x 69 dan twitter follow. Untuk menampilkannya pada widget masukkan kode berikut pada
layout >>
add gadget pilih
HTML/Javasxript :
Label 4 dan label 5
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/-/
news?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://johnyportal2.blogspot.com/feeds/posts/summary/-/
news?max-results=5&alt=json-in-script&callback=recentpostslist"></script>
<a href="
http://johnyportal2.blogspot.com/search/label/
news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan :
Warna biru : adalah label atau kategori yang ditampikan pada widget. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna
merah : Ganti URL dengan URL blog anda.
5.
Label 4 dan label 5
Masukkan kode di bawah ini :
<script type="text/javascript">
var numposts = 4;var showpostthumbnails = true;var displaymore =
false;var displayseparator = false;var showcommentnum = false;var
showpostdate = false;var showpostsummary = true;var numchars = 100;
</script>
<script src="/feeds/posts/default/-/serba serbi?orderby=updated&alt=json-in-script&callback=labelthumbs" type="text/javascript">
</script>
<a href="http://test-maskolis.blogspot.com/search/label/serba serbi" style="float:right;font:normal 10px Arial;padding:5px 0;">More on this category</a>
Warna merah : adalah label atau kategori yang ditampikan pada widget. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna
biru : Ganti URL dengan URL blog anda.
6.
Tab view menu
Letaknya pada sidebar sebelah kanan atas, Anda tinggal membuat 4 widget yang ingin dipasang otomatis akan menjadi tabber sidebar, saya sarankan untuk diberi judul pada widget tersebut.
Twitter Widget
7. Untuk membuat twitter widget seperti pada demo masukkan kode di bawah ini pada kotak HTML/Javascript :
<div style="background:#fff
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJmheCM5qiXeJO9n9go09BPbMAHz4jV1OCMrDeFLU-eDLKJpI74qi9M93sMlh6jx6SaFhaqBYW9H__dV-OcjCW-NOoMEie5ydmLg_3AZIMQ42Q4h5fjPAnOoYyE-JNjTd1goGJqzG5Pmy0/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>
8. Untuk mengganti iklan atau adsense yang ada di bawah postingan disamping related articles pada
Edit HTML (centang expand widget templates) cari kode berikut :
<div id="banner-ads">
<script type='text/javascript'><!--
google_ad_client = "ca-pub-9608487840337104";
google_ad_host = "pub-1556223355139109";
/* johny samping */
google_ad_slot = "1127342458";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script>
Ganti kode warna biru diatas dengan kode script iklan Anda.
2. Johny Soulmater
Untuk mengganti feedburner yang terdapat 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('http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate',
'popupwindow',
'scrollbars=yes,width=550,height=520');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 ==
"") {this.value = "Enter your
email";}' onfocus='if (this.value == "Enter your
email") {this.value = "";}' 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.
3. Gallery Johny
1. Untuk membuat postingan pastikan Anda dalam posisi
HTML (bukan compose). Di bawah ini adalah contoh dalam membuat postingan pada template
Gallery Johny ini :
<div align="center">
</div>
<div class="badge sblogger">
</div>
<img class="latest_img" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jYXPhG4TgRuoUAgtOZejr5C2QBycjaLnMCHiKQ9ee1SsCc-UOozcqv91Z310WYgcfhWUIpdhoTyAhNGIW97Uc9WsU3-zmO3w8mvmTKYQ9z-ntlJ08nfDMg6eRmwD7w9AkwbMIwkAkYVL/s1600/Johny+Darkmovie.jpg" width="310" />
<div class="fullpost">
<ul class="postbuttons">
<li><a class="livedemo" href="http://johny-darkmovie.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a> </li>
<li><a class="download" href="http://www.box.com/s/qjhv758fzmne8lt3xpa8" rel="nofollow" target="_blank">Download Theme</a></li>
</ul>
</div>
<b>TEMPLATE FEATURES</b>
Silahkan diisi deskripsi template atau terserah anda.
Perhatikan kode script yang saya beri warna diatas :
Warna hijau : adalah URL gambar yang harus anda ganti. Setalah gambar anda upload masukkan URL gambar pada kode yang berwana hijau.
Warna
biru : adalah URL blog demo
Warna
merah : URL untuk download
2. Untuk menenampilkan widget share dan subscribe yang ada pada sidebar kanan atas, masukkan kode berikut pada kotak
HTML/Javascript :
<style type="text/css">.maskolis{width:288px;float:left;margin:0 0 2px;padding:0 5px;}
.maskolis .count{margin:0px;padding:10px 0px 0px 0;}
.maskolis .subicons{background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTEFwlZ3Qp2Ri9ZojxWkP250ahOhP0uR9zNrfkkc8Id-qIBk8NKmWpvRvgtFFcp2J3W8en0a67YaFXju_bYZ_dJxVJaoeTuUl1XhiQmHrDCLOCq7PxeVXEW-T7n5E8zuPeyKvu3znRKyWZ/s1600/batas.png)
repeat-x scroll bottom;margin:0px 0 0px
0;float:left;width:288px;font-family:Helvetica,
Arial;font-size:12px;}.maskolis .subicons
a{text-decoration:none;color:#333333;}.maskolis .subicons
a:hover{text-decoration:underline;color:#333333;}.maskolis .subicons
.rssicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjM2CzaQEnVWi16-0kGLLrLBJ8Da5Gy1NDWQnQh4p0YYtK9Ni9ubpEwRGIXVjXxLermnNTdQYq3OLjiuFdNhTylxA6JNJEPgTNq24XUPXqQTQuIdpDrtXi55ZRfFsLg0xpxqHaYjQXKCz/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
no-repeat;background-position:0px
5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
10px 0px 28px;margin:0 0 0 5px;}.maskolis .subicons
.googleicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjM2CzaQEnVWi16-0kGLLrLBJ8Da5Gy1NDWQnQh4p0YYtK9Ni9ubpEwRGIXVjXxLermnNTdQYq3OLjiuFdNhTylxA6JNJEPgTNq24XUPXqQTQuIdpDrtXi55ZRfFsLg0xpxqHaYjQXKCz/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
no-repeat;background-position:0px
-37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
10px 0px 28px;margin:0 0 0 5px;}.maskolis .subicons
.fbicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjM2CzaQEnVWi16-0kGLLrLBJ8Da5Gy1NDWQnQh4p0YYtK9Ni9ubpEwRGIXVjXxLermnNTdQYq3OLjiuFdNhTylxA6JNJEPgTNq24XUPXqQTQuIdpDrtXi55ZRfFsLg0xpxqHaYjQXKCz/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
no-repeat;background-position:0px
-79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
10px 0px 28px;margin:0 0 0 5px;}.maskolis .subicons
.twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFjM2CzaQEnVWi16-0kGLLrLBJ8Da5Gy1NDWQnQh4p0YYtK9Ni9ubpEwRGIXVjXxLermnNTdQYq3OLjiuFdNhTylxA6JNJEPgTNq24XUPXqQTQuIdpDrtXi55ZRfFsLg0xpxqHaYjQXKCz/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png)
no-repeat;background-position:0px
-121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px
7px 0px 28px;margin:0 0 0 5px;}.maskolis .emailsub{border-bottom:0px
solid #e6e6e6;padding:15px 0 0px
0;float:left;width:100%;font-family:Helvetica, Arial;}.maskolis
.emailsub
.emailicon{background:url(http://www.fordfarmhouse.com/images/email.png)
no-repeat 0 2px;float:left;padding:0px 20px 0px 50px;margin:0
5px;width:288px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}.maskolis
.emailsub .emailupdatesform{margin:15px 5px 5px
5px;width:288px;float:left;}.maskolis .emailsub .emailupdatesform
input.emailupdatesinput{background:#fff !important;float:left;border:1px
solid #afafaf;padding:0px 8px 0px
8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}.maskolis
.emailsub .emailupdatesform
input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left
top,left
bottom,color-stop(#b4c5fa,0),color-stop(#0f46fa,1));background:-webkit-linear-gradient(top,#b4c5fa
0%,#0f46fa 100%);background:-moz-linear-gradient(top,#b4c5fa 0%,#0f46fa
100%);background:-o-linear-gradient(top,#b4c5fa 0%,#0f46fa
100%);background:linear-gradient(top,#b4c5fa 0%,#0f46fa
100%);background:-webkit-gradient(linear,left top,left
bottom,from(#567dfc),to(#0f46fa));border:1px solid
#1143a8;text-transform:none;font:bold 12px
arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0
5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}</style><div
class="maskolis"><div class="subicons"><div
class="rssicon"> <a rel="nofollow"
href="http://feeds.feedburner.com/Maskolis" target="_blank"> RSS</a></div><div class="googleicon"> <a href="https://plus.google.com/u/0/ID GOOGLE +"
rel="author" target="_blank"> G+</a></div><div
class="fbicon"> <a href="https://www.facebook.com/URL Facebook"
target="_blank" rel="nofollow">FB</a></div><div
class="twittericon"> <a href="https://www.twitter.com/TWITTER USERNAME"
target="_blank"
rel="nofollow">Twitter</a></div></div><div
class="emailsub"><div class="emailicon"><p style="
width:250px; color:#3A3A3A; font-size: 13px; font-weight: normal;
font-family: Helvetica, Arial; padding-right:5px; margin:0;">If you
enjoyed this article subscribe to receive more great content from
us</p></div><div class="emailupdatesform"><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 gtbfieldid="10" class="emailupdatesinput"
name="email" value="Enter your email here..." onblur="if (this.value ==
'') {this.value = 'Enter your email
here...';}" onfocus="if (this.value == 'Enter your email
here...') {this.value = '';}" type="text"
/><input value="Maskolis"
name="uri" type="hidden" /><input value="Submit"
class="joinemailupdates" type="submit" /></form><div
class="count"><a rel="nofollow" href="http://feeds.feedburner.com/Maskolis"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/Maskolis?bg=aeaeae&fg=000&anim=1"
height="26" width="88"
/></a></div></div></div> </div>
Keterangan :
Tulisan yang saya cetak dengan huruf tebal silahkan Anda ganti dengan ID dan username Anda.
Tulisan warna merah (Maskolis) adalah ID feedburner blog demo, ganti dengan ID feedburner anda.
3. Untuk membuat popular post seperti pada demo, masuk ke layout >> add gadget kemudian pilih popular posts. Disini yang harus Anda centang hanya thumbnail, biarkan snippet kosong.
