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 = 3 dengan 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 = 3 dengan 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 !
Wah mantap gan..
ReplyDeletelangsung coba ya :D