Johny Simpleblog, Template Sederhana Easy Loading Johny Simpleblog, Template Sederhana Easy Loading

Template ini hasil utak-atik saya sambil menunggu derby pertandingan sepakbola kota Milan nanti malam. Daripada nganggur mending bikin sesuatu buat bisa dishare disini. Template ini sangat sederhana tidak ada fitur khusus seperti template-template saya sebelumnya, yang jelas template ini lumayan ringan dan nggak tahu SEO friendly apa nggak. Tapi semua meta tag dan fasilitas SEO yang lain untuk blogger sudah saya pasang. Setahu saya yang namanya template blogger itu jauh dari kata SEO friendly kita hanya bisa mencoba untuk membuatnya lebih ramah pada pengunjung. Beda dengan platform lain, wordpress misalnya bisa dipasang plugin-plugin khusus untuk SEO. Tapi namanya juga sudah dikasih gratisan sama Google masa sih mau protes? 

Template ini hanya mempunyai dua warna dasar putih dan abu-abu dengan background hitam, 70% template ini hanya menggunakan pemainan warna dan hanya menggunakan gambar sedikit saja pada bagian-bagian tertentu. Mempunyai dua navigasi menu, navigasi yang pertama (atas) Anda harus mengisikan secara manual pada Edit HTML. Untuk navigasi bawah, itu adalah navigasi untuk halaman statis (static page), jika Anda membuat halaman, seperti about me, contact me, disclaimer dan lain-lain, maka otomatis akan muncul pada navigasi yang kedua. Fitur lain yang mungkin perlu penjelasan disini adalah :

1. Social bookmark dan Subscriber
   Cara pasangnya masuk ke layout >> add gadget masukkan kode ini ke dalamnya :
   
   <center><div class="social" style="padding: 0pt 0pt 0pt 5px;">
   <table><tbody><tr><td>
   <a href='http://feedburner.google.com/fb/a/mailverify?uri=maskolis' target='_blank'><img alt='newsletters' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBYS6mDWVsW97MSgIYEvcTPLPrqQwiF9FPtOGMeoYzdwbaOSwoSTCwgvFvPuLLnJq9MEsf0FgEOoMGpRDDLU8_8ufNiY7l7Clb8kBV3U_7XO5_9PAV3z01tONS7MttvfZzPDRFpb7A54/s1600/mail.png" border="0" title='newsletters'/></a> </td>
   <td> <a href='http://feeds.feedburner.com/maskolis' target='_blank'><img alt='rss' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ75V-OOXvq2bcDkwSDSHdUYSGxelVez6WKMDxFxMhzfgesAhzNi0FK6Dn-YPHbPAHUA_NTL8DI0CemueIwnVbCMYrC5esPZxMonBwcIkwQV39CUinXmB_Wvjs8DizXuoxklT45626WcE/s1600/rss.png" border="0" title='rss'/></a> </td>
   <td> <a href='http://twitter.com/maskolis' target='_blank'><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH4vP5eiqSP5UkGXClY6tfPl5KTymBsuQxagobE_ZadG5UwU0pizDppUn9Z60azE1H4zN9TKgulTQ_WyOypqzxYUyX6NOGmKGCyjpUuyZEP57JfWFrlWroQ6vVOM4SlFr1S0uROYMX_Ck/s1600/twitter.png"  border="0" title='twitter'/></a> </td>
   <td> <a href='http://www.facebook.com/maskolis' target='_blank'><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HlpBtqtJ8h0uBqoESfSLsK60LrEWAuvbG2zrVquwbHEDdgCwLtr9YVom8lc6fHxlP5Bw92Q6N2p9hYIKy2ZWy1SJ48MlLNABGrKbuusn8Gcwthn7WI2IaBCkgVk2e3qjHw6-ch-MxU4/s1600/facebook.png"  border="0" title='facebook'/></a> </td>
   <td> <a href='http://www.youtube.com/maskoli' target='_blank'><img alt=' youtube' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv5DctkwS9v_v6go39z58vlx6lPunz3Z0u73qEapwrsH0fDdpM0DEiGZI-a-FuwFrDoEPw5wfLrwTBLwDordOL2EpS43DZcG-rXrA4M5z77U3FbSurte7I8ecmm-qSfsH7Hx2SCK6nX10/s1600/youtube.png"  border="0" title='youtube'/></a>
   </td></tr></tbody></table> </div></center>
   <center>
   <div class='sub-box'>
   <div style="text-align: left; display: inline-block;">
   <h8 style="display:block;font-family:'calibri';font-size:15px;font-weight:bold;">Subscribe via RSS Feed</h8>
   <small><i>If you enjoyed this article just <a href='http://feeds.feedburner.com/maskolis' target='_blank' title='feedburner'>
   <b>click here</b></a>, or subscribe to receive more great content just like it.</i></small>
   <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 type="hidden" value="maskolis" name="uri"/>
   <input type="hidden" name="loc" value="fr_FR" />
   <input type="text" 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;}" value="Enter your email..." name="email" class="emailtext" />
   <input type="submit" class="sub-button" value="Enter" title='' alt='' />
   </form></div></div></center>
   Ganti kata maskolis diatas dengan ID anda masing-masing.
   
