Widget Slider Gambar Unggulan

Beberapa Teman bertanya kepada saya tentang slider gambar unggulan di mana dapat menampilkan posting statis berdasarkan pilihan, jadi saya berpikir untuk membagikan jQuery yang dilengkapi Image Slider di mana kalian dapat menambahkan Info khusus untuk menampilkan posting blog favorit kalian di home page. Jika seandainya kalian ingin menampilkan gambar secara otomatis berdasarkan label tertentu

Apa itu Slider Gambar Unggulan?

Feature Image slider juga dikenal sebagai gambar carousels atau slideshow adalah cara terbaik untuk menampilkan banyak gambar, video, atau grafik di situs Anda. Gambar unggulan yang dapat digeser atau digeser pengguna dapat menarik pengunjung baru ke situs Anda, secara cepat menarik perhatian mereka, sehingga mereka akan betah di blog kalian.
Slider Gambar Unggulan bisa statis atau dinamis.

Dalam slider dinamis seperti slider Blogger atau Recent posts slider yang saya buat, gambar secara otomatis ditampilkan dengan menarik tulisan terbaru dari label blog tertentu.
Slider Gambar Unggulan dibangun menggunakan FlexSlider dan secara default Mobile responsif. Ini menyesuaikan secara otomatis ke berbagai ukuran layar perangkat.

Berikut Cara Menambahkan Slider Gambar Unggulan Di Blogger

Ikuti langkah mudah di bawah ini untuk menambahkan slider gambar responsif keren ini ke blog kalian.

Buka Blogger> Template

Jangan lupa backup dulu template kalian

Klik “Edit HTML”

Cari kode <head> Dan letakkan JS dan CSS berikut di bawah <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

<link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/>

<script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>

Note* Jangan menambahkan JQuery, FontAwesome, FlexSlider atau Oswald ke template kalian jika kalian sudah menggunakannya di template kalian.

Selanjutnya ]]></ b: skin> dan letakkan kode berikut di atasnya

/*Blogger Image Slider By Mahesa.id*/

.mbt-s{margin:0 5px;border:0;width:100%;overflow:hidden}

.mbt-s .slides{list-style-type:none;margin:0 auto;padding:0}

.mbt-s li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px}

.mbt-s .flex-control-nav li{display:inline-block;margin:0 2px}

.mbt-s .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important}

.flex-direction-nav .flex-prev{left:-50px}

.flex-direction-nav .flex-next{right:-50px;text-align:right}

.mbt-s .flex-control-paging{display:none}

.flex-direction-nav{position:relative;top:-250px}

.mbt-s .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128}

.mbt-s .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px}

.mbt-s li a{color:#0080ff;text-decoration:none}

.mbt-s i{color:#999;padding-right:5px}

.mbt-s .iline{line-height:2em;margin:0;position:relative;top:-87px;background:#31363a;padding:3px 10px;display:inline-block}

.mbt-s .icontent{line-height:1.5em;margin-top:5px}

.mbt-s div span{margin:0 5px 0 0;display:inline-block;font-weight:400}

.mbt-s .mbttitle{font-family:oswald;font-size:20px;color:#ff0;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#222;padding:15px 10px;display:block}

.mbt-s .mbttitle:hover,.mbt-s .itotal a:hover{color:#fff;text-decoration:none}

.mbt-s .iedit a{text-decoration:none;color:#999;cursor:pointer}

.mbt-s .iedit:before,.mbt-s .iauthor:before,.mbt-s .itag:before,.mbt-s .icomments:before,.mbt-s .idate:before,.mbt-s .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}

.mbt-s .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}

.mbt-s .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%}

.mbt-s .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px}

.mbt-s .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7}

.mbt-s .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}

.mbt-s .icomments a{color:#0080ff;font-family:arial;font-size:12px}

.mbt-s .icomments a:hover{text-decoration:underline}

.mbt-s .icomments:before{content:'f086';padding:0 3px 0 7px;color:#fff}

.mbt-s .idate{color: #ff0;padding: 9px 10px;font-family: Oswald;

    font-size: 12px;position: relative;top: -270px; left:-80px;

    background: #222;width: 23px;text-align: center;line-height: 1.8em;}

.mbt-s .idate b{font-size:17px;}

Klik simpan

Untuk mengubah warna latar belakang hitam di balik judul dan tanggal edit:#22
Untuk mengubah warna kuning judul slide dan edit font tanggal: #fff
Untuk mengubah warna link komentar edit #0080ff

Sekarang masuk ke Blogger> Layout

Pilih “Tambahkan Gadget”

Pilih gadget “HTML / JavaScript”

Kolom judul biarkan kosong, kemudian masukkan script di bawah ini

<script type="text/javascript">

$(window).load(function() {

  $('.mbt-s').flexslider({

animation: "slide",itemWidth: 600,itemMargin: 25,directionNav: true,touch: true,slideshowSpeed: 2500,pauseOnHover: true,animationSpeed: 700,});});

</script>

<div class="flexslider mbt-s">

<ul class="slides">

<!-- SLIDE 1 -->

<li>

<div class="flex-div">

<div class="iFeatured">

<a href="POST LINK"><img src="POST IMAGE" /></a></div>

<div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>

</div>

</li>

<!-- SLIDE 2 -->

<li>

<div class="flex-div">

<div class="iFeatured">

<a href="POST LINK"><img src="POST IMAGE" /></a></div>

<div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>

</div>

</li>

<!-- SLIDE 3 -->

<li>

<div class="flex-div">

<div class="iFeatured">

<a href="POST LINK"><img src="POST IMAGE" /></a></div>

<div class="iline"><span class="iauthor"><img class="AUTHOR IMAGE" />AUTHOR NAME</span><span class="icomments"><a href="#comment-form">COMMENTS COUNT</a></span> </div><span class="idate">Jun <b>10</b></span><a class="mbttitle" href="POST LINK" target="_blank">POST TITLE</a>

</div>

</li>

</ul></div>

Script di atas akan membantu kalian membuat tiga slide gambar. Setiap slide memiliki kode yang sama. Kalian hanya perlu mengubah bidang yang diminta dalam format ini:

     Ganti *Post Link dengan URL Posting. harus dimulai dengan http: //
     Ganti *Post Image dengan URL gambar kalian. Pastikan gambar Anda minimal 600px.
     Gant *Author Image dengan URL gambar penulis juga disebut avatar penulis atau gambar
     Ganti *Author Name dengan nama kalian.
     Ganti *Comment Count dengan berapa banyak komentar yang diposting di pos tersebut.
     Ganti *Jun dan 10 setiap bulan dan tanggal terbit.
     Ganti *Post Tittle dengan judul tekstual dari pos.
     Untuk menambahkan slide tambahan cukup salin kode slide mulai dari <li> dan berakhiran </ li> dan tempelkan di atas </ul></div>

Akhirnya klik simpan widget anda dan selesai!

Gimana? Ribet kan…

Widget Slider Gambar Unggulan

Comments

Leave a Reply Cancel reply