-->






Iklan

cara membuat slider posting

Cara membuat slider show posting atau cara membuat dan memasang auto post slider carousel.
slider show posting adalah suatu fitur untuk menampilkan beberapa cuplikan posting di halaman home blog/website yang tujuanya selain untuk menarik minat pembaca juga akan menambah keindahan bagi tampilan website blog.
Featured slide show sendiri sangat beragam jenis tampilanya ada yang hanya menampilkan slider slide show untuk image ( gambar ) slide show untuk posting dan slider show untuk posting dan gambar.

Pada panduan blogger dari jasa setting blog kali ini admin akan memberikan panduan untuk memabuat dan memasang featured slider show posting yang artinya slider show nantinya akan menampilkan judul posting terbaru disertai gambar dengan mode berjalan kekanan dan kekiri sehingga akan menambah unik dan indah tampilan website atau blog , untuk contoh nya bisa di lihat gambar yang ada di bawah ini

cara membuat slider show posting

Cara membuat dan memasang slider show posting atau cara membuat featured slide show posting caranya juga mudah hanya perlu memperhatikan dan menyimak tiga (3) kode css dan kode Html untuk di tambahkan dalam Html Template , jadi saya yakin jika sobat blogger mengikuti panduanya nanti dengan teliti maka pembauatan slider show untuk posting akan berhasil.

Cara membuat dan memasang featured slider show posting
1.buka blog anda lalu login akun blog masing-masing
2.klik desain untuk menuju dashboard blog lalu pilih template
3.dan klik Edit HTML ( jika masih bingung silahkan lihat gambar di bawah ini )

cara memasukan kode css slider show posting

4.lalu cari kode di dalam html kode seperti ini ]]></b:skin>
5.selanjutnya kopi kode yang ada di bawah ini lalu pastekan/letakan di atas kode  ]]></b:skin>

#featured-wrap{border-bottom:1px solid #000;box-shadow:0 1px 0 0 #333;background:#111;position:relative;height:175px;margin:0 auto}
#featured{border:2px solid #444;outline:1px solid #000;position:relative;width:88%;height:150px;overflow:hidden;top:10px;margin:0 auto}
#featured ul{width:9999px}
#featured ul,#featured li{list-style:none;padding:0;margin:0;overflow:hidden}
#featured li{width:150px;display:inline-block;float:left;height:150px;background:#222;border-left:1px solid #111;border-right:1px solid #333;}
.thumb-featured{width:140px;height:100px;margin:5px auto;overflow:hidden;border:1px solid #000}
.thumb-featured img{display:block;width:134px;height:94px;border:3px solid #444;}
.title-featured{text-align:center;position:relative;margin-top:-20px}
.title-featured h4{font-size:90%;max-height:45px;overflow:hidden}
.arrow{position:absolute;display:block;background:#111 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKgtOfgoOWxdZntf8_rjHjGf1LPBeLXYXDPXryYC-Nb3_Qr9Cz6bxlAw2LwQbX08lOUJq1miltlBWVzTm35kH2_Gx0VlDLxfR-XsfclLX7WGHs1AReiagkqisRlIyjlAFsXXGMEoT3hg8/h120/icon-sprite.png)no-repeat;background-position:0 50%;width:35px;height:60px;top:50px;text-indent:-9999px;border:1px solid #000;box-shadow:0 0 0 1px rgba(51, 51, 51, 1)inset}
.arrow.back{background-position:0 50%;left:10px}
.arrow.forward{background-position:100% 50%;right:10px}
span.slideloading{background-image:url(https://lh5.googleusercontent.com/-lMCTbMrvSCM/Uo-ClIXhv4I/AAAAAAAAGoY/5JDUhG_-HYA/h42/loading.gif);background-repeat:no-repeat;background-position:50% 50%;text-indent:-9999px;margin:50px auto}


6.kopi lagi kode di bawah ini dan pastekan di atas kode </head>
 

<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/Slider-Carousel.js'/>


7.cara menempatkan tampilan featured slide show nya mau di tempatkan di mana jika mau di tempatkan di bagian atas silahkan kopi kode yang ada di bawah ini dan pastekan di bawah kode <div id='main-wrapper'> dan kalau mau memasang slider show posting nya di bagian bawah / footer silahkan kopi kode yang ada di bawah ini dan pastekan di bawah kode <footer id='footer-wrapper'>


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured-wrap'>
<div id='featured'>
<span class='slideloading'>Loading...</span>
</div>
</div>
</b:if>

8.lalu simpan template nya
9.selesai

 Demikian panduan blogger dari jasa setting blogspot tentang cara membuat dan memasang featured slider show posting , jika ada kesulitan silahkan untuk bertanya saja , saya akan berikan panduanya sampai berhasil membaut sllide show nya.

Komentar

Tampilkan

No comments:

Post a Comment

Terimakasih sudah mengunjungi jasa setting Website / Jasa Pembuatan Website www.jasa-website.web.id semoga bermanfaat , kontak 081399167240

Komputer

+