How to add CSS hover effect to images in blogger

<blockquote class="tr_bq"> <div style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"> </div> </blockquote> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyPjsSdUUluCGkS_94n3FdpWL5dJ190DZiskQu5MNp2sefBk3fllNnZK_HSF7-JfLVcfV6hos-_NcuiRMZNOmipgz6KaH7xw8hIDN6KqRGYp4XfHWnZL133urt09WUoLVCBnUn8K4kLWDo/s1600/How-to-add-CSS-hover-effect-to-images-in-blogger..png" /> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Images bring life to content but do they really attract your visitors? Adding a nice CSS hover effect to your images could bring engagement benefits to your blog. Recently one of our users asked us that how to add CSS hover effect to images in blogger? There are many CSS hover effect available that could be applied with ease to your blogger site. Today, in this article we will show you how to add CSS hover effect to images in blogger.</span><br /> <a href="https://www.blogger.com/null" name="more" style="background-color: white; color: #2f6986; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; list-style: none; margin: 0px; outline: none; padding: 0px;"></a><br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /> <h4 style="background-color: white; color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;"> What is mouse hover?</h4> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">A mouse hover, also known as just hover that triggers an even whenever a mouse is placed over a certain area such as hyperlink on a webpage. This action is also called an action of moving the computer mouse over a specific item that cause a change in effect on hover. Usually, it functions with the help of CSS and JavaScript.</span><br /> <br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /> <h4 style="background-color: white; color: #464646; font-family: Oswald, Helvetica, Arial; font-size: 18px; font-weight: normal !important; line-height: 30px; list-style: none; margin: 0px 0px 15px; outline: none; padding: 0px;"> How to Add CSS Hover Effects to Images in Blogger?</h4> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">In this post, we will be adding multiple CSS effects to images in blogger so we have listed all the hover effects below that are used and recommend by most of the web designers:</span><br /> <br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">The very first thing you need to do is to go to Blogger >> Template >> Edit HTML and search for the skin tag. After finding the skin tag, just above it paste the following piece of code. Remember: Paste any one effect from the following codes listed below).</span><br /> <br style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /> <b style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Effect #1: Bump Up:</b><br /> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">This effect is super easy to implement and doesn't even causes any kind of slowness to your blog. This works best when you have a serise of images in horizontal item. It moves the image a little bit towards upward direction when mouse is placed on it.</span><br /> <div> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"><br /></span></div> <div> <blockquote class="tr_bq"> <span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    border: 5px solid #ccc;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    float: left;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    margin: 15px;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -webkit-transition: margin 0.5s ease-out;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -moz-transition: margin 0.5s ease-out;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -o-transition: margin 0.5s ease-out;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img:hover {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    margin-top: 2px;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span></blockquote> <br /> <b style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Effect#2: Grayscale Effect:</b><br /> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">This effects turns your all images to grayscale and whenever a mouse is placed over a image it can be seen in its orginal color. In other words it converts your images to black and white but on hover shows them in their orginal color.</span><br /> <br /> <blockquote class="tr_bq"> <span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"> /* Firefox 3.5+ */</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    filter: gray;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"> /* IE6-9 */</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -webkit-filter: grayscale(100%);</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"> /* Chrome 19+ & Safari 6+ */;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">.post-body img:hover {</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    filter: none;</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">    -webkit-filter: grayscale(0%);</span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;">}</span></blockquote> <br /> <span style="background-color: white; color: #464646; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">We hope this tutorial may have helped you in adding some cool hover effects to your images in blogger. However, if you have any other useful hover effects for images then do share with us in the comments below. </span><br /> <br /> <br /></div>

Blogger Blogger Widgets How to add CSS hover effect to images in blogger

  Images bring life to content but do they really attract your visitors? Adding a nice CSS hover effect to your images could bring engag...

Read More »

