Skip to main content

Cara Membuat Widget Recent Post Sederhana

Keuntungan utama pada widget ini Recent Posts bahwa hal itu akan menunjukkan tidak hanya judul posting saja tetapi juga memposting kutipan atau potongan dan mudah untuk menyesuaikan / menerapkan gaya yang berbeda di atasnya. Untuk gaya itu ke dalam desain Anda sendiri, Anda hanya perlu memodifikasi gaya CSS - Anda dapat mengubah link atau warna latar belakang, ukuran dan warna teks / link. 

Apa yang dapat Anda lakukan dengan widget ini: 
  • menampilkan judul posting saja 
  • mengubah jumlah posting 
  • mengubah jumlah karakter posting potongan / kutipan 
  • menunjukkan tanggal posting 


Lihat gambar di bawah: 

Cara Membuat Widget Recent Post Sederhana


Bagaimana menambahkan Widget Recent Post ke Blogger 

Langkah 1. Login ke Dashboard Blogger Anda, kemudian pergi ke Layout dan klik pada link Add a Gadget

Cara Membuat Widget Recent Post Sederhana


Langkah 2. Dari jendela pop-up, gulir ke bawah dan pilih HTML / JavaScript 

Cara Membuat Widget Recent Post Sederhana


Langkah 3. Pilih & Salin kode dari salah satu pilihan di bawah ini dan tempel ke HTML baru / JavaScript: 

Opsi 1: Widget Recent Posts dengan Snippets 

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://nawawipost.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Opsi 2: Widget Recent Posts Hanya Menampilkan Judul Posting

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://nawawipost.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Langkah 4. 
  • Ubah 5 (opsi 1) dan 10 (opsi 2) dengan jumlah posting yang ingin ditampilkan. 
  • Mengubah false ke true jika Anda ingin tanggal posting muncul 
  • Mengubah 100 (opsi 1) jika Anda ingin memperbanyak karakter yang akan ditampilkan. 
  • Untuk mengubah warna dan ukuran font dari link, mengubah nilai dengan warna biru (link) dan ungu (font-size) 
  • Untuk mengubah gaya tulisan ringkasan, mengubah nilai-nilai hijau (warna) dan orange (ukuran font) 
  • Ganti nawawipost dengan nama blog Anda atau jika Anda memiliki perubahan custom domain semua garis tebal dengan alamat Anda seperti dalam contoh ini:

 http://www.nawawipost.com/feeds/posts/default....

Langkah 5. Simpan widget Anda. Dan itu saja! mudah bukan :D
KLIK DISINI UNTUK DOWNLOAD



Comments

Popular posts from this blog

Cara memasang tombol follow dan dashboard di blog

Cara memasang tombol follow dan dashboard di blog Log in ke akun blog sobat. Klik rancangan --> Elemen laman --> Tambah gadget --> Pilih HTML/Javascript. Masukkan kode berikut pada kotak yang sudah tersedia. <div style="position: fixed; top: 5px; right: 90px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID= 3317277797834091679 " target="_blank" rel="nofollow" title="Follow !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a><div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="Dashboard !" imageanchor="1" style="margin-left

Contoh Surat Lamaran Kerja Bahasa Inggris

Contoh Surat Lamaran Kerja Bahasa Inggris - Informasi Terbaru -  Contoh Surat Lamaran Kerja Bahasa Inggris  - Setelah sebelumnya saya telah share informasi mengenai cara cek pulsa smartfren dan kumpulan puisi cinta romantis kini saya akan update lagi blog tercinta ini dengan postingan mengenai  Contoh Surat Lamaran Kerja Bahasa Inggris  dan saya harap dapat bermanfaat untuk sahabat netter semua. Oke langsung saja lihat contoh surat lamaran pekerjaan bahasa inggris berikut ini: Bali, To; PT. Era Netter Indonesia Human Resources Department Jl. Raya Kuta No. 101 Kuta, Badung - Bali Dear Sir, I know that PT. Era Netter Indonesia is one of the biggest retail product distributors in Indonesia, and I am sure it would be an excellent career opportunity to join in and work for this respective company. I would like to apply for direct marketing and sales officer position in your company. I am in good health, willing to work, fast learning, and work well with others. I have my own vehicle, dr

Versi Teks Dragon Ball Z Episode 200 Bagian 3

Sebelumnya : Dragon Ball Z Episode 200 Bagian 2 "Hei Videl, apa menurutmu dia lebih kuat dari ayahmu?" Teman gadis di sebelah kirinya bertanya. "Jangan bodoh, ayah Videl adalah Mr.Satan, penyelamat Bumi!" ucap siswa yang duduk di depan Videl. "Tak seorangpun di dunia ini yang lebih kuat darinya." Setelahnya, pak guru masuk kelas. Videl kembali duduk di kursinya, dan pelajaran akan segera dimulai. Namun sebelum itu, pak guru hendak memperkenalkan seorang siswa baru. ya, dia tak lain adalah Son Gohan. "Selamat pagi semuanya, hari ini kita kedatangan mahasiswa baru. Silakan masuk." "Perkenalkan, namaku Son Gohan. Senang bertemu dengan kalian." "Wah, tampan sekali, dia adalah tipeku." ucap teman Videl. "Gohan? nama yang aneh." ucap siswa di depan Videl. Sejenak Videl terdiam, dan kemudian teringat kalau, "Sepertinya aku pernah bertemu dengannya." "Fufufu, dia terlihat seperti seorang kutu buku." ucap