Template ini ramai banget seperti pasar tradisional yang jualan bermacam-macam dagangan tiap pagi di pinggir jalan. Sebenarnya template ini sekedar memenuhi permintaan teman-teman blogger agar template yang dipakai di blog adik saya dibagi juga secara gratis, awalnya mau saya bagi langsung persis seperti blog adik saya. Tapi yang punya blog mencak-mencak, terpaksa saya mesti modifikasi lagi agar tampilannya sedikit berbeda. Dan template ini juga memenuhi permintaan sebagian blogger yang meminta agar list untuk postingan terbaru jangan hanya judul saja, tetapi juga dikasih thumbnail dan summary.
Seperti pada template blogger magazine umumnya, template ini termasuk berat di loading. Saya kasih tahu dulu sebelumnya biar nanti tidak ada yang tanya lagi di kotak komentar. Namanya juga template magazine, ya pastilah banyak fitur yang dipasang disitu, otomatis akan menambah beban loading. Oke, langsung saja pada tutorial pemasangan widget yang ada di template ini, sebelum itu perhatikan struktur layout yang ada pada template ini (sengaja saya gunakan old blogger interface layout karena di new blogger interface ada scrollnya jadi nggak bisa sampai ke bawah) :
Image Slider (Sidebar tengah atas)
Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript yang saya beri nama image slider seperti pada gambar diatas. 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>
<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>
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.
Video Category
Anda tinggal masukkan atau ketik nama label pada widget Video Category seperti gambar di bawah ini :
Jazz adalah kategori atau label yang saya tampilkan pada widget video category, silahkan Anda ganti dengan label yang diinginkan. Nah, sekarang cara membuat postingan video (khusus dari Youtube) untuk menampilkan thumbnail di widget tersebut. Caranya sama seperti pada artikel saya Johny Crottube, saya akan ulang lagi disini :
- Masuk ke Youtube dan pilih video favorit anda.
- Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
- Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
- Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
- Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :<iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />
- Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :
Perhatikan kedua kode pada gambar dengan background biru diatas. Dan untuk video yang bukan dari Youtube sebaiknya Anda buat manual thumbnailnya, dengan membuat gambar dari video terlebih dahulu kemudian diupload ke dalam postingan.
Widget label disini adalah Label 3 s/d 15 (label 7 sama 8 hilang dimakan tikus) caranya sama seperti pada widget Video Category diatas, Anda tinggal masukkan/ketik label di kotak HTML/Javascript seperti gambar dibawah :
Ganti jazz dengan label yang ingin Anda tampilkan, ini berlaku untuk semua widget label pada template ini. Jika Anda memakai template ini dan mendapati pengaturan widgetnya mojok ke kiri dan bagian footer ikut menjorok keatas itu tandanya label yang Anda masukkan masih sedikit, usahakan tiap label (Label 3 s/d label 15) terisi dengan label yang sudah mempunyai post atau artikel minimal 5.
Bagi Anda yang ingin memakai template ini saya sarankan untuk menyimpan semua url script dan kode javascript yang ada pada template di tempat penyimpanan Google Code Anda sendiri, bagi yang belum tahu caranya menyimpan di Google Code silahkan baca tutorialnya disini. Disamping bisa untuk sedikit mempercepat proses loading bisa juga untuk mengantisipasi URL script yang rusak jika sewaktu-waktu Google Code saya kena banned seperti yang pernah terjadi kemarin.
Sekian dulu artikel kali ini, jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar di bawah, selamat mencoba dan semoga bermanfaat.