Replace Newer,Older Posts Links With Buttons In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="background-color: white; clear: both; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-gC5-X4eEH0rFUunYvFhU4mEzn_5rZmdHIU0VHTGXlsyvuU-I8z8aYnZx7Nkolng0N_G0XlVrugUz_wQzixKLSk3E1mZBl1DwS6Au7i0RN0KynouhItWEP6JvsIGKVM8ywNHFO4Gst6p/s1600/Replace-Older-Newer-Posts-With-Buttons.png" imageanchor="1" style="clear: right; color: #2aa4cf; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-gC5-X4eEH0rFUunYvFhU4mEzn_5rZmdHIU0VHTGXlsyvuU-I8z8aYnZx7Nkolng0N_G0XlVrugUz_wQzixKLSk3E1mZBl1DwS6Au7i0RN0KynouhItWEP6JvsIGKVM8ywNHFO4Gst6p/s1600/Replace-Older-Newer-Posts-With-Buttons.png" style="border: 1px solid rgb(238, 238, 238); padding: 0px;" /></a></div> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">You may know that default blogger templates are  not much stylish and attractive.In fact,these templates are not made for professional bloggers.You will never get in built professional design and professional features in any default blogger templates.You need to give some part of your time to customize blogger templates design.Today we are also going to share a article about template customization which will helps you in giving professional design to you blogger template.May be you notice that there is Newer Posts,Older Posts and Home link at the bottom of your blogger template.These links are not attractive and fancy.Than why not change these links into stylish fancy buttons to make your blog more attractive.So,today you will know how to change these links to stylish button or images.</span><br /> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <h2 style="background-color: white; color: #222222; font-family: oswald; font-size: 25px !important; font-weight: 400 !important; line-height: 40px !important; margin-bottom: 16px; margin-top: 10px; padding-top: 70px;"> How Change Newer,Older Posts And Home Link With Buttons : </h2> <ul style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">First Go to blogger.com>>Dashboard>>Template>>Edit HTML</li> </ul> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JYJUJeTARVC-1LBKbucYzUbkFpe4D-_S-Onw1DpMP-gjADDKJiEB3-Ul8HCev0LVp2HqdOtH6DzzLC2Tmii6K9uZrcJvEItVtiBjc6aD6OqY7nt9qwMBkVrV1aoCFfMgaYsTi88eX0U/s1600/a2ZBT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="219" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_JYJUJeTARVC-1LBKbucYzUbkFpe4D-_S-Onw1DpMP-gjADDKJiEB3-Ul8HCev0LVp2HqdOtH6DzzLC2Tmii6K9uZrcJvEItVtiBjc6aD6OqY7nt9qwMBkVrV1aoCFfMgaYsTi88eX0U/s1600/a2ZBT.png" width="640" /></a></div> <div> <span style="color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif;"><span style="font-size: 14px; line-height: 19.600000381469727px;"><br /></span></span></div> <div> <div style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"> <div> <h4 class="separator" style="clear: both; font-size: 18px; line-height: 1; margin-bottom: 16px; margin-top: 10px;"> To Replace  Home Link With Button : </h4> <ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Search below code in your blog template using Ctrl+F.</li> </ul> </div> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;"> <span class="fullpost"><data:homemsg></data:homemsg></span></blockquote> <ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace it with below code : </li> </ul> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">   <span class="fullpost"><img color:="" red="" src="<b><span style=" />Home_Button_Image_Url</span></blockquote> </div> </div> </div> "/>Don't forget to to replace <b><span style="color: red;">Home_Button_Image_Url</span></b> with your home image link.If you want to use our blog like home button then Replace <b><span style="color: red;">Home_Button_Image_Url</span></b> with below image code.<br /><blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;"> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYoeoo9k4RTs_lUy6LVRpAtBpYB4AtROA1drOd9igkH5rnN-H33zJG_n9VvKa5KZvwkTZXahWFn2B-8aXN6Cr8An2fvdryzCeU9cTJC9Wchqi5QV0Z56KHDcskx1a8pRKZr9UcvnUJ1LU/s1600/home.png</blockquote> <h4 style="font-size: 18px; line-height: 1; margin-bottom: 16px; margin-top: 10px;"> To Replace Older Posts Link With Button : </h4> <ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Again Search  below code in your blog template.</li> </ul> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; font-style: italic; line-height: 24px; margin: 20px; padding: 20px;">   <span class="fullpost"><data:olderpagetitle></data:olderpagetitle></span></blockquote> <ul style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace it with below code :</li> </ul> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; font-style: italic; line-height: 24px; margin: 20px; padding: 20px;"> <span id="7514346671110994184">     <img color:="" red="" src="<span style=" /><b>Next_Button_Image_Url</b></span>"/> </blockquote> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">To use next button like our blog replace </span><span style="background-color: white; color: red; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><b>Next_Button_Image_Url </b></span><span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;">with below image url or you can use your own image url.</span><br style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" /><br style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" /><div style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;"> <div class="separator" style="clear: both;"> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYN0vbkwk7q4u_nTq7cRxHJha1TqY6aDL2KhQdHUY5ut7AG2Qxy2iIqXLUBupJ-_QpIY3gV4f61nYCUnx0VowOCJck5AqPbFzrBRS20tM4C9ENTkDHYXyWLcC133Q6fkYyu7HohgJT_MXU/s1600/blue_right_arrow.png</div> </blockquote> <h4 style="font-size: 18px; line-height: 1; margin-bottom: 16px; margin-top: 10px;"> To Replace Newer Posts Link With Button : </h4> <ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Then search below code in your template.</li> </ul> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;"> <span class="fullpost"><data:newerpagetitle></data:newerpagetitle></span></blockquote> <ul style="list-style: none; margin: 0px 20px 20px 0px; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Replace it with below code.</li> </ul> <blockquote class="tr_bq" style="background-color: #444444; background-image: url(http://www.mytricksyard.com/2014/01/Change-Newer-Older-Posts-Link-To-Stylish-Buttons.html#); background-position: 100% 100%; background-repeat: no-repeat no-repeat; border-top-color: rgb(42, 164, 207); border-top-style: solid; border-top-width: 30px; color: white; font-style: italic; margin: 20px; padding: 20px;">   <span id="7514346671110994184"><img color:="" red="" src="<span style=" /><b>Previous_Button_Image_Url</b></span>"/></blockquote> </div> To use our blog like previous button replace <span style="color: red;"><b>Previous_Button_Image_Url </b></span>with below image url or use your own image.<br /><br />Now finally click on save template button and view your blog.You have successfully replaced old Newer,Older posts and Home link with Stylish button.If you are facing any problem than ask us below in comments we will surely give you solutions of that problem.And also don't forget to share your thoughts and feedbacks with us in comments.<br /><span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span> <span style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;"><br /></span>

Blogger Blogger Widgets widget Replace Newer,Older Posts Links With Buttons In Blogger

You may know that default blogger templates are  not much stylish and attractive.In fact,these templates are not made for p...

Read More »

