<style type='text/css'> <b:if cond='data:blog.pageType != "static_page"'><b:if cond='data:blog.pageType != "item"'> .post {margin:.5em 0 1.5em;border-bottom:0px dotted $bordercolor;padding-bottom:1.0em;height:50px;}.post h3 {margin:.25em 0 0;padding:0 0 4px;font-size:20px;font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;font-weight:normal;line-height:1.4em;color:#cc6600;} .post h3 a, .post h3 a:visited, .post h3 strong {display:block;text-decoration:none;color:#cc6600;font-weight:normal;} .post h3 strong, .post h3 a:hover {color:#333333;} .post-body {display:none;}.post-footer {display:none;}.comment-link {display:none;}.post img {display:none;}.post blockquote {display:none;}.post blockquote p {display:none;}h2.date-header {display:none;}.post-labels {display:none;}.post-rating {display:none;} </b:if></b:if> </style>

1.Login to your blogger dashboard--> desing and go to Edit Posts-->> Edit Pages

2.Now Create new page

3 Copy below code and paste it your page.

<script src="http://sitemaphendrytha.googlecode.com/files/byblogtoquick.blogspot.com.txt">
</script> 
<script src="http://blogtoquick.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> 
</script>

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6DRSFPUjZP-Lfp5EdEUOHRZfQeIzx7IHtpWjH8ygV1XaTAUbBEKS6O6ngxjCeufI6-c8VzRTEjfE5-T4Bvvt7Nljw_IRHriQjCvmKB2Kwj5q9zS2PJJ-eZwdlXRtXN_uJv_iAL_dzX-A/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQKinKjR0XIqR_gmFDNCgutGhR5xtsYr7S9Wqp_jpAIMR_0P00Bq6P8Y3vWAIswOokCiZjfJPOkT1-hEDJaoCfTVwmmPV3Bn2n_qBQBzKpfyMn-mzxQD36OdXWBM-NN56HLT3n6XXMuf4/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDIYgqqoNI4CEIOr12xb2jGwpY8J1oUHuv4XT0bt_WvE1-txcQpeI-3XpvnmSAx1heMHInLLmk0KFcis2ium30vsM8zJ4uXsO7KJ6R20fGXV0mHFco3i7aSmBuW4LCzdBrmlQTyKIkbM/&#39;" /></a><!--BACK2TOP-IMAGE-STOPS-->

1. how to make the sidebar 2 columns under the main sidebar
   notice how carefully and thoroughly ok let me no errors occur
   Login to blogger
   go to Layout => Edit HTML
   after that find this code ]]></ b: skin> and add the code below right above it
   
   
   
   

   
   

   .lsidebar {

   
   

   line-height: 1.5em;

   
   

   }

   
   

   .lsidebar .widget {

   
   

   background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */

   
   

   float:left;

   
   

   width: 125px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */

   
   

   margin: 0 0 10px 0;

   
   

   
   

   
   

   }

   
   

   #lsidebar h2 {

   
   

   height: 20px;

   
   

   text-align: center;

   
   

   padding:4px 0px 0px 0px;

   
   

   font: verdana;

   
   

   background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */

   
   

   font-size:12px;

   
   

   line-height: 1.4em;

   
   

   text-transform:uppercase;

   
   

   letter-spacing:.2em;

   
   

   color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */

   
   

   -moz-border-radius: 10px;

   
   

   }

   
   

   
   

   
   

   .rsidebar {

   
   

   line-height: 1.5em;

   
   

   }

   
   

   .rsidebar .widget {

   
   

   background: #FFFFFF; /* -- bisa sobat ganti dengan kode warna yang lain -- */

   
   

   float:right;

   
   

   width: 245px; /* -- bisa sobat ganti membesarkan atau mengecilkannya (Panjang) -- */

   
   

   margin: 0 0 10px 0;

   
   

   }

   
   

   
   

   
   

   #rsidebar h2 {

   
   

   height: 20px;

   
   

   text-align: center;

   
   

   padding:4px 0px 0px 0px;

   
   

   font: verdana;

   
   

   background:url('http://oketrik.googlecode.com/files/1.jpg'); /* -- bisa sobat ganti dengan kode warna yang lainnya (warna background Judul) -- */

   
   

   font-size:12px;

   
   

   line-height: 1.4em;

   
   

   text-transform:uppercase;

   
   

   letter-spacing:.2em;

   
   

   color:#fff; /* -- bisa sobat ganti dengan kode warna yang lainnya (warna teks Judul) -- */

   
   

   -moz-border-radius: 10px;

   
   

   }

   
   

   
   

   
   
