Sunday, December 15, 2013

// // Leave a Comment

Multi colored random posts Widget for Blogger

Multi colored random posts Widget for Blogger
Multi colored random posts Widget for Blogger is new and exclusive and its very beautiful and attract user.I am going to share how to add this widget in your blogger blog.








Read This

Just Follow These Steps

  • Go to blogger dashboard
  • Layout >> Add a Gadget
  • Look for Html Javascript
  • Copy the following code inside

<style type="text/css">
.noop-random-posts ul li {
    list-style-image:none;
}.noop-random-posts ul {
list-style-type: none;
margin: 0;
padding: 5px 0;
}
.noop-random-posts ul li {
border: 0 none;
margin: 5px 0;
padding: 10px;
position: relative;
}
.noop-random-posts ul li:first-child {
background: none repeat scroll 0 0 #FF4C54;
width: 97%;
}
.noop-random-posts ul li:first-child:after {
content: "1";
}
.noop-random-posts ul li:first-child + li {
background: none repeat scroll 0 0 #FF764C;
width: 87%;
}
.noop-random-posts ul li:first-child + li:after {
content: "2";
}
.noop-random-posts ul li:first-child + li + li {
background: none repeat scroll 0 0 #FFDE4C;
width: 84%;
}
.noop-random-posts ul li:first-child + li + li:after {
content: "3";
}
.noop-random-posts ul li:first-child + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 81%;
}
.noop-random-posts ul li:first-child + li + li + li:after {
content: "4";
}
.noop-random-posts ul li:first-child + li + li + li + li {
background: none repeat scroll 0 0 #33C9F7;
width: 78%;
}
.noop-random-posts ul li:first-child + li + li + li + li:after {
content: "5";
}
.noop-random-posts ul li:first-child + li + li + li + li + li {
background: none repeat scroll 0 0 #7EE3C7;
width: 75%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li:after {
content: "6";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F6993D;
width: 72%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li:after {
content: "7";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #F59095;
width: 69%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after {
content: "8";
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li {
background: none repeat scroll 0 0 #C7F25F;
width: 66%;
}
.noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
content: "9";
}
.noop-random-posts ul li:first-child:after, .noop-random-posts ul li:first-child + li:after, .noop-random-posts ul li:first-child + li + li:after, .noop-random-posts ul li:first-child + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li:after, .noop-random-posts ul li:first-child + li + li + li + li + li + li + li + li:after {
background: none repeat scroll 0 0 #353535;
border-radius: 50% 50% 50% 50%;
color: #FFFFFF;
font-size: 25px;
height: 30px;
position: absolute;
right: -17px;
text-align: center;
top: 1px;
width: 30px;
}
.noop-random-posts ul li a {
color: #444444;
font-size: 13px;
text-decoration: none;
}
</style>
<div class="noop-random-posts"><script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=5;function nooprandomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script><a href="http://tonyisright.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=nooprandomposts"></script></div>

  • Now save 
You have done i you like this article please share it and keep visitng more articles are waiting for you.!
Read More

Sunday, December 8, 2013

// // Leave a Comment

Add Multipul Related Post Widget & LinkWithin For Blogger

Add Multipul Related Post Widget & LinkWithin For Blogger
Related posts Widget, as the title says , this Widget will generate the list of related posts. this Widget can be added either in homepage (under each posts) or inside the post. By placing this related posts Widget, there is chance the spread the other posts to visitors and they may have a tendency to take that post from the list, it will reduce the bounce rate of your blog and will keep your visitors from suddenly quit from your blog. Let's see how to add related posts widget to Blogger




Related Post Widget Using LinkWithin Direct


Go to LinkedWithIn website and follow the simple instructions
Give e-mail id, blog url, select platform as Blogger and select number of posts should be displayed.

You Have Done

Add Related Post Widget Manually

  • Sign in to Blogger
  • Template >> Edit Html >> Expand Widgets
  • Find </head> 
  • Copy the below code above </head>
<!--Related Posts with thumbnails Scripts Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'> /* remove this */
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPgtvyKucO-VDtfZ4mfq6dLkpWVJ1EX3f3oaKQPEynpbrZv7IfaSUOFqoqCiocW-e_K4mlY1C6-2-ANHCOMGpvnbkSSFnyblq1nT8nIrRn7Tn7BvK1C342fZ1-mLF9P5-CP_-s8RGmd0/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://Tonyisright.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */
<!--Related Posts with thumbnails Script End-->

Customization 

  • Place the URL of the image in quotes to display if there is no image in the post.
  • Maxresults=5 - change the value to change the number of posts to be displayed.
  • Splittercolor="#DDDDDD" - change the color of splitter line between posts. Check here to see color codes selector
  • Relatedpoststitle="Related Posts" - Change the Name of title.

Adding To Post Footer

  •  Find <div class='post-footer'> and copy the below code above it
<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'/>
</b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://netoopsblog.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc1Jq1B0Va7TcqZN_DiFvpaEZZDY9W0Gvnpmzm8rzwGuNXwzgtGwtg4FU7PThCrBnf8n6Aiq_ks9-PyTPycXTdqmnyjKi3pH5jmcvgs2KPJL1qzRntb099NOwDImu26IH0UBRuu5_rKEM/s1600/1x1juice.png'/></a>
</b:if></b:if>


  • Remove RED marked to add related posts to homepage too.
  • Change Orange marked to change the number of posts should be displayed 
Save the template you have done thanks for visiting and staytuned!
Read More
// // Leave a Comment

Beautiful Recent Comments Widget for Blogger, Feed Comments

Beautiful Recent Comments Widget for Blogger, Feed Comments
There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
The Recent Comment Widget shows the Commentators name with Profile link followed by the Post name and followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes.

Adding Recent Comments Widget In Blogger Blog:

  • Go to blogger dashboard
  • layout >> Add a gadget
  • Html /Javascript
  • Give the title and paste codes and save it
<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_netoopsblog_min.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://tonyisright.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><a style="display:none" href=http://netoopsblog.blogspot.com>Recent Comments Widget</a><style type=text/css>.rcw-comments a {text-transform: capitalize;}.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}
</style>
Change the RED color Url with your own blog URL thanks for visintg and staytuned. 
Read More

Thursday, December 5, 2013

// // Leave a Comment

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Awesome Multi-Colored Popular Posts Widget for Blogger powered CSS3
Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most viewed posts of your blog, that may be of Month or in Week or All the time. You can select how Popular posts are to be displayed.By default it shows an image(if the post has) and Title of Post followed by the content of post wrapped by 20-25 Words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi - colored Popular posts Widget. This trick is done using simple CSS3 rather than using complex JavaScripts. A great feature of this trick is each Post shown in each Flat UI color, so these colors catches your Blog visitor's eyes and they have the tendency to take that post even if the Post is

Features Of This Widgets:

  • Flat UI colors used (it will attract users attention)
  • Automatic Post Numbering
  • CSS3 Hover Animation 

Sign in to your Blogger Account and Active Popular Posts Widget

  • Go to Layout -> Select "Add a Gadget" and take Popular Posts Widget from the Widget List appear.
  • Go to Template -> Edit HTML, Find ( Ctrl + F ) ]]></b:skin>
  • Copy the following code and Paste just above it.
<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

Click on Preview Template (You can see the template without saving)
Save the Template. you have done!
Read More
// // Leave a Comment

How To Change Blogger Post A Comment Message

How To Change Blogger Post A Comment Message
You know comments are the best way to interect readers so you have to design Post a comment type in very beautiful way. I am providing free tutorial tough you that how to change the post a comment message in to many beautiful type to attract readers.











Just Follow These Steps:

  • Go to blogger dashboard
  • Template >> Edti Html
  • Now find this codes <data:postCommentMsg/>
<a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a>
 Search the next <data:postCommentMsg/> ,that code looks like the following

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

Now change the <data:postCommentMsg/> with your own desire image URL some of the Image URL samples are fellow.

Style 1

<img src="http://i.imgur.com/Qv18EaT.gif"/>

Style 2 

<img src="http://i.imgur.com/hR5AoQv.jpg"/>

Style 3 

<img src="http://i.imgur.com/542TClt.jpg"/>

Style 4 

<img src="http://i.imgur.com/2RqqdBN.jpg"/>

Keep visiting more articles are waiting for you staytuned. 
Read More

Monday, December 2, 2013

// // 1 comment

Add Facebook Verified Page Tick To Author Comments

Add Facebook Verified Page Tick To Author Comments

You seen in many facebook pages the verify ticks mark in admin/author comments and only allow to worldwide companies and actor/artist pages/proflle but i am going to share a trick to add this verify tick to author comments in blogger blog.

Follow these Steps:

  • Go to blogger dashboard
  • Template >> Edit Html
  • Now find this code .comments .comments-content .icon.blog-author and delete the following code inside it
background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
And copy the following below code with these code

background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;
The final codes look likes this

.comments .comments-content .icon.blog-author {
    background: url("https://dl.dropboxusercontent.com/s/gp8fhc34w2rka9h/verified%20page.png") no-repeat scroll 0 0 transparent;

You have done.
if you need more information please leave a comment below and stay tuned. 



Read More
// // 1 comment

How To Add SEO Friendly Blog Post Title

How To Add SEO Friendly Blog Post Title

Today i am going to share to share how to add a search engine friendly blogger blog post title and blog title. Default blog title and post title are not SEO friendly. The Page title is the most important element in your blog in terms of higher ranking in search results. Here is one example blog post title first and after blog title.

How To Add SEO Friendly Blog Post Title


Google only displays 70 characters on Google search results and in case of Yahoo display bit more.So your blog posts will not display or you will not get as much rank in Search Results.

Follow These Steps:


  • Goto blogger dashboard
  • Template >> Edti Html
  • Now find this code
<title><data:blog.pageTitle/></title>
Replace the above code with the following below code.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - Info Blog Maz</title>
</b:if>

Replace the red blog text with your own blog title
Now save the template you have done if you need any help please leave a comment below stay tuned.

Read More

Sunday, December 1, 2013

// // Leave a Comment

Google Official Contact Form for Static Pages in Blogger

Google Official Contact Form for Static Pages in Blogger

Google released a official contact form but its only work on sidebar and widgets but i am shairng this with a tricks to add like a contact us static page.

Add Blogger Official Contact Form To Static Pages

  • Go to Blogger Dashboard
  • Pages >> New Page >> Blank Page
  • Switch to Edit Html
  • and paste the following codes below
<table><tbody><tr><td>Name</td> <td><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></td></tr><tr> <td>Email<span style="font-weight: bolder;">*Mandatory</span></td><td><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></td></tr><tr> <td>Message<span style="font-weight: bolder;">*Mandatory</span></td><td><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></td></tr><tr><td align="center" colspan="2"><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></td></tr><tr><td align="center" colspan="2"><div style="max-width: 222px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></td></tr></tbody></table>


  • Now click Publish


Then,


  • Go to template
  • Edit html >> expand widgets 
  • Click on Jump to Widget and take Contact Form1

Click on the arrow before


<b:widget id='ContactForm1' locked='false' title=' Contact Us' type='ContactForm'>
Delete the portion inside <b:includable id='main'> ........ </b:includable>



  • Now Sidebar Widget will not appear.
  • Click on Save Template
Now You Have done if you need any help please comments below.




Read More
// // Leave a Comment

How To Add Page Navigation To Blogger Blog

After my previous artilces about How to change head image on reload on blogger blog today i am going to share how to add beautiful page navigation to blogger blog in simple step and ways.




Adding Page Navigation:

  • Go to blogger dasboard
  • Layout >> Add a Gadget >> Html/Javascript
  • Paste and following codes

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=7;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://tonyisright.blogspot.com" style="font-size:0pt">Grab This!</a>
<script style='text/javascript' src='http://netoopscodes.googlecode.com/svn/netoops-page-nav-v2.js'></script>


  • Now Save.
You have done if you need any help about this widget please comment below will comments will highly appreciate.Thanks and stay tuned!
Read More
// // Leave a Comment

Head Banner Changing Image Tricks For Blogger

Head Banner Changing Image Tricks For Blogger
Hi Friends, Today i am sharing this articles how to change head image on reload the tab on blogger blog this is very simple and interesting.





Follow These Instruction:

Go to Blogger Dashboard
Template >> Edit Html >> Expand Widgets
Find  ]]></b:skin> and pase the following code before it.

#header {
background: url("your header image url in quotes") no-repeat left bottom;
margin:0;
padding:2px;
}

Then copy the following script and paste then above </head> tag.

<script type="text/javascript">
var banner= new Array();
banner[0]="1st image url";
banner[1]="2nd image url";
banner[2]="3rd image url";
banner[3]="4th image url";
banner[4]="5th image url";
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

 If you face any problem please feel free to leave a comment your reply will be highly appreciate thanks and stay tuned.
Read More
// // Leave a Comment

Highlight Author Comments in Blogger in threaded comment System

Highlight Author Comments in Blogger in threaded comment System

Today i am sharing hwo to high light Author comments in blogger. Comments are the best way to make good relation ship with visitor they are highly inspire if author reply there comments by continuely. as well as comment system is also very helpfull for better SEO and Blog health.

How To Highlight Author Comments In Blogger

  • Sign In to Blogger Dashboard
  • Go to Template -> Edit HTML
  • Find </body> and copy the following code above it

<script type="text/javascript">
    $(function() {
      function highlight(){
        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)
          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)
          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFf7iSr_PrxMb7jzEVfX0B183NZ-CFqbSXCgz3lSds1UVfi1wj3IaYdCuigK3CP3c750OaDa0cdQDkJEKBqalZeSWjigQEFaccQhRbnD8MGf4Wt6Ejm2vDn0nC_vmYMtnPpN33dOTHrg/s1600/admin_comment1.png&quot;) no-repeat bottom right&#39;)
          .css(&#39;padding&#39;, &#39;10px&#39;);
          }
          $(document).bind(&#39;ready scroll click&#39;, highlight);
                       });</script><a style="display:none" href="http://tonyisright.blogspot.com">Blogger Widgets</a>
  • Click Save.
