1 Membuat Slider yang Elegan dan Simple di Blogspot

Membuat Slider yang Elegan dan Simple di Blogspot

Slider atau yang juga sering disebut slideshow adalah informasi yang berjalan atau sliding di blog atau website. Slider pada dasarnya untuk menampilkan informasi utama yang tertuang dalam sebuah konten blog.

Karena untuk kenyamanan pengunjung, tampilan slider juga menjadi penting diperhatikan. Jika menampilkan slider dengan asal-alasan bukan tidak mungkin akan merusak estetika sebuah website. Olehnya, dibutuhkan tema slider yang sesuai dengan template yang digunakan.

Pada tutorial kali ini, bloGoooblok ~ akan memaparkan cara membuat slider yang elegan dan simple untuk blogspot. Lihat contohnya pada demo dibawah ini:

•     Lihat Demo

Slideshow ini menggunakan JavaScript yang merupakan salah satu cara terbaik untuk menampilkan banyak informasi halaman artikel dalam ruang yang relatif kecil dengan menambahkan fungsi yang bagus.

(Baca Juga: Membuat Popular Post di Blogspot Lebih Ramping)

Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi / keterangan, juga memiliki navigasi menggunakan persegi / titik untuk memberikan pada pengunjung agar dapat memilih konten lebih mudah dengan melompat langsung untuk setiap slide.

Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam kode Script.

Cara Membuat Slider yang Elegan dan Simple di Blogspot

Slider ini dibuat dari beberapa baris HTML sederhana dan jika Anda memiliki pengetahuan dasar CSS, maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus.

Jika tertarik untuk membuatnya, maka ikuti langkah-langkah berikut ini:

•     Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML. Cari kode ]]></b:skin> atau </style>  di bagian head template. Setelah ketemu (gunakan Ctrl F) copy lalu paste script berikut 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;     }

• Masih disekitar head, masukan kode Jquery berikut ini tepat diatas </head>. Namun jika template Anda sudah pernah memasang Jquery dalam versi yang lain, baik itu versi lama, lupakan saja langkah ini. Langsung ke langkah selanjutnya

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

•  Masih tetap di bagian head,  masukan kode JavaScript berikut diatas </head>.

<script type="text/javascript"> $(document).ready(function() {     $(".paging").show();     $(".paging a:first").addClass("active"); var imageWidth = $(".easyslider").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum;     $(".image_reel").css({'width' : imageReelWidth}); rotate = function(){ var triggerID = $active.attr("rel") - 1; var image_reelPosition = triggerID * imageWidth;     $(".paging a").removeClass('active');         $active.addClass('active');     $(".easytitledes").stop(true,true).slideUp('slow');     $(".easytitledes").eq(     $('.paging a.active').attr("rel") - 1 ).slideDown("slow");     $(".image_reel").animate({left: -image_reelPosition}, 400 );     }; rotateSwitch = function(){     $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); play = setInterval(function(){     $active = $('.paging a.active').next(); if ( $active.length === 0) {     $active = $('.paging a:first'); } rotate(); }, 4000); }; rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {     clearInterval(play); }, function() { rotateSwitch();     });     $(".paging a").click(function() { $active = $(this);     clearInterval(play); rotate(); rotateSwitch();  return false;     }); }); </script>

• Untuk memasang kode HTML slider, ada cara yang bisa ditempuh. Secara manual atau otomatis. Manual artinya, isi slider nantinya akan diisi sendiri, sedangkan secara manual, isi slider akan ikut berdasarkan postingan terbaru.

•         Menggunakan Slider Secara Manual

Masukan kode berikut di bagian dalam HTML body blog Anda, contoh setelah atau dibawah kode <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris kode yang sejenis atau mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

Karena saya menggunakan template standar dari blogspot yang terbaru, kode itu saya tempatkan dibawah kode <div class='blog-posts hfeed'>. Itu karena saya ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melakukan hal yang sama, letakkan kode berikut dibawah  <div class='blog-posts hfeed'> yang pertama.

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='easyslider'>    <div class='image_reel'> <a href="#"><img src="...image1.jpg" /></a> <a href="#"><img src="...image2.jpg" /></a> <a href="#"><img src="...image3.jpg" /></a> <a href="#"><img src="...image4.jpg" /></a> <a href="#"><img src="...image5.jpg" /></a>    </div>    <div class='descriptionslider'> <div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div> <div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div> <div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div> <div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div> <div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>    </div>    <div class='paging'> <a class='' href='#' rel='1'/> <a class='' href='#' rel='2'/> <a class='' href='#' rel='3'/> <a class='' href='#' rel='4'/> <a class='' href='#' rel='5'/>    </div> </div> </b:if>

