How to remove Quick edit icon -  Icon in mentioning also with icon Quick Edit or equally to edit quickly. Its function if  you want  to editing  the element are quickly just click that quick edit icon.


there are some blogger is haven't simpathy with this Quick edit  icon and wish to remove it. Do we can remove icon?  of course we can, and very easy because we are using CSS only in our template.

and then you will to remove this icon from your blogger page.

Here i will show you how to remove this icon, following the step below :

1. Login your blogger acount


2. Design, Edit Html

3. Save This CSS before ]]></b:skin> Section:

.quickedit{

display:none;


}

4. Save template

5. It Done, that easy,, i hope that work on your blog... :)

Read more

Image Bubble effets With Jquery - Now i'm posting a new tutorial for blogger using jquery, Image Bubbles Image Bubble effets With Jquery is a cool Flash-like effect that causes an image to bubble up and expand whenever the mouse rolls over it from within a series of images. It's a nice way to draw attention to an image when the mouse rolls over it. you can read this carefully on this web dynamicdrive.

Ok here i wil show you how to add this menu on your blog, please following this steps :

1. Login your blogger acount

2. Design, Edit Html

3. Save This CSS before ]]></b:skin> Section:

/* Image Bubble effets With Jquery

----------------------------------------------- */

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{


display:inline-block;

zoom:1; /*Trigger haslayout in IE7 and less*/

*display:inline; /*For IE7 and less*/

position:relative;

width: 65px;

height:60px;

}



.bubblewrap li img{


position:absolute;

width: 55px; /*default width of each image.*/

height: 60px; /*default height of each image.*/

left:0;

top:0;

border:0;

}



.bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/


position:absolute;

font:bold 12px Arial;

padding:2px;

width:100px;

text-align:center;

background:white;

}

/*CSS for 2 demos on the page*/

#orbs li{


width: 65px; /*width of image container. Should be wider than contained images (before bubbling) */

height:60px; /*height of image container. Should be taller than contained images (before bubbling) */

}



#orbs li img{

width: 55px; /*width of each image before bubbling*/

height: 60px; /*height of each image*/

}



#squares li{


width: 45px; /*width of image container. Must be wider than contained images (before bubbling) */

height:40px; /*height of image container. Must be taller than contained images (before bubbling) */

}



#squares li img{

width: 31px; /*width of each image before bubbling*/

height: 31px; /*height of each image*/

}

4. Next step, put this java script before tag </head> Section :

<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>

5. And then save this script before tag </body> Section :

<script src='http://scriptbase.googlecode.com/files/imgbubbles.js' type='text/javascript'>

</script>

<script type='text/javascript'>