Congratulations you are done. Please share this articles with you friend and stay tuned more Tips and widgets are waiting for you.

Read More
// // Leave a Comment

Author-Box with Social Connection

Author-Box with Social Connection


Are you looking for an attractive author bio widget? Then today, you are at right place. It is quite common that every reader will be eager to know the man behind an article if it is really interesting. So the first thing any reader will do after reading such a wonderful article, is scrolling throughout the blog to find the author.

How to add an author bio widget in Blogger.

Step 1: Find the code


The best place to add an author bio widget is below the article that the author had written. So, first of all, go to Blogger dashboard >> Template >> Edit HTML and find below HTML code (to find code, just click anywhere on the HTML editor and press ctrl+f).

<div class='post-footer-line post-footer-line-1'>

Author-Box with Social Connection

Remember, the code that I have mentioned earlier is repeated two times in your template. So find the code (<div class='post-footer-line post-footer-line-1'>) which is seen below this code - <div class='post-footer'>

Step 2: Place the code


Now you need to the place the following code below the code that I have mentioned earlier. 

<div class='ts-fab-wrapper ts-fab-icons-text' id='ts-fab-below-10105'><ul class='ts-fab-list'><li class='ts-fab-bio-link active'><a href='#ts-fab-bio-below-10105'>About</a></li><li class='ts-fab-twitter-link'><a href='#ts-fab-twitter-below-10105'>Twitter</a></li><li class='ts-fab-facebook-link'><a href='#ts-fab-facebook-below-10105'>Facebook</a></li><li class='ts-fab-googleplus-link'><a href='#ts-fab-googleplus-below-10105'>Google+</a></li></ul>
<div class='ts-fab-tabs'>
<div class='ts-fab-tab' id='ts-fab-bio-below-10105' style='display: block;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-0' src='AUTHOR IMAGE URL HERE' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'><h4><a href='AUTHOR WEBSITE LINK HERE'>AUTHOR NAME HERE</a></h4></div> <div class='ts-fab-content'>AUTHOR BIO HERE</div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-twitter-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-1' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://twitter.com/AUTHOR TWITTER PROFILE ID'>@AUTHOR NAME</a></h4></div> <div class='ts-fab-content'> </div><div class='ts-fab-follow'><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1374787011.html#_=1375013320942&amp;id=twitter-widget-2&amp;lang=en&amp;screen_name=AUTHOR TWITTER PROFILE ID&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 243px; height: 20px;"></iframe></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-facebook-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-2' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='http://www.facebook.com/AUTHOR FACEBOOK ID'>AUTHOR NAME</a></h4></div>
<div class='fb-follow' data-href='https://www.facebook.com/AUTHOR FACEBOOK ID' data-show-faces='true' data-width='450'><span style='height: 35px; width: 450px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2FAUTHOR FACEBOOK ID&amp;layout=standard&amp;show_faces=true&amp;colorscheme=light&amp;font&amp;width=450&amp;height=27' style='border:none; overflow:hidden; width:450px; height:27px;'/></span></div>
</div>
</div>
<div class='ts-fab-tab' id='ts-fab-googleplus-below-10105' style='display: none;'>
<div class='ts-fab-avatar'><img alt='' class='avatar avatar-64 photo grav-hashed grav-hijack thinglinkFiltered' height='64' id='grav-767b2f7561851b6132fed7bfe5e54d98-3' src='AUTHOR IMAGE URL' style='' width='64'/></div>
<div class='ts-fab-text'>
<div class='ts-fab-header'>
<h4><a href='https://plus.google.com/AUTHOR GOOGLE+ ID?rel=author'>AUTHOR NAME</a></h4>
</div>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='//plus.google.com/AUTHOR GOOGLE+ ID' data-rel='author'/>
</div>
</div>
</div>
</div>
<style>
.ts-fab-wrapper {
    margin: 0 0 2em;
    clear: both;
    }