2. after that look for code <div id='sidebar-wrapper'> and put the code below into it
   
   
   
   
   <div id='lsidebar-wrapper'>
   
   
   <b:section class='lsidebar' id='lsidebar' preferred='yes'>
   
   
   </b:section>
   
   
   </div>
   
   
   <div id='rsidebar-wrapper'>
   
   
   <b:section class='rsidebar' id='rsidebar' preferred='yes'>
   
   
   </b:section>
   
   
   </div>
   
   
   
   
   me give you an example, code such clean Sidebar
   
   
   
   
   
   
   <div id='sidebar-wrapper'>
   
   
   <b:section class='lsidebar' id='lsidebar' preferred='yes'>
   
   
   </b:section>
   
   
   </div>
   
   
   
   
   
   
   the results
   
   
   
   
   
   
   <div id='sidebar-wrapper'>
   
   
   <b:section class='lsidebar' id='lsidebar' preferred='yes'>
   
   
   <b:widget id='HTML4' locked='false' title='' type='HTML'/>
   
   
   </b:section>
   
   
   </div>
   
   
   
   
   Now the intention of putting into it is put the before code </ div> closing the sidebar-wrapper
3. SAVE and see the results
4. completed

"How to Create a Menu DTree"

Dtree menu is very useful if you have a post that much, because by using the menu Dtree it will be able to save space / space in your blog. Well if you are interested follow these steps?



1. Login to Blogger, then select "Layout -> Edit HTML"

2. Place the following code above the code



<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />

<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"> </ script>



3. Then click the button "Save



4. After that copy the code below and post it on your sidebar,____> "Page Elements" then click "Add a Gadget -> HTML / Javascript". This is the script that you have to copy in your sidebar.





<div class="dtree">

<script type="text/javascript">

<! -

d = new dTree ('d');

d.add (0, -1, 'My example tree');

d.add (1.0, 'Node 1', 'link.html');

d.add (2.1, 'Node 1.1', 'link.html');

d.add (3.2, 'Node 1.1.1', 'link.html');

d.add (4.3, 'Node 1.1.1.1', 'link.html');

d.add (5.0, 'Node 2', 'link.html');

d.add (6.5, 'Node 2.1', 'link.html');

d.add (7.5, 'Node 2.2', 'link.html');

d.add (8.0, 'Node 3', 'link.html');

d.add (9.0, 'Node 5', 'link.html');

document.write (d);

//-->

</ script>

</ div>




the following information:

- Replace the words "link.html" with a link you (your post titles).

- The first number must be unique there should not be the same (d.add (1.0, 'Node 1', 'link.html');

- The second figure is a branch of the first number (note the numbers that have the same color).



- You can change the icon, the icon with your own icon, an example script would be like this:



d.add (10.0, 'Profile', '','','',' link.html http://.................gif')



Replace the text "http://.......................gif" with the address of your picture.



thanks

always learn "how to create menu dtree"

DEMO

 Arsip Blog Text 1 Text 2 


With the dropdown menu we can save space / room in our blog, because with such small sizes can save a lot of links and text. It can be filled with archives, blogroll etc..

How to make:

Login your blogger,"Page Element" Add page elements --> HTML/JavaScript.
Then enter the following script

<select onChange="document.location.href=this.options[this.selectedIndex].value;"> <option value="0" selected>Arsip Blog</option> <option value="Links 1">Text 1</option> <option value="Links 2">Text 2</option> </select>

Text red is the link.Links 1  Link2replace it with you.

The blue text is the text that is displayed. It should also be miles instead.


Examples like this:

<select onChange="document.location.href=this.options[this.selectedIndex].value;"> <option value="0" selected>Arsip Blog</option> <option value="http://hendrytha.blogspot.com/2011/10/agar-blog-cepat-di-index-google.html"> Agar Blog cepat di index Google</option> <option value="http://hendrytha.blogspot.com/p/seo-tools.html"> SEO TOLS</option> </select>

then the result will be like this:

Arsip Blog Agar blog cepat di index google seo tols



to add another menu, add code like this:

<option value="Links 2"> Text 2 </ option>

before the code </ select>
The links in the dropdown menu above if the click will open the link on the same page. It's suitable for the Archives and the links are still related to the blog page.



There is one more type which, when clicked the link it will open a new window without closing your blog. Which is suitable untu Friend Blogroll or links.

How to make it as above but replace the following code





<select onChange="document.location.href=this.options[this.selectedIndex].value;">


replace with this code:


<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">


the result:




Arsip Blog Agar Blog cepat di index Google SEO TOLS

<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyYnSDTXyVZ4A9iM4tmzA-z-btJIaMKV54C8s51cMcNk5jChbDSWocyIExMsxCwWPq0ReR8qKJF2njs31KJMxxmdc-xIT0ZHNSZekGkquGKJ7xugeDws71bWeK60VL8_-9o_hHV7kTSM/"></a>


2 You can use the second way

'Back To Top Scroll' into two using jQuery
Enter the following code above the code </ head>, and do not forget to Save Template

how to make writing runs in the footer


Well we just practice it, first of all incoming bloggers.



Edit HTML.



Insert the following CSS code right above the code: ]]></ b: skin>






