Create Blogger Recent Comment Widget

Add recent comments to you Blogger blog
Having a recent comment widget on your blog homepage has its advantages, not only linking more of your pages from your blogs main page but to encourage users to interact even more with your site.

In this short but very affective tutorial we will show you how to create a recent comment widget for use in Blogger.

Go to your bloggers dashboard > Layout > Add a Gadget
Now choose the HTML/JavaScript option


Blogger HTML/JavaScript
Copy the HTML code below and paste it in the gadget text box
HTML Code

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://www.helpfulbloggertips.com/>Recent Comment Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

To get the recent comment gadget to work you need to replace the red blog name with your own, for example if your URL is myblog.blogspot.com you just need to use myblog

Job Done...
Labels: Blogger, Comment, Gadget, How To, HTML, Tutorial

source
Cool blue christmas vector banners with snowflakes.


Created by: Dryicons

Collection of 3d vector white banners.


Free for personal use.
Created by: greatvectors.com


After a long break here we are with some more goodies. Here are 30 free vector icons with an apple touch to it. The download contains the PSD source file.
These icons can also be used as iPhone menu bar icons.



Size: 343.78 KB
by: dezinerfolio


Nice blue vector abstract background design.


Free for personal use.
Created by: greatvectors.com




1. Autumn Leaves

Collection of free vector autumn - fall leaves - set of 12 leaf styles total.

Free for personal use.
Created by: greatvectors.com



-----------------------------------------------------------------------------------------------------------------------------------------------------

2. Paper Templates Mockup

Collection of vectro corporate identity paper templates mockup - business cards, brochures, paper bags, usb keys and other.
Free for personal use.
Created by: greatvectors.com



 -----------------------------------------------------------------------------------------------------------------------------------------------------

3. Button Collection

Collection of 9 vector buttons styles in different colors.

Free for personal use.
Created by: greatvectors.com



-----------------------------------------------------------------------------------------------------------------------------------------------------

4. Butterfly Background

Abstract vector spring background with paper butterflies.
Free for personal use.
Created by: greatvectors.com



-----------------------------------------------------------------------------------------------------------------------------------------------------

5. Blue Abstract Background

Nice blue vector abstract background design.


Free for personal use.
Created by: greatvectors.com


-----------------------------------------------------------------------------------------------------------------------------------------------------

6. 30 Free Vector Icons

After a long break here we are with some more goodies. Here are 30 free vector icons with an apple touch to it. The download contains the PSD source file.
These icons can also be used as iPhone menu bar icons.

Size: 343.78 KB
by: dezinerfolio


-----------------------------------------------------------------------------------------------------------------------------------------------------

7. 3d Banner Collection

Collection of 3d vector white banners.


Free for personal use.
Created by: greatvectors.com


Assalamualaikum dan Salam Sejahtera



Hari ini amir ingin berkongsi satu tutorial cara membuat widget post yang berkaitan dalam blogger dengan thumbnail. Widget ini akan memaparkan tajuk dengan gambar yang pertama dalam artikal atau entry anda. Jika dalam artikal anda tiada gambar akan memaparkan gambar default. gambar default ini anda boleh mengantikan dengan gambar yang anda sukai.

Ok, Jom ikuti tutorial dibawah ☺

1.Login blogger > Templete > Edit HTML > Ctrl + A (untuk select semua) > Ctrl + C( untuk copy semua)

2.Setelah selesai copy pergi ke laman web ini dan pastekan dalam laman web ini

3. Ctrl + F untuk mencari

 </ Head>
dan dibawah  </ Head> pastekan kod dibawah

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3QedmqNlhSZFI6OfMZJn-FRUkbVw56Qk3sbcq94fWl9lSHyrpTl19m_qnjxSD2yDgZp60V_V8xRlDMwcgz789aNCF9sPyWnrychOAO64Svavr-aOOTzJCYj_njG7BBqbo_V5KVRBfJra2/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
4. Untuk ubah default image  anda boleh ubah tulisan warna hijau tersebut dan letakkan URL gambar yang anda ingin letakkan.. kalau tak nak tukar tak apa. ☺

5. Untuk mengubah tajuk "Related Posts" anda boleh tukar tulisan warna unggu dengan teks yang anda inginkan.

var relatedpoststitle=&quot;Related Posts&quot;;

 6. sekarang cara kod ini pula

 <div class='post-footer'>
7. Copy code dibawah dan paste dibawah kod <div class='post-footer'>

 <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.helpfulbloggertips.com/'><img alt='Helpful Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwNm4ITldVJXwSKe34O6aAzxUuClr4IpJDhgq8tov6dLZO6xl6lmIS_ZdsI3kCPUjuSfsZGiIx6lEkOHVSPgVcAXYj7NMjftOcHF8JX-7lKEqRrH79xJb3LukDWIaXkKUWMO0R4WSOjLuJ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
8. untuk edit bilangan related post yang dipaparkan setiap artikal anda, anda hanya edit  max-results=6 dan letakkan nombor yang anda inginkan.

 9. kamu juga boleh memaparkan related post pada home page anda dengan membuang kod berwarna biru.

 10. sekarang semua selesai, anda mestilah copy semua kod html yang anda paste dalam laman web edit html.

 11. Dan paste kembali kod tadi dalam Templete > Edit HTML

 12. selesai.

 P/s: jika anda tidak faham @ tidak berjaya sila komen dibawah.. insyaAllah amir akan bantu. ☺

 P/s: sebenarnya ada cara lebih mudah untuk membuat related post anda boleh daftar di LinkWithin ataupun Nrelate anda hanya perlu tekan install sahaja dalam blog. semua proses dilakukan secara automatik.

About me

Social

Facebook

Gallery

Translate