Cara Membuat Widget Artikel Terbaru Yang Cantik Untuk Blog Pribadi Anda

Cara Membuat Blogspot Widget Artikel Terbaru Yang Cantik Untuk Blog Pribadi Anda - Pada kesempatan kali ini saya ingin membagikan tips cara mempercantik blog dengan cara membuat widget artikel terbaru yang dapat kita pergunakan untuk mempercantik blog pribadi milik kita. Cara mempergunakan widget ini sangat mudah dan simple dan kita dapat membuatnya dengan mudah dan widget ini akan tampil pada blog anda dan dapat memperindah tampilan dari blog pribadi anda.

Nah seperti diatas tampilan dari widget artikel terbaru yang nantinya akan tampil pada blog pribadi anda bagaimana cantik bukan.

Kebetulan saya juga pernah membuat artikel mengenai Cara Mempercantik Blog Dengan Widget Artikel Terbaru sebelumnya dengan tampilan widget artikel terbaru yang juga lebih cantik dan menarik untuk blog kamu.

Cara menambahkan widget artikel terbaru yang cantik

Untuk memasang dan membuat widget tersebut sangatlah mudah anda hanya mengikuti langkah-langkah berikut ini dan widget artikel terbaru tersebut akan tampil dan menghiasi blog pribadi milik anda.

• Silahkan masuk terlebih dahulu ke blog anda
• Pilih menu layout > add a gadget
• Pilih widget HTML/JavaScript
• Masukkan kode dibawah ini pada form HTML/JavaScript tersebut.

<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(p){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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9K90X_fzwjUDIzoBDpOw-MUkBWKSu9S2yUQ02LQJmJLk1OithO0yCm96HKOvfRXgPqUBDn9rLUD4CcbONeGVyk-ZG1bP90WmXuSRe9ep-FD2q6W2ijMYmZPVF0MSLKkzku8EA2vNCIoRX/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}

</script>

<script type="text/javascript">

var posts_no = 5;

var showpoststhumbs = true;

var readmorelink = true;

var showcommentslink = true;

var posts_date = true;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs" rel="nofollow"></script>

<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="https://bit.ly/widgetartikelterbaru" rel="nofollow">widget artikel terbaru</a>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text/css' />

<style type="text/css">

img.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}

.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}

ul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }

ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}

ul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB;}

ul.recent-posts-container {border: 2px solid #FCD6CB; }

.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: #616662;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #888;}

.recent-posts-details {padding-bottom: 5px;}

a.readmorelink {color: #4DACE3;}

</style>

• Selanjutnya simpan kode diatas pada form HTML/JavaScript dan sesuaikan tempatnya pada blog anda. Jika sudah silahkan simpan pada blog anda.

Baca juga
Cara Terbaru Memasang Email Gmail Pada Email Client Microsoft OutLook Dengan IMAP

Untuk menyesuaikan tampilan nya anda dapat merubah var posts_no = 5; Untuk menampilkan jumlah artikel yang akan ditampilkan pada widget artikel terbaru anda. Anda dapat merubah nya angka 5 menjadi 10 untuk menampilkan 10 artikel terbaru yang ada pada blog milik anda.

Jika anda sudah menyesuaikan maka tahap selanjutnya adalah simpan dan anda dapat melihat tampilan dari widget artikel terbaru milik anda akan tampil dan mempercantik blog pribadi milik anda.

Nah cukup sekian dulu artikel saya yang saya beri judul Cara Membuat Blogspot Widget Artikel Terbaru Yang Cantik Untuk Blog Pribadi Anda. Semoga artikel yang saya buat ini dapat berguna dan dapat membantu anda untuk mempercantik tampilan dari blog anda. Sekian dan terimakasih.

Share this post