Cara Membuat SlideShow Recent Post di Widget Sidebar Blog Tanpa Edit HTML

gblog.id

Cara Membuat SlideShow Recent Post di Widget Sidebar Blog Tanpa Edit HTML

Jalak Ikal 25 April 0 komentar Read
recent post gambar slideshow

Cara Membuat SlideShow Random Postingan Terbaru di Sidebar Blog Tanpa Edit Html - Widget recent Post yaitu Widget Yang dimana Widget tersebut menampilkan Postingan Postingan terbaru di blog

Dengan Adanya Widget Recent Post Atau Postingan Terbaru Maka setiap anda Menulis atau memposting Artikel Terbaru di Widget ini Akan Menampilkan Nya 

Selain akan Menampilkan Postingan Terbaru Juga Widget ini Akan Bergantian Bergerak atau dengan kata lain SLideshow Dari artikel yang satu dengan artikel yang lain nya Tergantung anda Memasukan Berapa Jumlah Postingan yang akan di tampilkan di WIdget Recent Post ini

Mungkin pada Artikel Sebelum Nya saya Pernah Share Tentang Pembuatan recent Post Atau Postingan Terbaru Yang dimana Gambar nya bergerak kebawah

Baca Juga : Cara membuat Widget Recent Post Bergerak Kebawah

Begitu Juga hal nya dengan Widget Recent Post Yang ADmin bagikan kali ini Yang dimana Gambar dari Widget recent Post Atau Postingan terbaru tersebut Bisa bergerak

Nah Untuk ANda Yang Mungkin tertarik Untuk Menambah Widget Recent Post ini di Blog Sobat,Sobat Bisa Mengikuti Langkah langkah Pembuatan Nya di bawah ini

  • SIlahkan Anda Masuk Ke Akun Blogger Milik ANda
  • Lalu Kemudian Silahkan ANda Pilih Blog yang akan di Pasang Widget Recent Post ini
  • Setelah itu silahkan Anda klik Tata Letak
  • Lalu Kemudian di bagian Sidebar Silahkan ANda klik "Tambahkan Gadget"
  • Setelah anda mengklik Nya silahkan Anda Cari dan Pilih HTML
  • Setelah itu silahkan anda Tempatkan kode Berikut di bagian kolom Yang telah disediakan tersebut 

<style scoped="" type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}ul.rcentside{font-size:11px}ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}ul.rcentside{width:100%;height:500px}ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}ul.rcentside img{border:0;width:100%;height:auto}ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}ul.rcentside li:nth-child(2){left:0;top:50%}ul.rcentside li:nth-child(3){left:50.5%;top:50%}ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}ul.rcentside .overlayx,ul.rcentside li{transition:all .4s ease-in-out}ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}ul.rcentside .overlayx,ul.rcentside img{margin:3px}ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}ul.rcentside .overlayx:hover{opacity:.1}ul.rcentside h4{position:absolute;bottom:10px;left:10px;right:10px;z-index:2;color:#fff;font-weight:700;margin:0;padding:10px;line-height:1.5em;font-weight:normal;overflow:hidden;transition:all .3s;font-size:1em}ul.rcentside li:hover h4{bottom:30px}ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}ul.rcentside .label_text{position:absolute;bottom:0;left:20px;z-index:2;color:#fff;font-size:90%;opacity:0;transition:all .3s}ul.rcentside li:hover .label_text{bottom:20px;opacity:1}ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}.buttons{margin:5px 0 0}.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>

<script type='text/javascript'>
function FeaturedPostSide(a){(function(e){var h={blogURL:"",MaxPost:4,idcontaint:"",ImageSize:100,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var d=h.MaxPost*200;g.html('<div class="sliderx"><ul class="rcentside"></ul></div><div class="buttons"><a href="#" class="prevx">prev</a><a href="#" class="nextx">next</a></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(//s[0-9]+-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(//s[0-9]+(-c|/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'"><div class="overlayx"></div><img class="random" src="'+u+'"/><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingClass)};var c=function(){e(h.idcontaint+" .nextx").click()};var b=function(){e.get((h.blogURL===""?window.location.protocol+"//"+window.location.host:h.blogURL)+"/feeds/posts/summary"+(h.tagName===false?"":"/-/"+h.tagName)+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.idcontaint+" .prevx").click(function(){e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));return false});e(h.idcontaint+" .nextx").click(function(){e(h.idcontaint+" .sliderx li:last").after(e(h.idcontaint+" .sliderx li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.idcontaint+" .sliderx li:first").before(e(h.idcontaint+" .sliderx li:last"));e(h.idcontaint+" .sliderx").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingClass)},d)};e(document).ready(b)})(jQuery)};
//<![CDATA[
FeaturedPostSide({
  blogURL: "https://gblog.id",
  MaxPost: 5,
  idcontaint: "#featuredpostside",
  ImageSize: 500,
  interval: 10000,
  autoplay: true,
  tagName: false,
});
//]]>
</script>

Lalu Kemudian Klik Tombol Save dan Lihat Hasil nya

Nah Itulah Cara Membuat Widget Recent Post atau Postingan Baru di Sidebar dengan Gambar Slideshow Semoga artikel Ini Bisa Membantu Sobat Blogger Semua,Selamat mencoba

gblog.id

ads1
Posted by Jalak Ikal, Published at 25 April and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

ggggggggg