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
3. Slider
Untuk mengganti image pada slider, cari kode berikut :
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 :
5. Label 4 dan label 5
Masukkan kode di bawah ini :
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 :
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 :
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 :
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 :
Keterangan :<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>
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">8. Untuk mengganti iklan atau adsense yang ada di bawah postingan disamping related articles pada Edit HTML (centang expand widget templates) cari kode berikut :
<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>
<div id="banner-ads">Ganti kode warna biru diatas dengan kode script iklan Anda.
<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>
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'>Keterangan :
<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>
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda.
<div align="center">Perhatikan kode script yang saya beri warna diatas :
</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.
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 demoWarna 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;}Keterangan :
.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>
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.
0 Comments