<STYLE>

/ * Footer dynamically * /

# Footer2 {

align: center;



position: fixed;

border-top: 1px solid # fff;

border-bottom: 1px solid # fff;

background-color: # 0083a4;

width: 100%;

height: 16px;

text-align: left;

color: # fff;

font-family: Verdana;



font-weight: bold;

font-size: 11px;

z-index: 10000;

bottom: 0;

}





After that copy the code below right above the code: </ body>




<! - Dynamic footer ->

<DIV Id='footer2'>

<MARQUEE Onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3'> samples of running </ marquee>



</ DIV>

</ DIV>

>>>>>> first




1.Login to your blogger dashboard and go to Page Elements --&-- desing.


2.Click "Add a Gadget 'in the sidebar.


3.Select 'HTML / Javascript' and add one of the code given below
<br /> <style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc9lh7L-3SCtkjsX51P8jhCQOOPeaBVgK7oEBSCI00651VlHBGQDIZhaIekiWJybtfJtDLbu1EZzBXem24mLT1sU9-TAfjiffoWkXNyzdln5XgcAZugP0L73Mc53ZVSxtCnJ7frwSQLb0/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYsg3XBWmDbvnloV9d66AIsRs7E_0_I9Ylb5AvWkLP97-Jb4GIuOlwDkjwVaemj8Zf0zxxXODWxbKNwosdzGWRC7u2_AhxmaAKhbIRAI9ZihUctuBxjCFJg0_R21kEQ9YN-1C2YEYfW0/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style><br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="tabs10"><ul><li><a href="#"><span>Link 1</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 2</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 3</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 4</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 5</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 6</span></a></li> <li><br /> <br /> <br /> <br /> <br /> <a href="#"><span>Link 7</span></a></li> </ul></div>




Stay Now Save


See the result you want to adjust the position of the In


attention


Replace Signs: # with your link


and Link 1 with your name Each menu
<a href="#"> <span> Link 1 </ span> </ a> </ li>


<a href="#"> <span> Link 2 </ span> </ a> </ li>


<a href="#"> <span> Link 3 </ span> </ a> </ li>


<a href="#"> <span> Link 4 </ span> </ a> </ li>


<a href="#"> <span> Link 5 </ span> </ a> </ li>


<a href="#"> <span> Link 6 </ span> </ a> </ li>


<a href="#"> <span> Link 7 </ span> </ a> </ li>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{


slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}

//]]>
</script>

4. Now save your template


The next stage


5. Go to Design -> Elements and click the "Add gadgets".


6. Select the "html / java script" and add the code given below and click save.

ul id="sliding-navigation">

<li class="sliding-element"><a href="#">Link 1</a></li>

<li class="sliding-element"><a href="#">Link 2</a></li>

<li class="sliding-element"><a href="#">Link 3</a></li>

<li class="sliding-element"><a href="#">Link 4</a></li>

<li class="sliding-element"><a href="#">Link 5</a></li>

<li class="sliding-element"><a href="#">Link 6</a></li>

<li class="sliding-element"><a href="#">Link 7</a></li>

<li class="sliding-element"><a href="#">Link 8</a></li>

<li class="sliding-element"><a href="#">Link 9</a></li>

<li class="sliding-element"><a href="#">Link 10</a></li>

</ul>

Note: Replace # with the links you want and change the link 1, link 2 .... with the name of your link

and see the results

How to make Tab View Pake clear icon tabs view of this very useful in the web world due to not wear a lot of space or space saving
Among the various tabber tabs one of which we will study how to make it now, is tabber tab with the menu structure using the icons.
Okay directly to the tutorial making tabber tab or the tab view menu with JQuery:

Step One:
1. After the sig in on your blogger account>>> on the dashboard>>> Click Layout>>> Edit HTML

2. Add the following jQuery script or code before the tag </ head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
note: For the friend who never added or already exist in your template JQuery script ignore it then the second step,
3. Then add the following script under the same JQuery script above:

