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

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

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

Add Metro Style Social Widget for Blogger

Today i am sharing this articles how to add beautiful metro style social widget for blogger looks like windows 8 apps.

Adding widget in blogger layout

• Sign in blogger -
• Go to layout -
• Add a gadget -
• Html/Java script -

<div class="metro-social">
<li><a class="fb" href="Your Facebook URL here"></a></li>
<li><a class="tw" href="Your Twitter URL here"></a></li>
<li><a class="gp" href="Your GooGle + URL here"></a></li>
<li><a class="fd" href="Your FeedBurner URL here"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>
<br />

• Replace YOUT URL with your url -
• Click on save - 

Enjoy Blogging !

Read More

Adding a Facebook Popup Like Box In Blogger

After my previous articles about How to add Facebook Slide Box for Blogger. Today i share how to add a Facebook popup like box in blogger in simple way

How to Add It to Your Blog? 

Well, it’s very simple. The complete code to add it to your blog is shared as under. Just follow the following easy steps in order to install it on your blog.

1. Go to blogger Layout page

2. Add a Gadget >> Select HTML/JavaScript gadget 

3. Paste below code inside that HTML/JavaScript gadget

Read More

Change Blogger Template hooked on a blank HTML Page

A simple HTML Page has a document type description shadowed by a HTML, HEAD and BODY tags respectively. The Metatags, JavaScript’s and style sheets are always added inside the head section and the DIV sections or content is enclosed inside the body section. In Blogger since the template is programmed mechanically through dynamic b: section tags then we first need to remove all such sections and leave just one because the XML markup tag requires presence of at least on such section. To simplify the process I have created a "Static HTML Theme" that will work just fine for you. You can use this theme to play with exciting new tools, Fancy CSS3 tweaks, and practice your design skills.

You can Convert Blogger Template into a blank HTML Page by following the steps below.

There Are 7 Simple Steps To Install The Theme:

• Step 1: Go To Blogger Dashboard
• Step 2: Create a New Test Blog
• Step 3: Give it a title and address
• Step 4: Choose the Simple Template and not Dynamic Views
• Step 5: Next Navigate to Template > Edit HTML > Proceed
• Step 6: Replace all the code inside the editor with the following code:

<?xml version="1.0" encoding="UTF-8" ?> 

