Download Javascript Bagi Pengguna Template Creating Website

Postingan ini saya khususkan bagi pengguna template Creating Website, kali ini saya akan bagikan semua file javascript yang saya pasang di berbagai template kreasi blog ini. Hal ini untuk mengantisipasi semakin seringnya akun Google Code saya dinonaktifkan alias di banned oleh Google, mungkin sudah tidak terhitung berapa kali akun Google Code saya kena banned dan jika Anda masih menggunakan file javascript dari template bawaan (belum disimpan di Google Code atau file hosting sendiri) akan terkena dampak dengan tidak berfungsinya fitur-fitur yang ada.

download javascript

File-file ini merupakan ringkasan dari banyak kode-kode script yang disimpan dalam sebuah notepad. Sebenarnya Anda bisa saja tidak harus meringkas dan menyimpannya di Google Code atau situs tempat penyimpanan file lainnya, yaitu dengan cara membuka file tersebut pada notepad atau wordpad kemudian langsung meletakkan pada template. Jika template yang Anda pakai sedikit menggunakan javascript, cara itu bisa dilakukan.

Lain halnya jika Anda memakai template yang banyak menggunakan javascript sebagai penunjang fitur-fitur yang dipasang, hal ini akan menyebabkan kapasitas memori template yang Anda pakai semakin membengkak yang selanjutnya akan mempengaruhi proses loading blod Anda. Untuk itu banyak master-master blogger menyarankan lebih baik file itu diringkas dan kemudian disimpan di situs penyimpanan file seperti Google Code, hal ini untuk mempercepat peramban, dalam hal ini mesin telusur Google dalam menulusuri file-file, baik HTML, CSS maupun Javascript yang ada pada template yang Anda pakai. Karena semakin kecil kapasitas template yang Anda pakai otomatis semakin cepat loading blog Anda....Mohon bagi para master blogger yang membaca tulisan saya ini, dikoreksi kalau ada yang salah.

Nah, diatas tadi adalah ulasan singkat saya tentang file-file javascript yang akan Anda download jika memang dirasa perlu. Pertanyaannya sekarang adalah, bagaimana cara menggunakan file-file javascript tersebut?

Jika Anda masuk ke Edit HTML template, Anda pasti pernah menemukan sebuah URL script yang berakhiran .js, itu adalah javascript yang sudah diringkas dan disimpan di tempat penyimpanan file online. Contohnya seperti ini :
https://johny-ember.googlecode.com/svn/trunk/labelthumb.js
Jika Anda meletakkan URL diatas pada browser kemudian tekan enter akan mucul banyak sekali kode-kode script yang merupakan isi keseluruhan dari javascript tersebut.

Maksud dari artikel ini adalah, saya menyediakan file javascript yang saya pasang di semua template dariCreating Website dan sudah saya ringkas menjadi file .js. Dimana nantinya Anda tinggal download dan simpan di tempat penyimpanan Google Code Anda sendiri sehingga jika sewaktu-waktu akun saya kena banned dari Google, blog Anda tidak terkena dampaknya. Di bawah ini link download dari kumpulan file-file javascript yang sudah saya ringkas :


Jika Anda sudah download, disitu terdapat banyak sekali file javascript dari semua template yang pernah saya buat. Anda tinggal memilih script mana yang akan dipakai dan dipasang pada template Anda, tinggal mencari namanya saja, misalnya anda ingin mengganti URL script https://johny-ember.googlecode.com/svn/trunk/label.js, Anda tinggal cari file label.js kemudian upload di Google Code. Bagi Anda yang belum mengetahui cara membuat akun dan menyimpan file di Google Codesilahkan baca postingan ini.Demikian postingan singkat kali ini, semoga bermanfaat.

Note :
Jika Anda masih mendapat masalah dengan blog Anda, karena fungsi script yang tidak jalan, baca potingan ini Pengumuman Penting

Free Hosting Alternatif Untuk Menyimpan Javascript

Now a days, keberadaan javascript dalam sebuah blog mutlak diperlukan. Javascript mempunyai fitur yang unik dan javascript juga membuat penampilan sebuah blog menjadi lebih atraktif. Permasalahannya sekarang adalah penggunaan javascript dalam sebuah blog membutuhkan hosting atau tempat penyimpanan. Google sendiripun sebenarnya sudah menyediakan tempat untuk menyimpan javascript yaitu di Google Code. Seperti layanan produk dari Google lainnya, Anda bisa menggunakan Google Code sebagai hosting javascript secara gratis. Jika Anda ingin mengetahui cara membuat akun dan menyimpan file di Javascript baca postingan saya Mengatasi Loading Blog dengan Google Code.

