How to add floating social media share button to Blogger

Floating buttons are cool and besides that it increases the likelihood of your post being shared as the share buttons are readily available. Below I have included an easy method of setting up floating buttons in blogger.

 Above picture the floating buttons can be seen on the left side of the image.

Method:
Go to Layout>Add gadget> Html/Javascript
then copy this code


 

<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:47px;top:325px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b"></script>

                                                              

Read More

How to add Numbered Page Navigation to Blog

Usual Navigation in Blogger is bit cumbersome , so this will solve that problem
Instructions:
Login to Blogger , Go to Layout>Add gadget> Html/Javascript  , then copy the below code into that box .

Preview

<style type="text/css">#blog-pager{font-size:normal}.showpageArea{font-family:verdana,arial,helvetica;color:#000;font-size:11px;margin:10px}.showpageArea a{color:#000;text-shadow:0 1px 2px #fff;font-weight:700}.showpageNum a{padding:3px 8px;margin:0 4px;text-decoration:none;border:1px solid #999;-webkit-border-radius:3px;-moz-border-radius:3px;background:#ddd url(http://i694.photobucket.com/albums/vv310/rahulshetty87/wp1_zps8de968e7.jpg) 0 -50px repeat-x}.showpageNum a:hover{border:1px solid #888;background:#ccc url(http://i694.photobucket.com/albums/vv310/rahulshetty87/wp1_zps8de968e7.jpg) 0 -25px repeat-x}.showpageOf{margin:0 4px 0 0}.showpagePoint{color:#fff;text-shadow:0 1px 2px #333;padding:3px 8px;margin:2px;font-weight:700;-webkit-border-radius:3px;-moz-border-radius:3px;border:1px solid #999;background:#666 url(http://i694.photobucket.com/albums/vv310/rahulshetty87/wp1_zps8de968e7.jpg) 0 0 repeat-x;text-decoration:none} </style> <a href="http://bloggertipsss.blogspot.com/" target="_blank" title="Blogger Tips"><img src="https://bitly.com/24workpng1" alt="Blogger Tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://bloggertipsss.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://bloggertipsss.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script style='text/javascript'>
var postperpage=5;
var numshowpage=3;
var upPageWord="Prev";
var downPageWord="Next";
var home_page="/";
var urlactivepage=location.href;
</script>
<script style='text/javascript' src='http://safir85.ucoz.com/24work-blogspot/page-navigation/0-test-p-n-01_00.js'></script></text area> 

Read More

How to create a HTML Text area ( Html code box)

Creating HTML Text Area
Use the Following code

<textarea rows="4" cols="50"> ENTER TEXT HERE</text area>
Preview as you can see above.
NOTE:Delete the space between the </text area> and make it </textarea>

Read More

How to add Image slider/conveyor belt to blog or website

Adding Image slider/Conveyor Belt to Blogger:
 In Blogger go to layout tab and then click on add gadget , then click on HTML/Javascript option
Now copy the code  given below inside the box

<table id="table175" border="0" cellpadding="0" cellspacing="0" bgcolor="#eff0f2"><tbody>
<tr style="font-family: arial,sans-serif;" bgcolor="#e7efff"><td colspan="2" class="white11B" bgcolor="#9783ad">

<table id="table176" border="0" cellpadding="0" cellspacing="0" width="100%" height="06"><tbody>
<tr><td class="BLACK" height="19" bgcolor="#FFFFFF" align="center"><b><font style="color: rgb(255, 255, 255);" size="3">TITLE</font><br/></b></td></tr>
</tbody></table>
</td></tr>
<tr bgcolor="#FFFFFF"><td width="569" height="420" bgcolor="#eff0f2" align="middle">

<script type="text/javascript">

/***********************************************

* Conveyor belt slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

//Specify the slider's width (in pixels)

var sliderwidth="1800px"

//Specify the slider's height

var sliderheight="400px"

//Specify the slider's slide speed (larger is faster 1-10)

var slidespeed=4

//configure background color:

slidebgcolor="#000000"

//Specify the slider's images

var leftrightslide=new Array()

var finalslide=''

leftrightslide[0]='<a href="site link" target="_blank"><img border="0" src="image link"></a>'

leftrightslide[1]='<a href="site link" target="_blank"><img border="0" src="image link"></a>'

leftrightslide[2]='<a href="http://sindhoorakitchen.blogspot.com/2013/08/uruval-chicken.html" target="_blank"><img border="0" src="http://i694.photobucket.com/albums/vv310/rahulshetty87/food/ff309174-cc80-488c-ab55-66ddaf54d5ed_zps55abdb79.jpg"></a>'

leftrightslide[3]='<a href="" target="_blank"><img border="0" src=""></a>'

leftrightslide[4]='<a href="" target="_blank"><img border="0" src=""></a>'

leftrightslide[5]='<a href="" target="_blank"><img border="0" src=""></a>'

leftrightslide[6]='<a href="" target="_blank"><img border="0" src=""></a>'

//Specify gap between each image (use HTML):

var imagegap=" "

//Specify pixels gap between each slideshow rotation (use integer):

var slideshowgap=5

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed

leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'

var iedom=document.all||document.getElementById

if (iedom)

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

var actualwidth=''

var cross_slide, ns_slide

function fillup(){

if (iedom){

cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2

cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3

cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide

actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth

cross_slide2.style.left=actualwidth+slideshowgap+"px"

}

else if (document.layers){

ns_slide=document.ns_slidemenu.document.ns_slidemenu2

ns_slide2=document.ns_slidemenu.document.ns_slidemenu3

ns_slide.document.write(leftrightslide)

ns_slide.document.close()

actualwidth=ns_slide.document.width

ns_slide2.left=actualwidth+slideshowgap

ns_slide2.document.write(leftrightslide)

ns_slide2.document.close()

}

lefttime=setInterval("slideleft()",30)

}

window.onload=fillup

function slideleft(){

if (iedom){

if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))

cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"

else

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))

cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"

else

cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"

}

else if (document.layers){

if (ns_slide.left>(actualwidth*(-1)+8))

ns_slide.left-=copyspeed

else

ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))

ns_slide2.left-=copyspeed

else

ns_slide2.left=ns_slide.left+actualwidth+slideshowgap

}

}

if (iedom||document.layers){

with (document){

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')

if (iedom){

write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">
')

write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed">
')

write('<div id="test2" style="position:absolute;left:0px;top:0px">
</div>
')

write('<div id="test3" style="position:absolute;left:-1000px;top:0px">
</div>
')

write('</div>
</div>
')

}

else if (document.layers){

write('<ilayer width="+sliderwidth+" height="+sliderheight+" name="ns_slidemenu" bgcolor="+slidebgcolor+">')

write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu2"></layer>')

write('<layer left="0" top="0" onmouseover="copyspeed=0" onmouseout="copyspeed=slidespeed" name="ns_slidemenu3"></layer>')

write('</ilayer>')

}

document.write('</td></table>
')

}

}

 </script></td></tr>
</tbody></table>

If you have any questions leave comment below

Read More