Drop Down Menu For Blogger

Drop Down Menus are great for adding multiple links in your blog and yet they require very little space space. In addition it makes the site more user friendly and gives it a more professional look. I am going to show you how to add a customizable drop down menu to your blogger blog.
Drop Down Menu Preview:
drop down menu A simple Drop Down Menu For Blogger

Follow these steps to add a drop down menu to your Blog:
1. Go to Design->Edit Html
2. Download Full Template (This is to backup your template, so that you don’t lose any data).
3. Check the Expand Widget Templates
4. Now search for the following code:
</head>
5. Just place the following code before the code above.

<style>
#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
/*Font of menu top*/
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
/*width of each menu top*/
width: 60px;
/*background color of main menu*/
background: #5970B2;

/*text color of main menu*/
color: #FFFFFF;
text-align: center;
text-decoration: none}

#sddm li a:hover
{

/*background color of main menu on hover*/
background: #49A3FF}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;

/*background color of drop down menu */
background: #FFFFFF;
/*border of the drop down menu*/
border: 1px solid #5970B2}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
/*background color of each menu element*/
background: #FFFFFF;
/*text color of each menu element*/
color: #2875DE;
/*font of each menu element*/
font: 11px arial}

#sddm div a:hover
{
/*background of each element on hover*/
background: #49A3FF;
/*font color of each menu item on hover*/
color: #FFFFFF}
</style>
<script type='text/javascript'>

var timeout = 500;
var closetimer = 500;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = &#39;visible&#39;;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = &#39;hidden&#39;;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
</script>


6. Customize the drop down menu(optional):
Customize Drop down menu A simple Drop Down Menu For Blogger
You can customize the menu according to your blog. This is optional and use it only if you want a different look than the one already available.
The menu consists of three sections as shown in the figure:

1. Main Menu
2. Drop Down Menu
3. Element of Drop Down Menu
In the code you will find some comments. Below the comments you have some editable code.
Here is the explanation of some of the attributes used in the code:
Background: #XXXXXX
This attribute decides the background of the part and XXXXXX is the hex code of the color. You can change the background of each of the three parts.
Color:#XXXXXX
The color attribute decides the color of the text and XXXXXX is the color hex code.
You can get color hex codes from these online color choosers

ColorSchemer
ColorPicker

width: 123 px
The width determines the width of each element. You can increase or decrease the width according to your choice.
7. Adding the Menu:
a.Go to Design>Page Elements
b.Then click on Add Gadget

Sidebar add gadget A simple Drop Down Menu For Blogger

c. Then select HTML/JAVASCRIPT

d.Then Add the Following code

<ul id="sddm">
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Home</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Download</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">ASP Dropdown</a>
<a href="#">Pulldown menu</a>
<a href="#">AJAX Drop Submenu</a>
<a href="#">DIV Cascading Menu</a>
</div>
</li>
<li><a href="#">Order</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

Note: Replace # by the link of the item and if you want to add the menu, say the third element.
Replace <a href=”#”>Order</a> by the following code:
<a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Home</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>



This is for the third menu, for the fourth replace each m3 by m4
f. Save the Gadget and the work is over. The Drop Down menu is live!


The Best Technic

Change Default Blogger Anonymous Avatar Comments

Changing Default Blogger anonymous avatar on threaded comments. After Blogger announced new feature of threaded comment, we still can costumize avatar for whose comment with 'anonymous' or 'Name/URL'. At first time Blogger using blank image http://img1.blogblog.com/img/blank.gif, so we can hack the template with background for avatar.

Now Blogger using avatar with URL  http://img1.blogblog.com/img/anon36.png, and we can't hack this image with background. But we should use jQuery script to hack this. And Let's we go... :)


change default blogger anonymous avatar

To change default Blogger anonymous avatar, follow simple steps below:

1. Go to Template -> Edit HTML

2. Find </body>
3. Add this code just before </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'your-avatar-url-here')
.ssyby('blank')
</script>
4. Save

Replace the red text with your avatar URL. Or you can select below URLs to replace the link.


1. Blogger


avatar
http://4.bp.blogspot.com/-YXqDPLzUBOk/T2cTb8Oru8I/AAAAAAAABoY/jBiDzNtxalU/s1600/blogger2.jpg

2. Anon6


avatar
http://1.bp.blogspot.com/-kR2Y_oJ6aSg/T2cUI61bGhI/AAAAAAAABoo/L3CbI2ONU4c/s1600/anon6.png

3. Anon7


avatar
http://3.bp.blogspot.com/-zooNSeneo0Y/T2cXjizVMVI/AAAAAAAABow/u27OI-WsIUU/s1600/anon7.jpg

Or please make own avatar :)

The Best Technic

Add Floating Facebook Like Box for Blogger

Many tutorial gives you how to add floating facebook like button. Now I came up with new tutorial for adding floating like box to blogger. This is a great way which requires almost no space and it looks more attractive than that of simply keeping the like box.
Adding Jquery Plugin
1. Sign in to Blogger
2. Go to your Dashboard>Design>Edit HTML
3. Add this code above the closing </head> tag in your HTML file:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
Ignore thies step if you have added Jyquery plugin to your blog.
Adding Widget Code
1. Go to Design>Add a Gadget>HTML/JavaScript
2. Add This code to HTML/JavaScript Widget



<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fsibarasok&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe><span><a href="http://thebest-technic.blogspot.com/2012/09/add-floating-facebook-like-box-for.html" target="_blank">+Get This!</a></span></div></div>


Replace http%3A%2F%2Fwww.facebook.com%2Fsibarasok, with your Facebook fan page URL.


The Best Technic

How to Make Pan bolic (Simple Grid Antenna)



Before making a pan bolic, we must know first what it is and what its function bolic pan.


What is a Pan bolic?

  Bolic skillet is an antenna made from basic materials Pan. Bolic pans are two versions of the Antennas grid, the difference between pan bolic with Grid Antenna only lies in the materials and cost efficiency. Grid antenna / satellite TV as we know, the price is very expensive, may be 2 or 3 million-an. While the pan bolic costs only less than 200,000. With functions similar to the antenna grid, pan bolic more efficient. Bolic skillet is a radio receiver antenna with a frequency of 2.4Ghz. And another great, Frying Pan Indonesia bolic is children's work, steady right?