Cara membuat slider post otomatis di blogger dan website

Cara membuat slide post otomatis di blog dan website, sangatta – Blogging itu semakin lama semakin asik untuk disimak, semakin sering kita berhadapan dengan blog atau website kita akan menemukan hal yang baru.

Slider post berfungsi untuk menampilkan postingan kita ada yang slider pilihan ada juga slider post otomatis pada blog. Selain menarik, slider blog juga akan memperindah tampilan pada blog atau website kita.

Yang akan kita bahas sekarang adalah Cara membuat slider post otomatis di blogger dan website yang langsung bisa kalian praktekkan langsung kedalam blog kalian, sebelum kalian memasang silahkan simak satu persatu Cara membuat slider post otomatis di blog dan website.

• Pertama silahkan masuk ke blog kalian pilih Template lalu Edit HTML setelah kalian masuk ke mode HTML silahkan cari kode ]]></b:skin> atau silahkan cari dengan Ctrl + F lalu masukkan kode ]]></b:skin> atau </style> lalu letakkan kode dibawah ini tepat diatasnya.

.easyslider-wrapper { width: auto; float: left; position: relative; padding-right: 2%; padding-top: 10px; } .easyslider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .image_reel { position: absolute; top: 0; left: 0; } .image_reel img { float: left; width: 20%; height: 350px; } .paging { background: none; position: absolute; bottom: 15px; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .paging a { margin: 3px; background: #fff; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .paging a.active { background: #15E3FF; border: 1px solid #15E3FF; } .paging a:hover { } .easytitledes { width:70%; display: none; position: absolute; bottom: 20px; left: 20px; z-index: 101; background: #000A3F; background: rgba(2, 0, 51, 0.6); padding: 10px 15px; } .easytitledes a { color: #15E3FF; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .easytitledes a:hover { color:#29FF00 } .easytitledes p { color: #fff; font: 12px Arial; }

(Baca juga : Pelukis otodidak dari sangatta kabupaten kutai timur)

• Masih di dalam template kalian, sekarang kita akan memasang Jquery dan untuk memasang Jquery silahkan cari kode </head> dan pasang Jquery berikut tepat diatas kode </head>

Ada dua pilihan untuk slider kalian, bisa dengan cara manual atau dengan cara otomatis, jika dengan cara manual kalian harus satu persatu memasukkan URL artikel kalian, jika dengan cara otomatis kalian tidak perlu memasukkan URL artikel kalian, jadi ketika kalian post kan artikel kalian secara otomatis artikel kalian langsung masuk ke slider.

• Jika kalian ingin memasang slider secara manual silahkan cari kode <div class=”main-wrapper” > atau <div class=’blog-posts hfeed’> tergantung dari template kalian, pada template lihat demo diatas itu dipasang dibawah <div class=’blog-posts hfeed’> silahkan pasang kode berikut dibawahnya.

<b:if cond=’data:blog.url == data:blog.homepageUrl’></p><br> <div> </p><br> <div> </div><br> <div><br> <div>Post-Title 1</p><br> <p>Description / Caption 1</p><br> </div><br> <div>Post-Title 2</p><br> <p>Description / Caption 2</p><br> </div><br> <div>Post-Title 3</p><br> <p>Description / Caption 3</p><br> </div><br> <div>Post-Title 4</p><br> <p>Description / Caption 4</p><br> </div><br> <div>Post-Title 5</p><br> <p>Description / Caption 5</p><br> </div><br> </div><br> <div><a class=”” href=”http://www.purjianto.web.id/#” rel=”2″ /><a class=”” href=”http://www.purjianto.web.id/#” rel=”3″ /><a class=”” href=”http://www.purjianto.web.id/#” rel=”4″ /><a class=”” href=”http://www.purjianto.web.id/#” rel=”5″ /> </div><br> </div><br> <p></b:if>

Catatan : pada kode diatas ….image1.jpg silahkan ganti dengan link gambar kalian dan pada …post-link1.html masukkan link atau URL artikel kalian dan pada post-title 1 silahkan isi dengan judul artikel kalian, silahkan masukkan satu persatu.

• Sekarang jika kalian ingin memasang slider kalian agar post secara otomatis masuk ke slider jadi kalian tidak memasukkan link atau URL satu persatu silahkan ikuti caranya berikut ini :

Masukkan kode dibawah ini tepat diatas kode </head> yang mana kode berikut akan secara otomatis akan memasukkan artikel kalian kedalam slider, jadi kalian tidak harus memasukkan link satu persatu kedalam slider kalian.

Setelah selesai memasukkan Javascript diatas sekarang tugas kalian masih ada satu lagi untuk memasukkan Javascript kedalam template kalian agar slider kalian bekerja dengan benar dan sejajar dengan postingan kalian. Cari <div class=”main-wrapper” > di template blog kalian dan pasang Javascript dibawah ini tepat dibawah <div class=”main-wrapper” > atau <div class=’blog-posts hfeed’> untuk template terbaru.

(Baca juga : Belajar mengexplore keindahan alam kutai timur)

Sekarang jika sudah kalian masukkan semua sesuai intruksi diatas, tugas kalian adalah menyimpan atau save template kalian dan silahkan lihat hasilnya pada blog milik kalian. Sekian tutorial tentang Cara membuat slider post otomatis di blogger dan website semoga bermanfaat dan salam blogger Kutai Timur