In this post im going to explain, how to
add animated labels for your images. you
can add this effect to your sidebar image
or post images.Im using CSS and HTML
for this tutorial.I added demo link. so you
can check it before apply to your blog.
Get my earlier image effects posts here.
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Template" Like Below.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5.Find this code by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> code
7. Go to blogger and click drop-down like 1st step and select Layout
8. Click Add Gadget and select 'HTML/Javascript"
9. Paste below code.
10. Now save "HTML/Javascript". You are done.
add animated labels for your images. you
can add this effect to your sidebar image
or post images.Im using CSS and HTML
for this tutorial.I added demo link. so you
can check it before apply to your blog.
Get my earlier image effects posts here.
1. Log in to blogger account and Click drop down.
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5.Find this code by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> code
/* Bloggertrix */
.label {
/*Position*/
overflow: hidden;
position: relative;
margin: 20px;
display: inline-block;
vertical-align: top;
/*Skin*/
border: 7px solid #fff;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
display: block;
}
.label p {
/*Position*/
position: absolute;
padding: 10px;
width: 100%;
/*Skin*/
background: #000; /*fallback*/
background: rgba(0,0,0,0.7);
color: #fff;
font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
/*Animation*/
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*Top In Bounds*/
.top:hover p, .topleft p, .topright p {
top: 0%;
}
/*Top Out of Bounds*/
.top p, .centertop p {
top: -50%;
}
/*Bottom In Bounds*/
.bottom:hover p, .bottomleft p, .bottomright p {
bottom: 0%;
}
/*Bottom Out of Bounds*/
.bottom p, .centerbottom p {
bottom: -50%;
}
/*Left In Bounds*/
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
left: 0%;
}
/*Left Out of Bounds*/
.bottomleft p, .topleft p, .centerleft p, .centerleft p {
left: -150%;
}
/*Right Out of Bounds 150%*/
.bottomright p, .topright p, .centerright p {
left: 150%;
}
/*Centered From Bottom*/
.centerbottom:hover p {
bottom: 50%;
}
/*Centered From Top*/
.centertop:hover p, .centerleft p, .centerright p {
top: 50%;
}
/*Center Margin Fixes*/
.centertop:hover p, .centerleft p, .centerright p {
margin-top: -20px;
}
.centerbottom:hover p {
margin-bottom: -20px;
}
7. Go to blogger and click drop-down like 1st step and select Layout
8. Click Add Gadget and select 'HTML/Javascript"
9. Paste below code.
<div class="label top">*ReplaceURLs as your like.
<p>Your Title</p>
<img src="Image URL 1" />
</div>
<div class="label bottom">
<p>Your Title</p>
<img src="Image URL 2" />
</div>
<div class="label bottomright">
<p>Your Title</p>
<img src="Image URL 3" />
</div>
<div class="label bottomleft">
<p>Your Title</p>
<img src="Image URL 4" />
</div>
<div class="label topleft">
<p>Your Title</p>
<img src="Image URL 5" />
</div>
10. Now save "HTML/Javascript". You are done.
Hi! how day! here is the another new javascript gadget.. " How to add animated scrolling text to browser title bar" i think this is very cool gadget.. so many visitors amazing see this gadget!!! please read the below information and add this gadget to your blog today... so this is very cool gadget to decorate your blog look.. try this today!! thanks!
1.Login to your blogger dashboard--> Desing- -> Edit HTML
2.Scroll down to where you see <head> tag
3.Copy below code and paste it just before the <head> tag
4.Now Click on "Save Templates" Now your Done
Picture from http://www.blogger.com
1.Login to your blogger dashboard--> Desing- -> Edit HTML
2.Scroll down to where you see <head> tag
3.Copy below code and paste it just before the <head> tag
<script type='text/javascript'>
//<![CDATA[
msg = "Type Your Text Hear";
msg = " .................................. " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>
4.Now Click on "Save Templates" Now your Done
Picture from http://www.blogger.com
Hi friends, today i'm gonna show you how to add animated flash clock gadget your blog. A clock gives a beautiful look to a website. A clock is a must for a personal homepage, forum, blog etc.Isn’t it exciting when you get a highly quality flash Clock absolutely Free? you can add this flash animated clock your blog easily. it's really faster and cool. all you have to do is follow the instructions given below.. let's go to work.and Congrats you!! I hope you like the clocks Feel free to ask anything in the comment box below' we will meet again in next post.Thank you.
1.Login to your blogger Dashboard and go to Desing --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below
1. Clicking Digital Clock
2. Rotating Silver Clock
3. Black Outline Clock
4. Simple Clock
5. White Clock
6. Black Clock
7. Clicking Out Digital Clock
8. 3D Clock
9. House Clock
10. Black Cool Clock
4. Now Click On Save 'JavaScript' You are done.
Special Thanks http://flash-clocks.com
Picture From http://www.2dayblog.com/2009/10/19/manual-digital-clock/
1.Login to your blogger Dashboard and go to Desing --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below
1. Clicking Digital Clock
<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object>
2. Rotating Silver Clock
<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object>
3. Black Outline Clock
<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>
4. Simple Clock
<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>
5. White Clock
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
6. Black Clock
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
7. Clicking Out Digital Clock
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-152.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
8. 3D Clock
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-169.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
9. House Clock
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
10. Black Cool Clock
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>
4. Now Click On Save 'JavaScript' You are done.
Special Thanks http://flash-clocks.com
Picture From http://www.2dayblog.com/2009/10/19/manual-digital-clock/
In this post i will explain, how to add
circle image gallery with pan style.This
will give a nice look to your blog.Im
using css3 for this gallery.It include
nice hover style. you can try to add it to
your blog. Earlier image effect post are
here. Check demo below.
Demo
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3.Find this code by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> code
5. Go to blogger Design > Page Element.
6. Click Add Gadget and select 'HTML/Javascript
7.Paste below code.
8. Now save your template. You are done.
circle image gallery with pan style.This
will give a nice look to your blog.Im
using css3 for this gallery.It include
nice hover style. you can try to add it to
your blog. Earlier image effect post are
here. Check demo below.
Demo
1. Log in to blogger account and Go to Design >> Edit HTML
(make sure backup your template first)
2. Put checked marked in Expand Widget Templates
3.Find this code by using Ctrl+F ]]></b:skin>
4. Paste below code Before ]]></b:skin> code
/*GALLERY-Bloggertrix.com*/
.gallery {
width: 800px;
margin: 50px auto;}
ul {
list-style: none;}
.gallery li {
height: 100px;
width: 100px;
margin: 15px;
float: left;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;}
.gallery li img {
margin: -100px 0px 0px 0px;
z-index: -1;
-webkit-transition: margin 1.5s ease;
-moz-transition: margin 1.5s ease;
-o-transition: margin 1.5s ease;
-ms-transition: margin 1.5s ease;
transition: margin 1.5s ease;
}
.gallery li:hover img {
margin-left: -150px;
margin-top: -150px;
cursor: pointer;
}
.gallery li p {
width: 100px;
padding: 20px;
position: relative;
left: 15%;
top: 110%;
z-index: 1;
color: white;
text-align: center;
text-transform: uppercase;
font: bold 18px/1 Helvetica, Verdana, sans-serif;
text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
-webkit-transition: top 0.5s ease;
-moz-transition: top 0.5s ease;
-o-transition: top 0.5s ease;
-ms-transition: top 0.5s ease;
transition: top 0.5s ease;
}
.gallery li:hover p {
top: 75%;
margin:-55px 0 0 -35px;}
5. Go to blogger Design > Page Element.
6. Click Add Gadget and select 'HTML/Javascript
7.Paste below code.
<div class="gallery">
<ul>
<li><p>Swing</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilircCyeDZcPUZKKqHrkjAYA-wV6NYEdY4ggeV3MWmapyl1T-SASyG0e8h02kVtCDvGkuywwLbz_ixReJc1QBCwEn283AiIi-Ev8DVCVBmNB2yRBzPJ_C2Q2YMA85zl4LOMDnlguL8Ads/s1600/bloggertrix-image1.jpg" /></li>
<li><p>Surf</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObEtP3LWEwi_3K7yynzsmajKM3pty6j-XMv7-zH1CppwJmkjk7bVR3tdjXtv11qID4uq79Cf83kju8G7HVi03S4gjDokrKt62x848ISxH-ILkV5xKagMUFfiDfAj_0vqxH74jnnLjJEk/s1600/bloggertrix-image2.jpg" /></li>
<li><p>Pedal</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJGOjuB1AEpWEZhCfEs606TkOsyJhyphenhyphenoWiCJhU-ZO6jN9hzRi2BgabmQCfVcuWp6UqaQAxcQtI-Y6YgMhr-STNppRnR6stv3eKxrhZ3KUiejVdJ3RFTzSbsh1sTdK9hJtEijk4kszX4yM/s1600/bloggertrix-image3.jpg" /></li>
<li><p>Thrash</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj47wwOAVvyVrTGhM5WwuKyh00_HOtEM329Tsghd7Bp8IMHeMcLF9bQpoKJntKHOFdPAhziGinfjHYssUEICy54_dDQjZL04zxyp0qq_FlIT5htoKwMjHNIquWP3P2TPO9PPxMC0Ntietw/s1600/bloggertrix-image4.jpg" /></li>
<li><p>Ride</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHE8yZ9-t7NrhdZM8096dlJYh-6wvH3uoFWaREQ9d-0CRV_-7urbtty0an9aso2x_Xg7-3d0IwmMKejWz3wkCIguwZK4DTH_RdOi-Bo9D4D0T379_BO8tScm8ZhIxeJB0qRagC4w9m2sg/s1600/bloggertrix-image5.jpg" /></li>
<li><p>Kick</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMhPCMzkBWqsDrx_J2UM6iQA_8UWH9dufWDl4QoJ1MIadLvpcmaSOVqFlMkbqJwEPFRIXxB1kb3rCbukCOh5ydCgfs3vDPm8QAD1Vsbpz1OkboI_Lqs1-cAzawN5AQYREHPGME8DL-xpU/s1600/bloggertrix-image6.jpg" /></li>
<li><p>Dive</p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioJRIhcqJ_WivH35a-yyju-i1NRLPsYSwq2Ofq-5o3BugW2wC82cxxJNhEF0OuNoTffTnmAeTCLViVCL6lUfIkWMJtCZErzlpV9ek9AahqQNuHxkUEUr37OA68WMjp3AwiaGwwzydGh_g/s1600/bloggertrix-image7.jpg" /></li>
</ul>
</div>
8. Now save your template. You are done.
Freindly sites
Latest Blogger Tips
Follow me Facebook
Blog Statistics
Twitter