How To Remove Locked Widgets in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" trbidi="on"> <div dir="ltr" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Jaw0A6P7yc81dMFKLuNIGO8kI8DtPbmn6b8spgahT__3tpE6235wX4Xgq3703LL0RvnBOWDIOwbBd3vJAUnN61xsQw71QyB4ToGJll9fErmHX_5RRmJkD5H8eb2jm_4BrrDnptd49CA/s1600/Sin+t%25C3%25ADtulo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Jaw0A6P7yc81dMFKLuNIGO8kI8DtPbmn6b8spgahT__3tpE6235wX4Xgq3703LL0RvnBOWDIOwbBd3vJAUnN61xsQw71QyB4ToGJll9fErmHX_5RRmJkD5H8eb2jm_4BrrDnptd49CA/s1600/Sin+t%25C3%25ADtulo.png" /></a></div> </div> Blogger is a flexible blogging platform where we can do the things easily. Unlike WordPress and other platforms, you can easily edit any part of your blog easily with Blogger and can also do hacks with it if you've a bit web developing knowledge. There are many free and paid blogger templates which you can use to beautify your blog but one thing you might have faced while applying new template. Sometimes, when we apply any new template on our blog it contains some locked widgets in blogger layout which we can't remove easily as the remove or delete options vanishes away from the widget. For example, you might have seen Navbar and Attribution widgets by default which are also locked. So, in this tutorial, we'll learn that how can we remove locked widgets in blogger.<br /><a href="" name="more"></a><h3 style="font-size: 20px; line-height: 1; margin-bottom: 10px; margin-top: 10px;"> Something About Removing Locked Widgets</h3> <div> When we're aimed to create professional blog specially on Blogger platform it's important to take care of each and every part. Blogger Layout page is an area where we can manage widgets easily. As I already said that sometimes some templates contain locked widgets that can't be removed easily. Those widgets might contain some content which we don't want to display on our blog and here it's necessary to remove them. Removing those widgets is not much difficult for those who've knowledge of web designing and development but newbies may face problem in it. By default, there is an attribute in Blogger specially for widgets to lock and unlock them. The Blogger's widget coding like the below code.</div> </div>   <br /> <blockquote class="tr_bq"> <span style="background-color: #444444; color: white; font-style: italic;"><b:widget id="HTML1" nbsp="" span=""><span style="background-color: yellow; color: white; font-style: italic;"><span style="color: #444444;">locked='true'</span></span><span style="background-color: #444444; color: white; font-style: italic;"> title='Widget Title' type='HTML'></span><br style="color: white; font-style: italic;" /><span style="background-color: #444444; color: white; font-style: italic;"></span></b:widget></span></blockquote> </div> <div dir="ltr" style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" trbidi="on"> <br /></div> <div dir="ltr" style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px;" trbidi="on"> ou can see that highlighted attribution for locking widgets. If I replace "true" to "false" then the widget will become removable. So, That's the real fact behind locked widgets in blogger. Those who're interested in making blogger templates can also learn new point from it.<br /><br /><h3 style="font-size: 20px; line-height: 1; margin-bottom: 10px; margin-top: 10px;"> Remove Locked Widgets in Blogger</h3> <div> <ul style="list-style: none; margin: auto; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Go To Blogger >> Template >> Backup Your Template</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Click Edit HTML >> Jump To Widget</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Choose The Widget Which You Want To Remove.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Now You'll Be Jumped To That Widget's Coding.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Look On The Widget Coding Line, There Will Be <span style="background-color: yellow;"><span style="color: #444444;">locked='true'</span></span> Attribute If It is Really Locked.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Just Replace <span style="background-color: yellow;"><span style="color: #444444;">true</span></span> To <span style="background-color: yellow;"><span style="color: #444444;">false</span></span> & Save It.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Now Go To Blogger >> Layout </li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Click Edit On That Locked Widget</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Click "Remove" Button at The Bottom.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><b>That's it!</b></li> </ul> <h4 style="font-size: 18px; line-height: 1; margin-bottom: 10px; margin-top: 10px;"> How To Find HTML/JavaScript Widget in HTML Editor?</h4> <div> If you can't find the locked widget in "Jump To Widget" option than maybe it can be HTML/JavaScript widget and there in Jump To Widget that kind of widgets are having HTML1, HTML2, HTML3, names so you maybe facing problem in finding your locked widget so let's locate that kind of widget in HTML editor.<br /><ul style="list-style: none; margin: auto; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Go To Blogger >> Layout >> Edit Locked Widget</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">A Popup Will Appear, Look At It's URL in The Last.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">You'll See Widget's ID There.</li> </ul> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZLOyrsggBfFQ0MdHkLNnk17Xeym5U_zdor33JcrAXDqulk9IQRab_iVjQZTgnckSjlNOp9S8kxBadhHR26t_ZUqtWEEufvipkkg_JrBxjkPVC0CQAFYjVTlOmS_elW1wFjQJCd75AJs/s1600/a2z.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="324" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZLOyrsggBfFQ0MdHkLNnk17Xeym5U_zdor33JcrAXDqulk9IQRab_iVjQZTgnckSjlNOp9S8kxBadhHR26t_ZUqtWEEufvipkkg_JrBxjkPVC0CQAFYjVTlOmS_elW1wFjQJCd75AJs/s1600/a2z.png" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div> <ul style="list-style: none; margin: auto; padding-left: 40px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Memorize That Widget ID. It Will Be "HTML" And Any Number In The Last. So, Completely It Will Be HTML1, HTML2, HTML3 etc.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Now Go To Blogger >> Template >> Edit HTML</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">Click Jump To Widget Button and Click The Widget Which is Exact ID.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">You Can Confirm That You've Landed On The Correct Widget By Seeing It's Title. There Will Be title='widget title' Attribute In That Widget Coding.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;">After That Just Replace true To false in locked Attribute and Remove It From Layout.</li> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Zwbb0byHE4VBI1UkgnGQJILSJI0L_Q6-Ra_Ia-0du76tAEdv92vEF4Zv_aDEiUh9pi2WqRLEw6k7qB1AaCmmkwZ-B-ejn1bjudjHB7afxQGnELivKe_bx9szQsHliJx3Qmo8aOcKmNg/s400/265.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><b>You're Done!</b></li> </ul> <div> Congratulations! You've successfully removed the locked widgets that will help you to make your blog more clean and fast to load. How was the tutorial? I hope you might not have faced any issue while doing this process if you've any problem with it, Feel free to ask in comments. Post your thoughts in the comments below and also share this tutorial with your friends. Take a lot of care of you and your family.</div> </div> </div> </div> </div> <div style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; text-align: justify;"> </div> <iframe allowtransparency="true" frameborder="0" height="120" id="_mN_main_692880166_0_n" marginheight="0" marginwidth="0" scrolling="no" style="background-color: white; color: #555555; font-family: Lora, Arial, Helvetica, Geneva, sans-serif; font-size: 14px; line-height: 24px; text-align: justify;" width="600"></iframe></div>

Blogger Blogging Tips How To Remove Locked Widgets in Blogger

Blogger is a flexible blogging platform where we can do the things easily. Unlike WordPress and other platforms, you can easily edit ...

Read More »