<!DOCTYPE html> 

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> 

  <head>

    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> 

    <b:if cond='data:blog.isMobile'> 

      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> 

    <b:else/> 

      <meta content='width=1100' name='viewport'/> 

    </b:if> 

    <b:include data='blog' name='all-head-content'/> 

    <title><data:blog.pageTitle/></title>

   <b:skin><![CDATA[/* 

#navbar-iframe {   height:0px;   visibility:hidden;   display:none   } 

body { 

  font: $(body.font); 

  color: $(body.text.color); 

  background: $(body.background); 

  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); 

  $(body.background.override)  margin: 0; 

    padding: 0; 

}

]]></b:skin>

   

  </head>

  <body>

  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> 

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> 

</b:section>

<div style='margin-top:400px; '> 

<!--Please keep the Credits intact--> 

<center><p><a href='http://www.Tonyisright.blogspot.com'>Info Blog Maz </a>&#169; 2013.</p></center> 

</div> 

  </body> 

</html>

• Step 7: Click saves and when prompted about the following error:

Warning: Your new template does not include the following

widgets:  BlogArchive1 Profile1 Attribution1 Header1 Blog1

Simply click on Delete widgets and you are all done!

If you have any problem about this please comment below or contact us on our page.

Read More

How To Add Stylish Flag Google Translator For BloggerAnd Websites

Features:

1.) This Is A CSS Play Widget And All Flags Will Rotate To 360 On Hover.
2.) Support Top 10 Languages Of The World , English, French, Germany, Spanish, Russian, Japanese, Korean, Arabic, Chinese And Portuguese...
3.) Auto Adjustment, No Matter Where Do You Add This Widget, It’ll Be Auto Adjusted With Your Blog Template.
4.) Easy To Install.
5.) Quick To Load.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.




<!--A Google Flag Translator by www.Tonyisright.blogspot.com-->
<style type="text/css">
.exetranslate input{padding:5px;}
.exetranslate input:hover{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transition: transform 0.2s ease-out;
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
}
</style>
<div class="exetranslate">
<form action="http://www.google.com/translate">
<script language="JavaScript">
document.write ("<input name=u value="+location.href+" type=hidden>")
</script>
<input value="en" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="langpair" type="hidden"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into English" value="auto|en" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuovI2aQs2HzSV4fOk2RWjsPHiIAZ7VucFVu9OVEzza7-LkV_oxQF6y7a0prsL70Eq9SNh-3Gxv07wknSq5to3Xs86ELcSLcTwWvn7wbhknKL01AwirSxDE__N5tQtcPZ1XyXoh-nTHA/s48/English.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into German" value="auto|de" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7mRk8Go4Y7zsYQFcvX9arO1ym14ywJ5-OMnENHa6NYLYdd7B70h-nBJd1Jvw0i3sF9EXWI5YdNtpgEwq6vP4ShSmG00uw49qmzzOmPwCZbosLJ2r6kCIJui7g10fWhoNrHhyphenhyphenQnP9_aw/s48/German.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Russian" value="auto|ru" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZFwMPdjoiuAWrRZIXZUcPBIzXYvdJA-V4KHm489Wu7KUKbYMIXuM29hezAYRRsgPM4IEdE_iY85wlZZ7JEkEt-QWl-iNhQyCu9-GGdKgxht8Gg8KEE6-Uyv7yICiycJziqfDrKbrlQ/s48/Russian.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into French" value="auto|fr" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZZ-gA3YRtNGYdZIQk33pueEqZwyiKxHXAcB01LoPfBheMH6-s8EOyBJLiNVKQymqSKkH5bR4JuYVIzfoWF-kpzQsqv9ly0Vysm4yZlp_LyrcgFzdqyKJPaePN4Y5wChyr6826KGbqQ/s48/French.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Portuguese" value="auto|pt" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfFozODnBoU1CHUniNBtDoi6uKoKw-DHZW50uNjmLnhX3aQ98pdDjLeE-ifXCc5yHzlr0Ky7DJm3dsobx5FfVFm5H0UkHWRF6Urt2iTUnd_C6A2ww054OfoAOp88qb0X1cmaCL-Xe9lg/s48/Portuguese.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Spanish" value="auto|es" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYHfMyRFrSCJvkHJdxU7Be2nCdRn6m6z8vUmQ07R1OE7YDTGSiQAaCHHwmSbxjV1P1zn1iLMbaml29oVTwUZBbHy39gfS_7o_6jo4Isv37lsKvHc8fHuQRlSH4K1GYCaZqCHJxZp5IsQ/s48/Spainish.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Arabic" value="auto|ar" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6bLlsVp7UbdC-i0R41M8N465t-P-BRJRocAwv-jCQHAWURQ5fuBmTACmQhahTriy_y-8hR0Ni8Mjw2YamKhswDonWNhUaI_FTHbYaSVDSupnPQyVosAFOojbWdU_sPNfmBH8hpp4FoQ/s48/Arabic.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Japanese" value="auto|ja" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQfcqjfAAa9Ipo0GEytYgChVB0d4OqmAqHUM8gd00DdGCPhsfPDssRBYVBEur34ZnkxpdXuwP6ziEMRtpnnXEc0-SoKVstmRixvcOqkjWCcKyyMow8vnmqR0-bEfI2RPSVYp6cfr0IGQ/s48/Japanese.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Korean" value="auto|ko" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJPdL7_u3HGu00Rb-ZlT7j1DCE8AjkwmBdqGP8Ct21wPebC9IAKjVJifgmsXMOgAKpGRuBCK1Xl-kTYB8Vl94-Fi4FxUu41xZ6mRuEWLwmZTO8aSSc0Pnpaw3ykYG0584K-DwvCoLsw/s48/Korean.png" width="48" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Transalate Into Chinese (Traditional)" value="auto|zh-TW" type="image" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizwpmSKgHyjvax98U9C6y2WBwjRowh-ADI-kY5IY8Qly8oorZyTPaj5RrDqMkbIhc93dZGhj1k47-8idiA3jZWr-mVjLMKsATH6u8UUY-bmKDisq6-Rn1j_fgR8qpuyuR0Uufwt3oAcA/s48/Chinese.png" width="48" name="langpair"/>
</form>
</div>
<!--A Google Flag Translator by www.Tonyisright.blogspot.com-->

There is no need any customization.

If you have any question about this widget please feel free to contact us or post a comment below.

Read More

Add Blogger Notification or Hello Bar or Fixed Bar with "Close Button"

This Sticky Bar Or Fixed Bar Works Best By Clutching Readers Attention And Helps You To Focus Readers Towards Important Deals, Announcements Or Any Story. Blogger Notification Bar Needs No Registration And Offers Far Best Design Flexibility. The Scripts Are Less Than 7KB In Size And Fully Hosted At Your BlogSpot Server.  You Can Modify Its Look And Theme To Any Color That May Blend Your Layouts. Every Single Element Is Well Structured And Can Easily Be Configured. I Am Excited To Share It With You All. Let’s Get To Work!

Installing This Gadget On Blogger

You May Follow The Easy Steps Mentioned Below In Instruction To Add The Widget To Your Blogger Blogs.
Follow These Easy Steps:

• Go To Blogger > Design > Edit HTML
• Backup Your Template
• Search For This

]]></b:skin>

• Just Above It Paste The Following CSS Code, 

/* --Blogger Sticky Bar By Www.Tonyisright.Blogspot.Com-- */

#mbt_bar{

background: #232323;

width:100%;

margin:0px auto 0px auto;

text-align:center;

padding:5px 0 5px 25px;

box-shadow: #666666 0px 1px 3px;

z-index: 9998;

height: 27px;

position:fixed;

line-height: 1.85em;

vertical-align: baseline;

letter-spacing: 1px;

text-decoration:none;

color:#fff;

font-size:13px;

font-weight:bold;

font-family: Helvetica, sans-serif;

line-height: 24px;

border-top:1px solid #000;

border-bottom: 2px solid rgb(255, 255, 255);

}

#mbt_bar a{

text-decoration:underline;

color:#FFFC00;

font-size:12px;

font-weight:bold;

font-family: verdana, arial,"Helvetica",sans-serif;

line-height: 24px;

}