2. Template Johny Simpleblog ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, jangan lupa untuk centang kotak expand widget templates :

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=6168443577798831338&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
3. Untuk mengganti iklan yang ada di bawah postingan (sebelah related post), masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
   
   <div id='banner-ads'>
   &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
   google_ad_client = &quot;ca-pub-9608487840337104&quot;;
   google_ad_host = &quot;pub-1556223355139109&quot;;
   /* johny bingung 1 */
   google_ad_slot = &quot;3387370593&quot;;
   google_ad_width = 300;
   google_ad_height = 250;
   //--&gt;
   &lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;
   src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
   &lt;/script&gt;
   </div>
   Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 300 x 250 px.

Template ini saya buat karena tadi sore di kotak komentar ada yang meminta untuk dibuatkan template yang sederhana, tapi nggak tau ini cocok apa nggak. Yang penting saya sudah memenuhi permintaannya masalah cocok dan tidak cocok selera tiap orang pasti beda-beda. Selamat mencoba dan semoga bermanfaat maaf kalau template ini kurang berkenan.  3S6YXY4VKCDR

Demo | Download

Update Templates

My Google Code was banned again, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

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

Read More --►

3 Pilihan Warna untuk Template Johny Storage 3 Pilihan Warna untuk Template Johny Storage

Sebelumnya saya minta maaf belum bisa jawab komentar yang masuk baik lewat email maupun lewat kotak komentar di blog ini dan di Mas Template, karena kondisi kesehatan yang tidak mau diajak kompromi. Dari beberapa komentar yang masuk pada artikel Johny Storage template, ada beberapa teman yang meminta untuk dibuatkan dengan versi warna yang berbeda. Kali ini saya akan berikan tiga warna alternatif untuk template Johny Storage, yaitu gelap (dominan hitam), biru dan merah. Disini saya hanya menambahkan 2 fitur kategori otomatis memanjang, untuk fitur yang lain masih tetap sama.

Johny Storage Dark

Demo | Download

Template ini dominan warna hitam dan biru, cara pemasangan sama persis dengan Johny Storage pada artikel saya sebelumnya. Akan saya ulangi lagi disini

1. News Ticker atau headline news letaknya diatas header. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://johny-storage.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://johny-storage.blogspot.com ganti dengan URL blog Anda.
2. Yang kedua adalah kotak email berlangganan, letaknya persis diatas image slider. Untuk mengganti email berlangganan, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   

Pemasangan Widget

Sebelum masuk ke pemasangan widget, coba Anda perhatikan struktur layout yang terdapat pada template Johny Storage di bawah ini (ada penambahan widget yaitu Label 7 dan Label 8 letaknya dibawah blog post) :

1. Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript. Masukkan kode berikut ini ke dalamnya :
   <div id='featuredContent'>
   <div class='sliderwrapper' id='featured-slider'>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
   </script>
   </div>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </ul>
   <div class='clear'></div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: "featured-slider", //id of main slider DIV
   contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
   toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
   nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
   revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
   enablefade: [true, 0.4], //[true/false, fadedegree]
   autorotate: [true, 5000], //[true/false, pausetime]
   onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
   //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
   //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
   }
   })
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.
2. Sekarang untuk label 1 sampai dengan label 8 seperti pada layout diatas, caranya sangat gampang. Anda tinggal ketik/masukkan label yang diinginkan ke dalam kotak tersebut. Perhatikan gambar dibawah ini :
   
   
   Keterangan :
   Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.
   
