|
| This widget charge battery of beauty of your blog, i like this script on one site and try to offer for blog users, if you like this share with friends |
Live Demo Below hover mouse on Icons |
how to Get Stylish Footer menu For Blogspot |
|
Go To Dashboard »» Layout »» Add
Gadget
»» Select JaveScript »» In Content
Box paste data From below box After Modify |
|
<style id="page-skin-1"
type="text/css">
.majid-container{
float:left;
width:150px;
height:150px;
overflow:hidden;
position:relative;
border:solid;
-webkit-border-radius: 1px 1px
10px 10px;
border-radius: 1px 1px 10px
10px;
}
.majid-container img{
border:2px;
-webkit-border-radius: 1px 1px
10px 10px;
border-radius: 1px 1px 10px
10px;
}
.majid-container:hover {
float:left;
width:150px;
height:150px;
overflow:hidden;
position:relative;
border:solid;
-webkit-border-radius: 1px 1px
10px 10px;
border-radius: 1px 1px 10px
10px;
-webkit-box-shadow: inset 0px
0px 10px 5px ;
box-shadow: inset 0px 0px 10px
5px ;
}
.text{
background:rgba(0,0,0,0.5);
top:-100px;
color:red;
font:12px
Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* baadshah26gold.com */
-webkit-transition: all .5s
ease-out;
-moz-transition: all .5s
ease-out;
-o-transition: all .5s
ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* baadshah26gold.com */
-webkit-transition: all .4s
ease-out;
-moz-transition: all .4s
ease-out;
-o-transition: all .5s
ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.majid-container:hover .text{
top:0;
}
</style>
</head>
<body>
<div class="majid-container"
style="width: 150; height: 150">
<p align="center">
<img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-W28PoMxw3tHyaW65QS9YPm7w4TzgyheA_UeaQtZ8n6sztlHY40jXScYo_S-MhqCByXt_ygmWhDyCVeWR2iqE7zfj8t-E-H8wyJ9spZ5oyowI1DRjgS4VX5mYd543_12P_fDiWd5VQUE/s1600/baadshah26gold3.png"
width="130"
height="130">
<article class="text">
<h2 align="center"><a
href="http://baadshah26gold.com/category/blogger-widgets/"><font
color="#FFFF00"
size="3"
face="Comic Sans MS"><b>Blogger
Widgets</b></font></a></h2>
</article></div>
<div class="majid-container"
style="width: 150; height: 150">
<p align="center">
<img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTgWYxWr8k8eZg2vz3-cxD6r254b570dfq1f8eZXQo3hB01-nmhqNw6sxTRXSqwN4-zWSt3UZCue6sFL3srboRaCypVcJ6o2BICWzd-N6_-3Pw1GNkziduZwgZytcyCwMfDOGVSTmDMiI/s1600/baadshah26gold1.png"
width="130"
height="130">
<article class="text">
<h2 align="center"><a
href="http://baadshah26gold.com/category/blogger-widgets/"><font
color="#FFFF00"
size="3"
face="Comic Sans MS"><b>Blogger
Widgets</b></font></a></h2>
</article></div>
<div class="majid-container"
style="width: 150; height: 150">
<p align="center">
<img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-W28PoMxw3tHyaW65QS9YPm7w4TzgyheA_UeaQtZ8n6sztlHY40jXScYo_S-MhqCByXt_ygmWhDyCVeWR2iqE7zfj8t-E-H8wyJ9spZ5oyowI1DRjgS4VX5mYd543_12P_fDiWd5VQUE/s1600/baadshah26gold3.png"
width="130"
height="130">
<article class="text">
<h2 align="center"><a
href="http://baadshah26gold.com/category/blogger-widgets/"><font
color="#FFFF00"
size="3"
face="Comic Sans MS"><b>Blogger
Widgets</b></font></a></h2>
</article></div>
<div class="majid-container"
style="width: 150; height: 150">
<p align="center">
<img border="0"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOdYp99G7-yhi1k8XotPQjS4cVY4SMVkmMqXMvza3hBbbW37F4sM1-GMQlQYGPqufDZYQibbJ3Ht0dGLpSC_7P121sFfzQg0_kTkB2S5sWwElWcLkYQXVJpQ7fGaVL7mepz5lliWmeoyc/s1600/baadshah26gold2.png"
width="130"
height="130">
<article class="text">
<h2 align="center"><a
href="http://baadshah26gold.com/category/blogger-widgets/"><font
color="#FFFF00"
size="3"
face="Comic Sans MS"><b>Blogger
Widgets</b></font></a></h2>
</article></div>
|
|
Note: Please in above scroolbox i have poit out some text containing links, titles, colour and size, red=links and titles, Pick= colours, and green= zize After modify add to Gadget |
About 
0 comments: