Create a Snow Effect, Foliage, and Falling Star in Blogger

A wide range of widgets and gadgets are widely used to decorate the walls of the blog page. Effect Snow, leaves, and star-studded and fall is often used. Just like in the spring with the beautiful fall leaves. How to Create a Snow Effect, Foliage, and falling star is actually easy in blogging /blogspot. The scattered widget will make visitors become bored visiting our page.

Create a Snow Effect, Foliage, and Falling Star in Blogger
Create scattered snow effects / falling:
1. Log in to Blogger.com
2. Click on your blog name.
3. Then select Template.
4. Then Edit HTML and Check the Expand Widget Templates
5. Copy the code below and place it on above code </ head>

<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>

6. Save Template.

Effect Leaves falling on the Blog:
Is the same as steps 1 to 4 above.
Then copy this code above the code </ head>

<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

How to Install a falling star effect on the Blog:
Copy the code below and place it above the </ head>
1. src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" <script type="text/javascript"> </ script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"> </ script>

Read more »

New Blogger Template HTML Editor Interface

For New Blogger Template HTML Editor Interface guide in blogspot, When we go to the Edit HTML in Blogger Template, then you will see HTML code editing, CSS, and Javascript latest. In the edit html we will see some new tools such as the Back button, Save Template, Jump To Widgets, Edit Template, Templates Preview, Format Template, Change Revert, Revert widget tempate to default

There you will find new features which was not in previous HTML Editor, You can easily use it> Go to Blogger Dashboard > Template > Edit in HTML.

Jump to widget Button

You can simply jump to any widget without wasting your time for search and then simply edit it as per your requirement. It will show you complete gadgets which are installed in your Blog as well as Blogger Builin Gadget such as Blog1 or Navebar.

Preview Template

Before whenever you edit anything HTML you have and you asking for preview it was shown in a new window, but now it has been upgraded with new awesome feature, which can show preview in below there it means you don’t have to go in new window.

Format Template

In previous version of HTML there was a check box for Expand Widget Template but now it has been replace with Format Template option. So now if you find for Check Box on Expand Widget Template in any tutorial then you have to click on “Format Template”


Expand Hide Code Section

It has also introduced another facility for hide and expanding codes of difference section. It means if you are working in HTML you can hide contents which are not in use.

Line Number for Finding any Error

Before if we edit any thing in HTML and if we have mistake anywhere its shows that we have not closed any code or something else in the line No. but in new interface we don’t have to worry about that I have introduce line number for getting exact location of error.

Read more »

How to Install MP3 Music Widget in Blogger

A wide range of widgets and gadgets can be installed on the blog. Ranging from Music, MP3, Radio Online, Chat Box, Floating Widget, Calendar, Animation, Game and others. Installation was hanging with some gadget blog owner's needs. To your users blog using blogger / blogspot, all widgets can be installed easily. Blogger Tutorial this time will be discuss How to Install MP3 Music Widget in Blogger. Many who have learned how to autoplay music is fitting, because just by adding script HTML / Javascript simple.

How to Install Widget Music / MP3 in Blog :
1. Log in to Blogger.com
2. Choose the blog you want to install MP3 gadgets.
3. Click Layout, and then select Add a Gadget / Add a Gadget on your blog element.
           Here you can set it as you wish. Can be placed in the right sidebar or left sidebar.
4. Choose HTML / Javascript.
5. Enter the code MP3 music which you can find at:
     Gadgets MP3 Music Blogger, Widgetbox Media Player
For the Widgetbox please do register to register first.

6. You can also use the code below the song if you like it for example

<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmmusicbar.gif" border="0" alt="Get Free Music at www.divine-music.info"></a><br>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmlogo.gif" border="0" alt="Get Free Music at www.divine-music.info"></a>
<br><br><b>
<a target="_blank" title="Get Free Music at www.divine-music.info" href="http://www.divine-music.info">Free Music</a> at divine-music.info</b><br>
<EMBED SRC="http://divine-music.info/musicfiles/01 Give Me Everything (feat. Ne-Yo,.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

Another How to Install Music / Songs AutoPlay on Blog :
1. To get the code you want a good song that song Indonesian, Western, Malay, K-POP, and so on. Please enter 4shared.com.
2. Write down and then find the song you want to install.
3. Download the song, and then click Pause. Copy the song link and enter the code red here.