3. Sekarang kita menuju pada tabber sidebar yang terletak di sebelah kanan. Terdapat tiga tabber disitu, yaitu recent post, popular post dan comment. Untuk kolom recent post letakkan kode berikut ke dalamnya :

   <ul>
   <script>
   

   document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");

   </script>
   </ul>

   Untuk popular post anda tinggal masuk ke layout kemudian pilih widget popular post, silahkan pilih disitu berapa post yang ingin ditampilkan. Dan untuk comment atau recent comment silahkan Anda baca tutorialnya disini. Ketiga tabber sidebar ini boleh Anda rubah sesuai keinginan, letaknya di sidebar kanan baris kedua.
4. Slider Carousel yang terdapat di atas footer bekerja secara otomatis menampilkan artikel terbaru Anda disitu. Jadi disini Anda tidak perlu merubah atau menambahkan kode script lagi, tapi jika Anda ingin menampilkan per kategori di dalam slider tersebut silahkan baca pada tutorial membuat slider Carousel tersebut disini.
5. Khusus untuk Johny Storage Dark.  membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :
   
   <div style="background:#cc0000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy3K1UnAgjJAIhFQl34WuBf6Ip-LgzmqNMQNfETj3lvmS5qTvoR7q_EaGJfPPexyeYXRf8Kpqj2lVmKDFzqbvcWtpx72ekXokCelgY5K8YYwBXeMyNgCuA9QkHPIIHbvM3ADNPzRBlg-k/s1600/tweet+2.png) no-repeat;padding-top:46px;padding-left:10px">
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>
   new TWTR.Widget({
   version: 2,
   type: 'profile',
   rpp: 10,
   interval: 3000,
   width: 280,
   height: 122,
   theme: {
   shell: {
   background: 'transparent',
   color: '#aeaeae'
   },
   tweets: {
   background: 'transparent',
   color: '#aeaeae',
   links: '#5193f0'
   }
   },
   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.

Johny Storage Blue

Demo | Download

Johny Storage Red

Demo | Download

Itu tadi tiga pilihan warna untuk templte Johny Storage, silahkan dipilih warna mana yang paling cocok. Selamat mencoba dan semoga bermanfaat.

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

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

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

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

Read More --►

Johny Storage, Template Magazine untuk Blog Berita Johny Storage, Template Magazine untuk Blog Berita

Karena ini malem Minggu saya singkat saja artikel kali ini. Template ini sekilas tampak seperti Mas Paper versi 1, hanya pada template kali ini warna didominasi putih dan hitam. Template ini sangat cocok untuk blog berita, ya memang saya untuk saat ini akan fokus dulu dalam membuat template blogger untuk blog berita, karena untuk template yang lain saya belum mahir apalagi yang bentuknya blogazine (pernah seorang teman blogger meminta saya membuat template blogazine via email), disamping keterbatasan kemampuan saya dalam pemahaman jQuery, dalam membuat template seperti blogazine dibutuhkan kemampuan dalam mengolah gambar dengan menggunakan software tertentu, sehingga bisa lebih cantik dan menarik.

Seperti pada template Mas Paper 2 dan Johny Simplemag, template kali ini juga semuanya serba otomatis. Anda tinggal memasukkan label dan kode script ke dalam kotak HTML/Javascript maka fitur-fitur yang ada pada template ini akan muncul secara otomatis. Langsung saja saya akan jelaskan satu persatu untuk penggunaan template ini :

1. Saya mulai dari atas, News Ticker atau headline news yang ada diatas header. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://johny-storage.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://johny-storage.blogspot.com ganti dengan URL blog Anda.
2. Yang kedua adalah kotak email berlangganan, letaknya persis diatas image slider. Untuk mengganti email berlangganan, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   

Pemasangan Widget

Sebelum masuk ke pemasangan widget, coba Anda perhatikan struktur layout yang terdapat pada template Johny Storage di bawah ini :

1. Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript. Masukkan kode berikut ini ke dalamnya :
   <div id='featuredContent'>
   <div class='sliderwrapper' id='featured-slider'>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
   </script>
   </div>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </ul>
   <div class='clear'></div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: "featured-slider", //id of main slider DIV
   contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
   toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
   nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
   revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
   enablefade: [true, 0.4], //[true/false, fadedegree]
   autorotate: [true, 5000], //[true/false, pausetime]
   onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
   //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
   //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
   }
   })
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.
2. Sekarang untuk label 1 sampai dengan label 6 seperti pada layout diatas, caranya sangat gampang. Anda tinggal ketik/masukkan label yang diinginkan ke dalam kotak tersebut. Perhatikan gambar dibawah ini :
   
   
   Keterangan :
   Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.
   
