Blogger templates

The Anatomy of a QR Code: 7 Things to know about Quick Response Codes.



If you’re like many designers or marketers, you might be going about your day, minding your own business, when out of the blue a client or boss might ask, “Can we incorporate a QR Code into this?”

“A what?”

QR codes seem to be appearing everywhere—on real estate signs, at museums next to paintings, in magazine ads, on T-shirts. Marketers and advertisers have caught on to the unique marketing opportunities presented by QR Codes. And now in 2012, more and more people are asking about them.

To avoid being blindsided by this, or worse, coming off as a Luddite when you express doubt or disdain about QR codes, below is a list of seven things every marketer should know regarding QR Codes, their pros and cons, and some best practices in how to incorporate them into your tool kit.

(Full disclosure: This article, although intended to be a helpful resource for others, is really meant to provide me with a go-to resource I can direct people to when they ask me; “Do you know anything about these QR Codes?” I’ve been asked this countless times the past few months.)


1) What is a QR Code?

QR is an abbreviation for Quick Response. QR Codes are 2-dimensional matrix bar codes originally developed for the automotive industry by a subsidiary of Toyota back in the mid 90s for the rapid decoding of information to track vehicle parts and components. The 2-dimensional QR Code consists of black square modules set on a white background. The format offered a very good mix of legibility and data storage capability. Compared with traditional bar codes (which can usually only encode 20 characters of information) QR Codes could encode significantly larger amounts of data (up to 7,089 numeric or 4,296 alphanumeric characters ) that could be read rapidly in any 360° orientation. Also, compared with traditional bar codes, QR codes occupy significantly less space since data is stored both vertically and horizontally.

2) Why are these appearing everywhere all of the sudden?

Since Denso Wave, the inventor of QR Codes, allows for the free use of the format without licensing, the practical applications of this encoding format eventually spread beyond the automotive industry. With the rise of mobile smartphones and mobile tagging, marketers and advertisers soon discovered that QR codes could be used to encode information or URLs that would allow people to access hidden rich media content embedded in them such as URLs to websites, RSS feeds, videos, an email address with subject header, or vCards.

QR Codes as a marketing trend started in Japan, where mobile smartphones are treated more like personal computers by a significant portion of the population. Japanese retailers, institutions and consumers were quick to adopt the format as a convenience technology to rapidly scan, decipher and bookmark hard-linked information. Soon these started to appear on receipts, signage, posters and magazine advertisements. For all intents and purposes, QR Codes became physical hyperlinks, without the need to jot down a web address. All that was needed is a smartphone with a built-in camera, a QR reader app, and a data connection.

By the time Western marketers advertisers and trend spotters started taking notice of the trend in Asia, QR Code marketing had become fairly advanced and well developed. When the techniques reached the U.S. the applications and conventions were, for the most part, already worked out. However, one big issue with the widespread adoption of QR Codes in the U.S. is that most phones sold here do not allow the camera to scan the QR Codes due to programming constraints. In order for people to make sense of QR Codes, specific software apps were installed to decipher these strange, pixelated blocks. This obstacle would have a very profound impact on the adoption of the format for marketers.

Early QR Codes marketing in the U.S. were either niche, underground campaigns or very sophisticated viral marketing campaigns for edgy independent films or youth-oriented products and apparel. These early efforts appealed to a globally savvy youth culture of Gen Y, who had ready access to multiple forms of instant communications and social networking sites and were accustomed to technology facilitated communications. Since then, more and more people have caught on to these and they have more or less become a mainstream platform that is geared largely toward teenagers, young adults, tech-savvy professionals and digital natives.


3) How do QR Codes work exactly? What am I looking at?

Below is a diagram of how a QR Code works.


Position: The three position markers allows the QR code reader to quickly identify and orient that image in order to scan it.

Alignment: This detects any curvature or distortion to the code and allows the reader to make corrections as needed.

Timing: Determine coordinates for the scanner.

Version Information: Identifies the version of the QR Code. Different versions allows for different levels of data capacity and error correction.

Format Information: Contains information regarding the mask for the code and error correction.

Quiet Zone: These are the margins of the QR Code. It is recommended to leave 2-3 blocks of quiet zone to ensure an optimum scan.


4) Where do I get one?

First, you’ll need to determine what information you want to encode. Ultimately a QR Code is utilized primarily as a call to action by marketers to either provide information or to direct a response, so URLs to landing pages and microsites are very common, as is links to profile pages, product information or a video link to YouTube.

Once you have the information that you want encoded, you will need a QR Code generator to create the 2D graphic for you. Luckily, QR Codes are clearly defined and licensed as an ISO standard, and a plethora of online generators exists that will create them for you. Below, I list my top four and why I like them.

Kerem Erkan: QR Code and 2D Code Generator
By far this one is my current favorite. It can generate QR Codes as well as other competing formats such as Data Matrix, Aztec Code, and Micro QR Code. The main reason I like this resource is that it provides plenty of formatting options, various calls to action, the use of URL shorteners and it provides vector format versions such as EPS and PDF that are better suited to print.

QR Code Generator from the ZXing Project
This one is rather basic and only offers PNG output but is rather easy to use.

BeQRious
The main draw of this generator is that it allows for the use of custom graphics to be uploaded and placed in the center.

GoQR.me
This one is a bare bones generator. I like that it’s fairly easy to use to encode long text information within a 1000 x 1000 pixel grid.


5) What are the current downsides to QR codes?

  • In the U.S., at least, they require dedicated readers.
  • They are easy to subvert. The information on a QR Code is obscured, a benign QR Code looks identical to a malicious or prank one. Also, someone can print up his/her own QR Code on sticker paper and slap it on top of yours to hijack your audience.
  • From a security standpoint, it is possible to direct people to malicious sites, or facilitate the download of malware or other security breaches depending on the device.

6) I’ve seen some pimped-out QR Codes. How do I customize mine?

QR Codes can allow up to 30% of error correction. Which means that you can selectively delete, alter or obscure portions of the data encoding so long as you do not remove any of the reference markers such as position, alignment, timing, version and format. Primarily, this will be a trial-and-error process, but the creative solutions that can come out of this are worth the hassles.

7) Where can I learn more?

Below are some online resources for additional information and specifications of QR Codes. Also in early March AIGA Houston will be hosting a member’s only workshop helping designers get some hands-on training with QR Codes generation and customization.

About QR Codes
http://www.denso-wave.com/qrcode/index-e.html

For additional questions regarding best practices and tips ontact John Luu at (713) 523-5711 or jluu@axiom.us.com for more information.

Multi-Color Effect For Your Links On Hover For Blogger / Blogspot

How to create text links in different colors? Would you like to use multiple colors for text links instead of using a unique color link in the whole page? Confused start to tell what the title, purpose ANAA if you want to link touched the pointer to uppercase, bekedip flashing rainbow colors and the background like fireworks or a star-studded.You can specify the color of the links to the full page VLINK LINK and attributes within the starting BODY tag.

Add Multi-Color Effect For Your Links On Hover For Blogger Blogs


How to add multiple link styles

Want to make a link to your blog and rainbow-colored flashing when the pointer is affected? It is very easy

Now let's start adding it...


Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.



Blogger Tips And Tricks|Latest Tips For Bloggers


Step 2. After click on Add a Gadget link A pop-up box will open now

with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.


Blogger Tips And Tricks|Latest Tips For Bloggers


Step 3. Select 'HTML/Javascript' and add the one of code given below.


Step 4. Now Click On Save 'JavaScript' You are done.

<script type='text/javascript'>

//<![CDATA[

var rate = 20;

if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID

if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
};
document['write']('<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" ></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; left: 0%;" ></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" ></a>');
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}


function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}


function ChangeColor()
{
objActive.style.color = makeColor();
}


function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?

// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}

//]]>

</script>



Now Click Save


And you are done.

Customize And Demo.
You can change this value



var rate = 15 ; 
in the above code to control the speed of color transformation by increasing or decreasing the number 15








How to create a rainbow colored hover link


1. Go to Blogger Dashboard >> Layout >> Add a gadget >> Add HTML/Javascript Box.

2. Paste the following code in HTML/Javascript Box.

<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" ></a><script type="text/javascript" src="http://24work.webs.com/24work-blogspot/multi-color/linkpelangi-ycode.js"></script>


Now Click Save



















How to Add Rainbow Color Effect For Your Links In Hover For Blogger / Blogspot


Hello friends! Effect of rainbow colors to random colors will give your link on hover. This widget works based on simple JavaScript. Once applied, all the links on the page displays a rainbow effect onmouseover.


Watch Live Demo


How to add this widget to blogger?

Just click Add to Blogger Button Bellow

(OR)
  1. Login to Blogger Account
  2. Go to Design > Page elements
  3. Click Add a Gadget and choose Html/JavaScript
  4. Paste Bellow Code and click Save Button


<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" ></a><script type="text/javascript" src="http://24work.webs.com/24work-blogspot/multi-color/rainbow-colors-ycode.js"></script>

Please leave your comments and responses for better improvement of my blog






Auto Scrolling Recent Posts Widget For Blogger / Blogspot

If you have a lot of post on the blog, or if you want to show everyone your list of favorite books, but have little space in the sidebar widget this will be a great help to you. This post explains how to add auto scrolling (marquee) recent posts Widget on his blog that looks good on your blogspot blog. This is similar to the display of recent post in your sidebar, but this will have a marquee in this widget. Now if you want to show your blog in this way, either on top or bottom of your blog, then you can use this new widget:


Auto Scrolling Recent Posts


How to Install Auto Scrolling Recent Posts Widget

Adding The Widget To Blogger

Go to Blogger >> Layout >> Add Gadget >> Select an HTML/JavaScript Gadget

Copy the following code and paste inside an HTML/JavaScript widget



<script type='text/javascript'>
var jnWidth="100";
var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="http://1.bp.blogspot.com/-fKeh7aRkfVs/Tvll57YC8yI/AAAAAAAAAvY/pUwMXLHvSc8/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type='text/javascript' src='http://24work.webs.com/24work-blogspot/scrolling-recent/scrolling-recent-v3-ycode.js' ></script>
<script type='text/javascript' src="http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

Now Replace the http://bdlab.blogspot.com with your blog Url.


And now click Save





Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size  

ScrollAmount: (0 = No Scroll)
ScrollDelay: (0 = MaxScrollSpeed)

You can only modify the code with red color (variables) according to your requirements, for ex. in case of "var w2bScrollDelay", lower the number, higher  the speed.

How to Install This Widget On 'Blogger' ?



  1. Customize Options in Given Widget Generator Form
  2. Click on Generate Button
  3. Click Preview** Button to see your widget Preview
  4. Finally Click Add to Blogger Button to add this widget on Your blog
**Note:- After changing any values, First Click Generate Button and then See Your Preview
 Note:- Choose appropriate Image Bullet or Icon That have transparent Background and small in Size 











Automatic scrolling Recent posts widget will give scrolling of post titles with links


This widget has automated MARQUEE Effect will result scrolling titles




<script type='text/javascript'>
var nMaxPosts = 10;
var nWidth = 100;
var nScrollDelay = 175;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script type='text/javascript' src='http://24work.webs.com/24work-blogspot/scrolling-recent/recentpostsscrollerv2-ycode.js' ></script>
<script type="text/javascript" src="http://bdlab.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script>


Now Replace the http://bdlab.blogspot.com with your blog Url.


And now click Save





How To Add This Widget :

1. Customize Bellow form and Click on Generate button.

2. And Click Add to Blogger button to add this widget to your blog.












Many thanks to Harish for making this code and I just tested and modified to work on blogger


Sexy Sliding JavaScript Side Bar Menu Using Mootools

Show- hide, Smooth sliding and sexy. Menu bar with javascript and mootools. This post explains how to add Sexy Sliding JavaScript Side Bar Menu Using Mootools Widget on his blog that looks good on your blogspot blog.Be effective CSS vertical menu with show / hide uses MooTools to show / hide the menu with a vertical slide-in/slide-out nice effect.

About MooTools: "MooTools is a compact, modular, Object-Oriented JavaScript framework designed for intermediate to advanced JavaScript developer. It lets you write powerful, flexible, cross-browser code with its elegant API, well documented and consistent. ".
MooTools Home: Home Mootools.





How to Install Beautiful Sliding JavaScript Side Bar Menu Using Mootools


Now let's start adding it...

Step 1. Login to Your Blogger Account.Go to your Blogger Dashboard.Click on Layout tab from left pane and click on Add a Gadget link.

Blogger Tips And Tricks|Latest Tips For Bloggers

Step 2. After click on Add a Gadget link A pop-up box will open now
with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.

Blogger Tips And Tricks|Latest Tips For Bloggers


Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done. ..............


<script src="http://24work.webs.com/24work-blogspot/side-bar-menu/prototype.js" type="text/javascript"></script>
<script src="http://24work.webs.com/24work-blogspot/side-bar-menu/effects.js" type="text/javascript"></script>
<script src="http://24work.webs.com/24work-blogspot/side-bar-menu/side-bar.js" type="text/javascript"></script>
<a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://2.bp.blogspot.com/-nUGCKbZIyb4/Tvq4n0Ix8CI/AAAAAAAAACk/cPMmEKDYqto/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://1.bp.blogspot.com/-gPACiBoLjnI/TxPJ-2PsgfI/AAAAAAAAAIw/mQGIlkBHf_4/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>



And now click Save



Note: Keep in mind that before a save above "#" of land and your link Link One, Link Two, Link Three Link Four, and the name of the place you need to do is save.And here is the link I used to have 4, you can link up to 10










Recent Comments Widget with Avatars To Blogger & Top Commentators

This post explains how you can add Recent Comments widget for Blogger Blogspot blogs.Once the reader finds a recent comments widget in the sidebar of the blog, will come to know that your blog is quite active and invites you to send comments on his blog. In this way you can collect some active user base to comment on your blog posts.Now you can reward your best commentators, showing their names with clickable links to your Blogger blog and it helps to see that comments in his blog more often.

Recent Comments Widget with Avatar

Add Top 10+ Stylish Recent Comment Widgets with Hover Effect



1.Login to Blogger
2.Choose your style
3.Customize the Settings as you need and Click the "Generate" Button
4.Finally Click the "Add to Blogger" Button. :D
5.Your Widget will Add Automatically






Precaution: Do NOT add a slash ‘/’ after the URL. It should be BlogName.blogspot.com and not BlogName.blogspot.com/ . Also http:// part has to be added before the URL.

Style 1:

Recent Comments Widget with Avatar Generator






Style 2:

Eclipse Rounded Corner Mouse Hover Style with Red Color




Recent Comments Widget with Avatar







Style 3:

Just Click Round Style with Pink Color




Recent Comments Widget with Avatar







Style 4:

Mouse Hover Rectangular Shadow Effect




Recent Comments Widget with Avatar







Style 5:

Simple and Decent Hover Effect with Blue Border




Recent Comments Widget with Avatar







Style 6:

Amazing Recent Comment Widget With Avatar




Recent Comments Widget with Avatar








Style 7:

Metro Style Recent Comments




Recent Comments Widget with Avatar







Style 8:

Flexible Recent Comments




Recent Comments Widget with Avatar







Style 9:

Border Radius with green background




Recent Comments Widget with Avatar








Style 10:

Stunning Latest Comment Box Widget with Rounded Avatar




Recent Comments Widget with Avatar







How to add Recent Comments Widget with Rounded Images for Blogger?


Follow these very simple steps to add the "Recent Comments Widget with Rounded Images" in your blog.
  • Step 1: Go To Blogger > Design > Page Elements
  • Step 2: Click on "Add a Gadget"
  • Step 3: Now choose HTML/JavaScript
  • Step 4: Copy and paste the following code 

















How To Add Top Commentators Widget with Avatar Generator


No need to explain about the comments feed. Each comment not only helps the commentator, but also the owner of the blog. Discuss and comment back is a powerful tool in SEO.Being owner of a blog, it is our duty to find it "comment" more and then give a great respect for them. Here the code for creating a "widget TOP COMMENTATOR" from the last 10,000 comments.You may have noticed the widget Commentators Save on WordPress blogs. Sometimes referred to as Best Commentators Widget. Now you can reward your best commentators, showing their names with clickable links to your Blogger blog and it helps to see that comments in his blog more often.



Top Commentators Widget












Many thanks to Harish for making this code and I just tested and modified to work on blogger



Blogger news