Trikkacang - hai sobat kali ini saya akan membagikan sebuah tips agar blog kalian lebih userfriendly lagi, yaitu dengan menambahkan widget post terbaru. Entah kenapa widget pos terbaru ini tidak ada pada menu widget bawaan blogger. Padahal widget ini sanggat penting untuk blog kita, agar pengunjung blog kita bisa melihat post terbaru pada sidebar atau footer blog kita ( tergantung sih anda pasang di mana widget ini ).
Di artikel ini yaitu membuat widget artikel taerbaru di blogger akan saya bagikan dua scrtipt widget terbaru yang menurut saya ini adalah widget yang terbaik, menurut saya ya hehehe. Oke langsung saja !
Di artikel ini yaitu membuat widget artikel taerbaru di blogger akan saya bagikan dua scrtipt widget terbaru yang menurut saya ini adalah widget yang terbaik, menurut saya ya hehehe. Oke langsung saja !
Cara Membuat Widget Artikel Terbaru
1. Widget Pertama
Pada widget yang pertama ini contohnya seperti pada widget post terbaru blog saya, yaitu hanya judul artike saja. Kenapa saya memakai widget ini. Karena widget ini simple dan saya suka widget yang simple dan tidak terlalu ribet dalam pemasanganya. berikut caranya
1. Login pada akun blogger Anda.
2. Pilih Tata Letak ---> Klik Tambah Gadget ---> Pilih HTML/JavaScript.
3. Copy paste kode Script dibawah ini pada HTML/JavaScript.
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://trikkacang.blogspot.com/",
numPosts = 7;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
4. Kemudian ganti kode script yang saya tandai dengan warna merah dengan alamat url blog kalian.
5. Dan ganti juga kode yang saya tandai dengan keinginan anda, kode angak 7 adalah jumlah artikel terbaru yang akan di tampilkan pada widget.
2. Widget ke Dua
Di widget yang kedua ini menurut saya sanggat cocok untuk kalian yang suka dengan animasi yang bergerak. karena widget ini menampilkan judul dan thubnail gambar artikel terbaru kalian yang bergerak. Terus caranya bagaimana ? berikut saya bagikan.
Seperti pada cara yang pertama :
1. Login pada akun blogger Anda.
2. Pilih Tata Letak ---> Klik Tambah Gadget ---> Pilih HTML/JavaScript.
3. Copy paste kode Script dibawah ini pada HTML/JavaScript.
<style type="text/css">
ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}
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:100%}
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{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUtLe7dIKRbHQIqOusyYv_9VhqRAKp9pRS7d3hf60Cq9pVpIusmUFbgguxmmxjTtn8EfcqFDoPll-Forge7mx930PBj1m98OsGzs06pKHrvvBonyzfPpN3oDY8c0qAiLSO80ncUsAz3vc/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.rcentside .overlayx,ul.rcentside img{border:4px solid #000000;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}
ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}
ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/seocips/seocips-script/recentpost-slide.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.trikkacang.blogspot.com/",
MaxPost:10,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
4, Seperti yang pertama juga silahkan anda ganti url yang saya beri tanda merah dengan url blog kalian.
5. Pada widget ini kalian bisa merubah stylenya dengan mengedit script yang sama, karena css widget ini menjadi satu dengan script kode yang saya bagikan di atas.
Bagaiman mudahkan, silahkan anda coba dan artikel terbaru sudah terpasang pada blog kalian. Sebenarya masih banyak sekali model atau style dari widget artikel terbaru ini, bahkan kalian bisa memodifnya sesuka hati, tetapi kalian harus sedikit mengetahui tentang CSS, karena css ini lah yang akan membuat dan merubah tampilan dari widget artikel terbaru ini, tidak cuma itu saja css juga merupakan coding yang digunakan untuk membuat tampilan blog kalian menjadi lebih bagus lagi, tetapi tidak cuma css biasanya juga dikombinasikan dengan java script juga .
Link aktif akan dihapus
EmoticonEmoticon