3. Sekarang kita menuju pada tabber sidebar yang terletak di sebelah kanan. Terdapat tiga tabber disitu, yaitu recent post, popular post dan comment. Untuk kolom recent post letakkan kode berikut ke dalamnya :

   <ul>
   <script>
   

   document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");

   </script>
   </ul>

   Untuk popular post anda tinggal masuk ke layout kemudian pilih widget popular post, silahkan pilih disitu berapa post yang ingin ditampilkan. Dan untuk comment atau recent comment silahkan Anda baca tutorialnya disini. Ketiga tabber sidebar ini boleh Anda rubah sesuai keinginan, letaknya di sidebar kanan baris kedua.
4. Slider Carousel yang terdapat di atas footer bekerja secara otomatis menampilkan artikel terbaru Anda disitu. Jadi disini Anda tidak perlu merubah atau menambahkan kode script lagi, tapi jika Anda ingin menampilkan per kategori di dalam slider tersebut silahkan baca pada tutorial membuat slider Carousel tersebut disini.

Apa lagi ya, sepertinya hanya itu yang perlu saya jelaskan untuk penggunaan dan pemasangan widget yang terdapat pada template Johny Storage ini. Karena waktu sudah menunjukkan pukul 8 malam lebih, sudah waktunya untuk berkeliaran cari mangsa... hehehehe. Bagi yang masih bingung dan butuh penjelasan silahkan tinggalkan komentar di bawah, selamat mencoba dan happy weekend

Tiga pilihan warna lain untuk template ini :

• Johny Storage Dark
• Johny Storage Blue
• Johny Storage Red

Demo | Download

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

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

Read More --►

Membuat Content Slider Image Otomatis Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentang membuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

DEMO

Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya pada Membuat Slider Carousel Otomatis Berdasarkan Label.

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
2. Pilih blog yang ingin anda tambahkan slider image ini.
3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
   #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
   #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Efrw71KZGskDfu3ykhOQf9fDgCY4p24KmP-Oom31Ns6NeSVJ9T_J3kYYuuaLBj5SphUU-v6yY3tBmqfDSm246GGDtgDB_d6GtWwSDOa7iB1mvbGmS_NpFo2oCc4ai3fVcCftQR4iOErT/s1600/transparant.png)}
   #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
   #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
   #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
   #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
   #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
   #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
   #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
   #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
   Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
   
6. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 100;
   summaryTitle = 25;
   
   numposts3 = 5;
   
   function removeHtmlTag(strx,chop){
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   function showrecentposts3(json) {
       j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
       img  = new Array();
   
         for (var i = 0; i < numposts3; i++) {
           var entry = json.feed.entry[i];
           var posttitle = entry.title.$t;
           var pcm;
           var posturl;
           if (i == json.feed.entry.length) break;
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'alternate') {
                   posturl = entry.link[k].href;
                   break;
                 }
           }
          
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                   pcm = entry.link[k].title.split(" ")[0];
                   break;
                 }
           }
          
           if ("content" in entry) {
                 var postcontent = entry.content.$t;}
           else
           if ("summary" in entry) {
                 var postcontent = entry.summary.$t;}
           else var postcontent = "";
          
           postdate = entry.published.$t;
      
       if(j>imgr.length-1) j=0;
       img[i] = imgr[j];
      
       s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
       if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
       //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
       var month = [1,2,3,4,5,6,7,8,9,10,11,12];
       var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
       var day = postdate.split("-")[2].substring(0,2);
       var m = postdate.split("-")[1];
       var y = postdate.split("-")[0];
   
       for(var u2=0;u2<month.length;u2++){
           if(parseInt(m)==month[u2]) {
               m = month2[u2] ; break;
           }
       }
   
       var daystr = day+ ' ' + m + ' ' + y ;
   
       var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
       document.write(trtd);
   
   
       j++;
   }
   
   }
   
   function showrecentposts4(json) {
       j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
       img  = new Array();
   
         for (var i = 0; i < numposts3; i++) {
           var entry = json.feed.entry[i];
           var posttitle = entry.title.$t;
           var pcm;
           var posturl;
           if (i == json.feed.entry.length) break;
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'alternate') {
                   posturl = entry.link[k].href;
                   break;
                 }
           }
          
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                   pcm = entry.link[k].title.split(" ")[0];
                   break;
                 }
           }
          
           if ("content" in entry) {
                 var postcontent = entry.content.$t;}
           else
           if ("summary" in entry) {
                 var postcontent = entry.summary.$t;}
           else var postcontent = "";
          
           postdate = entry.published.$t;
      
       if(j>imgr.length-1) j=0;
       img[i] = imgr[j];
      
       s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
       if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
       //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
       var month = [1,2,3,4,5,6,7,8,9,10,11,12];
       var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
       var day = postdate.split("-")[2].substring(0,2);
       var m = postdate.split("-")[1];
       var y = postdate.split("-")[0];
   
       for(var u2=0;u2<month.length;u2++){
           if(parseInt(m)==month[u2]) {
               m = month2[u2] ; break;
           }
       }
   
       var daystr = day+ ' ' + m + ' ' + y ;
   
       var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
       document.write(trtd);
   
       j++;
   }
   
   }
   
   //]]>
   </script>
   Keterangan :
   
   Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Warna biru : Jumlah post yang ditampilkan dalam slider
   Warna hijau : Panjang dan lebar image besar
   Warna merah tua : Panjang dan lebar image kecil