• Untuk memasang kode HTML slider, ada cara yang bisa ditempuh. Secara manual atau otomatis. Manual artinya, isi slider nantinya akan diisi sendiri, sedangkan secara manual, isi slider akan ikut berdasarkan postingan terbaru.

Letakkan Kode Css Berikut Ini :

<!--Featured Slider for Blogger -->
.fp-slider {
background: none repeat scroll 0 0 #FFFFFF;
height: 329px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 850px;
}
.fp-slides-container {
}
.fp-slides, .fp-thumbnail, .fp-prev-next, .fp-nav {
width: 850px; /*Set The Width Of Slider Here*/
}
.fp-slides, .fp-thumbnail {
height: 280px; /*Set The Height Of Images Here*/
overflow: hidden;
padding-top: 0;
position: relative;
}
.fp-title {
color: #FFFFFF;
font: bold 18px Arial,Helvetica,Sans-serif;
margin: 0;
padding: 0 0 2px;
text-shadow: 0 1px 0 #000000;
}
.fp-title a, .fp-title a:hover {
color: #FFFFFF;
text-decoration: none;
}
.fp-content {
background: none repeat scroll 0 0 #111111;
bottom: 0;
left: 0;
opacity: 0.7;
overflow: hidden;
padding: 10px 15px 5px;
position: absolute;
right: 0;
}
.fp-content p {
color: #FFFFFF;
line-height: 18px;
margin: 0;
padding: 0;
text-shadow: 0 1px 0 #000000;
}
.fp-more, .fp-more:hover {
color: #FFFFFF;
font-weight: bold;
}
.fp-nav {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUCW6D4_aKzNU4Xwkr4a0HG77Y8Q3HBkDSOUYsjEERx4u0NHFtGuXOHoEKt6OCN1_QqP-pmk8X-5ZTXS12V8Fw0bDvNnfff3Bp9ThaPWK88kNiQyT7AU58C6cnBt-9ubjDdQ7zo41zUBsp/s1600/h2.png") repeat-x scroll 0 0 transparent;
height: 12px;
padding: 10px 0;
text-align: center;
}
.fp-pager a {
background-image: url("http://1.bp.blogspot.com/-J0WXZkvU9Fw/TwL174uF0sI/AAAAAAAACGU/3zCFSpAL1Xo/s1600/featured-pager.png");
background-position: 0 0;
cursor: pointer;
display: inline-block;
float: none;
height: 12px;
line-height: 1;
margin: 0 4px 0 0;
opacity: 0.7;
overflow: hidden;
padding: 0;
text-indent: -999px;
width: 12px;
}
.fp-pager a:hover, .fp-pager a.activeSlide {
background-position: 0 -112px;
opacity: 1;
text-decoration: none;
}
.fp-prev-next-wrap {
position: relative;
z-index: 200;
}
.fp-prev-next {
bottom: 130px;
height: 37px;
left: 0;
position: absolute;
right: 0;
}
.fp-prev {
background: url("http://4.bp.blogspot.com/-q6d5ARd-gto/TwL18nZpBkI/AAAAAAAACGY/b1BSQrPbsHA/s1600/featured-prev.png") no-repeat scroll left top transparent;
float: left;
height: 37px;
margin-left: 14px;
margin-top: -180px;
opacity: 0.6;
width: 37px;
}
.fp-prev:hover {
opacity: 0.8;
}
.fp-next {
background: url("http://2.bp.blogspot.com/-OpDIcNy43XA/TwL16dnar-I/AAAAAAAACGM/pGYlPIxfbE8/s1600/featured-next.png") no-repeat scroll right top transparent;
float: right;
height: 37px;
margin-right: 14px;
margin-top: -180px;
opacity: 0.6;
width: 36px;
}
.fp-next:hover {
opacity: 0.8;
}
<!-- Featured Slider for Blogger  -->

Komentar →