Small SEO Tools Review - Ultimate SEO Checker Tools for Your Blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="ads" style="background-color: white; border-top-color: rgb(222, 222, 222); border-top-style: solid; border-top-width: 0px; color: #333333; font-family: lora; font-size: 13px; line-height: 25.200000762939453px; margin-bottom: 10px; padding-top: 10px; text-align: justify;"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%px;"><tbody> <tr><td width="354"><div align="center"> <div class="pc_singleblock"> <div class="pc_block" style="background-color: #e7e7e7; border: 1px solid rgb(187, 187, 187); color: #666666; font-family: helvetica; font-size: 11px; font-weight: bold; height: 250px; line-height: 250px; width: 300px;"> <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" style="color: #989898; font-family: lora, sans-serif; font-size: 14px; font-style: italic; line-height: 11.109999656677246px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank"><div style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; height: 250px; line-height: 250px; overflow: hidden; width: 300px;"> Advertise Here Download Best Templates</div> </a></div> </div> </div> </td><td><div class="ads-right-min" style="border-left-color: rgb(222, 222, 222); border-left-style: solid; border-left-width: 1px; font-family: Georgia, 'Nimbus Roman No9 L', serif; font-size: 15px; font-style: italic; height: 250px; padding-left: 10px;"> <div style="float: left; margin-left: 10px; margin-top: 0px;"> </div> <br /></div> </td></tr> </tbody></table> </div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> </div> <div dir="ltr" style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIAVjUFG0z2iKUqp4ClvaCzQZEa3YpNTcnsoN5Yyobevt6InkL6ZBWpPza8d2CSAivtcZkZDIf8_1r982AcQax7gp13RxBBGN6XhzWdHmt3M8yLFP6ZVJcoBbU60UXOBm-odIioqU3bA/s1600/Small+SEO+Tools+Review+-+All+in+one+seo+tools.png" imageanchor="1" style="clear: left; color: #0084ce; float: left; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img alt="Small SEO Tools Review " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUIAVjUFG0z2iKUqp4ClvaCzQZEa3YpNTcnsoN5Yyobevt6InkL6ZBWpPza8d2CSAivtcZkZDIf8_1r982AcQax7gp13RxBBGN6XhzWdHmt3M8yLFP6ZVJcoBbU60UXOBm-odIioqU3bA/s1600/Small+SEO+Tools+Review+-+All+in+one+seo+tools.png" style="border-width: 0px; padding: 10px;" title="Small SEO Tools Review " /></a></div> <div style="text-align: justify;"> What you derived from the title of this post? Most of you will confused to see the post title into two parts. The first piece of the title show the Review of the Small SEO Tools website which is obviously all about SEO performance tools while the second part indicates that the website is fully guided with large number of all popular SEO tools almost used by every blogger and webmaster. It is indeed a very tough job a specially for bloggers when they test their blog by online SEO tools hosted on different websites. Let me clear, If someone wants to check the page rank of the blog, he/she will must find out in google the related tool. however if they want to calculate their blog links or checking blog loading time, they will not find all these activities checker tools on the same website and will have to search anywhere else on the Internet. While Repeating this process could consume your energy and all your precious time. So i was thinking why not share an excellent website provides bundles of SEO Checker tools all in one.<br /><a href="" name="more" style="color: #0084ce;"></a></div> <br /><div style="text-align: justify;"> Yesterday one of our users have asked me, Is there a website which provide complete set of SEO checker tools for a blog or website. So in today's article we will review the Small SEO Tools website which is obviously the complete Lab for SEO Tools.</div> <div class="box" style="background-attachment: scroll; background-color: #fff6bf; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border: 1px solid rgb(255, 211, 36); margin: 10px 0px; padding: 20px 10px;"> Read: <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Releasing A2z Blogger Tips V2 Responsive Template !</a></div> <div class="box" style="background-attachment: scroll; background-color: #fff6bf; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border: 1px solid rgb(255, 211, 36); margin: 10px 0px; padding: 20px 10px;"> Read: <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/blogging-platform-for-free-backlinks.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Blogging Platform For Free Backlinks.</a></div> <div class="box" style="background-attachment: scroll; background-color: #fff6bf; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border: 1px solid rgb(255, 211, 36); margin: 10px 0px; padding: 20px 10px;"> Read: <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/top-20-tips-to-optimize-your-website.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Top 20 Tips To Optimize Your Website With On Page SEO</a></div> <div class="box" style="background-attachment: scroll; background-color: #fff6bf; background-image: none; background-position: 0px 0px; background-repeat: repeat repeat; border: 1px solid rgb(255, 211, 36); margin: 10px 0px; padding: 20px 10px;"> Read: <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/7-ways-to-increase-your-blogs-crawl.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">7 Ways To Increase Your Blog's Crawl Rate In Google</a></div> <br /><br /><div style="text-align: justify;"> <span style="font-size: large;"><b>Small SEO Tools Review</b></span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u4zj6fA7jBXsiVPHmcO8YjT2LgKFS7CRg-ohOX8olkSZLFMWIU9X2LGM6OhD5fpnBoVqwVBUnFSI1SledsPDcG-5yM56nz-8obrGD22YfsIxTVPnQNXnJr4QZCLJF2_fxcxiOdADfmQ/s1600/small-seo-tools.png" imageanchor="1" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 1em 5px; padding: 3px 7px; text-decoration: none;"><img alt="Small SEO Tools Review " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8u4zj6fA7jBXsiVPHmcO8YjT2LgKFS7CRg-ohOX8olkSZLFMWIU9X2LGM6OhD5fpnBoVqwVBUnFSI1SledsPDcG-5yM56nz-8obrGD22YfsIxTVPnQNXnJr4QZCLJF2_fxcxiOdADfmQ/s1600/small-seo-tools.png" style="border-width: 0px; padding: 10px;" title="Small SEO Tools Review " /></a></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <a href="http://smallseotools.com/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Small SEO Tools</a> is the perfect Lab for Bloggers and SEO Consultants where they can test and check their blogs for different purpose. e.g blog loading time, backlinks checking, domain authority, page rank, alexa rank, article tool and keyword positioning. It provides more than 38 Online SEO Checker Tools which will never let you search for any seo tools in google. All tools are updated frequently with latest SEO tactic to get best performance result. So here will show, how many Small SEO Tools provided by SST website. </div> <div style="text-align: justify;"> <br /></div> <ol> <li class="page_item page-item-2493"><a href="http://smallseotools.com/alexa-rank-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Alexa Rank Checker</a></li> <li class="page_item page-item-2243"><a href="http://smallseotools.com/alexa-rank-comparison/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Alexa Rank Comparison</a></li> <li class="page_item page-item-50"><a href="http://smallseotools.com/article-rewriter/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Article Rewriter</a></li> <li class="page_item page-item-279"><a href="http://smallseotools.com/article-tools/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Article Tools</a></li> <li class="page_item page-item-56"><a href="http://smallseotools.com/backlink-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Backlink Checker</a></li> <li class="page_item page-item-60"><a href="http://smallseotools.com/backlink-maker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Backlink Maker</a></li> <li class="page_item page-item-2090"><a href="http://smallseotools.com/check-server-status/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Check Server Status</a></li> <li class="page_item page-item-2135"><a href="http://smallseotools.com/class-c-ip-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Class C IP Checker</a></li> <li class="page_item page-item-2186"><a href="http://smallseotools.com/code-to-text-ratio-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Code to Text Ratio Checker</a></li> <li class="page_item page-item-2320"><a href="http://smallseotools.com/comparison-search/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Comparison Search</a></li> <li class="page_item page-item-2171"><a href="http://smallseotools.com/domain-age-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Domain Age Checker</a></li> <li class="page_item page-item-2449"><a href="http://smallseotools.com/domain-authority-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Domain Authority Checker</a></li> <li class="page_item page-item-283"><a href="http://smallseotools.com/domain-tools/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Domain Tools</a></li> <li class="page_item page-item-2471"><a href="http://smallseotools.com/google-cache-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Google Cache Checker</a></li> <li class="page_item page-item-2490"><a href="http://smallseotools.com/google-index-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Google Index Checker</a></li> <li class="page_item page-item-62"><a href="http://smallseotools.com/google-pagerank-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Google PageRank Checker</a></li> <li class="page_item page-item-2347"><a href="http://smallseotools.com/visitor-hit-counter/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Hit Counter</a></li> <li class="page_item page-item-2226"><a href="http://smallseotools.com/ip-location/" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" v="">IP Address Location</a></li> <li class="page_item page-item-2259"><a href="http://smallseotools.com/keyword-density-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Keyword Density Checker</a></li> <li class="page_item page-item-52"><a href="http://smallseotools.com/keyword-position/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Keyword Position</a></li> <li class="page_item page-item-281"><a href="http://smallseotools.com/keyword-tools/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Keyword Tools</a></li> <li class="page_item page-item-2223"><a href="http://smallseotools.com/website-link-analyzer-tool/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Link Analyzer Tool</a></li> <li class="page_item page-item-58"><a href="http://smallseotools.com/link-tracker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Link Tracker</a></li> <li class="page_item page-item-2196"><a href="http://smallseotools.com/meta-tags-analyzer/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Meta Tags Analyzer</a></li> <li class="page_item page-item-2481"><a href="http://smallseotools.com/mozrank-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">MozRank Checker</a></li> <li class="page_item page-item-2486"><a href="http://smallseotools.com/page-authority-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Page Authority Checker</a></li> <li class="page_item page-item-2176"><a href="http://smallseotools.com/website-page-speed-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Page Speed Test</a></li> <li class="page_item page-item-48"><a href="http://smallseotools.com/plagiarism-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Plagiarism Checker</a></li> <li class="page_item page-item-34"><a href="http://smallseotools.com/reverse-ip-domain-check/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Reverse IP Domain Check</a></li> <li class="page_item page-item-54"><a href="http://smallseotools.com/search-engine-pingler/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Search Engine Pingler</a></li> <li class="page_item page-item-277"><a href="http://smallseotools.com/seo-tools/" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;">SEO Tools</a></li> <li class="page_item page-item-2394"><a href="http://smallseotools.com/xml-sitemap-generator/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Sitemap Generator</a></li> <li class="page_item page-item-2379"><a href="http://smallseotools.com/small-business-seo-hosting/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Small Business SEO Hosting</a></li> <li class="page_item page-item-2128"><a href="http://smallseotools.com/spell-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Spell Checker</a></li> <li class="page_item page-item-2271"><a href="http://smallseotools.com/spider-simulator/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Spider Simulator</a></li> <li class="page_item page-item-2263"><a href="http://smallseotools.com/page-comparison/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Web Page Comparison Tool</a></li> <li class="page_item page-item-2189"><a href="http://smallseotools.com/website-links-count-checker/" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;">Website Links Count Checker</a></li> <li class="page_item page-item-2181"><a href="http://smallseotools.com/website-page-size-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Website Page Size Checker</a></li> <li class="page_item page-item-2221"><a href="http://smallseotools.com/website-page-snooper/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Website Page Snooper</a></li> <li class="page_item page-item-2194"><a href="http://smallseotools.com/websites-broken-link-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Websites Broken Link Checker</a></li> <li class="page_item page-item-2143"><a href="http://smallseotools.com/what-is-my-ip/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">What Is My IP ?</a></li> <li class="page_item page-item-2478"><a href="http://smallseotools.com/whois-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Whois Checker</a></li> <li class="page_item page-item-2111"><a href="http://smallseotools.com/word-count-checker/" rel="nofollow" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Word Count Checker</a></li> </ol> <br /><h4 style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(0, 0, 0); border-top-style: dotted; border-top-width: 1px; color: black; font-family: 'Carrois Gothic SC', sans-serif; margin: 15px 0px 5px; padding: 3px 7px;"> Share Your Thoughts</h4> <div style="text-align: justify;"> We hope this tutorial helped you in finding all the SEO Checker Tools used almost by every blogger and webmaster. These are all the Premium SEO tools gifted by SST website. So this was little about the Review of Small SEO Tools and the combination of some splendid and Ultimate SEO checker tools for your blog. Test and debug your site with help of these tools.  If someone know more than the above tools, then kindly do share your choice with us. We love to get something worth from you in the below comment area. peace and blessing.</div> </div> </div>

