بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم
Langsung saja pada langkah pembuatannya :
Selamat mencoba dan semoga bermanfaat.
Tutorial kali ini menjawab pertanyaan dari Mr. Copas pada artikel membuat Image Slider Otomatis, yang menginginkan slider pada template Sporty Magazine 2 made in Borneo Templates yang dipakainya menjadi otomatis. Ketika saya berselancar atau bahasa kerennyasurfing di internet, beberapa kali menemukan banyak sekali pengguna template ini baik dari dalam maupun dari luar negeri. Template ini memang fenomenal dan banyak sekali peminatnya, dengan tampilan dasar mirip nbcsports.msnbc.com, template ini menjadi salah satu template blogger dengan pengguna paling banyak.
Pada kesempatan kali ini saya akan mencoba untuk membuat slider bawaan dari template tersebut yang masih mengisikan URL dan keterangan slider satu persatu, menjadi otomatis. Tinggal memasukkan beberapa kode ke kotak HTML/Javascript dengan merubah label tertentu, maka slider pada template ini menjadi otomatis, Sehingga setiap postingan baru dengan label yang diletakkan pada slider, secara otomatis akan muncul.
Langsung saja pada langkah pembuatannya :
- Masuk ke Blogger dengan akun anda
- Di dashboard pilih blog, kemudian pilih template >> Edit HTML. Jangan lupa untuk mencentang kotak Expand Widget Templates.
- Setelah itu letakkan kode berikut ini diatas kode ]]></b:skin> :
Catatan :
Bagi pengguna template Sporty Magazine 2 langkah itu tidak perlu dilakukan karena kode ini sudah ada. Untuk pengguna template lain, silahkan ukurannya disesuaikan. - Masih dalam posisi Edit HTML, letakkan kode berikut diatas kode </head> :
Catatan :
Untuk pengguna template Sporty Magazine 2, hapus dulu kode script bawaan slider, kemudian baru letakkan kode diatas. - Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :Keterangan :
Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. - Untuk pengguna template Sporty Magazine 2, tinggal memasukkan kode diatas pada kolom kosong diatas blog post (kalau tidak salah... hehehe). Dan untuk pengguna lain mesti buat dulu satu kolom diatas blog post. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
- /* Slide Content
- ----------------------------------------------- */
- .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
- word-wrap: break-word; overflow: hidden;}
- .slide {color: #666666;line-height: 1.3em;}
- .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
- .slide li {margin:0;padding-top:0;
- padding-right:0;padding-bottom:.25em;
- padding-left:0px;text-indent:0px;line-height:1.3em;}
- .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 :
- <b:if cond='data:blog.url == data:blog.homepageUrl'>
- <div id='slide-wrapper'>
- <b:section class='slide' id='slide' preferred='yes'/>
- </div>
- </b:if>
Selamat mencoba dan semoga bermanfaat.
Ditulis Oleh : SyariĪ ~ Tips dan Trik Blogspot

Baca Artikel Lainnya.!:
Template
- Cara Membuat Animasi Download
- Cara Mengedit Template Windows 8 V3
- Download Template Blogger Windows 8 SM V3
- Download Template Blogger Windows 8 SM V2
- Download Template Blogger Windows 8 SM
- Download Template Game Untuk Blogger
- Download Template Game for Blogger
- Template Blogger Transparent (Uniqx Transparent) | TuTorial Ku UnTuK Mu
- Template Minimalis Free Unique Bluish X-Gen
- Portal template (Platform Blogger)
- Template Black Hat (Red)
- Template Portal by P4r4GcyB3rn3t SImple
- Template HN Community V3
- Template Green Transparent
- Template Blogger FREE & PREFESIONAL | Sariptrik
- Cara membuat Content Slider Image pada Template Video | TuTorial Ku UnTuk Mu
- Template Video Johny Crottube Blogger
- Template News Portal Blogger | SEO and Prefesional
- 3 Template Blogger SEO & Prefesional Free
blogger
- Download Template Game Untuk Blogger
- Cara Membuat dan Memasang YM Status Blog | TuTorial Ku UnTuK Mu
- Cara Membuat Icon Berbeda Pada Tiap Widget Blog
- Cara Membuat PageView Hits Counter Pada Setiap Artikel
- Cara Memasang Radio Streaming Di Sidebar Kiri
- Cara Membuat Maintaince Blog | TuTorial Ku UnTuK Mu
- Cara Membuat Text Area Keren Berwarna | TuTorial Ku UnTuK Mu
- Cara Membuat Mp3 Melayang Di Blog Dengan Tombol Show Hide | TuTorial Ku UnTuK Mu
- Cara Membuat Kotak link Keren | TuTorial Ku UnTuK Mu
- Template Blogger Transparent (Uniqx Transparent) | TuTorial Ku UnTuK Mu
- Cara membuat Embed Player Player Musik Melayang Di Blog | Tutorial Ku Untuk Mu
- Cara membuat Buku Tamu muncul keren | TuTorial Ku UnTuK Mu
- cara membuat postingan di blog | Tutorial ku untuk Mu
- Cara membuat gambar bergerak pada posting Bergerak pada saat disentuh mouse
- cara membuat readmore otomatis dengan sedikit sentuhan animasi
- Template Minimalis Free Unique Bluish X-Gen
- Cara membuat Menu HOVER mouse Terbuka di atas blog
- Cara Mengganti Template BloGger | Versi Sariptrik
- Portal template (Platform Blogger)
- Template Black Hat (Red)
- Template Portal by P4r4GcyB3rn3t SImple
- Template HN Community V3
- Template Green Transparent
- Template Blogger FREE & PREFESIONAL | Sariptrik
- Cara membuat Content Slider Image pada Template Video | TuTorial Ku UnTuk Mu
mantap gan
BalasHapus@sarang tekno Terima kasih ^_^d
BalasHapus