free hosting

Disini saya tidak akan membahas Google Code, saya sudah terlanjur sakit hati. Tak satupun akun saya di Google Code bertahan lebih dari 10 menit. Jika ada teman-teman blogger yang mengalami nasib seperti saya, di tulisan kali ini saya akan memberikan alternatif lain bagi Anda untuk menyimpan file javascript, tentu saja gratis juga. Tempat hosting javascript gratis itu adalah yourjavascript.com dengan motto : If you've got problem with your javascript files on your hosting, just host it on yourjavascript.com. We will host your javascript for free. Situs hosting gratis ini khusus hanya untuk menyimpan file javascript.

Caranya sangat gampang sekali, tidak berbelit-belit anak SD pun bisa melakukannya. Diyourjavascript.com Anda tidak harus daftar terlebih dahulu, tinggal pilih file javascript yang ingin Anda upload, kemudian isi kode verifikasi dan email Anda. URL javascript selanjutnya akan segera dikirim ke email. Disitu nanti juga ada pilihan, javascript yang Anda upload digunakan pribadi atau terbuka untuk umum, jika ingin menggunakannya untuk pribadi Anda tinggal centang make private kemudian isikan URL blog pada kotak di bawahnya. Seperti pada gambar di bawah ini :

free hosting

Setelah Anda mengisi semua kotak kosong seperti gambar diatas, buka email Anda (biasanya masuk ke spam). Disitu nanti Anda akan mendapatkan URL script dari javascript yang Anda upload seperti gambar di bawah ini :

free hosting

Kapasitasnya 2 GB per satu akun email, saya sudah mencobanya dan sudah saya pasang di beberapa template buatan saya, so far so good. Jika Anda ingin mencoba layanan hosting gratis untuk javascript ini, silahkan klik logo yourjavascript.com diatas. Demikian artikel kali ini, selamat mencoba dan semoga bermanfaat.

Download Javascript Bagi Pengguna Template Creating Website

Membuat Menu Accordion Tanpa Edit HTML

Kali ini saya akan memberikan tutorial membuat menu accordion yang saya pasang pada template Johny Simple Magazine 2 dan Johny Magazine 2 tanpa harus masuk ke Edit HTML. Awalnya kedua template tersebut menggunakan simple accordion dari dezinerfolio, belakangan ini tidak berfungsi. Sampai sekarang saya tidak tahu kenapa, padahal semua javascriptnya sudah saya ganti dengan yang baru. Akhirnya saya menemukan accordion menu yang lebih sederhana, tidak perlu masuk ke Edit HTML, tinggal masuk ke layout kemudian pilih HTML/Javascript, letakkan kodenya disitu....  sudah jadi menu accordionnya.

menu accordion

Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menunya saja. Anda bisa letakkan menu accordion ini pada sidebar blog. Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya (wah bahasanya jadul banget ya) :
  1. Login ke Blogger dengan akun Anda
  2. Masuk ke Layout, pilih HTML/Javascript
  3. Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) :
    <style type="text/css">
    #accordion{width:100%;margin:auto;border:0px solid white}
    #accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSlud_6wTPaYmmZT-Vr9A22nBUJ8vVDV7SM3gyCaCWOYpne_TU3cKPu_F_1dEVTILIukSuYWpvAiuFVXNSQaejVvo3M8I-dt1kGPCL0G4tqlZZ7YgGu42iPrpCApmDGXxshY8zXj7GF4/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
    #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
    #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    #accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
    #accordion .content li a:hover {text-decoration:none;color:#000;}
    #accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUaFYytQJH3Zx3Nfu30coPBllffl2DIn7bBma8OBJw_UqK1_mgunjuKaXq4Dxk0ObB-qfPN5rKAVOMXAYJv6kqlG3A53TZdX7P-fTrlGNLEwmOMXnPVP2PBufmv5nPOquro8vJsNasNbs/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
    </style>
    <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
    <script type='text/javascript'>
    $(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
    if($(this).next().is(':hidden')) {
    $('#accordion h2').removeClass('active').next().slideUp('slow');
    $(this).toggleClass('active').next().slideDown('slow');
    }
    });
    });
    </script>
    <div id="accordion">
    <h2>Title 1</h2>
    <div class="content">
    Isi konten 1
    </div>
    <div id="accordion">
    <h2>Title 2</h2>
    <div class="content">
    Isi konten 2
    </div>
    <div id="accordion">
    <h2>Title 3</h2>
    <div class="content">
    Isi konten 3
    </div>
    <div id="accordion">
    <h2>Title 4</h2>
    <div class="content">
    Isi konten 4
    </div>
    <div id="accordion">
    <h2>Title 5</h2>
    <div class="content">
    Isi konten 5
    </div>
    </div></div></div></div></div>
  4. Terakhir Save, lihat hasilnya