Blogger Seo Small SEO Tools Review - Ultimate SEO Checker Tools for Your Blog

Advertise Here Download Best Templates What you derived from the title of this post? Most of you will confused to se...

Read More »

How to Add Scoop.it Social Sharing Button in Blogger Blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="background-color: white; clear: both; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;"> <div class="ads" style="border-top-color: rgb(222, 222, 222); border-top-style: solid; border-top-width: 0px; font-size: 13px; margin-bottom: 10px; padding-top: 10px;"> <table border="0" cellpadding="0" cellspacing="0" style="width: 100%px;"><tbody> <tr><td width="354"><div align="center"> <div class="pc_singleblock"> <div class="pc_block" style="background-color: #e7e7e7; border: 1px solid rgb(187, 187, 187); color: #666666; font-family: helvetica; font-size: 11px; font-weight: bold; height: 250px; line-height: 250px; width: 300px;"> <a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" style="color: #989898; font-family: lora, sans-serif; font-size: 14px; font-style: italic; line-height: 11.109999656677246px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank"><div style="background-color: transparent; background-position: initial initial; background-repeat: initial initial; height: 250px; line-height: 250px; overflow: hidden; width: 300px;"> Advertise Here</div> </a></div> </div> </div> </td><td><div class="ads-right-min" style="border-left-color: rgb(222, 222, 222); border-left-style: solid; border-left-width: 1px; font-family: Georgia, 'Nimbus Roman No9 L', serif; font-size: 15px; font-style: italic; height: 250px; padding-left: 10px;"> <div style="float: left; margin-left: 10px; margin-top: 0px;"> </div> <br /></div> </td></tr> </tbody></table> </div> <br /> <div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> </div> </div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1hwz7tDNawtRF87lAI5-I3BMp562n_IDivGEESVV85WsdW_k0xO-tYk5saKnDutObfEIdqrxI7axMqL6PPTWNL9gncTfdJnXi6Zv0s7qJMHLlzRWJJYiPspkgz-D9iPIh9BkpdZ9KZQ/s1600/How+to+Add+Scoop.it+Social+Sharing+Button+in+Blogger+Blog.png" imageanchor="1" style="clear: left; color: #0084ce; float: left; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 1em 1em 0px; padding: 3px 7px; text-decoration: none;"><img alt="adding Scoop.it social sharing buttons" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1hwz7tDNawtRF87lAI5-I3BMp562n_IDivGEESVV85WsdW_k0xO-tYk5saKnDutObfEIdqrxI7axMqL6PPTWNL9gncTfdJnXi6Zv0s7qJMHLlzRWJJYiPspkgz-D9iPIh9BkpdZ9KZQ/s1600/How+to+Add+Scoop.it+Social+Sharing+Button+in+Blogger+Blog.png" style="border-width: 0px; padding: 10px;" title="Scoop.it social sharing buttons" /></a></div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> Have you ever visited Scoop.it website? Almost all the time we share our posts immediately after publishing new post at A2zbloggertricks. Scoop.it is the newly born social bookmarking website helps bloggers to share their posts with billions of internet lovers. Scoop.it becomes so popular which is counted in the top 5 social bookmarking websites. Another interesting thing we found on this website is really helpful for both bloggers and webmasters. This social bookmarking website gives us dofollow backlinks whenever we share a post. Apart from this, this site could also be helped in increasing the post crawling and indexing rates. We have experienced so many times and finally concluded, that Scoop.it is the splendid place for bloggers to share posts with friends and get back with quality backlinks. So it will be better to stop sharing at nonsense websites and choose the right one like Scoop.It. Recently one of our readers have asked me, Is there any Social Bookmarking website button to add in blog which could help in increasing posts indexing and sharing growth. So in this article i would like to show you, how to add Scoop.it bookmarking buttons in blogger blog.<br /><a href="" name="more" style="color: #0084ce;"></a></div> <h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(40, 109, 164); border-top-style: dotted; border-top-width: 1px; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; line-height: 25.200000762939453px; margin: 45px 0px 10px; padding: 3px 7px; text-align: justify;"> Adding Scoop.It Sharing Button In Blogger</h3> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> If you are aware of social bookmarking websites then you will be probably find this tutorial very helpful. As discussed earlier above, Scoop.it is considered to be the best social bookmarking website where bloggers and webmaster share their posts and get high quality backlinks in no time. This site is recommended by many Pro Bloggers who are told us to use this site for sharing your new posts and article. </div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> <ul style="list-style: none; padding-left: 20px;"> <li style="background-attachment: scroll; background-color: transparent; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeFNjY-dxAjRFe3E3i1-tg8F0nIPRcZasPu2HI6-NJawCiyXA-1aapoEzAeBg-HufsuB4HXdCjM6IM6SNFkXqkjICOvAI7t9VjBRbGXk9d4f4h4PolZnze5crecFdvy0iTgT-0MkSOOg/s400/255.gif); background-position: 0px 4px; background-repeat: no-repeat no-repeat; line-height: 1.4em; margin: 0.3em 0px; padding: 0px 0px 0.8em 20px;"><b>Read: </b><a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" style="color: #0084ce; font-family: lora, sans-serif; font-style: italic; font-weight: bold; line-height: 14.140000343322754px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">Releasing A2z Blogger Tips V2 Responsive Template !</a></li> </ul> </div> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: justify;"> So if you are hunger for your blog fasted posts indexing rate and quality backlinks then this work can be easily done through Scoop.it once you share every new blog posts and article immediately. While there should must be a Scoop.it widget or button in your blog or website, so that you could easily share the post through it. Here you will learn step by step guide, how we could add the scoop.it social button widget in our blogger blog. </div> <br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: lora; font-size: x-small; line-height: 25.200000762939453px;"><b>Adding Scoop.it Buttons in Your Blog:</b></span><br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">First of all login in your desire </span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">blogger account</b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> >></span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> Select your Blog</b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> >> Now Go the</span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> Layout option </b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">>> Click on </span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">Add Gadget </b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">from the layout interface. >> Add </span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">HTML Javascript widget</b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">>> Now past one of the below </span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">buttons coding</b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> which you want to</span><b style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;"> add in  your blog</b><span style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;">. Save then and you done almost:</span><br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /><br /> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;"> <b>Button without counting option:</b></div> <br style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px;" /> <br /> <div style="background-color: white; color: #333333; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;"> <iframe class="scoopit-button-frame" frameborder="0" scrolling="no" src="http://www.scoop.it/button?url=http%3A%2F%2Fwww.probloggertricks.com&position=none" style="border-style: none; height: 20px; width: 55px;"></iframe></div> <div style="background-color: white; font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;"> <span style="background-color: #f2f1f1; line-height: 18.719999313354492px; text-align: left;"><span style="color: #3d85c6;"><a class="scoopit-button" href="http://www.scoop.it/" scit-position="none">Scoop.it</a><script src="http://www.scoop.it/button/scit.js" type="text/javascript"></font></span></div> <div style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255); text-align: center;"> <b>Vertical With Counting Option</b></div> <p> <br style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255);"></p> <div style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255); text-align: center;">  <iframe scrolling="no" frameborder="0" class="scoopit-button-frame" src="http://www.scoop.it/button?url=http%3A%2F%2Fwww.probloggertricks.com&position=vertical" style="width: 55px; height: 62px; border-style: none;"></iframe> </div> <div style="font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255); text-align: center;"> <span style="line-height: 18.719999313354492px; text-align: left; background-color: rgb(242, 241, 241);"><font color="#0b5394"> <a href="http://www.scoop.it" class="scoopit-button" scit-position="vertical" >Scoop.it</a><script type="text/javascript" src="http://www.sco</font></span></div> <div style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255); text-align: center;"> <b>Horizontal With Counting Option  </b></div> <div style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255); text-align: center;"> <iframe scrolling="no" frameborder="0" class="scoopit-button-frame" src="http://www.scoop.it/button?url=http%3A%2F%2Fwww.probloggertricks.com&position=vertical" style="width: 55px; height: 62px; border-style: none;"></iframe></div> <div style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; text-align: center;"> <span style="line-height: 18.719999313354492px; text-align: left; background-color: rgb(61, 133, 198);"> <a href="http://www.scoop.it" class="scoopit-button" scit-position="horizontal" >Scoop.it</a><script type="text/javascript" src="http://www.scoop.it/button/scit.js"></span></div> <h4 style="border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: rgb(0, 0, 0); border-top-width: 1px; border-top-style: dotted; border-top-color: rgb(0, 0, 0); font-family: 'Carrois Gothic SC', sans-serif; font-size: 14px; margin: 15px 0px 5px; padding: 3px 7px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255);"> Need Help</h4> <div style="color: rgb(51, 51, 51); font-family: lora; font-size: 14px; line-height: 25.200000762939453px; background-color: rgb(255, 255, 255); text-align: justify;"> We hope you would like this tutorial which show how we can add the scoop.it button in website or blog. We are confident you will be easily installed this button widget in your blog by follow the above step by step guide. However, if someone face any problem during implementation then kindly do share your query in the below comment section. thanks</div> </div> </script></span></span></div> </div>