<script type='text/javascript'>

$(document).ready(function() {  

  //Get all the LI from the #tabMenu UL

  $(&#39;#tabMenu &gt; li&#39;).click(function(){

    //perform the actions when it&#39;s not selected

    if (!$(this).hasClass(&#39;selected&#39;)) {  

    //remove the selected class from all LI  

    $(&#39;#tabMenu &gt; li&#39;).removeClass(&#39;selected&#39;);

    //Reassign the LI

    $(this).addClass(&#39;selected&#39;);

    //Hide all the DIV in .boxBody

    $(&#39;.boxBody div&#39;).slideUp(&#39;1500&#39;);

    //Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.

    $(&#39;.boxBody div:eq(&#39; + $(&#39;#tabMenu &gt; li&#39;).index(this) + &#39;)&#39;).slideDown(&#39;1500&#39;);

  }

  }).mouseover(function() {

    //Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest  

    $(this).addClass(&#39;mouseover&#39;);

    $(this).removeClass(&#39;mouseout&#39;); 

  }).mouseout(function() {

    //Add and remove class

    $(this).addClass(&#39;mouseout&#39;);

    $(this).removeClass(&#39;mouseover&#39;);  

  });

    //Mouseover with animate Effect for Category menu list

  $(&#39;.boxBody #category li&#39;).click(function(){

    //Get the Anchor tag href under the LI

    window.location = $(this).children().attr(&#39;href&#39;);

  }).mouseover(function() {

    //Change background color and animate the padding

    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);

    $(this).children().animate({paddingLeft:&quot;20px&quot;}, {queue:false, duration:300});

  }).mouseout(function() {

    //Change background color and animate the padding

    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);

    $(this).children().animate({paddingLeft:&quot;0&quot;}, {queue:false, duration:300});

  });

    //Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.

  $(&#39;#.boxBody li&#39;).click(function(){

    window.location = $(this).children().attr(&#39;href&#39;);

  }).mouseover(function() {

    $(this).css(&#39;backgroundColor&#39;,&#39;#888&#39;);

  }).mouseout(function() {

    $(this).css(&#39;backgroundColor&#39;,&#39;&#39;);

  });    

});

</script>

4. Next add the following CSS code on the tag or code ]]></ b: skin>

#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}

#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}

/* this is the button images http://amatullah83.blogspot.com*/

li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}

li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}

li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}

li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}

li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}

li.mouseout {background-position:0 -32px;}

li.selected {background-position:0 0;}

.box {width:227px}

.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}

.boxBody {background-color:#282828;}

.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;

    height:11px;}

.boxBody div {display:none;}

.boxBody div.show {display:block;}

.boxBody #category a {display:block}

/* styling for the content*/

.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}

.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div ul li.last {border-bottom:none}

.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}

.boxBody div li span {    font-size:8px;color:#9F9F9F;}

/* IE Hacks */

*html .boxTop {margin-bottom:-2px;}

*html .boxBody div ul {margin-left:10px;padding-left:15px;}

Note the CSS code above still you can modify to suit your template to help identify the CSS property above see the following screenshot:

Another image icons that can be friend use:
For his body background, wrote his own search
5. Save Template
Step two:
Still on the menu layout>>> click on a page element>>> add gadget>>> Select the HTML / JavaScript

<div class="box">

  <ul id="tabMenu">

    <li class="posts selected"></li> <!-- default button-->

    <li class="comments"></li>

    <li class="category"></li>

    <li class="famous"></li>

    <li class="random"></li>

  </ul>

  <div class="boxTop"></div>

  <div class="boxBody">

      <!-- default page-->

    <div id="posts" class="show">

      <ul>

        <li>Post 1</li>

        <li>Post 2</li>

        <li class="last">Post 3</li>

      </ul> 

    </div> 

    <div id="comments">

      <ul>

        <li>Comment 1</li>

        <li>Comment 2</li>

        <li class="last">Comment 3</li>

      </ul>

    </div>

     <div id="category">

         <ul>

           <li>Category 1</li>

           <li>Category 2</li>

        <li class="last">Category 3</li>

         </ul> 

       </div>

      <div id="famous">

      <ul>

        <li>Famous post 1</li>

        <li>Famous post 2</li>

        <li class="last">Famous post 3</li>

      </ul> 

    </div>

    <div id="random">

      <ul>

        <li>Random post 1</li>

        <li>Random post 2</li>

        <li class="last">Random post 3</li>

         </ul>   

    </div>       

  </div>

  <div class="boxBottom"></div>

</div>