Membuat Slide Show dengan JQuery di Blog

Kali ini aku akan menjelaskan langkah-langkah membuat slide show image dengan jquery di blog. Kenapa harus pakai jquery? Umumnya para blogger sering menggunakannya karena desainnya yang variatif. Untuk ini aku menggunakan desain yang sederhana.Berikut tahapannya:

1) Login ke blogger
2) Pilih Edit template
3) Jangan lupa mencentang expand widget template
4) Copy kode berikut di atas tag </head>. Download scriptnya di sini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"type="text/javascript"></script>

5) Simpan template

6) Selanjutnya pilih tata letak

Mudah Membuat Tab View Menu di Blog

Tab view menu ini berfungsi untuk menampilkan beberapa widget dengan bentuk tab menu dalam satu widget. Intinya kita meringkasnya menjadi satu dengan tampilan tab di atasnya. Membuat tampilan blog semakin menarik, simple dan tentunya minimalis. Berikut langkah-langkahnya:

1) Login blogger

2) Pilih tata letak

3) Tambahkan gadget, pilih html javascript

4) Copy kode di bawah ini, download scriptnya di sini

 <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 2px 0px 0px 2px;
     font-size: 15px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: 708090;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #000000;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: 4169E1;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none; {
    </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

5) Simpan tanpa judul. Letakkan di atas widget yang ingin kamu tab

Memasang Scrollbar pada Widget Blog

Tau kan yang namanya scrollbar? Tidak ada kerumitan untuk membuatnya justru ini tergolong mudah. Ok, langsung pada langkah-langkah membuatnya:

1) Login blogger
2) Edit html, jangan lupa centang expand template widget
3) Copy kode ini di atas tag ]]></b:skin>
#PopularPosts1 .widget-content{
height:230px;
width:auto;
overflow:auto;
}
Catatan:
Warna merah adalah widget yang diinginkan dengan tampilan scrollbar
Warna hijau adalah ukuran tinggi widget