Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget Artikel Terbaru Dengan Gambar Cara Membuat



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

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


Ada goresan pena Recent Post Widget yang tulisannya sngat kecil, sesudah aku klik ternyata menuju ke link suatu blog, nah bila blog tersebut dihapus atau tidak aktif lagi maka akan mengakibatkan broken link yang sanggup diketahui lewar Webmaster. Langsung saja dibawah ini aku sajikan cara menciptakan 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 arahan 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 kemudian lihat blog anda
Nah berikut ini tampilan widget artikel terbaru tersebut

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

Demikian cara menciptakan widget artikel terbaru dengan gambar supaya bermanfaat.