.ts-fab-wrapper ul
    {
list-style:none outside none;
    }
.ts-fab-wrapper a {
    text-decoration: none !important;
    }
.ts-fab-wrapper img {
    border: none !important;
    }
.ts-fab-list {
    overflow: hidden;
    padding: 0 0 0 5px !important;
    margin: 0 !important;
    }
.ts-fab-list li {
    display: block;
    float: left;
    list-style: none;
    margin: 0 5px 0 0 !important;
    }
.ts-fab-list li a {
    display: block;
    line-height: 16px;
    height: 16px;
    padding: 8px 12px;
    background-color: #e9e9e9;
    border: 1px solid #e9e9e9;
    border-bottom: none !important;
    text-decoration: none;
    font-size: 13px;
    color: #333;
    font-weight: bold;
    outline: 0;
    text-shadow: none !important;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    }
.ts-fab-list li a:hover {
    color: #333;
    }
.ts-fab-list li.active a {
    background-color: #333;
    color: #fff;
    border-color: #333;
    }
.ts-fab-list li a {
    background-image: url('http://www.steamfeed.com/wp-content/plugins/fanciest-author-box_10-13-12/images/fab_tab_icons.png');
    }
.ts-fab-list li.ts-fab-bio-link a {
    background-position: 8px 8px;
    background-repeat: no-repeat;
    padding-left: 27px;
    }