jQuery(document).ready(function($){


    $(&#39;ul#orbs&#39;).imgbubbles({factor:1.75}) //add bubbles effect to UL id=&quot;orbs&quot;

    $(&#39;ul#squares&#39;).imgbubbles({factor:2.5}) //add bubbles effect to UL id=&quot;squares&quot;

})




</script>

6. Save Template

7.  Last step, to apply enable the magnify effect on an image just insert this code on your Html(Posting Or Gadget) :

Orbs Image Bubble :

<ul id="orbs" class="bubblewrap">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8cBd4YOSGqUNbRLCuDjoL3aSaLszA_fN0wPZfLQSM0pPHyGJ5TeEmajpUxmMOPI0xbsJuiS1iIqr1DdGw7sGULAvFJKJ7Z9k1NEA9Lxl_KssmpurduRf1jxCmOY2P4hruhLfLWE5xTkM/s1600/stumbleupon.png" /></a></li>


<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9J3tsF1yax7fGmZ1cIlM676Y3L8d4MT8IY2vPCmcGOx4hisVgqo0NVG3plx706iVqjvr7TmoQFtk0L5OjjKyQlNeyJd2rDEB3QGUe3E3A6uvNauricbmu-S2COiW79PqNVFiLneuz-PM/s1600/facebook.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivq7Abthu06hd0hNAnlaQ-NrhIW187aBeo_0gGi3S5UNkkLvVO83SGCVQoKcg93A8mZvNGcG4G2wjzP1fM1K3iy2VF1SYbQcyaCYKkjR8JuBxrxuBL1j9Lws98hNAdN3Cie_5z8y4RDqk/s1600/digg.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVqr_m8KMPlVqsG2dBCuj-JhM-SVR95qt-fPQ4FGPMzcWios4kmyBcoTOBDiegdRBeHSHLXfsJ0JtHeqrfP8S7mGe8MxBB8cnFJNJaSrD06jLJdJoSiiW0azBcCPzxuhE8lcwqSM1ehZQ/s1600/twitter.png" /></a></li>


<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAbY3DAf0p4RGwk58_W9FEdq68G-TaTxn76xCV1tawyL0K83Fd38Syk2FbXCi-u5iZdXCerFgP2fRdyTcAuYZddBPIldIrkkYrCpkXn_Y4oqyDXAWYO-kqDHS8w-IpnvoEkSKVvUS5WkA/s1600/rss.png" /></a></li>

</ul>

Square Image Buble :

<ul id="squares" class="bubblewrap">

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwxPyKp6nav3etAwGDwcg2AxjlnaBsB0MZF0IeYDWjLf2SwNvtpaYsVe7SNV3a-eeAHeeAvjLsZV2uez2vbC6Lboc4hpxzjQbyWqUvbHcruLkQ4eDk1LSNdGAOp0meIdLwsgqDV2VQvE/s1600/facebook1.png" /></a></li>


<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2vcQ3w7RMuMqPtnqKOdM6r7THdO_tqwLR7akUihNgnPhaAQsB6xoxyPOK1plwv2v8TpeMnqpVmoit9IjbRGUy9dsRgoMmanIkbTqS7LCZ0y7et5zVuQWocDGcjtBkEfkWzIpG-x4DYL4/s1600/delicious.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0C7cFUvLMUlMmW3eTxFxPeAgkOEn0Q5kA5Ubgy67bon_Nli2LV8zEJzEQ0o6Ae11nGrjpRr5VJY2JAsGZ8nKdwBP7x9IHz2HQH6w7Kc7ZSuQIIrqguNNKWvec4Kb30gQB7alT0RpN2AI/s1600/digg1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7RC4zb_R9n5XtNJ3gAQU5PhmFrzl1fi9yy2zoFkM0TKtzihyphenhyphen-3BGCZY6KhggfCH5m7wCuQlnB60l8c5MclkpXzUyEgtPxqDWJfZ48roAZzw9apLJgjR7IXEiOeVOk8v4sgarSapMOqg/s1600/stumbleupon1.png" /></a></li>


<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYy_Oom9XSYf8v6oyg91NNlFzqC1ZoQr-z8SFjcQNrmeGmSSobKNtJepht_oP8squAiESxA7lBcaCgc6yKef-CeEPqwKH4OA-iCtqlzz_NfdzYqVxACC4Jh7OSNGoz45aKDw5UwhyphenhyphengbcM/s1600/rss1.png" /></a></li>

<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVtLWtiT82TSeUf00qBZAScxA0jWyYkypBl8O8zXbyxYSLVa6BG29t7t4GIW4KcXDcCCBb_H1pi_pU7As35mP52dT7LUsK0jppTIWPTkickWLNhSYa1FWYi5hdeKhStfkyOWDbEFrbqdM/s1600/twitter1.png" /></a></li>

</ul>

8. Okay it Done, and you can Remove that image with another Icon when you will using this effect on other image... :)

Read more

Add the navigation CSS dock menu on your blogger - If you know macintosh menu or you are a big Mac fan, you will love this CSS dock menu, and then you can add this menu on your blogger, you can read more this tutorial for web page on this link ndesign .

Here I will show you how to implement it to your blogger page.

1. Please Login your blogger acount


2. Design, Edit Html

3. Save This CSS before ]]></b:skin> section:

/* ---------------

Menu navigasi CSS Mac  Dock top with jQuery


---------------------------------- */

/* dock - top */

.dock {

    position: relative;

    height: 50px;

    text-align: center;

}


