Header Ads

Cara Membuat Widget Recent Posts atau Posting Terbaru

Cara Membuat Widget Recent Posts atau Posting Terbaru

Assalamualaikum Sob, apa kabar di hari Senin yang cerah ini? Mengawali pekan ke-tiga di bulan Februari ini, ane mau berbagi tentang cara menambahkan border pada widget "Posting Terakhir" seperti yang terdapat di blog ini. Script widget "Recent Post" ini ane dapat dari folder BESTSEO-BLOGGER TEMPLATE.

Langsung saja, ane akan jelaskan sedikit tentang penambahan border di widget tersebut. Silakan disimak baik-baik Sob. Semoga mengerti dan bermanfaat.

1. Seperti biasa masuk dulu ke akun Blogger masing-masing.

2. Terus langsung saja menuju ke Rancangan >> Elemen Laman.

3. Klik Tambah Gadget yang ada di mana saja.

4. Selanjutnya, silakan pilih HTML/JavaScript.

5. Isikan judul sesuai keinginan Sobat di kolom "Judul"..

6. Kemudian copy dan paste kode di bawah ini di kolom "Konten".

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

7. Nah, agar widget tersebut mempunyai border serta background, maka ane menambahkan kode seperti di bawah ini.

.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}
  • Untuk mengatur warna latar belakang, silakan ubah kode #FFFFFF dengan kode warna lainnya.
  • Selanjutnya, ubah tebal border, jenis border, dan warna border pada border:1px solid #4169E1; sesuai keinginan Sobat. Kalau mau melihat sekilas tentang border, bisa mampir di sini.
8. Di mana kode untuk border di atas ditempatkan? Ane menaruh kode tersebut sebelum tag </style> sehingga hasilnya akan menjadi seperti di bawah ini.

<style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
.recent_posts_with_thumbs {height:auto;width:auto;padding:5px;background:#FFFFFF;border:1px solid #4169E1;}
</style>
<script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script>
<script style="text/javascript">
var numposts = 7;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

9. Langkah selanjutnya adalah mengeklik tombol SIMPAN.

10. Seret kotak widget tadi ke tempat yang Sobat kehendaki.

11. Jangan lupa untuk menekan tombol SIMPAN kembali.

12. Silakan lihat hasilnya. Mengenai parameter yang lainnya, Sobat dapat mengubahnya sendiri dengan mengutak-atik kode widget di atas.

6 comments:

  1. Wah mantabsss neeh, makasih mas munadi sharenya:)

    ReplyDelete
  2. kira2 ngaruh ga ke SEO...

    ReplyDelete
  3. @Karto kalo buat seo, ane kurang paham gan, tapi ini berguna buat pengunjung yang masuk ke blog kita langsung ke halaman posting tanpa ke home page terlebih dahulu untuk mengetahui postingan terbaru kita.

    ReplyDelete
  4. assalamualaikum saudaraku, terimakasih atas infonya. saya sudah mencari kemana-mana, dan akhirnya saya menemukan yang ingin saya cari disini, terimakasih banyak atas ilmu yang telah dibagikan. sukses selalu.....

    ReplyDelete
  5. @ibnoe.info Wa'alaikumsalam, sama-sama trimakasih kembali, semoga nggak nemuin hambatan yang berarti.

    ReplyDelete

Comment Policies:

1. NO SPAM
2. NO LIVE LINK

Any violation will be deleted within 24 hours, thanks for your attention.

Template images by Ollustrator. Powered by Blogger.