.ts-fab-list li.ts-fab-bio-link.active a {
    background-position: -280px 8px;
    background-repeat: no-repeat;
    padding-left: 27px;
    }
.ts-fab-list li.ts-fab-twitter-link a {
    background-position: 8px -42px;
    background-repeat: no-repeat;
    padding-left: 35px;
    }
.ts-fab-list li.ts-fab-twitter-link.active a {
    background-position: -270px -42px;
    background-repeat: no-repeat;
    padding-left: 35px;
    }
.ts-fab-list li.ts-fab-facebook-link a {
    background-position: 8px -92px;
    background-repeat: no-repeat;
    padding-left: 23px;
    }
.ts-fab-list li.ts-fab-facebook-link.active a {
    background-position: -284px -92px;
    background-repeat: no-repeat;
    padding-left: 23px;
    }
.ts-fab-list li.ts-fab-googleplus-link a {
    background-position: 8px -142px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-list li.ts-fab-googleplus-link.active a {
    background-position: -276px -142px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-list li.ts-fab-linkedin-link a {
    background-position: 8px -242px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-list li.ts-fab-linkedin-link.active a {
    background-position: -276px -242px;
    background-repeat: no-repeat;
    padding-left: 30px;
    }
.ts-fab-custom-link a {
    background-image: none !important;
    }
.ts-fab-widget .ts-fab-list li a, .ts-fab-icons-only .ts-fab-list li a {
    text-indent: -9999em;
    padding: 8px 12px !important;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-bio-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-bio-link a {
    width: 4px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-twitter-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-twitter-link a {
    width: 12px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-googleplus-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-googleplus-link a {
    width: 8px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-linkedin-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-linkedin-link a {
    width: 8px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-facebook-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-facebook-link a {
    width: 0;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-latest-posts-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-latest-posts-link a {
    width: 4px;
    }
.ts-fab-widget .ts-fab-list li.ts-fab-custom-link a, .ts-fab-icons-only .ts-fab-list li.ts-fab-custom-link a {
    text-indent: 0 !important;
    }
.ts-fab-tab {
    display: none;
    border: 2px solid #333;
    padding: 12px;
    background: #fff;
    min-height: 64px;
    overflow: hidden;
    }
.ts-fab-tab:first-child {
    display: block;
    }
.ts-fab-widget .ts-fab-tab {
    padding: 8px;
    }
.ts-fab-avatar {
    display: block;
    float: left;
    width: 64px;
    height: 64px;
    }
.ts-fab-no-float .ts-fab-avatar {
    float: none;
    margin: 0 0 12px;
    }
.ts-fab-avatar img {
    display: block;
    border: none !important;
    }
.ts-fab-text {
    margin-left: 76px;
    line-height: 1.5;
    }
.ts-fab-no-float .ts-fab-text {
    margin-left: 0;
    }
.ts-fab-header {
    margin-bottom: 10px;
    }
.ts-fab-text h4 {
    clear: none;
    font-size: 18px;
    line-height: 1 !important;
    font-weight: bold;
    margin: 0 0 0.2em !important;
    line-height: 1;
    padding: 0;
    }
.ts-fab-description {
    font-size: 12px
    }
.ts-fab-follow {
    margin-top: 10px;
    }
.ts-fab-latest {
    margin: 0 !important;
    padding: 0 !important;
    }
.ts-fab-latest li {
    list-style: none !important;
    line-height: 1.1;
    margin: 0 0 0.6em !important
    }
.ts-fab-latest li span, .ts-fab-twitter-time {
    font-size: 12px;
    }
.latest-see-all {
    font-weight: normal;
    }
.ts-fab-wrapper iframe {
    margin-bottom: 0 !important;
    }
body.rtl .ts-fab-avatar {
    float: right;
    }
body.rtl .ts-fab-text {
    margin-left: 0;
    margin-right: 76px;
    }
body.rtl .ts-fab-list {
    padding: 0 5px 0 0 !important;
    }
body.rtl .ts-fab-list li {
    float: right;
    margin: 0 0 0 5px !important;
    }
</style>

 Step 3: Place the script


Now search for this code </head> and place the following script above it.
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(a){a(".ts-fab-tabs > div").hide();a(".ts-fab-tabs > div:first-child").show();a(".ts-fab-list li:first-child").addClass("active");a(".ts-fab-list li a").click(function(){a(this).closest(".ts-fab-wrapper").find("li").removeClass("active");a(this).parent().addClass("active");var b=a(this).attr("href");if(b.indexOf("#")!=-1){currentTabExp=b.split("#");b="#"+currentTabExp[1]}a(this).closest(".ts-fab-wrapper").find(".ts-fab-tabs > div").hide();a(b).show();return false})});
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
 // Twitter
 (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
 // Google + (plus)
 (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/*]]>*/
</script>

Now click on save the template you have done customize with your own desire viewing and if you face any problem please feel free to leave a comment below your comment will be highly appreciate.

Thanks & Stay Tuned. . ! 

Read More

Saturday, November 30, 2013

// // Leave a Comment

Top 10 Tips To Get Easily Huge Traffic


1)      TOPIC SELECTION

Topic selection is one of the most important factor affecting good traffic. Blogs with less popular and boring topics will lead to low traffic. Such blogs will not be likely to readers. So it is an important factor. You should choose a topic with wide popularity. You should have deep knowledge in that topic.

2)      INCREASE NUMBER OF POSTS

Increase number of relevant and related posts. This should be very informative and presented in an interesting way that readers get stick to it. This make readers to make your blog book marked and visit multiple times. This creates a huge range of returning visitors and your blog will be rated better and better.

3)      DESIGN AND LAYOUT

It is very important part of a blog. Blogs which looks less attractive will also lead to low traffic.  So it should have an attractive design and layout. The blog should contain a nice layout, easy to navigate interface, avoiding unwanted materials............. should be done with proper care.

4)      WAY OF PRESENTATION

The way you present your idea is also important. It should be very easy to understand for visitors. Does not require Advanced Language. But it should be in moderate language. It should not contain plenty of spelling and grammatical mistakes. You should present the topic in such a way that readers get attracted and stick to it.

5)      SOCIALIZATION

Socialization is also an important part of it. We should integrate social websites like FACEBOOK, TWITTER, GOOGLE+, LINKEDIN, ............ Social websites have a remarkable role in generating good traffic. In the beginning onwards I have noticed that a major portion of my blog’s traffic were created by them.

6)      SHARABLE POSTS

You should post sharable contents. When you post interesting, relevant, informative, popular contents,....... it make readers to share your posts in social websites and this will lead to huge traffic generation. They will leave a comment, likes your posts, and share your posts.

7)      EMAIL MARKETING


You should include an email subscription link in you blog for your blog readers to get notified on updates of your blog. Comments, new posts, ..... will be notified. Notifications will be send to their mail id and they clicks through this links and get in to your blog and thus increase your blog’s traffic substantially.

8)      SUBMIT YOUR BLOGS TO BLOG DIRECTORIES

Sub your blog to several blog directories available now. This creates a portion of visitors to your blog. You can submit your blog to free referring  sites to get some traffic. But this methods require your blog to be highly informative and useful.

9)      COMMENTS AND BACK LINKS

Commenting and creating Back links on other websites and blogs can also bring some traffic to your blog. Concentrate on commenting and creating back links on blogs and websites with huge traffic.

10)   ADVERTISING

It is the most important method to create huge traffic. You can advertise in other good traffic websites or advertisers websites in order to get traffic to your blog. This method can create huge chances of traffic. But this method also costs huge when above methods does not cost much.
Read More
// // Leave a Comment

How To Add a Recent Posts Feed to a Blogger Blog

How To Add a Recent Posts Feed to a Blogger Blog

How To Add a Recent Posts Feed to a Blogger Blog

One very simple way to increase page views of your Blogger (Blogspot) blog is to add a recent posts feed to your site. The procedure is easy and effective and does not require any template tweaking. This tutorial assumes limited technical knowledge of Blogger and is mostly aimed at new bloggers and beginners although it is suitable for any Blogspot blogger who wants to increase site traffic. 

If you would like to add a recent comments feed to your Blogger (Blogspot) blog please see my tutorial Add a Recent Comments Feed to a Blogger Blog

Below I will take you through the steps of adding a widget so that your feed is displayed in your Blogger blog's sidebar. Unfortunately the maximum number of items that can be displayed in the posts feed at this point is limited to 5 due to a Blogger limitation. I have not found a hack to increase this level but when I do I will update this post. 


Add a Recent Posts Feed to the Sidebar of a Blogger Blog


1. Login to you Blogger blog and navigate to Layout > Page Elements

2. Click on Add a Gadget in the sidebar and select the Feed widget

3. A popup dialog box will appear requesting you to configure the URL of your feed. Enter the following text into the box:


http://yoursitename.blogspot.com/feeds/posts/default

Be sure to substitute yoursitename for the name of your site 
How To Add a Recent Posts Feed to a Blogger Blog

4. If you have entered the address of your post's feed correctly Blogger will retrieve your feed and display a preview in a dialog box. The feed will include links to the last five posts on your site. 

5. Delete the name of your blog and type in Recent Posts instead


How To Add a Recent Posts Feed to a Blogger Blog

6. Click on Save

7. Click on View Blog to see your new Recent Posts feed in action

8. If you want to change where it appears in the sidebar this can be achieved by returning to Layout > Page Elements and using the drag and drop feature to position the widget.


Having Problem

If you are using a feed delivery service like FeedBurner your default feed URL will be being redirected by Blogger.com. In this case you will need to enter the Feedburner address of the feed which is likely to be something like this:

http://feeds2.feedburner.com/YourSiteName

Notice how Feedburner capitalizes your blog name. Check the exact address at Feedburner if you are not sure of the feed address. For more on burning your feed at Feedburner check out these articles: Blogger RSS Feeds and Feedburner and Burn Blogger RSS Feeds at Feedburner and Add a Feedburner FeedFlare to a Blogger Feed


Read More

Tuesday, November 26, 2013

// // Leave a Comment

How To Customize Blogger Comment Form

How To Customize Blogger Comment Form


Today i am sharing how customize blogger comments form. Old comment form is look like good but new comment form is very beautiful












Just Follow This Steps

  • Login you blogger account
  • Click on Template > Customize
  • Advance > Add css
and paste the following codes on Css

Blue Threaded Comment Style Code

/*Blogger Threaded Comments Styles From http://www.tonyisright.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheMdAwCUYGHLikksQmzkcGzYsx3I8F5tsLSlQ-LeiClfzCjGvTsq58mOE8REVk3wLAI8j2Ztb9ecuq5TVXW1A3zJezCzpUdi8-zc05XYYYJX3RtcdvmLNhF5Eo7s4ohr7pToBZmHwKwIE/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.tonyisright.blogspot.com*/

Green Threaded Comment Style Code
                   
/*Blogger Threaded Comments Styles From http://www.tonyisright.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgTyCX2Elc3PMZ3UMSWBJPhNabl0RuLl2bBDTYRhpO884ZY49gAsvBKZziQca96Vo-U_HvAr1LcQFa9rOmPJzmAGMmg2LIEIfKWKP5sUyTm3VmWvZ7XwnTFfWZH-7CGbRqna0KS-XkIs/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.tonyisright.blogspot.com*/


Pink Threaded Comment Style Code
                   
/*Blogger Threaded Comments Styles From http://www.tonyisright.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDLaWJICWF4ruOV1zMPSzCGAYrxo6HWhTTI4ruH7bKuo2el-QsdRGz3Jiy8OYTAIUy_wdig7mOSitHzptyZpEF-4yyVfsdBYRrqT9DLQZYP8Lv_B_TeByhD5w77kjJ8wCXCWOXcaqd9l4/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.tonyisright.blogspot.com*/

Now Click apply to Blogger.
You have done

If you need any help please comment below and keep visiting. 

Read More
// // Leave a Comment

How To Customize Blog Post Sub Heading & Minor Headind

How To Customize Blog Post Sub Heading & Minor Headind

Hi, After write my previous articles today i am gonna share how to customized blog post sub heading and minor heading.