<object data="http://static.4shared.com/flash/player/5.10/player.swf?file=http://dc280.4shared.com/img/3579932921/5703126b/dlink__2Fdownload_2FKjiZNVMe_3Ftsid_3D20130501-163924-ad3a3999_26dsid_3D3n6018.8e0f260b8292b888fbe862a91bd91ef3/preview.mp3&repeat=no&autostart=true" width="0" height="0" type="application/x-shockwave-flash"></object>

4. Keep all the above code and place it on your widget. Same way as adding widgets as above.

Read more »

How To Create Horizontal DropDown Menu in Blog

How To Create Horizontal DropDown Menu in Blog, Dropdown menu is the menu that if we hover over the menu will display another submenu that extends down menu. For example, you can see the drop down menu which is located at this blog. Sub Menu is part of a super menu above. So you have to adapt and integrate what is appropriate categories and fit between the super menu with sub menus. Here you can do your own settings by providing name, url links, table of contents and title on the menu.

In the previous stage is How to Install Menu Playlist Music MP3 blog, Dropdown Menus must be placed in the template editing is not a widget. How, do you understand what is meant by the drop down menu ?  I assume you already know and understand what I mean.

Step by Step for Create Horizontal Dropdown Menu in Blog
1. Login a your blogger account
2. Click menu Template and Find code ]]></b:skin>
3. After that, paste this CSS code at above ]]></b:skin>

#cssmenu ul,#cssmenu li,#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 35px;
  border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  -webkit-border-radius: 0px 0px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=&#039;#32323a&#039;, EndColorStr=&#039;#141414&#039;, GradientType=0);
  border-bottom: 2px solid #ff4500;
}
#cssmenu:after,
#cssmenu ul:after {
  content: &#039;&#039;;
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=&#039;#32323a&#039;, EndColorStr=&#039;#141414&#039;, GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Domine, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 35px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu &gt; ul {
  float: left;
}
#cssmenu &gt; ul &gt; li {
  float: left;
}
#cssmenu &gt; ul &gt; li:hover:after {
  content: &#039;&#039;;
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ff4500;
  margin-left: -10px;
}
#cssmenu &gt; ul &gt; li:first-child &gt; a {
  border-radius: 0px 0 0 0;
  -moz-border-radius: 0px 0 0 0;
  -webkit-border-radius: 0px 0 0 0;
}
#cssmenu &gt; ul &gt; li:last-child &gt; a {
  border-radius: 0 0px 0 0;
  -moz-border-radius: 0 0px 0 0;
  -webkit-border-radius: 0 0px 0 0;
}
#cssmenu &gt; ul &gt; li.active &gt; a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=&#039;#26262c&#039;, EndColorStr=&#039;#070707&#039;, GradientType=0);
}
#cssmenu &gt; ul &gt; li:hover &gt; a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr=&#039;#26262c&#039;, EndColorStr=&#039;#070707&#039;, GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover &gt; ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #ff4500;
  border-bottom: 1px solid #aad06d;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #ff0000;
}
#cssmenu .has-sub .has-sub:hover &gt; ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #ff0000;
  border-bottom: 1px solid #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #345105;
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}
}

4. Next search code </header>
5. Thereafter the put "copy-paste" CSS code under </header>

<div id='cssmenu'>
<ul>
<li class='active '><a href='/'><span>Home</span></a></li>
<li class='has-sub '><a href='http://onlinedig.blogspot.com/'><span>Blog</span></a>
<ul>
<li>
<a href='http://onlinedig.blogspot.com/'><span>Tutorial Blog</span></a></li>
<li><a href='http://onlinedig.blogspot.com/search/label/Tips%20and%20Trick/'><span>Tips Menu Dropdown</span></a></li></ul></li>
<li class='has-sub '><a href='http://onlinedig.blogspot.com/'><span>SEO</span></a>
<ul>
<li><a href='http://onlinedig.blogspot.com/search/label/SEO%20Friendly'><span>SEO Friendly</span></a></li>
<li><a href='http://onlinedig.blogspot.com/search/label/Download%20Template'><span>Template SEO</span></a></li>
</ul>
</li>
<li><a href='http://onlinedig.blogspot.com/'><span>Contact Us</span></a></li>
</ul>
</div>

Notes :
Replace the HTML code (green color) with the url of your blog. Replace the red code with your Menu Title Name List.

Read more »