#mbt_bar a:hover{

text-decoration:underline;

}

#mbt_bar p {margin:0; list-style:none;}

#mbt_bar img {vertical-align: middle;

margin-right: 6px;}

#blog-pager, .pagenavi {

clear: both;

text-align: center;

margin: 30px auto 10px;

}

• Next Search For </head>   And Paste The Following Javascript Code Just Above It

<script type='text/javascript'> 

//<![CDATA[ 

var mbt_arr = new Array(); 

var mbt_clear = new Array(); 

function mbtFloat(mbt) { 

mbt_arr[mbt_arr.length] = this; 

var mbtpointer = eval(mbt_arr.length-1); 

this.pagetop = 0; 

this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; 

this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt); 

this.mbtsrc.height = this.mbtsrc.offsetHeight; 

this.mbtheight = this.cmode.clientHeight; 

this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]); 

var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);'; 

mbtbar = mbtbar; 

eval(mbtbar); 

} 

function mbtGetOffsetY(mbt) { 

var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop); 

var parentOffset = mbt.mbtsrc.offsetParent; 

while ( parentOffset != null ) { 

mbtTotOffset += parentOffset.offsetTop; 

parentOffset = parentOffset.offsetParent; 

} 

return mbtTotOffset; 

} 

function mbtFloatInit(mbt) { 

mbt.pagetop = mbt.cmode.scrollTop; 

mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px"; 

} 

function closeTopAds() { 

document.getElementById("mbt_bar").style.visibility = "hidden"; 

} 

//]]> 

</script>

• Finally Search For <body> And Just Below It Paste The Following HTML Code 

 <div style='z-index:999999; position:absolute; margin-right:20px;'>

<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='20' side='right' trigger='30%'/></div>

<div id='mbt_bar'><font style='color:#FFFC00;'/><blink> Latest!! </blink>

<a href='http://www.tonyisright.blogspot.com/' rel='nofollow'>Blogger Widgets and plugins</a> 

<span style='padding:0px 0px 0px 6px; margin:0px;'>

<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg43ralWEB-yH1Fq8K2SxCMN9PI69vXaXyucoKCXHJirLTBKGz2pPrXOHDQv-1tOVu4EQ684pPTBeLcSB8AB548ySqHh1U9dSKpuURYJDmqFaTvdJxsXzvokaNRQH2MP7mKSrqJHk6o955/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>

<br/><br/>

• Save Your Template
• You Are All Done!

Visit Your Blog To See It Fixed To The Top Just Beautifully With A Close Button Waiting To Be Clicked! 

Customizations:

1. To Modify The Background Color Of The Bar Then Simply Change This #232323 Use Our Color Code Generator For Doing This.  
2. Replace http://www.tonyisright.blogspot.com/ With Your Text Link (Can Be Your RSS Link, Important Post Link Etc.) 
3. Now Replace Blogger Widgets and plugins With Anything You Wish To Write.

If You Face Any Problem Installing This Widget, Submit Your Problem In Comments.

Read More