Just Follow This Step

  • Login your blogger account
  • Click on Template
  • Edit Html
  • Expand Widget Template
Now find this code
]]></b:skin>
After finding the this code paste the following codes before ]]></b:skin>

Subheading Code


/**Subheadng by www.tonyisright.blogspot.com**/
.post h3 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJd6hRxX4-ajfSvd3XY-v3j0rEIV5SClVHYgrMsps6V__8PmM53rVLyWpNfZJdEN7Pg9QtOZ7kPP3-bODH5rd2WviGDfg5kVHf9JMPkdvg9nwdQ1aQvaDAFelfibzVhOGQtBlnequpK2c/s400/BS%252BPostTitle%252B1.png") no-repeat scroll 4px center transparent;
font-size: 20px;
font-family: "Trebuchet MS",sans-serif;
text-align: left;
font-weight: bold;
width: 570px;
padding: 3px 10px 3px 30px;
color: rgb(165, 165, 3);
border: 3px solid rgb(200, 200, 0);
text-shadow: 0px 1px 0px rgb(204, 204, 204);
border-radius: 60px 60px 60px 60px;
box-shadow: 0px 1px 3px rgb(198, 198, 198), 1px 1px 0px rgba(255, 255, 255, 0.4) inset;
margin: 15px 3px;
text-transform: uppercase;
line-height: 1;
}

Change the Blue color URL with our desire icon and save the template.

Minor Heading Code

/**Minor Heading by www.Tonyisright.blogspot.com**/
.post h4 {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OdXAfzvc3ZE2hcABIByAaskZjxS-h7f8qT_xmVS0oNRYlhwb4Vx7yDYQwN3TjIS2wjfGetc14SsvQCzPBAM9AmcihSSleuXUsyo_SPmKL78X8ejSVyfZTjrd_qF6P5xBeKQvlZ7kUBQ/s400/BS%252BPostTitle%252B2.png") no-repeat scroll 5px center transparent;
clear: both;
color: rgb(102, 45, 45);
font-family: "Trebuchet MS",sans-serif;
font-size: 20px;
font-weight: bold;
line-height: 1;
margin: 10px 5px;
padding: 6px 10px 2px 40px;
text-transform: none;
text-shadow: 0px 1px 0px rgb(204, 204, 204);
}

Change the Blue color URL with our desire icon and save the template.

you have done. !

If you need any help please comment below and keep visiting.

Read More

Monday, November 25, 2013

// // Leave a Comment

How to register and link your website to Google Analytics

In this article I am going to tell you how to register and link your website to Google Analytics with introduction of many more features.

How to register and link your website to Google Analytics


Step-1:


First login into your Gmail account and click on below mentioned link to register with Google Analytics.

Google Analytics to Register

Now click on Login button, it will redirect you to signup page. You can also click on below link to go to signup page directly.

Click Here to Sign up

Step-2:


Here Website tracking option and Universal Analytics option will be selected as default. You don’t need to change this option.

Step-3:


Fill the below mentioned details in the form. Sample data has been given for your reference.


  • Website Name: Info Blog Maz
  • Website URL: http://Tonyisright.blogspot.com
  • Industry Category: Other
  • Reporting Time Zone: Pakistan (GMT+05:00) Pakistan Standard Time
  • Account Name: Info Blog Maz (Name which you like)
  • Select all the options and click on Get Tracking ID, select Pakistan license term and click on I Accept.
  • Now you will get a tracking ID like UA-XXXXXXXX-X and a script code.

Incorporate this script in your website and verify your website. Now your website is successfully registered and linked with Google Analytics.


Now you can check following things in your Google Analytics account.

In MY STUFF you can access following feature.






Read More
// // Leave a Comment

Add Flash Clock To Blogger Blog


Add Flash Clock To Blogger Blog

Today i am sharing this article how to add a flash clock to blogger blog.
  • Login to your blogger dashboard--> Layout-->'Add A Gadget'
  • Choose Html/Javascript Gadget and add the one of code given below : 


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150"
wmode="transparent"> </embed></object>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150"
wmode="transparent"> </embed></object>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-58.swf" width="150" height="150" wmode="transparent"></embed></object>



<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-183.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-63.swf" width="150" height="150" wmode="transparent"> </embed></object>

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-15.swf" width="150" height="150" wmode="transparent"> </embed></object>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-8.swf" width="150" height="150" wmode="transparent"> </embed></object>

<embed src=http://safir85.ucoz.com/bdlab-blogspot/24work/WorldCupClock.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>


  • Save HTML/Javascript you are done.

For more visit: freeflashclocks.com  
Read More