Cara Membuat Widget Artikel Terbaru Yang Cantik Untuk Blog Pribadi Anda

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

Tips Cara Membuat Widget Artikel Terbaru Yang Cantik Untuk 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 style="text/javascript" src="https://helplogger.googlecode.com/svn/trunk/helplogger/recentposts2.js"></script>
<script style="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: 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=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 {position:relative;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.
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.


Subscribe to receive free email updates:

0 Response to "Cara Membuat Widget Artikel Terbaru Yang Cantik Untuk Blog Pribadi Anda"

Post a Comment

Jangan lupa komentar ya