Cara Membuat Slider Gambar Pada Header Blog

Slider gambar pada header blog biasanya dipakai untuk memberikan informasi pembuka, tak jarang orang menggunakannya sebagai pengenalan konten artikel pada blog juga bisa sebagai pemsangan iklan.

Slider Gambar untuk Header

Slider gambar pada header blog biasanya dipakai untuk memberikan informasi pembuka, tak jarang orang menggunakannya sebagai pengenalan konten artikel pada blog juga bisa sebagai pemsangan iklan.

Nah bagi kalian yang ingin juga memasang slider dan gambar tapi masih bingung caranya bisa ikuti tutorial design blog dibawah ini ;

Step 1. Login ke blog kalian

Step 2. Masuk ke pengaturan Tamplate dan pilih Edit HTML

Step 3. Cari kode ]]></b:skin>

Step 4. Copy kode berikut dan pastekan diatas kode ]]></b:skin>

.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; 
    }

NB : Ganti kode yang berwarna biru ya sesuai dengan ukuran gambar yang kalian inginkan...

Step 5. Kemudian cari kode </head>

Step 6. Copy kode berikut dan pastekan diatas kode </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>

Step 7. Jangan lupa klik Save Tamplate

Oke.. Perjalanan belum sampai, masih ada beberapa langkah lagi untuk bisa menampilkan gambar pada blog kita... ayo kita mulai lagi...

Step 8. Masuk ke pengaturan Tata Letak

Step 9. Klik Add Widget dan pilih Javascript/HTML

Step 10. Copy kode berikut ini dan pastekan pada kolom Javascript/HTML


<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>

Akhirnya selesai juga....
Eh jangan lupa buat mengganti kode merah Url gambar sesuai dengan yang kalian inginkan, jika kalian ingin menambahkan link pada gambar disilahkan isi pada kode yang berwarna biru "#".
Kalian juga bisa menambahkan judul dan deskripsi pada gambar slidernya....

Cukup sekian bahasan kita kali ini, semoga bermanfaat untuk kalian semua, jika ada yang ingin ditanyakan atau punya solusi lain bisa kita sharing bareng bareng pada komentar di bawah ini....

--- Always Pray and Stay Creative ---

COMMENTS

BLOGGER: 2
Loading...
Nama

6th Indonesian Pearl Festival 2016,1,Abutours.com,1,Adobe Premier Pro,1,Asusintel,1,Award,1,Babasal Mombasa,1,Backsound,2,Bangga di Banggai,1,Be Gravitasi,1,Bebas Bayar,1,Bika Bogor,1,Bika Bogor Talubi,1,Biznis,1,Blog Design,18,Blogger,24,Bumper,1,CC 2015,1,Citra Maja Raya,1,Colidan,1,Competition,30,Competition DEV+,1,Corel Draw X7,1,Coreldraw,1,CV Design,1,Cyko Handbreak,1,dealoka,1,Designer,5,Dotcomforme.com,1,Education,6,Ekspresikan Dirimu,1,Elevenia,1,Excite Shop,1,FestHAM2016,1,Fintech,1,Footer,1,FSB,1,Goverment PR,1,HAnavi,1,Header,6,HIS Travel Indonesia,1,hostinger,1,Indramayu Kota Budaya,1,Influenzer,31,Inspirasi Astra,1,JIBB,1,Kuliner Bogor,1,Lawan Neuropati,1,Luna Smartphone,1,Main Post,3,Marketz,3,Milkshake,1,Motion Graphic,2,Neurobion,1,Neuropati,1,Obat maag paling ampuh,1,Oleh-oleh Bogor,1,Oleh-oleh Khas Bogor,1,Pesona Jawa Tengah,1,Pop Ice,1,Ralali.com,2,Review,27,rukamen,1,Serumah.com,1,sewa apartemen,1,Shop n Drive,2,Sidebar,8,Skyscanner,1,Software,3,Sound Effect,2,Sponsor,12,Storylio,1,Tips Blogging,3,Tips Design,3,Travel,8,Traveloka,2,Tutorial Blog,1,Tutorial Motion,1,Vector,1,Video Editor,5,Video Effect,1,Visit Tidore Island,1,Youtuber,6,
ltr
item
Artadhitive | Daily Content Creator: Cara Membuat Slider Gambar Pada Header Blog
Cara Membuat Slider Gambar Pada Header Blog
Slider gambar pada header blog biasanya dipakai untuk memberikan informasi pembuka, tak jarang orang menggunakannya sebagai pengenalan konten artikel pada blog juga bisa sebagai pemsangan iklan.
https://2.bp.blogspot.com/-W_LO7bELFdc/V7QrABDrxyI/AAAAAAAAFGw/JiNE_q_LZtUZa9lFKlttCnK1SoD1b3KDACLcB/s1600/Blog%2B18.png
https://2.bp.blogspot.com/-W_LO7bELFdc/V7QrABDrxyI/AAAAAAAAFGw/JiNE_q_LZtUZa9lFKlttCnK1SoD1b3KDACLcB/s72-c/Blog%2B18.png
Artadhitive | Daily Content Creator
http://www.artadhitive.com/2016/08/Design-Blog-Cara-membuat-slider-gambar-pada-header-blog.html
http://www.artadhitive.com/
http://www.artadhitive.com/
http://www.artadhitive.com/2016/08/Design-Blog-Cara-membuat-slider-gambar-pada-header-blog.html
true
9208609652601285124
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy