CARA MEMASANG WIDGET ARTIKEL TERBARU THUMBNIL AKAN MEMPERCANTIK BLOG 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.

Cara Mempercantik Blog Dengan Widget Artikel Terbaru pada halaman muka dengan begitu tampilan widget artikel terbaru akan lebih bagus dan nan menarik untuk halaman blog anda .

Selanjutnya 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. Baca Juga : Kharomah-sayidah-nafsiah-dan-wali-allah

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.

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

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 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.

<div class="recentpoststyle">

  <script type="text/javascript">

  function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}

  </script>

  <script type="text/javascript">

  var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>

  <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">

  </script>

  <style type="text/css">

  .recentpoststyle {counter-reset: countposts;list-style-type: none;}

  .recentpoststyle a {text-decoration: none;color: #49A8D1;}

  .recentpoststyle a:hover {color: #000;}

  .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}

  .recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}

  .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}

  .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}

  </style></div>

Bagaimana Reaksi Anda Tentang Artikel Ini?