How to Add a Shining CSS3 Horizontal Menu For Blogger

Horizontal menu best alternative option for labels or sections.
The importance of horizontal menu including: reducing the space occupied by the sections/labels and distort the appearance of blog, coordinate and beautify the style of blog.
This widget is designed by CSS3 technology, And you can add this gadget to your blog with very easy way:

Adding the widget to Blogger blog:

1. Go to Blogger Dashboard  → Layout → click on "Add a gadget".

2. Select "html/java script" and add the code given below:

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdKIO91f6Wdp2JnmkN94jqlQcFXtkvXy9g76LQmkMMZfepTifBVEdrngRaTTxWXxU0eOXsRNNJCwpS6JZyEcit6WDA-pxCDWARbOqymsLNUHPgbM-5Kl1UhkqjTDmJRYbhsu3IFQxC2-k/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style>

<a href="http://bbloggertutorials.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIf_V-j9or8xXQ-cgZTVwBgv4qdh0_q5Bw3neb216VPvmrSuqet2dOzBsLyW2W-e3BlB5yF5yPMQ_NWg1JUZqDWq3L9LT4cxfB4ponxdfPrEOGlmTnKSv730s-3pYEyGKX2thhBIWgi2A/s1600/1x1juice.png" /></a>

<div class="wg-shining-menu">

    <ul class="menu">

        <li><a href="http://bbloggertutorials.blogspot.com/">Home</a></li>

        <li><a href="#">Features</a></li>

        <li><a href="http://bbloggertutorials.blogspot.com/p/blogger-tools.html">Products</a></li>

        <li><a href="http://bbloggertutorials.blogspot.com/p/contact-me.html">Contact</a></li>

        <li><a href="http://bbloggertutorials.blogspot.com/p/sitemap.html">Tips</a></li>

        <li><a href="http://bbloggertutorials.blogspot.com/p/terms-and-conditions.html">Tricks</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>

NOTE

3. - Replace the URL in blue with your own.

    - Replace the tab name in red with your own.

4. Finally click on save.

Now you can see the result  (o)

How to Change Default Avatar in Blogger Comments

In this tutorial we will learn how to change or customize the avatar anonymous commentators, This enables us to add an image in blog comments instead the name of unknown without a picture.

How to Change Default Avatar in Blogger Comments

1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML

4. Use Ctrl + F to find </body> and paste the following code above/before it.

 <script src='http://code.jquery.com/jquery-latest.js'/>

<script>

$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)

.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmt2xBO3MkumIjakVqgxzUnzOFlVNY-w8POepOCMO2J49-I4SFQHE6PNfBhOTUi63mSD1VUrWME-dSWAhXY4xBUAFUn0M73-ZKO9DIO5jdMXQ2WxGGr1oo4OPU3uTivHVezLhiM-Avsy8/s1600/default_avatar.gif&#39;)

.ssyby(&#39;blank&#39;)

</script>

<script src='http://code.jquery.com/jquery-latest.js'/>

<script>

$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)

.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwy74ieiXFU5QRWWpnd1GkTREDrTadSUUHBtiAvuH4oTvfZivSrMZbQL3WGxOB1oH5jzYrn7jwxkzIRcBqVbXoJP3R9HEB_Tko8gvCp1W8Zy4lXZPWJCTKhUOx6mbSTQpONxRKE9gkLw/s1600/blogger-user.png&#39;)

.ssyby(&#39;blank&#39;)

</script>

5. Save template.

Note:

For Anonymous users: Replace the code in green with the url address of your image.
For Blogger users: Replace the URL in blue with your own.

You can choose one from these below (copy the url address):

1- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlVxZ3L17rUh8s68zcUTT6twgg1VhyU0vtmTzaGjusoDgS2fTIzSzNg40i47UJ9fuyg8hUdj5eSH6psq9VQRDRM4CfuCYDW6p7REREIhyNfhuGiJ-rUO8PYXosfy8W2OCAdOK0TNBHItQ/s256/blogger-icon.png

2- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQHOWea46JOk4QM8C8ZTa0QfkKvdVGKn9TEtBsbx6s1QHD5CLFYfYsjrjzAFpEmHpz0ySkmzeeoiAsK_B6ksLCk1vwDKBBUoS8cm94xOYcEUhjNfaJhxr01RSSY2dxUz49O6quBuxAMU/s268/anonymous3.png

3- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_XfMO7DkGmjY1u5vyLmHUH8Z6VNJheZB83_Wnk2_jLqjwx1VUIpgU6y-ZMVbisk_TlqlW9qztQDjcQunWS68ayEjXKPckksqtghCCOXQUiSpXwH8omxbUtVoedoGTSDrWH5D0zvzqUkY/s265/blogger-user.png

4- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGY5S-J13TZjzLlu3dAzLpjFThxNPW6U16iH4vq_wM3FOKy7-Uy-Tt0wrcFsMTvwuqpe6sIe2FYqNUcNXV1t2wN_OZx_y6Mmixv7Vj5Z35_6YgTi-lnFcRSVPJ8Dhf_Da4S97L1Wgh4Y8/s200/default_avatar.png

5- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7OizvP6Vr38OxA8WEmByUJtURWG5J-Po42CJ5cft8zUWR5NJGhtHKnJd4SY1K8gbVwVjHKQo2HCgtxAZbIqCH5rVlFzmWIsvvltidtqw5zgHNMhyphenhyphensIgzyHVHLjaUwHMlwB7hhfV4cbnE/s138/facebook.gif

I hope you enjoy and happy blogging. ;)