.dock-container {

    position: absolute;

    height: 50px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcrrn66dwmCid8QfBqGu8oorYAxUS8NpK2meLjqGr20E9_UbgLhXmFcMFhoDdx0HA35MYEiWvNQkAtVS3Za7blQh60S_-I_qAs5gX7FRZpYpdXNnMkiVb7Q1e-QTLJcYL0LXX21OrC17w/s1600/dock-bg2.gif);

    padding-left: 20px;

}

a.dock-item {


    display: block;

    width: 40px;

    color: #000;

    position: absolute;

    top: 0px;

    text-align: center;


    text-decoration: none;

    font: bold 12px Arial, Helvetica, sans-serif;

}

.dock-item img {

    border: none;

    margin: 5px 10px 0px;

    width: 100%;


}

.dock-item span {

    display: none;

    padding-left: 20px;

}



/* dock2 - bottom */

#dock2 {


    width: 100%;

    bottom: 0px;

    position: relative;

    left: 0px;

}

.dock-container2 {

    position: absolute;


    height: 50px;

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcSNhg8eps7Kljhe3pgdU0VPIzqbh-X0fhEa2jhk-Hs05uW28eeefqqk7yltkL-7HYr8Mfn0KyTeTkEFDYrQ_K3qu8BVxUzrYE5SIoVykbUUKVoF_oVckiDHgusUQF7muxLW49ZQDx2wU/s1600/dock-bg.gif);

    padding-left: 20px;

}

a.dock-item2 {

    display: block;

    font: bold 12px Arial, Helvetica, sans-serif;


    width: 40px;

    color: #000;

    bottom: 0px;

    position: absolute;

    text-align: center;

    text-decoration: none;


}

.dock-item2 span {

    display: none;

    padding-left: 20px;

}

.dock-item2 img {

    border: none;


    margin: 5px 10px 0px;

    width: 100%;

}

4. Save this java script before </head> section:

<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>

<script type="text/javascript" src="http://scriptbase.googlecode.com/files/interface.js"></script>

5.Now put this script before </body> section:

<!--dock menu JS options -->

<script type="text/javascript">

  

    $(document).ready(

        function()


        {

            $('#dock').Fisheye(

                {

                    maxWidth: 50,


                    items: 'a',

                    itemsText: 'span',

                    container: '.dock-container',


                    itemWidth: 40,

                    proximity: 90,

                    halign : 'center'


                }

            )

            $('#dock2').Fisheye(

                {


                    maxWidth: 60,

                    items: 'a',

                    itemsText: 'span',


                    container: '.dock-container2',

                    itemWidth: 40,

                    proximity: 80,


                    alignment : 'left',

                    valign: 'bottom',

                    halign : 'center'


                }

            )

        }

    );




</script>

6. Save Template

7. How to add this menu to Html (Posting, Template Or Gadget), put this code:

CSS Dock Top Menu :