Keterangan :
  • Title : Judul heading menu accordion 
  • Isi konten : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)
Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi Anda yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya,. Lebih lengkapnya seperti kode di bawah ini :
<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white} #accordion h2{background-color:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-syY-ILh-gFfj6Y1eCIHQEofxUKR2kxz_tb0oPkHsS1kenUadZfBQd9qIMsbC50XflrELeJh7P9k2Im3hH42fwBECZO32k-C6Kt8oV_RMOkv_RO8i28uShnct0_y1y3eDZtY4DhFQyIA/s1600/arrow_right.gif);background-repeat:no-repeat;background-position:right center;color:#d0cfce;font:normal 11px Tahoma;border-bottom:1px solid #323333;cursor:pointer;padding:5px 10px} #accordion .content{font:normal 11px Arial;background:#333;padding:5px 10px} #accordion .content li{background-image:url();background-repeat:no-repeat;background-position:left center;text-indent:0;border-bottom:1px dotted #595959;line-height:1.3em;margin:0;padding:2px 0 3px} #accordion .content li a:hover{text-decoration:none;color:#ff3c00} #accordion h2.active{background:#5f5e5e;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG2gr_xQFN8blnSffyyjfLtX3J5v8s5IP3ZoGj8l_NGMv8sVCR6RjIKUQxw5MotVKBVPYyhuvtAagXJdHtDgyTVmki9w1i6IuVn2XPmzcoCy2oHnjNfAns8uHLr6o0T4mVKqgw5RNL4S8/s1600/arrow_down.gif);background-repeat:no-repeat;background-position:right center;font-weight:700} </style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>


Bagi yang ingin menyimpan javascript menu accordion silahkan download link dibawah :


Demikian tutorial singkat membuat menu accordion kali ini, dan bagi Anda yang menggunakan kedua template Johny Simple Magazine 2 dan Johny Magazine 2 dapat mengupdate menu accordion-nya dengan tutorial ini.

Pengumuman :
Bagi yang masih mengalami masalah dengan blog, karena ada permintaan password dan username pada blog yang dipakai, mending download ulang aja ya. Semua template sudah saya perbaiki kecuali 3 template pertama saya, yaitu Johny Simplesite, Johny Portal 1, dan Johny Magazine (lupa password emailnya, jadi nggak bisa diperbaiki).

Modifikasi 3 Template Valid HTML5

Pertama saya akan jelaskan dulu apa itu HTML5 dan kenapa kita harus memakai HTML versi terbaru? HTML sendiri adalah singkatan dari Hyper Text Markup Language. HTML bukanlah termasuk bahasa pemrograman, karena struktur yang dimilikinya dianggap terlalu sederhana, kode-kode yang dibaca oleh browser baris per baris, dari atas ke bawah. HTML juga tidak mempunyai struktur pemrograman yang umum ada pada sebuah bahasa pemrograman standar. HTML hanyalah kumpulan dari beberapa instruksi yang dapat dipakai untuk merubah format suatu naskah atau dokumen.

Saat ini HTML telah menjadi standar yang banyak digunakan secara luas untuk menampilkan halaman web atau situs. HTML juga bisa diartikan sebagai kumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Oleh karena itu, untuk dapat membuka dokumen yang ditulis dalam format HTML maka kita perlu sebuah tool yaitu berupa browser seperti Opera, Mozilla, Google Chrome, Internet Explorer dan lain-lain.

Tentang HTML5 dan Fungsinya

Dengan semakin berkembangnya teknologi saat ini, format HTML pun dituntut mampu memberikan informasi yang akurat untuk setiap dokumen yang dibaca. W3C atau Word Wide Web Consortiumsebagai pengembang XHTML 2.0 dan WHATWG sepakat untuk bekerja sama membuat HTML versi terbaru, yaitu HTML5. Pengembangan format HTML menjadi HTML5 bertujuan untuk memperbaiki teknologi HTML agar dapat mendukung teknologi multimedia terbaru. Selain itu HTML5 dapat mengurangi penggunaan plugin-plugin third party pada HTML sehingga dapat mempercepat kinerja sebuah web atau situs. Plugin-plugin tersebut misalnya Microsoft Silverlight, Adobe Flash, Java dan sebagainya.

