Selamat malam sobat, Bagi sobat-sobat blogger yang mempunyai beberapa postingan yang di anggap penting pasti nya blogger ini menampilkan kepada si visitor, Nah bagai mana cara membuatnya slide pstingan tertentu dan tidak teralu ruwet ? Pada postingan kali ini saya share cara membuatnya di sini sobat cuma menambahkan Widget Add HTML pada blogger serta mengedit beberapa kode.
Nah Silahkan di simak sobat.
1. Login Blogger.
2. Masuk menu Setelan lalu Tata Letak
3. Silahkan pilih posisi tempat yang mau di tambahkan Widget Slide,
Klik Tambahkan Gadget lalu pilih HTML / JavaScript.
Silahkan copi-paste kode di bawah ini.
<style>
#BlogAjiAppsCarouselSlider {
height:130px;
background-color:#eee;
border:10px solid #08b2fe;
position:relative;
margin:50px 50px;
overflow:auto;
}
/* Stylish Mouse over scroll
Carousel Slider by www.aji-apps.blogspot.com */
#BlogAjiAppsCarouselSlider:before,
#BlogAjiAppsCarouselSlider:after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:-4px;
width:4px;
height:100%;
box-shadow:0 0 4px black;
z-index:10;
}
#BlogAjiAppsCarouselSlider:after {
left:auto;
right:-4px;
}
#BlogAjiAppsCarouselSlider .container {
position:absolute;
top:0;
left:0;
margin:5px 0 0 5px;
width:300%;
height:120px;
}
#BlogAjiAppsCarouselSlider figure {
display:block;
background-color:white;
float:left;
width:150px;
height:120px;
margin:0 5px 0 0;
position:relative;
overflow:hidden;
}
#BlogAjiAppsCarouselSlider figcaption {
display:block;
position:absolute;
right:0;
bottom:-50px;
left:0;
background-color:black;
font:italic normal 11px Arial,Sans-Serif;
color:white;
padding:4px 10px;
text-align:left;
opacity:.8;
}
#BlogAjiAppsCarouselSlider figure img {
display:block;
border:none;
margin:0 0;
}
</style>
<div id="BlogAjiAppsSlider">
<div class="container">
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
<figure>
<a href="Link Here" title="Name for Title">
<img alt="" src="Image URL Here" />
</a>
</figure>
</div>
</div>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
(function($) {
var config = {
itemMargins: 5 // Distance between the thumbnails
};
var $thumbnailScroller = $('#BlogAjiAppsCarouselSlider'),
$container = $thumbnailScroller.find('.container'),
$item = $container.find('figure'),
item_length = $item.length,
item_width = $item.outerWidth(),
item_margin = config.itemMargins,
total_width = (item_width + item_margin) * item_length,
$window = $(window);
$thumbnailScroller.css('overflow', 'hidden');
$container.css('width', total_width);
// Auto caption builder & hover effect
$item.each(function(cap) {
if ($(this).children().attr('title')) {
cap = $(this).children().attr('title');
$(this).children().removeAttr('title');
$(this).append('<figcaption>' + cap + '</figcaption>');
}
}).hover(function() {
$(this).find('figcaption').stop().animate({
bottom: 0
}, 200);
}, function() {
$(this).find('figcaption').stop().animate({
bottom: -50
}, 200);
});
$window.on("resize", function() {
var o_l = $thumbnailScroller.offset().left,
t_w = $thumbnailScroller.width(),
c_w = total_width;
$thumbnailScroller.on("mousemove", function(e) {
if ($(this).width() < $container.width()) {
$container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
}
});
}).trigger("resize");
})(jQuery);
//]]>
</script>
Catatan :
1. Ganti Image URL Here alamat url gambar.
2. Ganti Link Here dengan alamat url postingan yang sobat pilih.
3. Ganti Name Title dengan nama postingan sobat.
4. Ganti eee 08b2fe dengan kode warna HTML
Silahkan di coba sob,, Semoga postingan kali ini bermanfaat untuk sobat Blogger.
EmoticonEmoticon