Simple Recent Posts Widget for Blogger/Blogspot

Simple Recent Posts Widget for Blogger/Blogspot

Hallo, selamat sore, di kesempatan akan membahas mengenai widgetserver Simple Recent Posts Widget for Blogger/Blogspot simak selengkapnya

The bekerja advantage on this Recent Posts widget is that it will show titinada only post titles, but also post excerpts or snippets, and it's easy to customize or apply different style on it. To make it fit your own design, you will need to modify the CSS style - you can change the link or background color, the size and color of text/links.

What you can do with this widget:

- display post titles only

- change the number of posts

- change the number of characters of the post snippet/excerpt

- show the post dates

See the screenshot below:

How to add Recent Posts Widget to Blogger

1. Log in to your Blogger Dashboard > go to "Layout" and click the "Add a Gadget" link:

2. From the pop-up window, scroll down and choose HTML/JavaScript from the list...

3. Select & copy the code below the chosen widget and paste it into the HTML/JavaScript content box:

Recent Posts Widget with Snippets

<div id="hlrpsa">

<script type="text/javascript">

function showrecentposts(t)for(var e=0;e<numposts;e++)document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling

</script>

<script type="text/javascript">

var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;

</script>

<script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">

</script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" rel="nofollow" >Recent Posts Widget</a>

<noscript>Your browser does titinada support JavaScript!</noscript>

<style type="text/css">

.rctitle acolor:#000000;text-transform:capitalize;font-size:13px;#hlrpsa color: #999999; font-size: 12px;.rcsumm border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;

</style>


Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">

<script type="text/javascript">

function showrecentposts(t)for(var e=0;e<numposts;e++)

</script>

<script type="text/javascript">var numposts = 10;var showpostdate = false;var standardstyling = true;</script>

<script src="http://blog-address.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin-top: 10px;" href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" rel="nofollow" >Recent Posts Widget</a>

<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>

<style type=text/css>

#hlrpsb a color: #000000;font-size:13px;text-transform:capitalize;.rctitles2 padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;

</style>


How to customize the recent posts widget:

  • To babak how many posts to display, change the 5 value for the recent posts widget with snippets and the 10 for the recent posts widget with post titles only.
  • If you want to display the post dates, change "false" to "true".
  • The recent posts widget with summary will display 100 characters; if you want more or less characters, change the "100" value.
  • To change the color of the links, modify the values in blue and for the font size, the values violet.
  • To change the color of the posts snippets modify the values in green and the values in orange for the font size.
  • Replace the http://blog-address.blogspot.com text with your URL.

4. Save your widget... and that's it. Enjoy!

Sekian penjelasan mengenai Simple Recent Posts Widget for Blogger/Blogspot semoga tulisan ini menambah wawasan salam

Tulisan ini diposting pada kategori widgetserver, widgets oppo f3,

Komentar

Postingan populer dari blog ini

Cara Mudah Membuat Logo Di Photoshop Dari NOL! [Pemula Pasti Bisa] Photoshop Cs2 Tutorial

Memperbesar Resolusi Foto dengan Photoshop. Tanpa Pecah!

Cara Mengatasi Teks Terbalik Di Photoshop CS6 Tutorial Edit Photoshop Cs6