Tips Cara Mempercantik Blog Dengan Widget Artikel Terbaru/Recent Post Yang Elegan

Tips Cara Mempercantik Blog Dengan Blogspot Widget Artikel Terbaru/Recent Post Yang Elegan - Widget artikel tarbaru atau dapat kita sebut dengan widget Recent Post dapat kita pergunakan untuk mempercantik blog yang kita m. Dengan bermacam-macam tampilan dari Widget artikel terbaru yang dapat kita pergunakan dan widget ini dapat juga kita pergunakan untuk mempermanis tampilan dari blog yang kita miliki. Pada artikel saya yang terbaru ini saya ingin membagikan sebuah artikel dengan judul Tips Cara Mempercantik Blog Dengan Widget Artikel Terbaru/Recent Post Yang Elegan.

Sebelumnya saya juga telah membahas mengenai Tips Cara Mempercantik Blogger Dengan Widget Artikel Terbaru/Recent Post Warna-warni yang dapat kita pergunakan juga untuk mempercantik tampilan blog kita dengan widget tersebut.

Untuk tampilan widget artikel terbaru atau yang dapat kita sebut dengan widget recent post dan kira-kira tampilan dari widget tersebut adalah seperti pada gambar dibawah ini jika kita mempergunakan widget ini pada blog kita. bagaimana tampilan nya cantik bukan.....

Cara Pasang Widget Artikel Terbaru Blue Dot

Untuk memasang widget artikel terbaru ini kita dapat memulainya dengan cara mengikuti langkah-langkah berikut ini.

Baca:
Demo Supir Taksi Dengan Angkutan Online Hingga Taksi Blue Bird Gratis Hari Ini

1. Silahkan masuk ke blog anda
2. Pilih Layout > Add a Gadged
3. Pilih widget HTML/JavaScript
4. Dan tahap selanjutnya adalah silahkan anda masukkan kode dibawah ini pada form HTML/JavaScript tersebut.

<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><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://bit.ly/bluedotnewarticle" rel="nofollow">Recent Posts Widget</a>

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

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

Jika sudah memasukkan kode diatas pada form HTML/JavaScript pada widget anda maka silahkan anda simpan widget tersebut dan sesuaikan pada tempat yang memang anda inginkan. Jika sudah pas silahkan anda simpan kembali dan lihat sekarang tampilan dari widget artikel terbaru anda.

Cara

Baca
Cara Backup Dan Import Artikel Blog Dengan Cara Yang Mudah

Nah mungkin cukup sekian dulu nie tips dan cara ngeblog dari saya untuk anda pergunakan untuk mempercantik blog yang ada miliki. Semoga artikel saya ini dapat berguna dan dapat membantu anda dalam memperindah blog anda dengan menggunakan blogspot windget

Share this post