7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
   
   <div id='featuredContent'>
   <div class='sliderwrapper' id='featured-slider'>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
   </script>
   </div>
   <div id='paginate-featured-slider'>
   <ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </ul>
   <div class='clear'></div>
   </div>
   <script type='text/javascript'>
   featuredcontentslider.init({
   id: "featured-slider", //id of main slider DIV
   contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
   toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
   nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
   revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
   enablefade: [true, 0.4], //[true/false, fadedegree]
   autorotate: [true, 5000], //[true/false, pausetime]
   onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
   //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
   //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
   }
   })
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
   Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
   

   script src=\"/feeds/posts/default/-/sport?max-results

   dengan kode berikut :
   

   script src=\"/feeds/posts/default?max-results

8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

   

Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Read More --►

Membuat Slider Carousel Otomatis Berdasarkan Label Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
   #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdCo1S79XhWCETPKGYPPvEyDhMBDCEvCb4B3ggzvIxBocA69cQWEPvEM21QJ6A-ZWdz1iOd1ia3Mqy3H2YcEdE0lr8zCmIfUvN45tIEWZeIYBtd4Ft8qWaLkOQfvciaP5_4Q0n_Vo-mnI/s1600/scroller-bg.png) repeat center}
   #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtaqdVyPwMySDtN9Qbdq67oi8hqsjS6phbUtNHN7OWrIwYDczwjzn2xG6572YgronAj4yvpZIIoL0wP6M0iaZnIDwCi3RiJMGYqLgaJ6NK84DbPREvAggwvEk10c0fCFDzcp6IjqRccII/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
   #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnpikvTpPri7bpP796lY-NF-KJ5pbgoeturOdesxgkdRmSk3Y2TpW8C22XeZdBDq3OEVG0k8Y6GYfzkSimWF4ua2QDWpf-xMPQAiD9KaBnqffmjtb52Y68GhvhmimsMPAKfB3VwYATbqA/s1600/prev.png) center}
   #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA9JJimoVtIHV8jkUEn7bzt2TKfYC8q_xY3avUvTNH8NvIPVlI6Fkshj_5AyF5izrnXHVqro0gFuUm-ZyYo3zLR_1cUHobs2jt5cWwbbG477kxtH6hOBDDXKe47PuGMGwf8FOMDtu_-mw/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
   #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1RbRcUuMsuHubuz80k3H8MKetzkm-O2vy6wuuEuabk08moD2ivUnUWSbfBKaE_DsAyUpifhgPDAkUSLtjNqwOTj87TK9FA9xUNa6IfpWKIUVp3w6BS-8V-Gmk8d2B3isA3o0MTD71g0/s1600/next.png) center}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZgZP7M_EZxPmdjL0nwiruo4T9WT6DAgHGAx_Knf8GvEucPwg2NVINoulcx6CHgxCogMrb4Rg4TrmlEY8voZMkJeuK6JYdBAIp0lOxXnRK65A0g-G_MmNVNL4mqV_Pjy0YCxfCPkS2-4/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
   #carousel ul li a.slider_title:hover{color:#cd1713}
   #carousel a img{display:block;background:#fff;margin-top:0}
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 140;
   summaryTitle = 25;
   
   numposts1 = 15;
   label1 = "news";
   
   function removeHtmlTag(strx,chop){
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   function showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   document.write('<ul>');
   for (var i = 0; i < numposts1; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }
   
   if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

   
   document.write(trtd);
   j++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>
   Keterangan :
   
   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div id='carousel'>
   <div id='previous_button'/>
   <div class='container'>
   <script>
   

   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>   
   <div class='clear'/>
   </div>
   <div id='next_button'/>
   </div>
   <script type='text/javascript'>
   (function($) {     $(document).ready(function(){
   $(&quot;#carousel .container&quot;).jCarouselLite({
       auto:4000,
       scroll: 1,
       speed: 800,   
       visible: 5,
       start: 0,
       circular: true,
       btnPrev: &quot;#previous_button&quot;,
       btnNext: &quot;#next_button&quot;
       });
       })})(jQuery)   
   </script>
   </b:if>
   Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Tutorial Membuat Slider Carousel Otomatis Versi 2

