Salam
Blogger, Artikel kali ini bloggingpasuruan tentang Cara Membuat Widget Recent
Post Slider Otomatis dan Responsive di Blogger. Widget ini sangat ringan dan
keren begitupun pemasangannya sangat mudah dilakukan.
>> Masuk ke akun Blogger Sobat
>> masuk ke Layout( tata letak ) >> Tambah gadget ( add gadget ) >> pilh HTML Java script
>>
Masukkan kode dibawah ini didalamnya ( kotak html java script )
<center>
<div
id="headerbox">Posting Terbaru</div>
<div
id="featuredpostside"></div>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"
type="text/javascript"></script>
<script src="https://pasuruan-slider-sidebar.googlecode.com/svn/pasuruan-sidebar-slider.js"
type="text/javascript"></script>
<script
type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://nama-blog-sobat.blogspot.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link
href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet'
type='text/css'/>
<style scoped=""
type="text/css">
/*
Dibuat oleh http://bloggingpasuruan.blogspot.com
*/
ul.abt-sidebar-slider * {
-moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider,
ul.abt-sidebar-slider li {
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
ul.abt-sidebar-slider {
height: 500px;
width: 100%;
}
ul.abt-sidebar-slider li {
display: none;
float: left;
height: 24.5%;
overflow: hidden;
padding: 0;
position: absolute;
width: 100%;
}
ul.abt-sidebar-slider
li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider
li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
display: block;
}
ul.abt-sidebar-slider
li:nth-child(2) {
left: 0;
top: 50%;
}
ul.abt-sidebar-slider img {
border: 0 none;
height: 100%;
width: 100%;
}
ul.abt-sidebar-slider .overlayx,
ul.abt-sidebar-slider li {
transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider
li:nth-child(4) {
left: 0;
top: 75%;
width: 100%;
}
ul.abt-sidebar-slider
li:nth-child(3) {
left: 0;
top: 25%;
}
ul.abt-sidebar-slider .overlayx {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .overlayx,
ul.abt-sidebar-slider img {
border: 4px solid #2E8DCE;
border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider
.overlayx:hover {
opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
color: white;
font-family: Oswald;
font-size: 25px;
font-weight: 100;
line-height: 1.5em;
margin: 0;
padding: 0 10px;
position: absolute;
top: 25px;
width: 100%;
z-index: 2;
}
ul.abt-sidebar-slider .label_text {
bottom: 10px;
color: white;
font-size: 90%;
left: 10px;
position: absolute;
z-index: 2;
}
ul.abt-sidebar-slider
li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
display: none;
}
.buttons {
margin: 5px 0 0;
}
.buttons a {
display: inline-block;
height: 25px;
position: relative;
text-indent: -9999px;
width: 15px;
}
.buttons a:before {
border-color: transparent #535353 transparent transparent;
border-style: solid;
border-width: 8px 7px;
content: "";
height: 0;
left: 50%;
margin-left: -10px;
margin-top: -8px;
position: absolute;
top: 50%;
width: 0;
}
.buttons a.nextx:before {
border-color: transparent transparent transparent #535353;
margin-left: -3px;
}
.date {
background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
bottom: 93px;
padding: 8px;
position: relative;
right: 6px;
}
#headerbox {
background: #8FB93D;
font-family: Oswald;
padding: 4px;
}
</style>
</center>
Catatan
: Ganti tulisan warna
merah
dengan URL blog Sobat.
>> Simpan dan lihat hasilnya
Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Widget Recent Post Slider Otomatis dan Responsive di Blogger. Semoga bermanfaat dan terima kasih..
thanks bagus bgd :-bd
ReplyDeleteThanks gan mksih kunbalnya di tunggu usagi-ku.blogspot.com
ReplyDeletematur nuwun mas infone...siip..
ReplyDeletemakasih gan sangat membantu buat kami yang newbie
ReplyDeleteMantab banget sob, thanks ya...
ReplyDeletehttp://www.tokoobatku.com/
terimaksih infonya sob...manfaat bagi pemula
ReplyDeleteits work
ReplyDeletethank you so much
its work
ReplyDeletethank you so much
kalo bikin navbar kayak punya mas tu gmn?
ReplyDeletekalo bikin navbar kayak punya mas tu gmn?
ReplyDeleteNavbar yang mana ? Apa headline news maksudnya ..???
Deletekl dibuat yang nampil cuma satu gambar ja gak bisa...??
ReplyDeleteUntuk tampilan 1 slide ( bergantian ), scriptnya beda Mas...
DeleteSilahkan cari tutorialnya banyak kok..
mantap
ReplyDeletekeren makasih kak buat infor nya
ReplyDeletemampir juga ya ke
-> www.trackinformasi.com
Tenks gan mampir ya di https://arganatic.blogspot.co.id/
ReplyDeleteAre you hunting for genuine real YouTube Views? Put aside your headaches, we can diligently assist you to buy YouTube Views
ReplyDelete