Google blog February 2013 ~ Blog for business

Tuesday, 5 February 2013

Create animated text titles on blogger

9:02 am    No comments


For that in this occasion IdBlogDesign want to share with you on how to create animated text titles on blogger. Immediately following the steps that you can take in making text animation title:
1. Log in to your blogger account.
2. Select the option Template - Edit HTML and Continue.
3. Checklist Expand Widget Templates option.
4. Copy and paste the following code before the code </ head>


  1. <script language='JavaScript'>
var txt = '<- Message or A Welcome or Title Blog. supported by http://www.idblogdesign.com--> ";
var speed = 170; var refresh = null; function move () {document.title = txt;
txt = txt.substring (1, txt.length) + txt.charAt (0);
refresh = setTimeout ("move ()", speed);} move ();
</ script>

5.Save your template.

If you encounter an error while saving your template, it is because the code of the script above do not parse html code. For code that has been parsed you can see here.

Hopefully this tutorial create animated text title on bloggers can be beneficial for you. Good luck ...
blog

Read More

Drop Down Menu

8:50 am    No comments

Creating Drop Down Menu in Blogger

IdBlogDesign - For users of blogger you must be familiar with what is a Drop Down Menu in Blogger is not it? Or maybe you've often found him in some other leading websites. Drop Down Menu is often used to place a link or url on the blog page and website. Besides beautify the design of a blog, Drop Down Menu can also help the blog visitor access to some of our blog content that deliberately use a url or a special link. For style or style, Drop Down Menu suffices vary from the simple to the complex. Even some that use a combination of codes css, html and javascript code, so it is certainly not interesting enough?


For that in this occasion IdBlogDesign want to share with you on how to make a Drop Down Menu in Blogger and of course a pity if you miss. But first, you need to know that for the Drop Down Menu version IdBlogDesign this time but just do not use javascript to use CSS3 code and html code only. To penggunaanyapun felt pretty easy, certainly if you are willing to try and try.



Preview Dropdown Menu Blogger



Dropdown Menu Blogger
Preview Dropdown Menu Blogger
      Demo:
      http://demodropdownmenu-idblogdesign.blogspot.com/

      Ok just next to the steps:
      Log in to your blogger account.
      Go to the Layout menu and Add gadgets to the position you want (ex: main wrapper, crosscol-wrapper, or other.)
      Choose HTML / JavaScript and enter the following script code in it:
    <style>
.clear{clear:both}
.navigasi{position:relative;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0}
.navigasi ul{margin:0;padding:0}
.navigasi ul li{float:left;list-style:none;position:relative}
.navigasi ul li a{display:block;color:#404040;text-decoration:none;padding:5px}
.navigasi ul li a:hover{background:#404040;color:#fefefe}
.navigasi ul li ul{position:absolute;display:none;width:150px;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0;margin:0 auto}
.navigasi ul ul ul{display:none;position:absolute;right:-150px;top:0}
.navigasi ul li:hover > ul,.navigasi ul ul li:hover > ul{display:block}
.navigasi ul li.clear,.navigasi ul ul li{float:none}
</style>
<nav class="navigasi">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#">Kategori 1</a>
   <ul>
    <li><a href="#">Sub Menu 1.1</a></li>
    <li><a href="#">Sub Menu 1.2</a>
     <ul>
      <li><a href="#">Sub Menu 1.2.1</a></li>
      <li><a href="#">Sub Menu 1.2.2</a>
       <ul>
        <li><a href="#">Sub Menu 1.2.2.1</a></li>
        <li><a href="#">Sub Menu 1.2.2.2</a></li>
        <li><a href="#">Sub Menu 1.2.2.3</a></li>
        <li><a href="#">Sub Menu 1.2.2.4</a></li>
       </ul>
      </li>
      <li><a href="#">Sub Menu 1.2.3</a></li>
      <li><a href="#">Sub Menu 1.2.4</a></li>
     </ul>
    </li>
    <li><a href="#">Sub Menu 1.3</a></li>
    <li><a href="#">Sub Menu 1.4</a>
     <ul>
      <li><a href="#">Sub Menu 1.4.1</a></li>
      <li><a href="#">Sub Menu 1.4.2</a></li>
      <li><a href="#">Sub Menu 1.4.3</a></li>
      <li><a href="#">Sub Menu 1.4.4</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="#">Kategori 2</a>
   <ul>
    <li><a href="#">Sub Menu 2.1</a></li>
    <li><a href="#">Sub Menu 2.2</a></li>
    <li><a href="#">Sub Menu 2.3</a></li>
   </ul>
  </li>
  <li class="clear"></li>
 </ul>
</nav>

Before you store gadgets or code Drop Down Menu in Blogger, adjust color-coded red and green above the first. The color red, please replace the link or url. As for the green code that you can replace with the page title, url title or other information.

Css and html code or the amount of Drop Down above url you can modify according to your creations each and keep in mind that the results of use of the above code may be different on every blog template you have used. Good luck ...

Index blog

Read More