Johny Papers Magazine

Demo | Download

Template 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 :

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) :
   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.
2. 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).
3. 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  :
   
   <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 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.
   
4. 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.
   
5. 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.
6. Twitter Widget
   
   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/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>
   Ganti maskolis dengan twitter username anda.
   
7. 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.

Johny Papers Magazine
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

http://www.maskolis.com/2012/03/trilogi-template-johny-tiga-template.html

Johny Papers Magazine 2012-12-24T09:49:00-08:00 Rating: 4.5 Diposkan Oleh: as