<div class="dock" id="dock">

  <div class="dock-container">

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipf3Ej9pszms64A5KcquSRtHbybGRJv13tI4L2GBI05y-i9jUtyDcmSpc4Y3axgbWiJNmuMvHrXIkJGGmlhoCw5u29DbSPPlCfvwnhLxpxEmuc6aGZ-ymC4JWcd475m8sgoFHrmBgcZYo/s1600/home.png" alt="home" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysZJTaBtl0O_m95EqHCBNAdqXMMHjtSf0UnZYGyNwqDFfCjHRyyXKSOzX9iMCbq4R6i4wrddWbvoSGfIirm71l6rIPSk1NeuYjLCbCcK5LaSZ7mi3q42bzmoX4xlMD_7uiGBepkPoivk/s1600/email.png" alt="contact" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwD2KSlANsCt2YlfkZWu-A6oFUJfP4MbsAHWGGHIbD0x3qTt6PY519-bNKQIxmjIwuA2ADg2HSZzZQMoCrXUFNUIELGHjzGtCBMbpm_PmshAN1bCRaLdJFPNQz2AND28tiM3LkIh_O3LU/s1600/portfolio.png" alt="portfolio" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGsvTLbJcQGnbyMLlUpQm7fFf_cGHqw3NSyoDOFljTGe8N7ddQOVcPN7ZYc0KvXYM2HRKH_YW1sJdvEM1VEMGuUexUyWRsigWlb77X0wYvVsIAkVTQbIRVRmiwPeUX4wiUilYSltHPGo/s1600/music.png" alt="music" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3dt19wTmb11LdTCQChmK6U8-IlBlvdkAYvYlzcrPw2Csk_XvgGQMYdM2dIm_dRP28O7lldKAvyDOh45CaYo3W76fc9KMEKUOG9S7rC6NIwebMpU9hKPxkZEkb079llgy8wBYVjiqIDk/s1600/video.png" alt="video" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDRjxMafApHhEKle0g1LCri8-AbM-LqkxSDErxZC76CBep3No7T2ClKMxJcx3VGH7tm_QppqTOkY-F1NjO3eA0x82MVGZFTDgyIbJaEk_tXEkxBsPz_3O0z8-skx6KYlGk-2OzL9dLFVU/s1600/history.png" alt="history" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDfkCGAARgUJvHnjJ_BbUPwJg9tRv9L53USvbMVKuOMUiuqdkhyphenhyphenkLbgLwg50pPiH-OdKdWOQrg6N8iJKkFMp0sq8gnGzzeWxo7PP606hE4_0fRkjSlagWlhSOkFw3vIfwbrUu9tRJt7Vc/s1600/calendar.png" alt="calendar" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicktuRk4HqUwkG6I0L_msD7whYUylM-H2jsLjIg2A2cAjkzQAmrUrkYduEq5YIKI4axaQ8npbATxPj_I58WrU_lVX-JTHvtZAGfoqtneQDJIXnzZusbnvss22xM61a3JCcTi9GXEupl44/s1600/rss.png" alt="rss" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSVnHe1rJP7zG9oPCjtTGFubzj3WnTJlhaebMHQdqS1pvGUJeUdqy6J8KFTQ8HEmhD_fl26IOIIt3tlfaouWkQCyrrsot305lF6NYWeSEfo3kNSh9M_iFswujba92660CJDS6bH453mc/s1600/rss2.png" alt="rss" /></a>


  </div>

</div>

CSS Dock Bottom Menu:

<div class="dock" id="dock2">

  <div class="dock-container2">

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipf3Ej9pszms64A5KcquSRtHbybGRJv13tI4L2GBI05y-i9jUtyDcmSpc4Y3axgbWiJNmuMvHrXIkJGGmlhoCw5u29DbSPPlCfvwnhLxpxEmuc6aGZ-ymC4JWcd475m8sgoFHrmBgcZYo/s1600/home.png" alt="home" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjysZJTaBtl0O_m95EqHCBNAdqXMMHjtSf0UnZYGyNwqDFfCjHRyyXKSOzX9iMCbq4R6i4wrddWbvoSGfIirm71l6rIPSk1NeuYjLCbCcK5LaSZ7mi3q42bzmoX4xlMD_7uiGBepkPoivk/s1600/email.png" alt="contact" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwD2KSlANsCt2YlfkZWu-A6oFUJfP4MbsAHWGGHIbD0x3qTt6PY519-bNKQIxmjIwuA2ADg2HSZzZQMoCrXUFNUIELGHjzGtCBMbpm_PmshAN1bCRaLdJFPNQz2AND28tiM3LkIh_O3LU/s1600/portfolio.png" alt="portfolio" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGsvTLbJcQGnbyMLlUpQm7fFf_cGHqw3NSyoDOFljTGe8N7ddQOVcPN7ZYc0KvXYM2HRKH_YW1sJdvEM1VEMGuUexUyWRsigWlb77X0wYvVsIAkVTQbIRVRmiwPeUX4wiUilYSltHPGo/s1600/music.png" alt="music" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm3dt19wTmb11LdTCQChmK6U8-IlBlvdkAYvYlzcrPw2Csk_XvgGQMYdM2dIm_dRP28O7lldKAvyDOh45CaYo3W76fc9KMEKUOG9S7rC6NIwebMpU9hKPxkZEkb079llgy8wBYVjiqIDk/s1600/video.png" alt="video" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDRjxMafApHhEKle0g1LCri8-AbM-LqkxSDErxZC76CBep3No7T2ClKMxJcx3VGH7tm_QppqTOkY-F1NjO3eA0x82MVGZFTDgyIbJaEk_tXEkxBsPz_3O0z8-skx6KYlGk-2OzL9dLFVU/s1600/history.png" alt="history" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDfkCGAARgUJvHnjJ_BbUPwJg9tRv9L53USvbMVKuOMUiuqdkhyphenhyphenkLbgLwg50pPiH-OdKdWOQrg6N8iJKkFMp0sq8gnGzzeWxo7PP606hE4_0fRkjSlagWlhSOkFw3vIfwbrUu9tRJt7Vc/s1600/calendar.png" alt="calendar" /></a>


  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicktuRk4HqUwkG6I0L_msD7whYUylM-H2jsLjIg2A2cAjkzQAmrUrkYduEq5YIKI4axaQ8npbATxPj_I58WrU_lVX-JTHvtZAGfoqtneQDJIXnzZusbnvss22xM61a3JCcTi9GXEupl44/s1600/rss.png" alt="rss" /></a>

  <a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSVnHe1rJP7zG9oPCjtTGFubzj3WnTJlhaebMHQdqS1pvGUJeUdqy6J8KFTQ8HEmhD_fl26IOIIt3tlfaouWkQCyrrsot305lF6NYWeSEfo3kNSh9M_iFswujba92660CJDS6bH453mc/s1600/rss2.png" alt="rss" /></a>


  </div>

