Widget Artikel Terbaru Dengan Gambar Cara Membuat

Cara membuat widget artikel terbaru dengan gambar - Lanjutan dari artikel sebelummnya, berikut cara membuat widget artikel terbaru dengan gambar.

Hati - hati bila mengcopy script untuk dipasang di blog anda bila ada yang mencantumkan URL blog yang rusak dapat menyebabkan broken link yan tentunya merugikan blog anda. Perhatikan lingkaran di bawah ini,

Ada tulisan Recent Post Widget yang tulisannya sngat kecil, setelah saya klik ternyata menuju ke link suatu blog, nah bila blog tersebut dihapus atau tidak aktif lagi maka akan menyebabkan broken link yang bisa diketahui lewar Webmaster. Langsung saja dibawah ini saya sajikan cara membuat widget artikel terbaru dengan gambar serta dengan script yang aman.

1. Buka Blogger anda
2. Buka Tata Letak dan klik Tambahkan Widget
3. Kemudian cari atau tambahkan HTML/Java Script
4. Copykan kode berikut ini, yang dijamin aman

<script style="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/recentpost-seocips-3.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = false;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<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: 1px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
.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 15px; }
.recent-posts-details a{ color: #777;}
</style>

• var post_no (jumlah post yang ditampilkan)
• var showpoststhumbs (tampilan gambar)
• var readmorelink (tulisan read more)
• var showcomentlink (keterangan berapa komentar)
• var post_data (tanggal post di publikasi)
• var post_summary (cuplikan kata di artikel)
• false (tidak) true (iya) 

5. Isikan judul Artikel Terbaru
6. Klik Simpan lalu lihat blog anda

Nah berikut ini tampilan widget artikel terbaru tersebut

Tampilan widget artikel terbaru dengan gambar akan membuatnya lebih menarik dan dapat memancing pengunjung untuk melihatnya. Sedikit saran bila anda menulis artikel secara teratur misalnya sehari satu artikel dapat mencantumkan tanggal pembuatan artikel tersebut supaya sedikit bergaya tapi bila anda jarang-jarang lebih baik false saja supaya tidak menimbulkan pemikiran yang jelek oleh pengunjung.

Demikian cara membuat widget artikel terbaru dengan gambar semoga bermanfaat.