Cara Mempercantik Blog Dengan Widget Artikel Terbaru

Cara Mempercantik Blog Dengan Widget Artikel Terbaru - Pasti para blogger menginginkan tampilan blognya enak di lihat oleh pengunjung blog yang mengunjungi blog pribadi milik kita.

Tidak hanya enak di lihat ibarat rumah kedua maka kita memang wajib untuk menghias blog kita dengan widget-widget dengan tujuan agar pengunjung blog kita merasa betah dan nyaman membaca setiap artikel yang ada dan telah kita sediakan.
Cara Mempercantik Blog Dengan Widget Artikel Terbaru
Banyak widget yang dapat kita tambahkan untuk mempercantik blog kita dan salah satu widget untuk mempercantik blog itu adalah widget artikel terbaru.

Sebelumnya saya juga telah memberikan Tips Cara Mempercantik Blog Dengan Widget Artikel Terbaru/Recent Post Yang Elegan yang dapat juga kita pergunakan untuk mempercantik tampilan dari blog pribadi milik kita.

Widget ini akan menampilkan setiap artikel terbaru yang ada pada blog pribadi milik kita ini. Dan dengan cara ini dipastikan pengunjung blog kita tidak akan melewatkan setiap artikel-artikel terbaru yang sudah kita buat dan sajukan pada blog pribadi milik kita ini.

Baca juga

Cara membuat widget artikel terbaru

Cara menghias blog dengan mudah ini seperti pada gambar yang sudah saya tampilkan di atas sangat lah mudah kita dapat menambahkan widget artikel terbaru tersebut dengan langkah-langkah yang akan saya berikan berikut ini.

Untuk langkah pertama, kita dapat masuk ke blog atau website pribadi milik kita
Silahkan masuk ke layout > add gedget > HTML & JavaScript
Silahkan masukkan kode dibawah ini pada form HTML & JavaScript Tersebut.

<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script style="text/javascript">
var posts_no = 5;var showpoststhumbs = true;var readmorelink = true;var showcommentslink = true;var posts_date = true;var post_summary = true;var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://goo.gl/zAnmTu" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {position:relative;padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Kita juga dapat melakukan modifikasi pada widget artikel terbaru ini
var posts_no = 5; jumlah post yang akan tampil
var showpoststhumbs = true; menampilkan gambar kecil dengan true atau false untuk tidak
var readmorelink = true; menampilkan readmore jika kita masukkan true atau false untuk tidak
var showcommentslink = true; menampilkan komen jika true dan false untuk tidak
var posts_date = true; menampilkan tanggal posting jika true dan false untuk tidak
var post_summary = true; menampilkan keterangan 

Jika kita sudah selesai memodifikasi tampilan dari widget artikel terbaru ini maka kita dapat menyimpan settingan kita tersebut dan kita dapat melihat widget artikel terbaru akan tampil dan mempercantik tampilan blog kita dan seolah-olah tampilannya seperti sebuah website profesional.

Nah sebenarnya masih banyak cara kita dapat mempercantik tampilan dari blog kita namun salah satu langkah yang paling sederhana adalah menambahkan widget artikel terbaru pada blog kita. Nah sekian dulu artikel mengentai cara mempercantik tampilan blog kali ini.

Semoga dengan judul artikel Cara Mempercantik Blog Dengan Widget Artikel Terbaru ini dapat membantu rekan-rekan sekalian dalam memperindah tampilan blog pibadi milik rekan-rekan sekalian.


Subscribe to receive free email updates:

3 Responses to "Cara Mempercantik Blog Dengan Widget Artikel Terbaru"

  1. kode diatas dimasukkin keposisi mana ya?? apakah bebas aja lgsg paste??

    ReplyDelete
    Replies
    1. bebas langsung masukking ke html/javascript aja pak

      Delete
  2. Keren gan. Selama inisaya mencari cara membuat recent post dengan tumbnail (gambar) dan anda memberikan apa yang saya cari. Makasih.

    ReplyDelete

Jangan lupa komentar ya