Template ini sebenarnya pesanan teman Jogang via email yang meminta untuk memodifikasi agar template Johny Darkmatter kolom postnya di homepage dibuat seperti tampilan template Johny Darkgamer. Template ini saya beri nama Johny Darkfire karena dengan dasar warna hitam dan sedikit tambahan warna kuning menyala seperti api untuk memperindah tampilan. Fitur yang terdapat pada template ini hampir sama dengan template Johny Darkgamer hanya slider carousel saya ganti dengan otomatis slider yang memudahkan Anda untuk menampilkan post pada slider.
Di atas adalah gambar screenshot dari template ini, tidak banyak perubahan memang sengaja saya minimalisir agar lodingnya tidak terlalu berat, kapasitas template ini hanya 76.0 kb. Berikut ini adalah hal-hal yang perlu diperhatikan untuk menggunakan template ini.
Mengganti Slider Untuk meletakkan postingan kategori tertentu pada slider, cari kode berikut :
numposts1 = 5; label1 = "sport";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
Category with thumbnail (Sidebar kanan atas)
Seperti pada template-template saya sebelumnya, saya selalu menyertakan fitur ini, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
<a href="http://johny-darkfire.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.
Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
Jika Anda ingin menambahkan halaman statis untuk template ini sangat mudah, baca tutorialnya disini.
Script yang perlu dipasang di sidebar dan instruksi lainnya sudah saya sertakan pada link download yang ada di bawah. Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Untuk mas Jogang semoga bisa Anda nikmati template ini walaupun ada sedikit perubahan pada header dan navigasi.
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
Ini sebenernya template pesenan temen saya, tapi karena dia lebih memilih pakai wordpress jadinya nganggur template ini. Yah daripada tidak kepakai mending saya share aja disini, silahkan bagi siapa saja yang suka boleh dipakai. Template ini hanya modifikasi dari template Johny Simple Magazine 2, pada bagian slidernya saya ganti memakai slider otomatis dan sidebar accordion saya ganti dengan tab view menu. Selebihnya sama paling cuma ada tambahan 3 kolom sidebar di bawah banner iklan baris yang pertama dan tambahan widget social bookmark dari Mashable.
Template ini saya share karena ada beberapa teman yang ingin memakai template Mas Paper ini. Daripada saya kirim scriptnya satu persatu lewat email mending dijadikan postingan aja biar semua bisa memakai. Saya bingung mau dikasih nama apa template ini, terserah anda lah mau dikasih nama apa, kalau saya kasih nama Mas Paper nggak boleh ada yang protes ya.
Fitur yang terdapat pada template ini antara lain :
Banner atas (diatas header)
Letaknya di bawah kode <head> pada template, silahkan diganti dengan banner anda atau hapus aja kalau tidak suka.
Headlines News
Untuk mengganti dengan headline berita dari blog Anda, Anda tinggal ganti URL nya, karena google API key sepertinya sekarang sudah ditutup, atau selengkapnya baca disini.
Slider Otomatis. Untuk mengganti slider anda cari kode ini :
numposts1 = 5; label1 = "misteri";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. misteri adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan selengkapnya bisa dibaca disini.
Sidebar tengah atas Cara memasangnya add gadget >> HTML/Javascript kemudian 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/-/misteri?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://crottt.blogspot.com/feeds/posts/summary/-/misteri?max-results=5&alt=json-in-script&callback=recentpostslist"></script> <a href="http://crottt.blogspot.com/search/label/misteri" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.
Banner iklan di bawah sidebar
Ada dua banner iklan yang pertama terdapat di bawah content, dan satunya lagi di bawah 3 deret sidebar pada baris kedua. Silahkan diisi dengan iklan anda, dan juga twitter image bisa diganti dengan twitter dari Anda sendiri.
Untuk 2 sidebar diatas footer cara pemasangannya seperti pada tutorial Widget Template Johny Magazine. Bagi yang lupa silahkan dibaca lagi
Untuk tab view menu yang ada di sidebar kanan, bagian atas anda tinggal membuat 4 widget dan otomatis akan menjadi tab view menu. Untuk lebih lengkapnya baca tutorial disini.
Jika Anda ingin menambahkan Mashable widget, letakkan kode berikut pada kotak HTML/javascript :
Apa lagi ini yang belum ya, sepertinya sudah semua, seperti juga pada template Johny Simple Magazine 2, template ini tidak ada fitur static page (halaman statis) karena script summary and thumb saya hilangkan agar tidak memperberat loading blog. Di bawah ini link untuk melihat demonya dan link download bagi anda yang berminat untuk mencoba memakai template ini. Selamat mencoba dan semoga bermanfaat.
Karena tempat penyimpanan google code sedang bermasalah tabber menu pada sidebar tidak jalan, untuk mengatasinya anda cari dan ganti kode berikut ini pada posisi edit HTML :
<script src='http://creatingwebsite.googlecode.com/files/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var starttab=0; var endtab=3; var sidebarname="sidebar"; </script> <script src='http://creatingwebsite.googlecode.com/files/tabber.js' type='text/javascript'/>
Ganti dengan kode di bawah ini :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> var starttab=0; var endtab=3; var sidebarname="sidebar"; </script> <script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/>
Dan jika headline news juga tidak bisa berjalan, untuk mengatasinya Anda harus mengganti kode berikut ini pada posisi edit HTML, kemudian cari kode di bawah ini :
Terakhir save templates, atau kalau Anda nggak mau repot-repot cari kode diatas untuk menggantinya satu persatu di download ulang aja, yang lama sudah saya updates, mohon maaf sebelumnya.
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
Template ini merupakan lanjutan dari versi pertama, Johny Portal. Seperti template terdahulu pada home page template ini dibagi menjadi 3 kolom dan 2 kolom pada post page. Template ini hanya berkapasitas 76.0 kb mungkin agak ringan menurut saya, karena tidak banyak fitur yang saya pasang kali ini. Di bawah ini screenshot dari template Johny Portal 2 :
Fitur-fitur yang ada pada template ini antara lain :
Slider Image Otomatis Untuk mengganti image pada slider, cari kode berikut :
numposts1 = 5; label1 = "sport";
Keterangan :
Angka 5 adalah jumlah image yang ditampilkan pada slider, Anda bisa menggantinya sesuai dengan selera. Sport adalah label atau kategori yang ditampilkan pada slider, Anda juga bisa merubahnya sesuai kebutuhan.
Kategory dengan thumbnail (Category with thumbnail)
Letaknya di sidebar kiri, cara pasangnya add gadget >> HTML/Javascript kemudian masukkan kode di bawah ini :
<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://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&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>
Keterangan : Warna biru : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan. Warna merah : Ganti URL dengan URL blog anda.
Kotak feedburner di bawah postingan Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :
<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('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>
Keterangan : Warna biru : ganti dengan alamat feed anda. Warna merah : ganti dengan URL anda.
Latest Post Untuk mengatur lates post yang ada di homepage caranya sebagai berikut :
Di dashboard blogger pilih setting, kemudian klik formatting. Pada bagian paling atas pilih berapa posts yang ingin ditampilkan pada homepage.
Untuk mengatur jarak antara akhir postingan dengan kotak komen, yang biasanya terlalu lebar caranya adalah klik design, biarkan pada posisi page element setelah itu anda pilih blog post (kolom paling besar) kemudian klik edit. Setelah terbuka halaman baru centang hanya tanggal, comments dan label biarkan yang lain kosong.
Untuk membuat widget yang ada di bawah latest post, Anda tinggal memasukkan script yang sudah saya sertakan jika anda sudah mendownloadnya.
Satu lagi hampir lupa, template ini tanpa disertai dengan fitur static page (halaman statis). Karena memang tidak ada script summary and thumb pada template ini. Jika diantara Anda ada yang bisa menambahkan fitur static page pada template ini saya akan sangat berterima kasih.
Satu lagi ada yang lupa, untuk mengaktifkan fungsi reply pada kotak komentar, cari kode ini pada edit HTML template :
Perhatikan kode yang berwarna merah, itu adalah ID blog demo template ini. Anda harus ganti dengan ID blog anda yang terletak pada browser.
Pada dasarnya semua script yang saya jelaskan sudah ada jika anda download template ini. Anda tinggal memasukkan ke dalam kotak HTML/javascript. Jika masih ada yang kurang paham bisa ditanyakan pada kotak komentar. Dan jika ada yang tertarik untuk mencobanya silahkan klik link download yang ada di bawah.
Template Creating Website 2 kolom seperti yang saya pakai ternyata banyak juga yang berminat. Buat Anda yang menginginkan template ini sudah saya sediakan, Anda tinggal download, terus habis itu di upload. Template ini saya peringkas sehingga tidak seberat punya saya sendiri, karena template yang saya pakai sekarang ini memakai syntax highlighter yang banyak menggunakan kode javascript, yang mungkin untuk blog yang isinya berita tidak perlu dipasang Tapi dari tampilan sama persis, nggak ada bedanya. Bedanya cuma mungkin fitur blockquote, sama kolom komentar yang sengaja tidak saya sembunyikan. Karena dari template Creating Website modifikasi yang terdahulu banyak juga yang meminta kotak komentarnya nggak usah di modifikasi memakai spoiler.
Gambar tampilannya ya seperti blog saya ini, sama kan?
Untuk menampilkan Artikel Terkait ini hanya tampil pada post page baca tutorialnya disini.
Mengganti URL Feedburner
Anda tinggal mencari kode blogspot/offH pada template, setelah ketemu ganti dengan feed anda. Atau kalau kurang jelas selengkapnya bisa dibaca disini.
Membuat Drop Cap atau tulisan huruf awal postingan menjadi besar.
Sengaja template ini tidak dimasukkan fitur Drop Cap, karena selera setiap orang pasti beda. Bagi Anda yang menginginkan setiap huruf awal pada postingan menjadi besar langsung saja baca tutorialnya disini.
Mengganti kotak pencarian (search) adsense
Anda harus membuat kotak pencarian Google Adsense terlebih dahulu di akun Adsense anda. Kemudian setelah membuatnya, cari kode di bawah ini (dibawah kode <div style='float:right;padding:1px 8px 0 0;'> )
Ganti dengan kotak pencarian Adsense dengan yang sudah Anda buat, jangan lupa kodenya di parse dulu.
Untuk tampilan blockquote anda bisa modifikasi sendiri sesuai selera. Dan jika ada yang menginginkan kotak komentar disembunyikan menggunakan spoiler, langsung saja menuju pada tutorial Kang Damar disini.
Untuk mas Hanif bocah Tulungagung khususnya semoga terpenuhi keinginan Anda, dan buat temen-temen yang lain juga silahkan kalau mau mencoba memakai template ini. Di bawah ini sudah saya sediakan link untuk melihat demo dan downloadnya.
Karena tempat penyimpanan google code saya kena banned sama google beberapa fungsi foitur dalam template ini tidak bekerja seperti semula. Untuk mengatasinya dibawah ini langkah yang harus Anda lakukan. Jika related post pada template ini tidak berfungsi cari kode di bawah ini :
Setelah itu save templates, jika tidak mau repot-repot menggantinya Anda tinggal download ulang pada link di bawah yang sudah saya update, mohon maaf sebelumnya.
Saya persingkat saja ya, template ini saya beri nama Johny Simple Music, anda bisa kira-kira sendiri kenapa template ini saya beri nama demikian. Tapi kalau mau digunakan untuk konten yang lain juga silahkan saja. Fitur yang ada pada template ini adalah sebagai berikut :
Recent Post Slider Image
Image slider otomatis, kerja slider ini adalah setiap Anda membuat postingan baru akan muncul dalam slider. Jadi tidak perlu lagi susah-susah memasukkan satu persatu keterangan gambar dan URL nya. Klik Tambah Gadget >> pilih HTML/Javascript, masukkan kode berikut pada kolom di bawah header (ada dua kolom pilih yang atas) :
<div id="slider"> <script style="text/javascript" src="http://creatingwebsite.googlecode.com/files/slidergallery.js"></script> <script style="text/javascript"> var numposts_gal = 6; var numchars_gal = 150; var random_posts = false; // random posts </script> <script src="http://johny-simplemusic.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script> </div>
Ganti URL warna merah dengan URL anda, selanjutnya slider sudah bekerja secara otomatis memuat postingan terbaru Anda.
Karena tempat penyimpanan google code saya sedang bermasalah slider pada templates ini tidak berfungsi, untuk mengembalikan pada kondisi semula anda harus merubah kode yang berwarna biru di atas dengan kode di bawah ini :
Ganti tulisan warna biru dengan kategori atau label yang ingin anda tampilkan di sidebar.
Kategory tanpa thumbnail Contohnya seperti pada sidebar kanan di bawah top music. Masukkan kode ini pada kotak HTML/Javascript template anda :
<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://johny-simplemusic.blogspot.com/feeds/posts/summary/-/jazz?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johny-simplemusic.blogspot.com/search/label/jazz" style="float:right;font:normal 10px Arial;padding:5px 0;">More Post »</a>
Keterangan : Warna merah : URL blog Warna biru : kategori atau label
Di bawah ini link demo dan download bagi Anda yang ingin mencoba template ini, maaf kalau bahasanya kurang enak dibaca, maklum udah ngantuk, ini juga saking penginnya selalu berbagi hehehehe besok pasti dperbaiki. Selamat malam dan selamat mimpi indah.... hooaaahhhhmmmmmmmmmm.
Ucapan terima kasih yang sebesar-besar kepada teman saya seorang blogger maker handal Irengajah dari Dhetemplate.
Karena tempat penympanan google code saya kena banned sama google beberapa fungsi script dri template ini menjadi mati, untuk mengatasinya ikuti petunjuk di bawah ini (masuk ke edit HTML jangan lupa centang kotak expand widget templates) :
Tabber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.
Nah kali ini saya akan memberikan satu tips untuk Anda semua dalam membuat tabber, sangat sederhana dan tidak memperberat loading blog. Tips ini saya dapat dari Pak Abu Farhan, master blogger Indonesia yang sudah malang melintang di dunia persilatan.. eh dunia perbloggeran. Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.
Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
Login ke blogger dengan akun anda
Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
.widget-tab ul { margin:0px; padding:0px 5px 0 5px; } .widget-tab ul li { list-style:none; border-bottom:1px dotted #a4bddf; padding-top:4px; padding-bottom:4px; font-size:12px; } .widget-tab ul li:last-child { border-bottom:none; } .widget-tab ul li a { text-decoration:none; color:#3e4346; } .widget-tab ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .tab-content ul li a:hover { color:#a59c83; } .tab-content ul li a:hover small { color:#baae8e; }
Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
<script type='text/javascript'> var starttab=0; var endtab=3; var sidebarname="sidebar"; </script> <script src='https://masolis-javascript.googlecode.com/svn/trunk/tabber.js' type='text/javascript'/>
Keterangan : var starttab=0; var endtab=3; var sidebarname="sidebar";
Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).
Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....
Gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.
Kali ini saya akan memberikan satu solusi berupa tutorial membuat image slider berdasarkan kategori tertentu, dimana Anda tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi Anda tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider, gambarnya seperti diatas dan demonya seperti slider yang ada disini. Baik langsung saja pada cara pemasangannya :
Langkah Pertama
Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
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 showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();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;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; }} //]]> </script>
Perhatikan kode yang saya beri huruf tebal label1 = "misteri"; itu adalah label atau kategori yang akan ditampilkan di slider, disini saya memilih label misteri. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.
Setelah itu, letakkan kode di bawah ini sebelum kode </body> (letakkan diatasnya saja)
<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/> <script> //<![CDATA[ featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.5], //[true/false, fadedegree] autorotate: [true, 6000], //[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>
Langkah terakhir, yaitu untuk memanggil agar slider tersebut tampil di halaman depan anda cari kode <div id='main-wrapper'> jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya :
Langkah terakhir Save/simpan template, membuat slider image berdasarkan kategori tertentu sudah selesai.
Yang perlu diperhatikan disini adalah kode label1 = "misteri" pada langkah kedua point pertama, misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Bagi pengguna template Johny Simple Magazine atau Creating Website Modifikasi, bisa langsung dipraktekkan. Sekian tutorial kali ini jika masih ada yang kurang jelas bisa ditanyakan lewat kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.