Cara Menciptakan Recent Post Berwarna Blogger
Pada Kesempatan kali ini sahabat Tepinesia akan sedikit mengembangkan wacana cara bagaimana menciptakan Recent Post Berwarna di Blogger, Recent Post sendiri ialah daftar dimana isinya ialah Posting - posting terakhir atau terbaru di blog, Widget ini dipakai semata - mata tidak hanya untuk menghias blog anda, tetapi widget ini juga membantu visitor atau pengunjung anda mengetahui apa artikel terbaru diblog anda,
Untuk previewnya anda dapat lihat di screenshot diatas atau anda lihat pribadi diblog aku yang awut-awutan ini, lantas bagaimana cara membuatnya ? sulit kah ? untuk membuatnya tidaklah sulit alasannya ialah kami jug sudah sediakan scriptnya yang nanti dapat anda copy paste di blog anda, berikut langkah - langkah membuatnya.
1. Masuk ke Dashboard blog anda lalu masuk lagi ke Tata Letak
2. Buat Widget gres di sidebar anda pilih html/Javascript
3. Beri Nama Recent Posts atau terserah anda
4. Masukkan Kode dibawah ini ke dalam "Konten" di Konfigurasi HTML/Javascript tadi.
<script type="text/javascript">function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://parasitonlen.blogspot.com/search?q=cara-membuat-recent-post-berwarna" rel="nofollow">Recent Posts Widget</a><noscript>Your browser does not support JavaScript!</noscript><link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /><style type="text/css">img.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}.recent-posts-container a { text-decoration:none; }.recent-posts-container a:hover { color: #222;}.post-date {color:#e0c0c6; font-size: 11px; }.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}.recent-post-title {padding: 6px 0px;}.recent-posts-details a{ color: #222;}.recent-posts-details {padding: 5px 0px 5px; }</style> 5. Perhatikan Kode yang berwarna merah, itu dapat kita atur sendiri sesuai harapan kita, berikut penjelasannya
var posts_no = 5; //Digunakan untuk memilih jumlah Recent Post yang ditampilkan
var showpoststhumbs = true; //Digunakan untuk menampilkan gambar dari artikel yang ada diblog kita
var readmorelink = true; //Digunakan untuk menciptakan link Readmore
var showcommentslink = false; //untuk menampilkan link komentar
var posts_date = true; //menampilkan tanggal kita memposting artikel
6. Simpan dan Selesai, siahkan cek diblog anda dan widget pun sudah selesai dipasang.
sumber : https://parasitonlen.blogspot.com/search?q=cara-membuat-recent-post-berwarna