Kali ini saya akan membagikan bagaimana cara membuat slider image otomatis keren dan simple untuk blogger, banyak juga yang menyediakan image slider dengan cara upload foto sini upload foto sana, yang menurut saya agak ribet ya,hehe.
Dan kebanyak image slider nya memberatkan halaman blog itu sendiri, image slider yang saya akan bagikan sepenuh nya otomatis dan cukup simple untuk menerapkan nya.karena image yang di tampilkan adalah artikel feed yang berasal dari blog anda sendiri.Jadi anda tidak usah bersusah payah dengan upload gambar dulu ke photobucket,photobox dan lain-lain.Karena image slider ini pure otomatis dan tidak perlu ribet dan tentunya blog anda akan tetap SEO dan enteng(gak berat) :D.
Ok,langsung saja ke Cara menerapkan nya ke blog anda:
LANGKAH - 1: Masuk ke Dashboard blog anda & Klik Template (Backup template Anda untuk menghindari terjadinya error karena salah penerapan)
LANGKAH - 2: Pilih Edit HTML
LANGKAH - 3: Untuk mempercepat pencarian tekan ( Ctrl + F )
LANGKAH - 4: Salin kode di bawah ini dan paste tepat sebelum </Head>
<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
* jQuery BloggerDynamicSlider v1.0.0
* Copyright 2016 http://shuvojitdas.com
* Contributing Author: Shuvojit Das
* Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
*
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");
/* Preloader */
.flexslider.loading:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGY5jkbII22zzPdDsGwapp218Dr9rwEwYCSZFPFAIzsGAlE-bTe_KpOomlF5YZeuFe-L3nAvTNwBnDUmTO2u7eZncnhkF_f8lRotFBtjoaSmGGDq9KmOqoWufO-SB8HTlnn0loUKY1tS68/h120/loader.gif) no-repeat center center;
background-color: rgba(255, 255, 255, 0.9);
z-index: 9999;
}
.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
display: none;
}
.flexslider {
border: 1px solid #cacaca;
padding: 4px;
margin: 0 auto 60px auto;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.flexslider a {
text-decoration: none;
}
/* Caption/Post Title */
.flex-caption {
position: relative;
padding-left: 15px;
padding-right: 10px;
height: 60px;
background: #FFFFFF;
color: #1C1C1C;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 26px;
line-height: 26px;
margin: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.flex-caption span {
display: table-cell;
vertical-align: middle;
height: 60px;
}
.flex-caption.overlayDark,
.flex-caption.overlayLight {
margin-bottom: -60px;
bottom: 60px;
position: relative;
}
.flex-caption.overlayDark {
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
.flex-caption.overlayLight {
background: rgba(255, 255, 239, 0.9);
color: #000;
}
ul.slides li a {
display: block;
overflow: hidden;
}
/* blogger css conflicts fix */
.flexslider ul {
margin: 0 !important;
padding: 0 !important;
line-height: initial !important;
}
.flexslider ul.flex-direction-nav li {
margin: 0;
padding: 0;
line-height: initial;
}
.flexslider ul li {
margin-bottom: 0 !important;
}
.flexslider img {
padding: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
ul.flex-direction-nav {
position: static;
}
ul.flex-direction-nav li {
position: static;
}
.error {
font-family: monospace, sans-serif;
}
@media (max-width: 600px) {
.flex-caption {
font-size: 20px;
line-height: 20px;
font-weight: 400;
}
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>
Catatan:
1. Jika anda ingin menampilkan judul postingan silahkan ganti kode seperti di bawah ini :
Cari kode .loading ".loading.flex-caption" dan".flexslider a" tanpa tanda petik, ganti none menjadi show maka jadinya akan seperti ini
.loading.flex-caption {
display: show;
}
.flexslider a {
text-decoration: show;
}
2. Jika anda sudah ada jQuery js seperti ini "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css" di saran kan agar tidak usah memasukan itu lagi.
LANGKAH - 5: Jika sudah menyimpan kode di atas, maka kita tinggal meletakan kode berikut ke widget atau bisa di letakan di mana saja seperti Head,body,halaman depan,footer,dll
Berikut kode pemanggil slider nya:
<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#slider1").BloggerDynamicSlider({
blogURL: "http://pepinnono.blogspot.com",
labelName: "Image",
showPostTitle: true,
postTitleStyle: "default",
imageWidth: 636,
imageHeight: 389,
maxItem: 6,
animation: "slide", });
}); </script>
LANGKAH SELANJUT NYA "SAVE" dan sudah jadi deh, lihat tampilan blog anda
Catatan:
- blogURL: "http://pepinnono.blogspot.com", == > Alamat Blog sobat
- labelName: "Image", ==> Nama Label yang akan di tampilkan / di slider
- showPostTitle: true,==> Tampilkan judul posting (true / false)
- postTitleStyle: "default", ==> Gaya Judul Posting "default", "overlayDark" / "overlayLight"
- imageWidth: 636, // Lebar Gambar satuan px
- imageHeight: 398, // Tinggi Gambar satuan px
- maxItem: 6, // Max jumlah Slider Gambar yang di tampilkan
- animasi: "slide", // Pilih jenis animasi Anda, "fade" atau "slide"
Berikut tutorial singkat dari saya tentang Cara Membuat Image Slider Keren dan Simple di Blogger.Semoga bermanfaat.
Source : http://imagesliderforblogger.blogspot.co.id/2016/02/blogger-dynamic-slider-by-label-or-recent-posts.html
Comments