Advertisement

Cara Membuat Feature Post Slide Show

Pada beberapa blog sering kita jumpai sebuah slide show berupa featuring post dengan gambar yang bergerak silih bergantian, dimana jika gambar tersebut kita klik, maka kita akan dibawa pada artikel penuh dari feature post tersebut. Nah, pada kesempatan yang baik ini aku akan coba berbagi cara pembuatannya pada sobat semua.

Cara Membuat Feature Post Slide Show
Cara membuat feature post slide show ini menggunakan kode Jquery yang nantinya harus sobat simpan kedalam template blog, sementara untuk menampilkan feature post-nya sendiri, kita bisa menggunakan widget HTML/JavaScript. Baiklah, rasanya sudah cukup penjelasannya, sekarang kita lanjut pada cara pembuatannya.

Seperti biasa, log in kedalam dasbor blog, setelah itu pilih template, kemudian pilih edit HTML, centang juga kotak expand template widget, kemudian cari kode seperti ini: </head>, setelah menemukan kodenya, masukkan kode yang panjang dibawah ini tepat diatas kode</head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://ceritangeblog.googlecode.com/files/coin-slider.min.js.txt' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 470, navigation: true, delay: 3000 }); }); </script>

Catatan: pada angka yang aku warnai bisa sobat ganti, dan sesuaikanlah tata letak lebar serta kecepatannya.

Setelah selesai memasukkan kode diatas, kemudian jangan lupa untuk menyimpan hasil kerja sobat. Klik simpan perubahan pada template.

Langkah selanjutnya adalah pergi atau pilih tata letak, kemudian klik tambah widget, kemudian pilih HTML/JavaScript, kemudian masukan kode slide show dibawah ini kedalam widget HTML/JavaScript tadi.

<div id='coin-slider'>

<a href="TargetURL HERE" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTZlhT78hBXjqMHwROd818mWWsl9mzxluDSu8RYmyR4OIvkGL5D_gRbr5KohjVOehT1-LQGBSyylu4GK8p3I5J0FsY22bjYGv7eWTfxnzA_Zp0WEP5QYiRwMab1FrfECTjdRWCd8ATnyKV/s400/Frame.png" />
        <span>
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.
        </span>
    </a>
 
<a href="TargetURL HERE" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjESh_JthIH0_AmAnyecd6yJW66GYdCoJOX5s-uEsEkLr6STWyVeIxuxm7T-qeAyLzDYiP3qtuUcZoxspXPFcovUta_HIBzGQpqIt5S56Ozg6OCnCeXqLq-8SBAUdpSXjlJE_uMxPOEyE85/s400/BACKTOTOP.png" />
        <span>
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.
        </span>
    </a>

<a href="TargetURL HERE" target="_blank">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbrg8KTlBe6_CAOy_5xGuIBheLkCPVvuFcmbpnKnUOrApKBDhvIqs9nx01jT-09s6WowZQKCGk9gi6yZykcx7EA1sGTnznYS8DbdbP1QbDOqkjBy0-LgZzcHv5H99fb0jz5B8Zt_cQlCF/s400/Readmore+otomatis.png" />
        <span>
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.
        </span>
    </a>

</div>

Catatan: ubahlah Url gambar yang aku beri warna dengan url gambar postingan sobat sendiri, kemudian kata-kata pada feature post juga harap diganti dengan kata-kata artikel sobat sendiri. Terakhir klik simpan widget, dan selesai.!


Cara Membuat Feature Post Slide Show

Kurang lebih hasilnya akan terlihat seperti pada gambar diatas, terakhir aku ucapkan, selamat mencoba dan sampai disini dahulu cara membuat feature post slide show pada blogspot. Sobat juga bisa mencoba trik memasang slide show sederhana yang pernah aku posting sebelumnya, yaitu cara memasang gadget tampilan slide pada blogspot.

Bye-bye….

Post a Comment

1 Comments

  1. Pertamax, gan... hehehe,,,
    kayaknya perlu diperaktekin nih,,,

    mampir juga ke blog reot ane gan,,,

    ReplyDelete

Silahkan meninggalkan komentarnya.!
*(Mohon untuk tidak mencantumkan link hidup)