Read More --►

Inilah Dua Template Johny Asal Jadi Inilah Dua Template Johny Asal Jadi

Judulnya keren ya, Dua Template Asal Jadi, ya inilah dua template yang saya buat sambil sedikit pusing karena banyaknya kerjaan. Yang pertama namanya Johny Backup, saya juga tidak tahu dapat nama ini darimana tapi yang jelas template ini terinspirasi dari tampilan template Joomla Sportapolis yang dibuat pada tahun 2009 oleh shape5.com. Template yang kedua Johny Bingung, bingung karena mau dikasih nama apa. Kedua template ini seperti biasa dilengkapi dengan slider otomatis, anda tidak perlu lagi memasukkan satu-persatu URL dan keterangan post ke dalamnya. Dan tentu saja saya bagikan secara cuma-cuma kepada teman-teman blogger semua, sekalian buat melengkapi koleksi template Anda. 

Johny Backup

Demo | Download

Template ini seperti dijelaskan diatas, tampilannya hampir sama dengan template Joomla Sportapolis, tapi lebih sederhana karena banyak fitur yang saya kurangi karena keterbatasan saya dalam mengolah sebuah template. Untuk pemasangan widgetnya pertama anda harus perhatikan struktur layoutnya seperti gambar berikut :

Perhatikan keempat angka diatas, berikut cara pengisiannya :

1. Kolom widget nomer 1, adalah slider. Masukkan kode berikut ini ke dalamnya :
   
   <div id='featured'>
   <ul class="ui-tabs-nav">
   <script>
   document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
   </script>
   </ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti dengan label Anda.
2. Kolom widget nomer 2, adalah label category otomatis di sebelah slider. Anda tinggal memasukkan/ketik label anda pada kotak tersebut, seperti gambar dibawah ini :
   
   
   
   Dari gambar diatas hot games adalah label yang saya masukkan ke dalam widget tersebut, silahkan Anda ganti dengan label Anda.
