sumber artikel : http://www.maskolis.com
Johny Papers MagazineTemplate pertama ini saya desain terutama untuk untuk blog yang memiliki konten berita, dan seperti template magazine saya yang lain tidak ada fitur static page atau halaman statis. Cara pemasangan widget-widget yang ada pada template ini adalah :
- Latest PostLetaknya 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) :
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. - Slider
Untuk mengganti image pada slider, cari kode berikut :numposts1 = 7;
Keterangan :
label1 = "kesehatan";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). - 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 :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. - 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. - Tab view menuLetaknya 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 WidgetUntuk membuat twitter widget seperti pada demo masukkan kode di bawah ini pada kotakHTML/Javascript :Ganti maskolis dengan twitter username anda.<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5OpxtJnXOCu63HPqBMBPoGj86x9hsS5xEdVUY-GP4FwxXWXCQYzIFoi7J_ov86AXiUW_9PYyErkc4ysjDyMEQGB-p0KXVPfLrzn-xd1OyTv9vpv-PfpRTPVaeRy2nWz10Kmh4WzEij18A/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> - Untuk mengganti iklan atau adsense yang ada di bawah postingan disamping related articles pada Edit HTML (centang expand widget templates) cari kode berikut :Ganti kode warna biru diatas dengan kode script iklan Anda.<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>