Template Majalah Berita (Magazine), Galley dan Personal Johny Wuss

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

1. Latest Post

3. Slider
Untuk mengganti image pada slider, cari kode berikut :

numposts1 = 7;
label1 = "kesehatan";

Keterangan :

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 &#187;</a>

Keterangan :

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 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(http://2.bp.blogspot.com/-CLBGzLyi1so/T1UPEFQD_oI/AAAAAAAAFuI/dTa03s7vVYg/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.
 

 <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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=JohnyTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}’ onfocus=’if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;;}’ 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=”http://4.bp.blogspot.com/-vAQCTVY56RQ/T1C97oUO9DI/AAAAAAAAFrY/2qFu-uMpN4k/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 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(http://1.bp.blogspot.com/–XyTqUrypY8/T1YjUGN9ZbI/AAAAAAAAFuo/mttDGvPpcDU/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(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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(http://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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”>&nbsp;<a rel=”nofollow” href=”http://feeds.feedburner.com/Maskolis” target=”_blank”>  RSS</a></div><div class=”googleicon”>&nbsp;<a href=”https://plus.google.com/u/0/ID GOOGLE +” rel=”author” target=”_blank”> G+</a></div><div class=”fbicon”> &nbsp;<a href=”https://www.facebook.com/URL Facebook” target=”_blank” rel=”nofollow”>FB</a></div><div class=”twittericon”>&nbsp;<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 == &#39;&#39;) {this.value = &#39;Enter your email here…&#39;;}” onfocus=”if (this.value == &#39;Enter your email here…&#39;) {this.value = &#39;&#39;;}” 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&amp;fg=000&amp;anim=1″ height=”26″ width=”88″ /></a></div></div></div> </div> 

Keterangan :