Membuat "Glider Content" Pada Blog

Membuat "Glider Content" Pada Blog

Ingin menambahkan widget seperti gambar disamping?? Saya menggunakan jQuery slide pada elemen blog. Ikuti langkah-langkah berikut :



1. Login ke blogger dashboard--> layout- -> Edit HTML
2. JANGAN centang "Expand Widget Templates"
3. Cari kode ]]> (gunakan "ctrl+f" untuk mempermudah pencarian)
4. Copy paste code dibawah tepat diatas/sebelum ]]>

/*
Slideshow style rules.
*/
#contentSlide {
border: 1px solid #000;
background:#212421;
height:263px;
padding:10px 0;
}
#slideshow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlTPJpS_axI/AAAAAAAABYA/JS60KVWJ9GQ/bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor: pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KH99FgI/AAAAAAAABZM/e9gXvHjzltU/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SlT8KMpFpxI/AAAAAAAABZQ/a207Rx0XuiU/control_right.jpg) no-repeat 0 0;
}

.slide h2, .slide p {
margin:15px;
}
.slide h2 {
font:italic 24px Georgia, "Times New Roman", Times, serif;
color:#212421;
letter-spacing:-1px;
}
.slide img {
float:right;
margin:0 15px;
padding: 1px;
background-color: #212421;
border: 1px solid #999;
}

5. Kemudian cari kode
6. Copy paste kode dibawah ini diatas/sebelum

7. Kemudian "Save Templates"

8. Arahkan ke Layout-->page elements dan klik 'Add a Gadget'.

9. Pilih 'HTML/Javascript' dan add kode dibawah lalu klik save.

NAMA JUDUL

DESKRIPSI KONTEN

NAMA JUDUL 2

DESKRIPSI KONTEN 2

Catatan : Ganti kode warna biru dengan konten anda. Sebagai contoh bisa dilihat disini

MENAMBAHKAN TAB DIV DALAM BLOG

Menambah Widget Tab View

|

Cara menambah widget tab view untuk blogspot

Tab view adalah sebuah widget yang bisa digunakan untuk mengelompokkan informasi atau berita berdasarkan kategori yang di tentukan.
widget tab view ini sangat berguna, selain bisa menghemat space pada tampilan blog kita widget ini pun bermanfaat untuk mempermudah pengunjung blog untuk mencari informasi yang dibutuhkan.

untuk menambah widget tab view di blogspot seperti gambar diatas bisa menggunakan teknik-teknik berikut ini, cara menambah widget tab view ini sudah lama dipakai dan bila teman-teman blogger memiliki trik yang baru silahkan memberikan komentar pada posting ini.

langkah-langkahnya adalah sbb :

1. masuk ke Edit HTML
2. Copy script dibawah ini dan letakkan sebelum code ]]>
3. div.TabView div.Tabs
   {
   height: 24px;
   overflow: hidden;
   }
   
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 90px; /* Lebar Menu Utama Atas */
   text-align: center;
   height: 24px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #000000; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Arial", Times New Roman, Serif; /* Font Menu Utama Atas */
   font-weight: 900;
   color: #000080; /* Warna Font Menu Utama Atas */
   }
   
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #BDBDBD; /* Warna background Menu Utama Atas */
   }
   
   div.TabView div.Pages
   {
   clear: both;
   background-color: #FFFFFF; /* Warna background Kotak Utama */
   border: 1px solid #000000; /* Warna border Kotak Utama */
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }
4. berikutnya copy script dibawah ini dan letakkan sebelum code
6. Simpan template anda
7. masuk ke page element dan tambahkan gadget baru dengan tipe HTML/JAVASCRIPT
8. letakkan code dibawah ini di gadget yang baru anda buat
9. 
   
   
   

   
   

   
   Tab 1
   Tab 2
   Tab 3

   
   

   
   
   

   
   

   
   Tab 1.1
   
   Tab 1.2
   
   Tab 1.3

   
   
   

   
   

   
   Tab 2.1
   
   Tab 2.2
   
   Tab 2.3

   
   
   

   
   

   
   Tab 3.1
   
   Tab 3.2
   
   Tab 3.3

   
   
   
   
   
10. simpan hasil editing anda
11. letakkan widget baru anda di posisi yang telah anda tentukan
12. untuk memberi Judul tinggal ganti saja teks "Tab 1" menjadi "Berita IT"
13. sedangkan untuk membuat isi dari masing-masing tab tinggal mengganti teks Tab 1.1 dengan link, seperti contoh dibawah ini
14. 
    
    • Tutorial scrol box
    • link silahkan disesuaikan dengan posting artikel anda
    • lihat hasilnya