</div>

8. OK Done, I hope you can use for your blog...

Read more

Now i'm posting how to remove the Navbar blogger, What is the Navbar blogger? Navbar blogger is a frame which small is fairish owned  blogger which there is on the top on your blog. this frame functions is  for logins to blogger or can also as  to see other blog or can also to mark other blog are impinging TOS blogger like blog is containing element  pornography and other  to be reported to  blogger.




To remove the navbar blogger,  the following steps :

1. You can  put this code before ]]></b:skin> :

/* navbar iframe

----------------------------- */

#navbar-iframe {


height:0px;

visibility:hidden;

display:none

}

2. Save template

3. Done

Read more

How to remove home link bottom on blogger - My tracking tool noted a lot of visitors enter to this blog using remove home link bottom blogger keyword, remove home link on blogger, get rid home link blogger, and other similiar keywords.

What is stated is probably a home link as following:



If true, it’s very easy to remove that home link. There are lot of techniques to remove home link on blogger, one of the way is by using a technique with CSS code display: none; or straightaway to remove the home link code in body template code.

Remove home link bottom on blogger

Technique we are using now is entering the CSS code, the following steps:

1. Please login to blogger using your ID
2. Click Design
   
   
3. Click the Edit HTML sub menu
   
   
4. Do the back up for your template first then click Download Full Template
5. Find this following code (it just an example by using template called Simple)

   .blog-pager {
     background: $(paging.background);
   }
   

6. Put the CSS code: display:none;, then the code will be as follows:

   .blog-pager {
     display:none;
     background: $(paging.background);
   }
   

7. Click Save Template
8. Done.

Each of template code is different, however the CSS code below has to be made as standard because generally they are quite the same

Read more

How to add youtube video to blog sidebar - First of all, adopt the video code from YouTube. Please visit your favorite video on YouTube.com, then click Share, proceed by clicking Embed. Then you can do the set up such as choosing related videos to displayed, video dimensions, etc. One is adviced to check Use old embed code. Copy the provided video code and put it on your blog sidebar.

How Put the video code on your blog

The second step is to install the youtube video code was provided on your blog. Here are the steps:

1. Please login to blogger using your ID
2. Click Design
3. usually you straight to Page Elements page menu. But if you don’t, please click on the Page Elements menu.
4. Click Add a Gadget
   
   
   
   
5. Click Plus (+) for HTML/ Javascript gadget
   
   
   
   
6. Paste the previously video code to the coloumn, click SAVE
7. If you want to move the gadget recenty created position, you can just move it and click SAVE button which on top to finish
8. Done.

Read more