Bagi pengembangan website atau blog, format HTML5 juga memberikan beberapa kemudahan, misalnya pada bagian awal file HTML sebelumnya kita harus menulis coding DOCTYPE yang panjang, seperti ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 Pada HTML5, DOCTYPE dapat ditulis lebih ringkas
<!DOCTYPE html> 
Kemudian pada baris berikutnya HTML lama biasanya seperti ini
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 
Versi HTML5 bisa lebih simple menjadi
<html expr:dir='data:blog.languageDirection'> 

Validitas HTML sebuah Blog 

Sekarang kita menuju ke validasi HTML, validitas sebuah situs atau web bukanlah merupakan suatu keharusan. Awalnya saya bingung, kenapa sih blog mesti valid struktur HTML nya? Kenyataan memang dari beberapa situs besar, bahkan Google sendiri mempunyai sekian puluh error dalam halamannya. Tetapi mempunyai Page Rank tinggi, lalu kenapa kita harus memikirkan Validasi HTML? Apakah Validasi HTML yang biasa ditest melalui validator W3C itu berpengaruh pada Search Engine Google?

Silahkan cari sendiri alasannya di internet ya, soalnya sampai saat ini masih terjadi pro kontra, apakah validitas sebuah blog perlu atau tidak. Kalau saya sih perlu, coba sekarang silahkan cek di Google Analytics, ada bermacam-macam jenis browser yang telah mengakses blog anda. Disitu Anda akan kehilangan beberapa persen pembaca yang kesulitan melihat blog anda dari browser mereka. Maka validasi HTML akan menjamin tampilan blog akan sama di semua browser. Melalui validasi html, semua browser, bahkan yang paling tua sekalipun akan bisa membaca dokumen blog yang Anda kelola dengan mudah

Wah artikel ini bakalan panjang, saya cut sampai disini penjelasan tentang HTML5 dan validasi HTML. Bagi yang masih percaya kalau validitas HTML sebuah blog sangat berpengaruh pada artikel kita di mata SERPs atau SEO, yah silahkan dibuat se-minimal mungkin error margin pada kode HTML Anda. Bagi yang tidak begitu peduli dengan validitas ya silahkan saja, tidak apa-apa. Sebagai kesimpulan, adalah sebuah gagasan yang bagus untuk memiliki validasi HTML pada situs Anda untuk memeriksa kesalahan dan membersihkan coding yang tidak perlu. Dan bagi Anda yang ingin mencoba keberuntungan apakah blog yang Anda kelola Valid HTML atau tidak, silahkan menuju link dibawah ini :


Modifikasi Template Tipe Magazine Valid HTML5

Setelah nulis muter-muter tidak ada ujung pangkalnya, sekarang saya akan bagikan kepada Anda disini, 3 buah template lama dari Creating Website yang tadinya masih memakai format HTML lama, saya ganti menjadi HTML5 dan yang pasti validitasnya bisa dicek nanti. Bentuk dan model template ini sama persis dengan yang sudah saya bagikan tidak ada yang berubah, tapi codingnya yang berbeda, silahkan langsung saja :

Johny Sompret Banget

banget




Johny Kena Banned 

johny kena banned




Johny Sompret

johny sompret




Ketiga template diatas, sudah saya modifikasi sehingga valid secara HTML5. Bukan jaminan 100% jika Anda memakai ketiga template diatas, blog Anda juga akan mempunyai validasi HTML, semuanya tergantung pengguna. Paling tidak saya sudah membuang kode-kode error yang ada pada template-template diatas, Anda tinggal menyesuaikan jika ada penambahan kode di Edit HTML maupun pada widget. Silahkan dicoba bagi yang tertarik dan semoga bermanfaat.

Modifikasi Slider Lofslidernews Otomatis Maknyus

Kali ini saya akan berikan satu lagi tutorial membuat slider otomatis dari Lofslidernews. Slider ini buatan landofcoder.com, demo aslinya bisa dilihat disini. Abu Farhan, seorang master blogger Indonesia juga pernah membuat slider ini yang bekerja berdasarkan popular post, tapi kekurangannya jika gambar yang dipakai ukurannya kecil atau ukuran tingginya lebih besar, gambar pada slider seperti kegenjet dan kurang enak dilihat. Disini saya hanya memodifikasi agar gambar terlihat simetris meskipun ukuran tinggi lebih besar, tapi tetap harus menggunakan gambar dengan ukuran besar jika ingin hasil yang lebih bagus. Slider ini juga saya buat agar bisa menampilkan artikel terbaru juga per kategori atau label.

