BlogTariff


Adding more effects to blogs by means of codes or widgets or images attracts visitors/readers by its eye-catching effective look. Here, BlogTariff come up with another wonderful article for its readers in the form of Slideshow and rotation of image with CSS3 code. Webmaster can spiceup their blogs with this code by linking posts with attractive images and description crafts readers can browse more articles on blogs. By displaying this widget to blogger can increase page views and also CTR rate of Adsense installed in blogs. This widget supports all the available browsers online like Google chrome, Opera, Safari, Firefox, etc. Let's begin the tutorails for the above lesson.


How to Add Zoom out image slideshow effect for blogger?

Sign into your blogger account
Click on "Design (Layout in the new blogger interface) Page elements"
Clilck on "Add a Gadget" link tab
Select "HTML/Javascript" widget and copy the below code and paste in it
<!-- http://blogtariff.blogspot.com Code Starts Here-->

<!-------------------------------><!-- Text Style Configuaration Starts Here --><!----------------------------------------->
<!-- Set the text-style within ".textboxstyle" -->
<!-- Set the backgroundcolor within ".textboxbackgroundstyle" -->
<!-- "-moz-" is required for Firefox. "-webkit-" is required for Safari and Chrome -->
<style>
.textboxstyle {
font-family:Arial;
font-size:10pt;
color:white;
text-align:center;
vertical-align:middle;
}

.textboxbackgroundstyle {
background-color:black;
padding:0px;
}
</style>
<!----------------------------------------->
<!-- Text-Style configuration Ends Here----------------------------------------->


<style>
.imgbox {
float:left;
position:absolute;
top:0px;
left:0px;
display:block;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
</style>

<script>

// CREDITS:
// CSS3-Slideshow with rotation and zoom effect effect
// by Krishi Omli Copyright (c) 2012 Krishi Omli All rights reserved.
// Permission given to use the script provided that this notice remains as is Additional scripts can be found at http:/http://blogtariff.blogspot.com//
// IMPORTANT: If you add this script to a script-library or script-archive you have to add a link to http:/http://blogtariff.blogspot.com on the webpage where this script will be running.
/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////

var slide= [
{
imgsrc : "Image URL",
message : "Image Description Here",
linkto : "http://blogtariff.blogspot.com"
},

{
imgsrc : "Image URL ",
message : "Image Description Here",
linkto : "http://blogtariff.blogspot.com"
},

{
imgsrc: "Image URL",
message : "Image Description Here",
linkto : "http://blogtariff.blogspot.com"
},

{
imgsrc : " Image URL",
message : " Image Description Here",
linkto : " http://blogtariff.blogspot.com"
}
]

// Set the target of the your links ("_blank", "_top", "_self", "_parent" or "nameOfYourFrame")
var target_url="_blank"

// Set the width and height of your images (pixels)
var imgwidth=200
var imgheight=150

// Set the height of your textbox (pixels)
var textheight=20

// Set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=60

// Set the pause (standstill) between the rotations (seconds)
var pause=2


/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////

// do not edit below this line
var maxrotations=2
var step=36
var i_imgwidth=0
var i_imgsrc=0
var i=0
var maxdegree=maxrotations*360
pause*=1000

var imgpreload=new Array()
for (ii=0;ii<=slide.length-1;ii++) {
imgpreload[ii]=new Image()
imgpreload[ii].src=slide[ii].imgsrc
}

function enlarge() {
i+=step
i_imgwidth+=imgwidth/(360*maxrotations/step)
if (i_imgwidth>imgwidth) {
i_imgwidth=imgwidth
}
if (i<=maxdegree) {
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
tmr=setTimeout("enlarge()",20)
}
else {
clearTimeout(tmr)
i=0
i_imgwidth=imgwidth
showmessage()
}
}

function showmessage() {
document.getElementById("textbox").innerHTML='<div class="textboxbackgroundstyle">'+slide[i_imgsrc].message+'</div>'
tmr=setTimeout("hidemessage()",pause)
}

function hidemessage() {
document.getElementById("textbox").innerHTML=""
shrink()
}


function shrink() {
i+=step
i_imgwidth-=imgwidth/(360*maxrotations/step)
if (i_imgwidth<1) {
i_imgwidth=1
}
if (i<=maxdegree) {
document.getElementById("dt").innerHTML="<table cellpadding=0 cellspacing=0 width="+imgwidth+" height="+imgheight+"><tr valign=middle><td align=center><a href='"+slide[i_imgsrc].linkto+"' target='"+target_url+"'><img src='"+slide[i_imgsrc].imgsrc+"' width="+i_imgwidth+" border=0></a></td></tr></table>"
document.getElementById("dt").style.MozTransform="rotate("+i+"deg)"
document.getElementById("dt").style.WebkitTransform="rotate("+i+"deg)"
document.getElementById("dt").style.OTransform="rotate("+i+"deg)"
tmr=setTimeout("shrink()",20)
}
else {
clearTimeout(tmr)
i_imgsrc++
if (i_imgsrc>slide.length-1) {
i_imgsrc=0
}
i=0
i_imgwidth=0
tmr=setTimeout("enlarge()",500)
}
}

document.write("<div id='roof' style='position:relative;width:"+imgwidth+"px;height:"+imgheight+"px;'>")
document.write("<div class='imgbox' id='dt' style='width:"+imgwidth+"px;height:"+imgheight+"px;top:0px;left:0px;'></div>")
document.write("<div id='text'  style='position:absolute;width:"+imgwidth+"px;height:"+textheight+"px;top:"+(imgheight-textheight)+"px;left:0px;filter:alpha(opacity="+opacitystrength+");opacity:"+(opacitystrength/100)+";'><table width="+imgwidth+" height="+textheight+"><tr><td id='textbox' class='textboxstyle'></td></tr></table></div>")

document.write("</div>")

window.onload=enlarge
</script>

  <div align='left'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.blogtariff.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
<!--www.http://blogtariff.blogspot.com Code Ends Here-->

Customization:

After successful pasting the above code lets alter few tags as below

  • Replace "http://http://blogtariff.blogspot.com" with page/post url or blog URL
  • Replace "Image URL" with your hosted image URL
  • Replace "Image Description" with your own image related words


After successful altering the above tags now, "Save the Template" and preview your blog to view experiment.
BTF Methods

  • Set the elements of your slides. Each block below contains the URL of your images as well as the corresponding messages and links. In this case the pictures are in the same directory as the HTML-file. 
  • Add as many slides as you like. Just follow the BlogTariff methods.
  • { Each block starts with this brackets imgsrc : "../the path/or/url/to/your/image.jpg",
  • Message/Description: "The comment at the bottom of the slide",
  • Linkto: "http://the-url-of-your-link.com" This line does not end with a comma
  • }, Each block ends with a bracket and comma.
Note: The very last block does not end with a comma........

Appreciation

If you enjoyed this article let know your views and suggestions via comments. We always appreciate on Subscribing to US - Don't miss ensuing posts.

Posted by
Share to:

Post a Comment Gmail ID

Do not Try to Add Spam Comments

Subscribe to: Post Comments (Atom)
 
Top