BLOGGINGPASURUAN - widget RECENT POST di blog adalah penting untuk memberitahukan pengunjung atau pembaca bahwa blog Anda telah diperbarui bahkan ketika pembaca/pengunjung membaca artikel lama Anda. RECENT POST widget di sidebar blog Anda adalah salah satu cara terbaik untuk menarik pengunjung. Meskipun Blogger menyediakan widget posting terbaru secara default, namun dengan desain yang mungkin terlihat kurang menarik dan cantik. WIDGET RECENT POST kali Ini dirancang dengan material yang sederhana namun indah sekali dan berharap widget ini dapat meningkatkan lalu lintas blog Anda.
Mengapa Anda Harus Menambahkan Widget Recent Posts di Blog Anda
Seperti yang saya sebutkan, menampilkan posting widget baru pada sidebar blog Anda adalah cara terbaik untuk memberitahu pengunjung Anda bahwa posting blog telah diperbarui dengan konten ter-update dan baru. Sehingga dapat membantu menjaga pengunjung terlibat di blog Anda atau lebih betah berlama-lama di Blog.
Dalam pembuatan Widget ini Anda tidak perlu menambahkan CSS atau kode jQuery ke dalam template Blogger yang berarti beban widget ringan dan lebih cepat . Screenshot gambar widget ( seperti yang ditunjukkan di bawah ini ).
Catatan:Widget RECENT POST ini menyesuaikan dimensi secara otomatis sesuai dengan tempat di mana widget diletakkan. Tapi akan lebih baik jika memiliki ukuran setidaknya 300px jika Anda berfokus meletakkanya pada sidebar. Untuk membuktikannya, jika Anda memiliki blog demo, cobalah untuk menambahkan widget recent posts ini di sidebar blog Anda atau footer untuk melihat dimensi otomatis nya. Dan Anda dapat dengan mudah menyesuaikan lebar sidebar Blogger Anda jika itu di bawah 300px dengan meng-edit kode scriptnya ( manual ). Ok..! langsung saja
Cara Menambahkan Widget Recent Posts di Blogger
Langkah 1: Buka Blogger Dashboard >> Tata Letak
Langkah 2: Klik pada link Add Gadget dari Layout
Langkah 3: Pilih + HTML / JavaScript (Lihat di bawah)
Langkah 4: Salin & paste kode di bawah ini di dalamnya
Dasar Pedoman & Kustomisasi
Seperti yang Anda lihat, saya telah memperindah kode ini untuk memudahkan pemahaman Anda. Ganti var posts_no = 3dengan jumlah posting yang Anda ingin tampilan pada widget ini. Jika Anda lebih suka warna melayang link lain, ganti # db4437 dengan Anda kode warna kustom. Saya sarankan Anda tidak perlu mengubah padding dan ukuran font karena itu otomatis untuk setiap template Blogger.
Jika Anda ada masalah dengan tutorial diatas , silahkan hubungi saya melalui komentar atau jika Anda tertarik dengan POSTINGAN ini mohon bantuannya untuk sharing di sosial media yang Anda miliki..
Terima Kasih… semoga bermanfaat !
HTML - BLOGGINGPASURUAN
<div class="recentpoststyle">
<script src="http://www.geocities.ws/usmankurniawan/bloggingpasuruan_recentpost.js"></script>
<script>
var posts_no = 3;var posts_date = true;var post_summary = true;var summary_chars = 90;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script>
<style type="text/css">
.recentpoststyle {
counter-reset: countposts;
list-style-type: none;
}
.recentpoststyle a {
text-decoration: none;
color: #0080ff;
}
.recentpoststyle a:hover {
color: #db4437;
}
.recentpoststyle li:before {
content: counter(countposts,decimal);
counter-increment: countposts;
float: left;
z-index: 2;
position: relative;
font-size: 20px;
font-weight: bold;
color: #ffffff;
background: #666;
margin: 10px 5px 0px -4px;
padding: 0px 10px;
border-radius: 100%;
}
li.recent-post-title {
padding: 7px 0px;
}
.recent-post-title {
font-family: "book antiqua";
}
.recent-post-title a {
color: #666;
font-size: 14px;
text-decoration: none;
padding: 2px;
font-weight: bold;
}
.post-date {
padding: 5px 2px 5px 30px;
font-size: 11px;
color: #6d6e72;
margin-bottom: 5px;
}
.recent-post-summ {
border-left: 1px solid #69B7E2;
color: #777;
padding: 0px 5px 0px 20px;
margin-left: 11px;
font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;
font-size: 15px;
}
</style></div>
Langkah 5: Sesuaikan widget Anda seperti yang Anda inginkan
Langkah 6: Klik tombol Save dan selesai……!
Dasar Pedoman & Kustomisasi
Seperti yang Anda lihat, saya telah memperindah kode ini untuk memudahkan pemahaman Anda. Ganti var posts_no = 3dengan jumlah posting yang Anda ingin tampilan pada widget ini. Jika Anda lebih suka warna melayang link lain, ganti # db4437 dengan Anda kode warna kustom. Saya sarankan Anda tidak perlu mengubah padding dan ukuran font karena itu otomatis untuk setiap template Blogger.
Saya pakai "book antique" font pada judul posting-nya, dan Anda akan dapat menggantinya dengan font yang Anda inginkan. Selain itu saya telah menyoroti bagian kustomisasi dasar dalam berbagai warna.
Jika Anda ada masalah dengan tutorial diatas , silahkan hubungi saya melalui komentar atau jika Anda tertarik dengan POSTINGAN ini mohon bantuannya untuk sharing di sosial media yang Anda miliki..
Terima Kasih… semoga bermanfaat !