Blogger How to Add Scoop.it Social Sharing Button in Blogger Blog

Advertise Here Have you ever visited Scoop.it website? Almost all the time we share our posts immediately after pu...

Read More »

How to Set Cookies In Blogger Using HTML5?

<div dir="ltr" style="text-align: left;" trbidi="on"> <br /> <ins style="border: none; color: #555555; display: inline-table; font-family: helvetica, arial; font-size: 14px; height: 280px; line-height: 22.399999618530273px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 336px;"><ins id="aswift_0_anchor" style="border: none; display: block; height: 280px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 336px;"><iframe allowtransparency="true" frameborder="0" height="280" hspace="0" id="aswift_0" marginheight="0" marginwidth="0" name="aswift_0" scrolling="no" style="left: 0px; position: absolute; top: 0px;" vspace="0" width="336"></iframe></ins></ins><span style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;"></span><br /> <div dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <br /> <div align="justify"> <img align="left" alt="setup cookies in Blogger" border="0" height="217" src="http://lh5.ggpht.com/-xo247cb6b4I/UrHhK81c6YI/AAAAAAAAM0I/sRKJM5KYoQA/image%25255B13%25255D.png?imgmax=800" style="background-image: none; border-width: 0px; display: inline; float: left; margin: 0px 15px 0px 0px; padding: 0px 0px 10px;" title="setup cookies in Blogger" width="400" />Saving data inside cookies in blogger blogs is probably the most untouched topic because we often avoided talking about internet cookies due to its privacy concerns. There are many cookie plugins available such as <a href="https://github.com/carhartl/jquery-cookie" rel="nofollow" style="color: #289728; outline: none; text-decoration: none;" target="_blank">this jQuery Plugin by Hartl</a> which monitors and stores user activity. But neither will we use any such plugin nor will we run bulky JavaScript on front end. We will rather use <a href="http://www.w3schools.com/html/html5_webstorage.asp" style="color: #289728; outline: none; text-decoration: none;" target="_blank">HTML5 LocalStorage</a>, the most efficient new technology that is rapidly embraced by developers across all platforms. Unlike web cookies, LocalStorage doesn't save data as text files on your hard disk, instead it saves them on your browser and only the website which stored data in the browser can access it, <span style="color: #008040;"><b>that's the most interesting part </b></span>of it that has vanished possibility of all security threats forever. You can now easily control the display of widgets on your BlogSpot blogs using this method.</div> <div style="height: 10px;"> </div> <center> <ins style="background-color: transparent; border: none; display: inline-table; height: 60px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 468px;"><ins id="aswift_1_anchor" style="background-color: transparent; border: none; display: block; height: 60px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 468px;"><iframe allowtransparency="true" frameborder="0" height="60" hspace="0" id="aswift_1" marginheight="0" marginwidth="0" name="aswift_1" scrolling="no" style="left: 0px; position: absolute; top: 0px;" vspace="0" width="468"></iframe></ins></ins></center> <br /> <br /> <a href="http://www.blogger.com/blogger.g?blogID=2886618182934830747" name="more" style="color: #0084ce; outline: none;"></a><br /> <div align="justify"> <br /> You can decide whether to show popups once or never when page loads, you can also store the state of selected tabs on accordion and tabs widgets. Your readers will now experience a more interesting interface with endless possibilities. Lets dive into this new method and learn for the first time how to save index states using HTML5 Localstorage method in blogspost blogs.</div> <div align="justify"> <b><span style="background-color: yellow;">Note:</span></b> Please remember that since "<i>cookie</i>" is the most familiar word to indicate storage of session data on user side, therefore we will term "HTML LocalStorage" also as cookie in this tutorial to keep things simple. In order to clearly understand its use I have divided the tutorial in two parts. The part1 explains this new technology and part2 will give an example of implementation.</div> <div align="left" class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;"> Part 1: How to Set Cookies In Blogger Using HTML5?</div> <div class="box" style="background-color: lightyellow; border: 5px solid rgb(247, 240, 184); box-shadow: rgb(237, 227, 150) 1px 1px 0px; color: #707037; line-height: 1.4em; margin: 10px 0px 1.5em; padding: 1.2em;"> Part 2: Create a Blogger StickyBar with Session Cookies!</div> <table border="1" cellpadding="2" cellspacing="0" style="border: 1px solid rgb(221, 221, 221); margin: 0px auto; width: 600px;"><tbody> <tr><td style="background-color: #333333; background-position: initial initial; background-repeat: initial initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299"><div align="left"> <b><span style="color: white; font-size: x-small;">Web Cookie</span></b></div> </td><td style="background-color: orange; background-position: initial initial; background-repeat: initial initial; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299"><b><span style="color: white; font-size: x-small;">HTML Local Storage</span></b></td></tr> <tr><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">1. Saves data on your hard disk</td><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">1. Saves data on your browser</td></tr> <tr><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">2. Anyone can access the cookie</td><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299"><div align="left"> 2. Not everyone can access it. A website can only access data stored by itself</div> </td></tr> <tr><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">3. Slow execution</td><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">3. Instant execution</td></tr> <tr><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">4. Stores limited amount of Data</td><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">4. Stores Large amount of Data</td></tr> <tr><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">5. Not secure</td><td style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 1px; border-top-color: rgb(221, 221, 221); border-top-style: solid; border-top-width: 1px; padding: 10px;" valign="top" width="299">5. More secure</td></tr> </tbody></table> <br /> <div style="background-color: #333333; background-position: initial initial; background-repeat: initial initial; padding: 10px;"> <span style="color: white; font-size: x-small;"><b>Web Cookie:</b></span></div> <div align="justify"> <b style="text-align: left;"><span style="color: #8064a2;"><br /></span></b> <span style="text-align: left;">A </span><b style="text-align: left;"><span style="color: black;">web cookie</span></b><span style="text-align: left;">, </span><b style="text-align: left;"><span style="color: #9bbb59;">HTTP cookie</span></b><span style="text-align: left;"> or </span><b style="text-align: left;"><span style="color: #8064a2;">brows</span></b><b style="text-align: left;"><span style="color: #8064a2;">er cookie</span></b><span style="text-align: left;">, is simply a text file that a Website stores on a user's hard disk to contain information about user activity. Cookies allow a Website to store information on a user's machine and later retrieve it. The information is stored in </span><b style="text-align: left;">name</b><span style="text-align: left;"> and</span><b style="text-align: left;">value </b><span style="text-align: left;">pairs. Facebook, Google and all major sites show stuff you like because they are tracking your activity using cookies stored on your hard disk.</span></div> <div align="justify"> Did you ever wonder how Facebook knows which sites do you visit? Do you know how come Facebook Ads on your profile are related to the sites you often visit? The answer is simple. Facebook is tracking your activity by storing cookies on your hard disk<b> even when you log out</b>! Today almost every website has a Facebook plugin installed in it, may it be like button, like box or Facebook openGraph tags, all these plugins keep on informing Facebook about what you do on the web! Strange but true. </div> <div align="justify"> Cookie files are stored in your root directory often C drive in windows OS.</div> <div style="background-color: orange; background-position: initial initial; background-repeat: initial initial; padding: 10px;"> <b><span style="color: white; font-size: x-small;">HTML LocalStorage:</span></b></div> <br /> Here comes my favorite way of controlling events on a webpage. It also does the same work which a cookie does. The only difference is that it stores data on your browser instead of hard disk. Its more secure and much faster. It can store large amount of data without effecting a website's load time. Thus having an edge over a web cookie.<br /> The data is stored in key/value pairs, and a web page can only access data stored by itself. It has two types which are:<br /> <br /> 1. <b>LocalStorage:</b>  <i>stores data with no expiration date </i><br /> <br /> The data will remain in client's browser forever as long as the client doesn't delete browser cache.<br /> <br /> To set a LocalStorage cookie just use the function:</div> <div dir="ltr" style="background-color: white; color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <br /></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;">localStorage.setItem("key", value);</span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;"><br /></span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;">localStorage.getItem("key")</span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;"><br /></span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;"><br /></span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;">sessionStorage.setItem("key", value);</span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;"><br /></span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;">sessionStorage.getItem("key")</span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="background-color: #f2f1f1; font-size: 13px; line-height: 16.380001068115234px;"><span style="color: #6fa8dc;"><br /></span></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="color: #555555;">Test the demo below to get a crystal clear idea.</span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <span style="color: #555555;"><br /></span></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <img src="http://i.imm.io/1mKbp.jpeg" /></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <br /></div> <div dir="ltr" style="background-color: white; font-family: helvetica, arial; font-size: 14px; line-height: 22.399999618530273px;" trbidi="on"> <div align="justify" style="color: #555555;"> <b>Take an example</b> of the sticky bar used on MBT. When you click the toggle button, the sticky bar shows or hides. When you don't want this bar to be shown, simply click the toggle button. Now you can visit any page on the blog and the stickybar will remain hidden. But if you close the browser or open mbt in a new tab, you will observe that stickybar shows up again. This happens because the session data expires as soon as you close the browser window or switch to a new tab for same site.</div> <div align="justify" style="color: #555555;"> If you would like to add the above stickybar to your blogs without cookie functionality then read:</div> <div align="justify" style="color: #555555;"> <br /></div> <div align="justify" style="color: #555555;"> <div dir="ltr" style="text-align: left;" trbidi="on"> <h3 style="border-bottom-color: rgb(78, 85, 90); border-bottom-style: dotted; border-bottom-width: 1px; border-top-color: rgb(78, 85, 90); border-top-style: dotted; border-top-width: 1px; color: #4e555a; padding: 3px;"> Need Help?</h3> <div align="justify"> If there is anything that confuses you feel free to ask me. I have not shared any scripting details here because we will share that in implementation portion i.e. Part2. There you will learn how these two functions are used with jQuery in simple and extremely easy way.</div> <div align="justify"> Peace and blessings buddies. Come on Buddies, its time to throw some questions! :)</div> </div> <ul class="mbt-pager" style="border-bottom-color: rgb(221, 221, 221); border-bottom-style: dashed; border-bottom-width: 2px; border-top-color: rgb(221, 221, 221); border-top-style: dashed; border-top-width: 2px; list-style: none; margin-bottom: 10px; overflow: hidden; padding: 0px; text-align: start;"> <li class="next" style="-webkit-transition: 0.4s ease-out; background-color: #333333; background-position: initial initial; background-repeat: initial initial; display: inline; float: right; line-height: 1.4em; margin: 0px; padding: 0px; text-align: center; transition: 0.4s ease-out; width: 305px;"><span class="fa fa-chevron-right" style="-webkit-font-smoothing: antialiased; -webkit-transition: 0.4s ease-out; color: #cccccc; display: inline-block; float: right; font-family: FontAwesome; font-size: 18px; line-height: 1; margin-right: 15.25px; margin-top: 45.75px; transition: 0.4s ease-out;"></span><a href="http://www.a2zbloggertips.blogspot.com.es/2013/12/how-to-show-author-profile-picture-in.html" rel="next" style="color: #0084ce; display: block; min-height: 77px; outline: none; padding: 15px 46px 15px 24px; position: relative;" target="_blank">How To Show Author Profile Picture In Google Search Results</a></li> <li class="previous" style="-webkit-transition: 0.4s ease-out; background-image: none; background-position: initial initial; background-repeat: initial initial; border-right-color: rgb(221, 221, 221); border-right-style: solid; border-right-width: 1px; display: inline; float: left; line-height: 1.4em; margin: 0px -2px 0px 0px; padding: 0px; text-align: center; transition: 0.4s ease-out; width: 305px;"><span class="fa fa-chevron-left" style="-webkit-font-smoothing: antialiased; -webkit-transition: 0.4s ease-out; color: #cccccc; display: inline-block; float: left; font-family: FontAwesome; font-size: 18px; line-height: 1; margin-left: 15.25px; margin-top: 45.75px; transition: 0.4s ease-out;"></span><a class="older-link" href="http://www.a2zbloggertips.blogspot.com.es/2013/12/releasing-a2z-blogger-tips-v2.html" id="Blog1_blog-pager-older-link" rel="previous" style="color: #289728; display: block; min-height: 77px; outline: none; padding: 15px 24px 15px 46px; position: relative; text-decoration: none;" target="_blank">Releasing A2z Blogger Tips V2 Responsive Template !</a></li> </ul> </div> </div> </div>

Blogger How to Set Cookies In Blogger Using HTML5?

Saving data inside cookies in blogger blogs is probably the most untouched topic because we often avoided talking about internet cooki...

Read More »