Cara Mempercantik Blog Dengan Widget Featured Posts Slide Yang Elegan

Cara Mempercantik Blog Dengan Widget Featured Posts Slide Yang Elegan - Pasti anda ingin pengunjung blog yang anda betah untuk berlama-lama berada di halaman blog anda walaupun itu hanya untuk  membaca atau melihat-lihat artikel yang ada di blog pribadi milik anda.

Namun apakah pengunjung blog anda mau melihat-lihat semua artikel yang ada di blog anda satu persatu?

Pasti tidak, mereka para pengunjung blog kita harus kita manjakan dengan berbagai fasilitas yang di miliki oleh blog kita. Kenapa, hal ini ibarat konsumen di sebuah restoran yang melihat-lihat menu makanan yang di sediakan oleh restoran tersebut jika menu makanan yang di sediakan di buku menu sangat banyak maka konsumen akan kebingungan untuk memilih masakan yang akan dia pilih.

Namun jika kita memberikan sebuah alat dimana pengunjung tersebut dapat dengan mudah menemukan makanan yang di sediakan tersebut maka pengunjung akan dengan mudah untuk menemukan makanan yang ingin dia makan.

Restoran tersebut sama seperti blog kita dimana pastinya pengunjung blog kita tidak ingin mencari satu-persatu artikel yang ada di blog kita sampai dia menemukan artikel yang pas untuk dibaca oleh pengunjung blog kita.

Dengan kita mempergunakan Automatic Featured Posts Slide maka pengunjung blog kita akan dengan mudah mencari artikel yang ingin di baca hanya dengan menekan tombol yang ada pada gambar yang di sediakan pada widget blog Featured posts tersebut.

Baca juga
Cara Mengcopy Artikel Blog Yang Tidak Bisa Di Copy Atau Di Proteksi

Widget Featured post ini merupakan sebuah widget untuk mempercantik blog kita dan sebenarnya widget ini sudah di sediakan oleh pihak blogger untuk kita pergunakan pada blog milik kita yang dapat anda pergunakan untuk memberitahukan kepada pengunjung blog anda jika blog anda memiliki artikel baru.

Namun kekurangan dari featured post dari blogspot ini adalah kita tidak dapat memasukkan banyak artikel baru yang ada pada blog kita featured post dari blogger ini hanya dapat di pergunakan untuk satu artikel saja.

Dari kekurangan tersebut maka Automatic Featured Posts ini dapat menampilkan banyak artikel terbaru yang ada di blog milik kita di widget blog anda secara otomatis. jadi pengunjung blog anda dapat melihat-lihat artikel terbaru yang ada di blog anda tanpa mereka harus mengklik satu persatu link artikel yang ditampilkan pada blog anda. seperti pada gambar berikut ini

Cara memasang widget automatic featured posts

Untuk cara memasang widget ini sangatlah mudah dan kita tidak perlu mengetahui bagaimana cara untuk memodifikasi blog pribadi milik kita.

Kita dapat memasang widget automatic featured posts ini dengan mengikuti langkah-langkah yang akan saya jelaskan di bawah ini.

Silahkan masuk ke blog anda dan masuk ke menu layout > add Gedget > html and javascript

Lalu pastekan kode dibawah ini ke form Html dan JavaScript tersebut.

<style type="text/css">

ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUh1qS9ROkpEGxYziY-uJ3rhXButcKDnr07lCCFt-rYoEY_RXBduqfOo41NBeyhKMzC71szWb6iIBkV9f7VT-ZRQ5ls2fLwp9b0Yi_JAWjCjai0p_G_dJMrc1arQtIIdvTXvy7o1HHWTM/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}

.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}

.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}

</style>

<div id="featuredbwidget"></div>

<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

featuredbwidget({

listURL:"http://www.nbcdns.com/",

featuredNum:10,

listbyLabel:false,

feathumbSize:350,

interval:3000,

autoplay:true,

featuredID:"#featuredbwidget"

});

function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbdMbaEf3t8IYqBMR0hlo_zYfu7brPh3O91FEwShZ6P1B93zy7blSbDZ0_jd-bflHTNA866DFv913IReA3bkooBiisEZpbkYK1Iei-pmQty79nLARkuvei9i6nzqsnrZ9k_ggBNApiJ90/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></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.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$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.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};

//]]>

</script>

<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://goo.gl/zAnmTu" rel="nofollow">Featured Posts Widget</a>

Nah selanjutnya silahkan ganti alamat url yang telah saya beri tanda merah tersebut dengan alamat url dari blog atau situs pribadi milik anda seperti berikut ini

listURL:"http://www.nbcdns.com/",featuredNum:10, Jumlah artikel yang ingin di tampilkan listbyLabel:false, Jika ingin menampilkan berdasarkan label maka kita dapat mengganti listbyLabel:false menjadi listbyLabel:"ANDROID"feathumbSize:350, ukuran dari gambar yang ingin di tampilkaninterval:3000, Jumlah detik untuk setiap pergantian gambarautoplay:true, ganti true dengan false jika anda tidak ingin gambar berubah secara otomatis

Jika sudah maka simpan lah setingan anda tersebut dan anda dapat melihat hasilnya.

Baca juga
Cara Install Aplikasi WhatsApp Pada PC Windows Dan Mac OS Tanpa Emulator

Widget tersebut akan secara otomatis berganti setiap beberapa detik sesuai dengan artikel yang paling baru yang ada pada blog anda.

Nah sekian dulu tips dan trik cara menghias blog dengan mudah ini dan cara ini dapat kita pergunakan untuk mempercantik tampilan blog atau mempercantik website pribadi milik anda dengan mempergunakan widget automatic featured posts ini.

Semoga artikel saya yang saya beri judul Cara Mempercantik Blog Dengan Widget Featured Posts Slide Yang Elegan ini dapat membantu rekan-rekan blogger yang sedang berusaha mempercantik tampilan blog atau sedang membuat blog pribadinya.

Terimakasih sudah membaca salam ngeblog dari newbie code news.

Share this post