Sekilas bentuk dari slider ini seperti slider yang ada pada template Sporty Magazine2 dari Borneo Templates. Banyak perbedaan mendasar dari kedua slider ini, disamping kode-kode pembentuk slider, Lofslidernews mampu menampilkan berapapun post yang ingin Anda tampilkan pada slider, karena gambar pagination kecil bergerak dinamis dari atas  kebawah kemudian kembali lagi keatas menggunakan efek Easing. Gerak dari gambar utama pada slider ini pun dari kanan ke kiri seperti pada Looped Slider yang akan saya bahas lain waktu.Untuk lebih jelasnya silahkan lihat demonya dibawah :

lofslidernews


Sebelum masuk ke tutorial membuat slider ini, saya mau kasih tau dulu kalau slider ini agak ribet dalam pengaturan panjang dan lebar image, baik yang besar maupun yang kecil (pagination). Juga slider ini lebih banyak menggunakan kode script, yang bagi blog prioritas SEO akan sangat merugikan. Tapi semua itu bisa diatasi dengan mengkompres dan meringkas kode-kode script pada slider di Google Code.

Oke, jika Anda berminat perhatikan baik-baik tutorial cara pemasangan slider ini sebagai berikut :
  1. Setelah masuk ke dashboard blogger, pilih blog yang akan dipasang slider ini.
  2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
  3. Di back up dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
  4. Pertama yang harus Anda lakukan adalah membuat satu buah kolom kosong diatas blog post, seperti gambar di bawah ini (jika pada template yang Anda pakai sudah terdapat satu kolom kosong seperti gambar dibawah, langkah ini tidak perlu dilakukan) :
    lofslidernews

    Caranya, letakkan kode berikut di atas kode ]]></b:skin> 
    1. /* Slide Content 
    2. ----------------------------------------------- */  
    3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;floatleft;  
    4. word-wrap: break-word; overflowhidden;}   
    5. .slide {color#666666;line-height1.3em;}  
    6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
    7. .slide li {margin:0;padding-top:0;  
    8. padding-right:0;padding-bottom:.25em;  
    9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
    10. .slide .widget {margin:0px 0px 6px 0px;}  

    Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
    2.       <div id='slide-wrapper'>  
    3. <b:section class='slide' id='slide' preferred='yes'/>  
    4.       </div>  
    5. </b:if>   
  5. Save template dulu, sekarang masuk ke Layout/Tata Letak, Anda cek apa sudah terpasang satu kolom di atas Blog Post? Jika sudah ada, masuk lagi ke Edit HTML. Kemudian masukkan kode berikut di atas kode ]]></b:skin> :
    /* Lofslidernews */
    #slider{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#f6f6f6),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#f6f6f6 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#f6f6f6 0,#e2e2e2 100%);
    border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:1px solid #999;box-shadow:0 0 4px #888;-moz-box-shadow:0 0 4px #888;-webkit-box-shadow:0 0 4px #888;padding:10px;margin:4px;position:relative;overflow:hidden;width:600px;height:298px;}
    .slider-main-outer{position:relative;height:100%;width:400px;z-index:3;overflow:hidden}
    ul.slider-main-wapper li h3{z-index:10;position:absolute;bottom:-14px;width:385px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWmmmkoloDugKQlri40uRrcS_ksY3u3fDbjTrxbMwg87xmVY3O7vhvXyFG_UgX7JAUdOL4A60BpiY2B4eSbuo2pU5Md_mLautpl7cZN3p9Y5E2xarNn1XBDX1Wcypma-ZoImFqEN_ffMD/s1600/transparant.png);padding:10px}
    ul.slider-main-wapper li h3 p{color:#FFF;font-size:12px;padding-top:5px;display:block;margin:0}
    ul.slider-main-wapper li h3 a{color:#FFF;font-size:16px;line-height:25px;margin:0}
    ul.slider-main-wapper li .imgauto{width:405px;height:298px;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper{height:298px;width:405px;position:absolute;overflow:hidden;margin:0;padding:0}
    ul.slider-main-wapper li{overflow:hidden;list-style:none;height:100%;width:405px;float:left;margin:0;padding:0}
    .slider-opacity li{position:absolute;top:0;left:0;float:inherit}
    ul.slider-main-wapper li img{list-style:none;width:405px;height:auto;padding:0}
    ul.slider-navigator{top:0;position:absolute;width:100%;margin:0;padding:0}
    ul.slider-navigator li{cursor:pointer;list-style:none;width:100%;overflow:hidden;margin:0;padding:0}
    .slider-navigator-outer{position:absolute;right:10px;top:10px;z-index:10;height:300px;width:200px;overflow:hidden;color:#333}
    .slider-navigator li h5{color:#333;font:11px Arial;margin:0;padding:5px 10px 0 0}
    .slider-navigator li div{background-color:#e2e2e2;background-image: -moz-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -ms-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -o-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e2e2e2)); background-image: -webkit-linear-gradient(top,#fff 0,#e2e2e2 100%); background-image: linear-gradient(to bottom,#fff 0,#e2e2e2 100%)color:#444;text-shadow:1px 1px 1px #fff;height:56px;position:relative;margin:0px 0px 3px 10px;padding:0 5px;border:1px solid #c0c0c0;}
    .slider-navigator li.active div,.slider-navigator li:hover div{color:#0178d3;border:1px solid #999}
    .slider-navigator li img{border:#ddd solid 1px;height:44px;width:60px;float:left;margin:5px 5px 5px 0}
    .slider-navigator li.active img{border:#eee solid 1px}
    .slider-navigator li.active h5{color:#0178d3}
    Perhatikan kode warna merah diatas, itu dalah ukuran panjang dan lebar slider, silahkan disesuaikan dengan ukuran pada template Anda. Pada demo yang saya gunakan panjang main-wrapper 630px tapi karena ada padding slider sebesar 10px, ukuran yang saya gunakan untuk slider hanya 600px.
  6. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/24211643151/jquery.easing.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[

    (function($) {

    var types = ['DOMMouseScroll', 'mousewheel'];

    $.event.special.mousewheel = {
        setup: function() {
            if ( this.addEventListener )
                for ( var i=types.length; i; )
                    this.addEventListener( types[--i], handler, false );
            else
                this.onmousewheel = handler;
        },
        
        teardown: function() {
            if ( this.removeEventListener )
                for ( var i=types.length; i; )
                    this.removeEventListener( types[--i], handler, false );
            else
                this.onmousewheel = null;
        }
    };

    $.fn.extend({
        mousewheel: function(fn) {
            return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
        },
        
        unmousewheel: function(fn) {
            return this.unbind("mousewheel", fn);
        }
    });


    function handler(event) {
        var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;
        
        event = $.event.fix(event || window.event);
        event.type = "mousewheel";
        
        if ( event.wheelDelta ) delta = event.wheelDelta/120;
        if ( event.detail     ) delta = -event.detail/3;
        
        // Add events and delta to the front of the arguments
        args.unshift(event, delta);

        return $.event.handle.apply(this, args);
    }

    })(jQuery);

    /**
     * @version        $Id:  $Revision
     * @package        jquery
     * @subpackage    lofslidernews
     * @copyright    Copyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved.
     * @website     http://landofcoder.com
     * @license        This plugin is dual-licensed under the GNU General Public License and the MIT License 
     */
    // JavaScript Document
    (function($) {
         $.fn.lofJSidernews = function( settings ) {
             return this.each(function() {
                // get instance of the lofSiderNew.
                new  $.lofSidernews( this, settings ); 
            });
          }
         $.lofSidernews = function( obj, settings ){
            this.settings = {
                direction            : '',
                mainItemSelector    : 'li',
                navInnerSelector    : 'ul',
                navSelector          : 'li' ,
                navigatorEvent        : 'click',
                wapperSelector:     '.slider-main-wapper',
                interval               : 4000,
                auto                : true, // whether to automatic play the slideshow
                maxItemDisplay         : 5,
                startItem            : 0,
                navPosition            : 'vertical', 
                navigatorHeight        : 60,
                navigatorWidth        : 210,
                duration            : 600,
                navItemsSelector    : '.slider-navigator li',
                navOuterSelector    : '.slider-navigator-outer' ,
                isPreloaded            : true,
                easing                : 'easeInOutQuad'
            }    
            $.extend( this.settings, settings ||{} );    
            this.nextNo         = null;
            this.previousNo     = null;
            this.maxWidth  = this.settings.mainWidth || 600;
            this.wrapper = $( obj ).find( this.settings.wapperSelector );    
            this.slides = this.wrapper.find( this.settings.mainItemSelector );
            if( !this.wrapper.length || !this.slides.length ) return ;
            // set width of wapper
            if( this.settings.maxItemDisplay > this.slides.length ){
                this.settings.maxItemDisplay = this.slides.length;    
            }
            this.currentNo      = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
            this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );    
            this.navigatorItems = $( obj ).find( this.settings.navItemsSelector ) ;
            this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
            
            if( this.settings.navPosition == 'horizontal' ){ 
                this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
                this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
                this.navigatorOuter.height(    this.settings.navigatorHeight );
                
            } else {
                this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );    
                
                this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
                this.navigatorOuter.width(    this.settings.navigatorWidth );
            }        
            this.navigratorStep = this.__getPositionMode( this.settings.navPosition );        
            this.directionMode = this.__getDirectionMode();  
            
            
            if( this.settings.direction == 'opacity') {
                this.wrapper.addClass( 'slider-opacity' );
                $(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
            } else { 
                this.wrapper.css({'left':'-'+this.currentNo*this.maxSize+'px', 'width':( this.maxWidth ) * this.slides.length } );
            }

            
            if( this.settings.isPreloaded ) {
                this.preLoadImage( this.onComplete );
            } else {
                this.onComplete();
            }
            
         }
         $.lofSidernews.fn =  $.lofSidernews.prototype;
         $.lofSidernews.fn.extend =  $.lofSidernews.extend = $.extend;
        
         $.lofSidernews.fn.extend({
                                  
            startUp:function( obj, wrapper ) {
                seft = this;

                this.navigatorItems.each( function(index, item ){
                    $(item).click( function(){
                        seft.jumping( index, true );
                        seft.setNavActive( index, item );                    
                    } );
                    $(item).css( {'height': seft.settings.navigatorHeight, 'width':  seft.settings.navigatorWidth} );
                })
                this.registerWheelHandler( this.navigatorOuter, this );
                this.setNavActive(this.currentNo );
                
                if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
                    this.registerButtonsControl( 'click', this.settings.buttons, this );

                }
                if( this.settings.auto ) 
                this.play( this.settings.interval,'next', true );
                
                return this;
            },
            onComplete:function(){
                setTimeout( function(){ $('.preload').fadeOut( 900 ); }, 400 );    this.startUp( );
            },
            preLoadImage:function(  callback ){
                var self = this;
                var images = this.wrapper.find( 'img' );
        
                var count = 0;
                images.each( function(index,image){ 
                    if( !image.complete ){                  
                        image.onload =function(){
                            count++;
                            if( count >= images.length ){
                                self.onComplete();
                            }
                        }
                        image.onerror =function(){ 
                            count++;
                            if( count >= images.length ){
                                self.onComplete();
                            }    
                        }
                    }else {
                        count++;
                        if( count >= images.length ){
                            self.onComplete();
                        }    
                    }
                } );
            },
            navivationAnimate:function( currentIndex ) { 
                if (currentIndex <= this.settings.startItem 
                    || currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1) {
                        this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
                        if (this.settings.startItem < 0) this.settings.startItem = 0;
                        if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay) {
                            this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
                        }
                }        
                this.navigatorInner.stop().animate( eval('({'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'})'), 
                                                    {duration:500, easing:'easeInOutQuad'} );    
            },
            setNavActive:function( index, item ){
                if( (this.navigatorItems) ){ 
                    this.navigatorItems.removeClass( 'active' );
                    $(this.navigatorItems.get(index)).addClass( 'active' );    
                    this.navivationAnimate( this.currentNo );    
                }
            },
            __getPositionMode:function( position ){
                if(    position  == 'horizontal' ){
                    return ['left', this.settings.navigatorWidth];
                }
                return ['top', this.settings.navigatorHeight];
            },
            __getDirectionMode:function(){
                switch( this.settings.direction ){
                    case 'opacity': this.maxSize=0; return ['opacity','opacity'];
                    default: this.maxSize=this.maxWidth; return ['left','width'];
                }
            },
            registerWheelHandler:function( element, obj ){ 
                 element.bind('mousewheel', function(event, delta ) {
                    var dir = delta > 0 ? 'Up' : 'Down',
                        vel = Math.abs(delta);
                    if( delta > 0 ){
                        obj.previous( true );
                    } else {
                        obj.next( true );
                    }
                    return false;
                });
            },
            registerButtonsControl:function( eventHandler, objects, self ){ 
                for( var action in objects ){ 
                    switch (action.toString() ){
                        case 'next':
                            objects[action].click( function() { self.next( true) } );
                            break;
                        case 'previous':
                            objects[action].click( function() { self.previous( true) } );
                            break;
                    }
                }
                return this;    
            },
            onProcessing:function( manual, start, end ){             
                this.previousNo = this.currentNo + (this.currentNo>0 ? -1 : this.slides.length-1);
                this.nextNo     = this.currentNo + (this.currentNo < this.slides.length-1 ? 1 : 1- this.slides.length);                
                return this;
            },
            finishFx:function( manual ){
                if( manual ) this.stop();
                if( manual && this.settings.auto ){ 
                    this.play( this.settings.interval,'next', true );
                }        
                this.setNavActive( this.currentNo );    
            },
            getObjectDirection:function( start, end ){
                return eval("({'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"})");    
            },
            fxStart:function( index, obj, currentObj ){
                    if( this.settings.direction == 'opacity' ) { 
                        $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} );
                        $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );
                    }else {
                        this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} );
                    }
                return this;
            },
            jumping:function( no, manual ){
                this.stop(); 
                if( this.currentNo == no ) return;        
                 var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})");
                this.onProcessing( null, manual, 0, this.maxSize )
                    .fxStart( no, obj, this )
                    .finishFx( manual );    
                    this.currentNo  = no;
            },
            next:function( manual , item){

                this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length);    
                this.onProcessing( item, manual, 0, this.maxSize )
                    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                    .finishFx( manual );
            },
            previous:function( manual, item ){
                this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1;
                this.onProcessing( item, manual )
                    .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this )
                    .finishFx( manual    );            
            },
            play:function( delay, direction, wait ){    
                this.stop(); 
                if(!wait){ this[direction](false); }
                var self  = this;
                this.isRun = setTimeout(function() { self[direction](true); }, delay);
            },
            stop:function(){ 
                if (this.isRun == null) return;
                clearTimeout(this.isRun);
                this.isRun = null; 
            }
        })
    })(jQuery)

     //]]>
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0FYysoqKpoe-sVrrJUpRVXsPDXc9wBwGSVrQ_8pmnp6ELDRGa2DGsYfdpb_girpjudWNcCqVKyZYxRjjko4yWt9xtCQCi8YZJ3YEAvZ56nokFsEUgRqV1CPo_SFXV_3IgKGsyadSMEwo/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 70;
    summaryTitle = 20;

    numposts = 10;

    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();

          for (var i = 0; i < numposts; 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 style="position:relative;"><div class="imgauto"><a href="'+posturl+'"><img width="405" height="298" class=" " src="'+img[i]+'"/></a></div><h3><a href="'+posturl+'">'+posttitle+'</a><p>'+daystr+' / '+pcm+' comments</p></h3></li>';                    
            document.write(trtd);       
                    
                  j++;
        }
        
    }


    function showrecentposts1(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();
        
          for (var i = 0; i < numposts; 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><div><img width="60" height="44" class="alignnone" src="'+img[i]+'"/><h5>'+posttitle+'</h5></div></li>';                    
            document.write(trtd);       
                    
                  j++;
        }
        
    }

     //]]>
    </script>
    Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan. numposts:10; adalah jumlah post yang tampil pada slider
  7. Save templates lagi, pemasangan kode-kode di Edit HTML selesai. Sekarang Anda kembali keLayout/Tata Letak. Masukkan kode di bawah ini ke dalam kolom kosong diatas Blog Post yang sudah Anda buat pertama kali, klik Add a Gadget >> HTML/Javascript :
    <div class='lof-main-wapper' id='slider'>
    <div class='slider-main-outer'>
    <ul class='slider-main-wapper'>
    <script>                    
    document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
    </script>
    </ul>
    </div>
    <div class='slider-navigator-outer'>
    <ul class='slider-navigator'>
    <script>                    
    document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </script>
    </ul>
    </div>
    </div>
    <script type='text/javascript'>
    jQuery(document).ready(function($){    
        $('#slider').lofJSidernews({
            interval:6000,
            duration:800,
            mainWidth: 405,
            navigatorWidth: 200,
            maxItemDisplay:5,
            easing:'easeInOutQuad',
            auto:true,
            isPreloaded: false
        });
    });    
    </script>
    Keterangan :
    Tulisan warna merah (misteri) adalah label yang saya masukkan pada slider. Silahkan diganti dengan label yang ingin ditampilkan.
  8. Terakhir save, selesai.
Agak rumit ya? pelan-pelan nanti juga bisa. Baca tutorialnya dengan teliti jangan ada yang kelewatan karena menurut saya ini agak sedikit rumit dalam pengaturan panjang dan lebar. Jangan lupa kopinya diminum dulu, nanti keburu dingin. Jika masih ada yang kurang jelas, bisa ditanyakan pada kolom komentar dibawah. Itu tadi tutorial membuat slider Lofslidernews kali ini, silahkan dicoba dan semoga bermanfaat.

NB :
To Assal Ali, I will make tutorial slider in Johny Jogos template for you, next after this post

Friends