How to Add "Change Text Size And Font Face Gadget" For Blogger

How to Add Text And Font Gadget To Your Blog

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'--> Choose HTML/JavaScript

2. Copy and paste the code below into the HTML/JavaScript gadget :

<script>

function go1(){

if (document.selecter2.select2.options

[document.selecter2.select2.selectedIndex].value != "none") {

document.getElementById('main').style.fontSize

=document.selecter2.select2.options

[document.selecter2.select2.selectedIndex].value

}

}

function go2(){

if (document.selecter2.select3.options

[document.selecter2.select3.selectedIndex].value != "none") {

document.getElementById('main').style.fontFamily

=document.selecter2.select3.options

[document.selecter2.select3.selectedIndex].value

}

}

</script>

<form id="forma" name="selecter2" method="POST">

<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">

<option value="Times New Roman"/>Times New Roman

<option value="Arial"/>Arial

<option selected value="Book Antiqua"/>Book Antiqua

<option value="Bookman Old Style"/>Bookman Old Style

<option value="Century Gothic"/>Century Gothic

<option value="Comic Sans Ms"/>Comic Sans Ms

<option value="Tahoma"/>Tahoma

<option selected value="Trebuchet Ms"//>Trebuchet Ms

<option value="Verdana"/>Verdana

</select>

<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">

<option value="8px"/>8

<option value="9px"/>9

<option value="10px"/>10

<option value="11px"/>11

<option selected value="12px"/>12

<option value="14px"/>14

<option value="16px"/>16

<option value="18px"/>18

</select></form>

3. Save HTML/JavaScript you are done.

How to Add Cool Chat Box to Blogger

Chatwee is a new chat service, unlike other Chatwee is added as a toolbar and chat deployed on the right side (you can switch to the left), showing the flag next to the user depending on the country where connect. Its design is attractive, however the functions are very limited because you can not choose a nickname unless you register, and so far I still do not know how to change the avatar once you're registered. But yes, it has the advantage of allowing users to share files such as PDF, music and photos.
Once you register you'll have the code you can use on your blog, you can also customize the colors of it.

It is recommended to have a script that prevents the redirection of countries, since the chat is only displayed in the URL you have registered, so if someone from another country comes in and adds another extension is not shown.

How to Add Cool Chat Box to Blogger?

Step 1

1- Go to the following link: chatwee
2- And do like the image

3- After creating your chatwee account, login to your account with your username and password, then you will see a code, just click on “Copy script to clipboard”.

Step 2

1- Login to your blogger dashboard --> Layout --> 'Add A Gadget' --> Html/Javascript

2- then paste the code into the box and then Save Arrangement

3- Now go to your blog to see your chat box.

How To Add a Clock To Your Blogger Blog

How To Add a Clock To Your Blogger Blog

1. Login to your blogger dashboard--> Layout-->'Add A Gadget'

2. 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-190.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>

<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>

3. Save HTML/Javascript you are done.

For more visit:      freeflashclocks.com 

How To Add Zoom Effect in Blogger Images

How to add zoom effect in your blog?

1. go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox

6. Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

.zoomeffect img{

-webkit-transform:scale(0.8);

-moz-transform:scale(0.8);

-o-transform:scale(0.8);

-webkit-transition-duration: 0.5s;

-moz-transition-duration: 0.5s;

-o-transition-duration: 0.5s;

opacity: 0.7;

margin: 0 10px 5px 0;

}

.zoomeffect img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

 7. Click on Save the template

How to activate it on images?

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.

Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.

 <a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">

<img src="http://YOUR-IMAGE-URL" /></a>

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.

That's all!

How To Add JS-Kit Rating to Blogger

How To Add Js-Kit Ratings To Blogger?

1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates check box
6. Find this code in your template <data:post.body/>

7. Copy one of the code below and paste it immediately after the line <data:post.body/>.

Note : This will add rating widget under your blog post. If you want to add the rating widget under post title, add below code just after <div class='post-header-line-1'/> .

Code 1 

<div style="float:left; margin-right:3px;"></div>

<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title"></div>

result :

Code 2 

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" view="score"></div>

result:

8. Now again scroll down to where you see the </body> tag.
9. Add below code just before the </body> tag.
<script src="http://js-kit.com/ratings.js"></script>
10. Click on "Save Templates" and now you are done.

How To Create "Scroll to Top" Button To Blogger

How To Create "Scroll to Top" Button To Blogger?

1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Find below code in your template
]]></b:skin>

6. Now add below CSS code before ]]></b:skin> tag .

/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

7. Now add below code before </body> tag:

<a href="#" id="toTop">^ Scroll to Top</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {
$("#toTop").scrollToTop();
});
</script>

 8. Save your template and you are done!