3. Widget nomer 3 dan 4, adalah widget category thumbnail biasa yang masih semi otomatis. Saya buat demikian agar tampilannya agak berbeda dan tidak monoton. Untuk menampilkannya masukkan kode dibawah ini pada kotak HTML/Javascript nomer 3 dan 4 :
   <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/-/play station?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
   
   <script type="text/javascript">
   function recentpostslist(json) {
    document.write('<ul>');
    for (var i = 1; i < json.feed.entry.length; i++)
    {
       for (var j = 1; 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://johny-backup.blogspot.com/feeds/posts/summary/-/play station?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
   <a href="http://johny-backup.blogspot.com/search/label/play station" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
   Keterangan :
   
   Warna merah : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
   Warna biru : Ganti URL dengan URL blog anda.
   
4. Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
   Keterangan :
   Warna biru : ganti dengan alamat feed anda.
   
5. Untuk mengganti iklan yang ada di bawah postingan, masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div style='font:normal 12px Georgia;font-style:Italic;padding:8px 10px 8px 70px;font-weight:normal;color:#333;margin-top:10px;'>
   &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
   google_ad_client = &quot;ca-pub-9608487840337104&quot;;
   google_ad_host = &quot;pub-1556223355139109&quot;;
   /* jamumartin */
   google_ad_slot = &quot;9319314062&quot;;
   google_ad_width = 468;
   google_ad_height = 60;
   //--&gt;
   &lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;
   src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
   &lt;/script&gt;
   </div>
   </b:if>
   Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 468 x 60 px.

Johny Bingung

Demo | Download

Template ini saya desain khususnya untuk konten review film atau game, tapi Anda bisa juga memakainya untuk konten lain. Template sama namanya nggak nyambung blasss..... Namanya juga orang bingung jadi ya terserah mau dikasih nama apa... hehehehehe. Untuk pemasangan widget perhatikan layout template ini seperti gambar di bawah :

1. Pada template ini hanya ada tiga widget yang perlu diperhatikan, widget nomer satu adalah slider atau di layout namanya Featured content slider. Cara pemasangannya anda tinggal memasukkan atau ketik label yang ingin ditampilkan, seperti pada nomer 2 diatas :
   
   
   Label yang saya masukkan disini adalah review, silahkan diganti dengan label anda sendiri.
   
2. Untuk widget nomer 2 dan 3, cara pemasangannya sama dengan langkah nomer 3 pada template Johny Backup diatas. Demikian juga untuk mengganti email berlangganan, sama seperti langkah nomer 4 diatas.
3. Karena template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotak expand widget templates :
   

   <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=4900105838884725772&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

   Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
   
   
   
   
   
4. Untuk mengganti iklan yang ada di bawah postingan (sebelah related post), masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
   
   <div id='banner-ads'>
   &lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
   google_ad_client = &quot;ca-pub-9608487840337104&quot;;
   google_ad_host = &quot;pub-1556223355139109&quot;;
   /* johny bingung 1 */
   google_ad_slot = &quot;3387370593&quot;;
   google_ad_width = 300;
   google_ad_height = 250;
   //--&gt;
   &lt;/script&gt;
   &lt;script type=&quot;text/javascript&quot;
   src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt;
   &lt;/script&gt;
   </div>
   Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 300 x 250 px.

Itu tadi dua template asal jadi yang saya bagikan kepada teman-teman blogger pada pagi hari ini, mohon maaf sebelumnya kalau tidak begitu menarik, Jika ada pertanyaan silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Johny Backup

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/related-image.js' type='text/javascript'/>
   Change with this code :
   
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/related-post.js' type='text/javascript'/>
2. This code for page navigation
   <script src='http://johnytemplate.googlecode.com/files/pagenav.js.js' type='text/javascript'/>
   Replaces with this code :
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/navigasi.js' type='text/javascript'/>
3. This code for label :
   <script src='http://jamu-martin.googlecode.com/files/label.js' type='text/javascript'/>
   Change with this code :
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/label.js' type='text/javascript'/>
4. And find this too :
   <script src='http://kauman.googlecode.com/files/jquery-ui.min.js' type='text/javascript'/>
   Change with this code :
   
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery-ui.min.js' type='text/javascript'/>
5. The last one :
   <script src='http://kauman.googlecode.com/files/johnybackup.js' type='text/javascript'/>
   Change with this code :
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/backup.js' type='text/javascript'/>

Johny Bingung

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/slider.js' type='text/javascript'/>
   Change with this code :
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/slider.js' type='text/javascript'/>
2. This code for related post
   
   <script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
   Change with this code :
   
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/relatedpost.js' type='text/javascript'/>
3. This code for page navigation
   
   <script src='http://jamu-martin.googlecode.com/files/page%20navigation.js' type='text/javascript'/>
   Replaces with this code :
   
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
4. This code for label :
   <script src='http://jamu-martin.googlecode.com/files/label.js' type='text/javascript'/>
   Change with this code :
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/label.js' type='text/javascript'/>
5. The last one :
   <script src='http://kauman.googlecode.com/files/johnybingung.js' type='text/javascript'/>
   Change with this code :
   <script src='https://masolis-javascript.googlecode.com/svn/trunk/bingung.js' type='text/javascript'/>

Important :
I suggest you to save any javascript in this template with your own Google Code or another file hosting for better result. Read this tutorial to save Javascript in to your own Google Code.

Read More --►