How to add multi-colored popular posts to Blogger
Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML >> check "expand widget templates" (make a backup first) and search for the following tag:
/* Variable definitions
====================
Step 2. Copy and paste just below/after this tag, the next code:
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>
Step 3: Search for the following piece of code:
]]></b:skin>
Step 4. Just above/before it, add this code:
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
Step 5. Now find the following code:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
Step 6. Delete it until you reach at this tag (delete this also):
</b:widget>
Note: Be very careful when removing it. The entire fragment of code should look like this:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Step 7. After you have deleted the above code, paste this in its place:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicndldHlqeH-73ob-NoOI8oBvoMPHk0zQHhPH3HNVQVvW9-tSSD0ggZvvcIzu1Z47NbDywWVnJHJji_pDLY7R6jsISXY8NK5jWvbHv-7apD-25yw_Psi8HUyooE-dcGa93jAaTblyJviY/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicndldHlqeH-73ob-NoOI8oBvoMPHk0zQHhPH3HNVQVvW9-tSSD0ggZvvcIzu1Z47NbDywWVnJHJji_pDLY7R6jsISXY8NK5jWvbHv-7apD-25yw_Psi8HUyooE-dcGa93jAaTblyJviY/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
Step 8. Save template.
Settings
- Go back to Design >> Page Elements and click on the edit link of Popular Posts widget.
Select to "display up to 5 posts", then Save the widget.
For any questions or suggestions, leave a comment below.
In this post will help you to create a recent post widget for your blogger. Its animated widget with thumbnail and Include with nice back ground. So you can try to add it to your blog.
1. Log in to blogger Design > Page Element.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code.
After paste above code
* Replace http://antisite2.blogspot/ with your Site URL
4. Now save your HTML/Javascript'.
2. Click Add Gadget and select 'HTML/Javascript
3.Now Paste Below code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
.spydate{
overflow:hidden;
font-size:10px; }
#spylist ul{
width:350px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:230px;
background: #1ed2f2;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 1px 10px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}
#spylist li:hover {
background: #84f6f5;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
margin-top:3px;
background:none;
border:0;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://antisite2.blogspot/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><a style=" float:right;font-size:8px; color:#3B78CD; text-decoration:none;" href="http://antisite2.blogspot.com">Blogger widget</a>
After paste above code
* Replace http://antisite2.blogspot/ with your Site URL
4. Now save your HTML/Javascript'.
In this tutorial im gonna explain how to add
circle image with nice hover effect. Actually,
this effect helps to make your blog attractive.
You can use this image circle for link to your
page or post,like contact me page, about me
page etc. SO , you can add similar image for
it.This whole effect made up by CSS and
HTML.You can check my similar post here
Amazing CSS Image Circle Hover Effect For Blogger
circle image with nice hover effect. Actually,
this effect helps to make your blog attractive.
You can use this image circle for link to your
page or post,like contact me page, about me
page etc. SO , you can add similar image for
it.This whole effect made up by CSS and
HTML.You can check my similar post here
Amazing CSS Image Circle Hover Effect For Blogger
Demo
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 */
.Btrix-item {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 150px;
height: 150px;
border-radius: 50%;}
.Btrix-info-wrap {
background: #07CFE0 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(255,255,255,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
display: block;position: absolute;width: 150px;height: 150px;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
opacity: 0;background: #07CFE0;pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-alP6HrM84Sws6vW-9iNlaDH-DlTjraeIndA0cOggj4zK-sdmSGMHUATYOUsQpRtl0aZZauJpBQrtIJFtQrx75P2vajtZMoWU_TCk7s1j3_moDWuiXpqycTG1KCaou2up3zgCCgb37-8/s1600/bloggertrix-image+1.jpg);}
.Btrix-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgewN8Ct6l-KLibBvM4diaFbJN5JuIXdU8U1NsYN1ON_WYFfqe5Y2WwNBM_wrcNJa1DPhn_wRM3n92iX2PBs6DtNLutlKUDQvX-av_deGi4xcWXJuAWO0CauphM2bcV50UvzDB3asLsvWk/s1600/bloggertrix-image+2.jpg);}
.Btrix-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiak9o5jDJkO39Jlq4oT5r7DNbDdNYlw2JzoPP-Zn6dpYlCot-Z05P0_k2v-C-o7wVkWz6OqORX7jJISTMnPGKkZwF_Z421vWD71_4BRwbUkcaNE5cQ7Uukw2tuJ-tW1RB2v5dkjD3YYKc/s1600/bloggertrix-image+3.jpg);}
.Btrix-info h3 {
color: #fff;
text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
padding: 40px 0 0 0;
height: 80px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: -60px 30px;
font-size: 12px;
border-top: 1px solid rgba(255,255,255,0.5);
}
.Btrix-info p a {
display: block;color: #e7615e;font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;}
.Btrix-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
content: '';
display: table;}
.Btrix-grid:after {
clear: both;}
.Btrix-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 4px;
}
*You can change image as your like im using 180x180 pixel7. 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.
<section class="main">
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1"></div>
<div class="Btrix-info-back">
<h3>
Fashion</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2"></div>
<div class="Btrix-info-back">
<h3>
Nature</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3"></div>
<div class="Btrix-info-back">
<h3>
Car</h3>
By Blogger Trix <a href="http://www.bloggertrix.com"><br/>Link to Post</a><br />
</div></div></div></div></li></ul></section>
*You can change the header according to image and image URL10. Now save your template. You are done.
I will not be providing a DEMO for this because you can try it live in our HTML Editor to see how it works.
Tip: Copy the code given in step#4 and paste it inside this editor.
How it works?
This popup appears only once to every new visitor. The ip address of the visitor is stored in browser cookie and as the page loads again the widget wont be called again for the same visitor thus eliminating the chances of bugging regular readers. Because of course it will look weird if the popup appears again and again on every pageview. It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.
Add Facebook LikeBox inside Jquery Popup in Blogger
I am discussing here steps for blogger but if you know how to deal simple HTML code then you can easily add it to your wordpress blog too.- Go To Blogger > Design
- Click choose a gadget
- Select HTML/javascript widget
- Paste the following code inside it
<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_Y4WRZhMNC3aGLGrJRcz1KZePpise4fd6k2Oa8rCRsfMNVArUgI73z7g1iSYigKt_Z0eiX9qAhQ4Sacq0d-2knAzurANyp1P0g8s9yJWe4kvM5N3GMKAZdQ5ks3Ww_hym-1vaabrfwg/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_Y4WRZhMNC3aGLGrJRcz1KZePpise4fd6k2Oa8rCRsfMNVArUgI73z7g1iSYigKt_Z0eiX9qAhQ4Sacq0d-2knAzurANyp1P0g8s9yJWe4kvM5N3GMKAZdQ5ks3Ww_hym-1vaabrfwg/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_gXuD3BVkT3ikLPiXwn0AwO-kbcGFt43Oy4GAQ1eordy3y3_GyjmtT9fv657QRwjftspWCt2RLm40A_9B1Uo-FL8dD7lzgHHyt1R9So9-UECNCmTd29NLFxFePpbH1agfLF2bjJoGK2g/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWTsCvBCNCHOpw2tNL81G73hxddWH7qTwjxAZaR_psDeD_vXxqZsMtv3fkskfchcvH7DNhfuTECGmZqOw1vCM8KEuc99egi-tKtzsQIXuqSYrWXPahV6189NDKGU6ak7BoTK_IGT2Ayk8/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BmewQiZfQdSwGUI2-HuPpTX0e6O76MsnM-ZjRyLZw2EpCQ7PddVqyhjO58NO5S-iAr6GShRB0AKg4fACtEwdXP_vZ6N75XtpKAIqfuSS95BejwO5cCv0i_NO0or6WCGDvzvMYsvztcY/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>
Make this simple change:
- Replace bloggertricks with your facebook username.
5. Hit the save button. Drag the widget to anywhere on your right sidebar.
6. Click the orange save button towards top right.
done! Visit your blogs to see it poping up just beautifully. To review the widget just delete your browser cookies and refresh the page to see it appearing again.
Want the widget to appear Repeatedly
If you want to prompt the likebox every time the visitor enters your blog then simply delete this *30 from the code above.Do let me know if you needed more help. Peace and blessings pals! :)
Few days ago, i posted about Glossy CSS
menu bar Tutorial, This is also same, with
different color, you can check it form
below link. If you want you can check my
earlier menu bar post by clicking 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 tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
10. Now save your HTML/Javascript'.
menu bar Tutorial, This is also same, with
different color, you can check it form
below link. If you want you can check my
earlier menu bar post by clicking 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 tag by using Ctrl+F ]]></b:skin>
6. Paste below code Before ]]></b:skin> tag
/* The CSS Code for the menu starts here */
.rhm1{
width:780px;
height:64px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQRUhf5DpCeLa2XOdSFwN68iHF1sYPBwuAcF2rYaveEGXEAksZxipUQhFpEiwSbAYDoQhMSDmGwg5JGrM7NQ9fVX-eBo8bN-XP0OoHNpR_xcizEnO8TNOixH6a64_0DyMCvWiXJdzxNVQ/s1600/rhm1_bg.gif) repeat-x;
}
.rhm1-left{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnTMpo-maBOEqXqMb1EiJlenmMsmT-FuNFzCvgV07Iy0vu8XMcNz_Xtwj7tNdSRwQ2qMTVg_eQ2fxS4nxOiP4a7LWbaPkUesOCwFS5k5zByj9Quho0HKp7k3hmRYBn3Vi6EcymTEELbOg/s1600/rhm1_l.gif) no-repeat;
width:15px;
height:64px;
float:left;
}
.rhm1-right{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_CsrkXCcL6bVzdSTa8MqqKht0rQN_YepiGG7_TOucoy1hhpvBagi6fPThU681vr4v-hFPzcTkMv1UCm51fkS8GwPZOFNqLfqA_5YK97Rul8yQiQizShJZVJvbjdRMowBzRbgn4RtUA0/s1600/rhm1_r.gif) no-repeat;
width:15px;
height:64px;
float:right;
}
.rhm1-bg{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQRUhf5DpCeLa2XOdSFwN68iHF1sYPBwuAcF2rYaveEGXEAksZxipUQhFpEiwSbAYDoQhMSDmGwg5JGrM7NQ9fVX-eBo8bN-XP0OoHNpR_xcizEnO8TNOixH6a64_0DyMCvWiXJdzxNVQ/s1600/rhm1_bg.gif) repeat-x;
height:64px;
}
.rhm1-bg ul{
list-style:none;
margin:0 auto;
}
.rhm1-bg li{
float:left;
list-style:none;
}
.rhm1-bg li a{
float:left;
display:block;
color:#ffe8cc;
text-decoration:none;
font:12px 'Lucida Sans', sans-serif;
font-weight:bold;
padding:0 0 0 18px;
height:64px;
line-height:40px;
text-align:center;
cursor:pointer;
}
.rhm1-bg li a span{
float:left;
display:block;
padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzJwEe8-mSn3DVAL0oivhyphenhyphenAOpqolMLF9_8c6ZRuXxnaqtoownaYRUdyb9c6LMzShdcl2KMggESbwdqswIWYjpyhfh-sF4JOahyz0v4CqFpouT5PSu0whuiq2eZIQhF4j_xsSot8f9bCT4/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEOspiSxouMYu7ZIOPZbaoIA1iRzJK_aYuoLb1iVpwA-wGPPaASxKGqcUhqvhfY2mMY2j5LLXbU5d8tQPzkmz7aHnjlMfmQeFKOMMGJYZon-8XLvjen65PfPfI64XXicO7_AwlKvv0_4/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzJwEe8-mSn3DVAL0oivhyphenhyphenAOpqolMLF9_8c6ZRuXxnaqtoownaYRUdyb9c6LMzShdcl2KMggESbwdqswIWYjpyhfh-sF4JOahyz0v4CqFpouT5PSu0whuiq2eZIQhF4j_xsSot8f9bCT4/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
color:#ffffff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEOspiSxouMYu7ZIOPZbaoIA1iRzJK_aYuoLb1iVpwA-wGPPaASxKGqcUhqvhfY2mMY2j5LLXbU5d8tQPzkmz7aHnjlMfmQeFKOMMGJYZon-8XLvjen65PfPfI64XXicO7_AwlKvv0_4/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Paste below code.
<!--bloggertrix.comMenuBar Starts-->
<div class="rhm1">
<div class="rhm1-right"></div>
<div class="rhm1-left"></div>
<div class="rhm1-bg">
<ul>
<li class="current"><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Products</span></a></li>
<li><a href="http://www.bloggertrix.com/"><span>Add This</span></a></li>
</ul>
</div>
</div>
10. Now save your HTML/Javascript'.
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.
This post also about CSS menu bar, Its
Include with nice lite blue hover color.
Im using CSS and HTML for this menu.
You can add this easily.Check below for
demo.you can get similar menu bar from
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.
Include with nice lite blue hover color.
Im using CSS and HTML for this menu.
You can add this easily.Check below for
demo.you can get similar menu bar from
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 */
#menu2{
width:90%;
margin:25px auto;
}
#menu2 ul{
list-style:none;
}
#menu2 li{
display:block;
float:left;
}
#menu2 li a{
background:#e4e8eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Re9JqoiHC1aKWeq-2Cru4r3UGXzREbaMu_xVMGizcYVvS4wJoYfHf0pAjZ_8qR8HxU56_FU4aTq7tKmn0v753qRexCsV9JBipOG_sRjkCyJ-Dhb2Ko9chYGqRV-C-YpdetGK1Z-GmuE/s1600/menu_bg.gif) repeat-x;
border:2px solid #bdc5cd;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 30px;
}
#menu2 li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu2 li a:hover{
background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzhm4iZGjYlB9uId7eqQ3U1mVIgrhknnlSJGt9S2ZUjVNuGL2YBwAmmZZVcj1Q1Fsm35BobH2qREVjaD6Ne5-T9OabttySbaKIJFpNPr2NBy3afUCR-h5xyiuyhuXfrxd09lc26bo2uvE/s1600/menu_hover.gif) repeat-x;
border:2px solid #4a88ce;
text-decoration:none;
}
#menu2 li a:hover span{
color:#636363;
}
.current{
background:#74befd url(images/menu_hover.gif) repeat-x;
border:2px solid #4a88ce;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 30px;
}
.current span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
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 id="menu2">
<ul>
<li class="current">Home<br />home page</li>
<li><a href="#">About Us<br />about us page</a></li>
<li><a href="#">Products<br />products page</a></li>
<li><a href="#">Partners<br />partners page</a></li>
<li><a href="http://www.bloggertrix.com/">Contact Us<br />contact page</a></li>
</ul>
</div>
*ReplaceURLs as your like.10. Now save "HTML/Javascript". You are done.
In this post, im going to explain how to add
amazing circle image hover effect with CSS.
Im using CSS and HTML for this. Atctually
this is very interesting, It make your blog
attractive, You can link it with special post.
I include demo For this. you can check it from
below link. Check my earlier post 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 your template. You are done.
amazing circle image hover effect with CSS.
Im using CSS and HTML for this. Atctually
this is very interesting, It make your blog
attractive, You can link it with special post.
I include demo For this. you can check it from
below link. Check my earlier post 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 */
.ch-item {
width: 150px;
height: 150px;
border-radius: 50%;
position: relative;
cursor: default;
-webkit-perspective: 900px;
-moz-perspective: 900px;
-o-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;}
.ch-info{
position: absolute;
width: 150px;
height: 150px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.ch-info > div {
display: block;
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transform-origin: 50% 0%;
-moz-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.ch-info .ch-info-front {
box-shadow: inset 0 0 0 6px rgba(0,0,0,0.3);
}
.ch-info .ch-info-back {
-webkit-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-moz-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-o-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
-ms-transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
.ch-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1H8gvW4Zt4tbDbbfjZxUtlh2AFIHObFm4pCg2dJ-kUGyfGYhYUGCi3j4Mq_YlmCtm9MMzzwZGrNTfYkpI5h6ZAjeuwUpn5Ww7uuc6vNODUOZI_dXKXSltlRecKDN6Ed6vnmOjgg26KLI/s1600/chip_cake.jpg);
}
.ch-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8ByAzkx4hDLzgu0Hr6tKyoMhw58L1YEGnixFLKcPAL-5kVAjIUQXLPrk3IKFbz24E81Eh8imesc-kXyH8qclU6ljIVhSJzWkmrtagE9UZ2bH7fo23YSRCsUJfVaJu2lnxmu6qfu_FEw/s1600/Blogger.png);
}
.ch-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgdvKswD4Wk1GHQY9oISNCjJFIVUn4potASP4WYyj7CabWCPgWSnqrxJwsDYMIoGtwxHpWlQb0mHvhJyCNor9F-LYC6HP4SM2SWslTsxXWmNEXZ-KDNUZUJpObLJUAGUtFjey7Gnyj7UU/s1600/photo-7.png);
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 24px;
margin: -10px 15px;
padding: 60px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: -95px; 30px;
font-size: 12px;}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;}
.ch-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);}
.ch-item:hover .ch-info-front {
-webkit-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;}
.ch-item:hover .ch-info-back {
-webkit-transform: rotate3d(1,0,0,0deg);
-moz-transform: rotate3d(1,0,0,0deg);
-o-transform: rotate3d(1,0,0,0deg);
-ms-transform: rotate3d(1,0,0,0deg);
transform: rotate3d(1,0,0,0deg);
opacity: 1;}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;}
.ch-grid:after {
clear: both;}
.ch-grid li {
width: 150px;
height: 150px;
display: inline-block;
margin: 4px;
}
*You can change image as your like im using 180x180 pixel7. 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.
<section class="main">*You can change the header according to image, and URL also.
<ul class="ch-grid">
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></div>
<div class="ch-info-back">
<h3>Cake</h3>
<p>by Bloggertrix <a href="http://bloggertrix.com/">View on Dribbble</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-2"></div>
<div class="ch-info-back">
<h3>Blog</h3>
<p>by Bloggertrix <a href="http://bloggertrix.com/">View on Dribbble</a></p>
</div>
</div>
</div>
</li>
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-3"></div>
<div class="ch-info-back">
<h3>Nature</h3>
<p>by Bloggertrix <a href="http://bloggertrix.com/">View on Dribbble</a></p>
</div>
</div>
</div>
</li>
</ul>
</section>
10. Now save your template. You are done.
Pop Up Email Subscription Form For Blogger is a blogger widget using jquery. In this widget the form is created by css3 with a auto check feature and the pop up is created using jQuery. We hope this form helps you to increase your blog readers. Now we can see how to Add The Add Pop Up Email Subscription Form For Your blog. Before that you need to see a live demo for better understanding what we are talking about.you can see the live demo by clicking the floating email icon on the left side of the demo page.
live demo:-Add Pop Up Email Subscription Form For Blogger
Adding jQuery plugin to the template:
As this widget based on jQuery plugin, First you need to have a jQuery Plugin in your Blog template.This Step is Required, If your Blog already have this plugin then Ignore this Step.
If your Blog Don’t have this Plugin, Install the jQuery Plugin.
- Add the below line of code before
</head>tag.<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Adding Widget Code to blogger
These steps are to add the Pop Up Email Subscription widget to your blog.- Go to Layout >> Add A Gadget, then choose HTML/JavaScript
- Paste this code inside it.<style type="text/css">
#subscribe-button { float: left; position: fixed; bottom: 5%; left: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:350px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif; font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png',sizingMethod='scale'); }
#btntfollowForm input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="http://2.bp.blogspot.com/-NASh-8VP8qs/T32ePzbJtSI/AAAAAAAAAr8/wjiJnIb7GD4/s1600/subscribe_to_email.png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<img alt="Subscribe" border="0" float="center" src="http://1.bp.blogspot.com/-WcR7_thytsA/T3xAvSp4RBI/AAAAAAAAArc/zIO8zUiOOT0/s1600/subscribeviaemail.PNG" />
<div id='description'>
<img alt="email" border="0" src="http://4.bp.blogspot.com/-RKkfCfOLNx8/T3wPtkmqYuI/AAAAAAAAArU/gGpb8_Hep70/s1600/email-icon.PNG" />Subscribe to our mailing list to get the updates to your email inbox...</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=chandeepsblogtips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="email" placeholder="Enter Your Email..." required="required" type="text" /><input name="uri" type="hidden" value="chandeepsblogtips" /><input name="loc" type="hidden" value="en_US" />
<div class="button">
<input type="submit" value="Subscribe" /></div>
</form>
</div>
<div class="btntFollowFooter">
Delivered by <a href="http://feedburner.google.com/" target="_blank">FeedBurner</a> | powered by <a href="http://www.blogtipsntricks.com/" rel="dofollow" target="_blank">blogtipsntricks</a></div>
</div>
<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
// Load dialog on page load
//$('#subscribe-widget').modal();
// Load dialog on click
$('#subscribe-button .subscribe').click(function (e) {
$('#subscribe-widget').modal();
return false;
});
});
</script> - Replace the code highlighted above with your feedburner username .
The username for your feed can be found at the end of your feed URL.For example our feedburner URL is http://feeds.feedburner.com/chandeepsblogtips , with chandeepsblogtips as the username.
- Now save the widget and view your blog. The widget trigger icon is placed in the left side of your blog.
How To Add Cool Jquery Featured Slider to Blogger/Websites
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=300px and height=618px images for your slides.
Look at the code below:
Now you are done.
1.Login to your blogger dashboard and go to Design --> Page Elements.
2.Click on 'Add a Gadget' on the sidebar.
3.Select 'HTML/Javascript' and add the one of code given below and click save.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGM-fuWdzuDuih-oDLPFNRH0H-pkxpAd_AVrPI7rAIVd16Sa0c1BGBIdigWjyVZV0_czsVD2rQmBiGfvbagFvFdvmUoovEeL2O6ioOxyDbeAb7miBDjYIg1Rqg4hupegFAf_wQ6rK91E/s400/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2OYXNglShotpcUJLQWtifvFl1wqxDmpReLL-3bK6lynpTSIbTAAxllR9bQ9CK4dicfpjnS5Vn8vMpmZzIk1haYPZNGkbBymeq52hVBVO_ldytxF8kSZ3ddIXWBE5D9qGRRRDXx5KJZU8/s400/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>
<div id="slider">
<a href="URL-of-Post 1"><img src="Slide-X-Image-Address 1" alt="" title="Slide X Description [...] 1" /></a>
<a href="URL-of-Post 2"><img src="Slide-X-Image-Address 2" alt="" title="Slide X Description [...] 2" /></a>
<a href="URL-of-Post 3"><img src="Slide-X-Image-Address 3" alt="" title="Slide X Description [...] 3" /></a>
<a href="URL-of-Post 4"><img src="Slide-X-Image-Address 4" alt="" title="Slide X Description [...] 4" /></a>
<a href="URL-of-Post 5"><img src="Slide-X-Image-Address 5" alt="" title="Slide X Description [...] 5" /></a>
</div>
<br/>
<br/>
Note : Replace URL-of-Post-X , Slide X Description [...] , Slide-X-Image-Address with your content.
Use width=300px and height=618px images for your slides.
Look at the code below:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
#slider {
position:relative;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFGM-fuWdzuDuih-oDLPFNRH0H-pkxpAd_AVrPI7rAIVd16Sa0c1BGBIdigWjyVZV0_czsVD2rQmBiGfvbagFvFdvmUoovEeL2O6ioOxyDbeAb7miBDjYIg1Rqg4hupegFAf_wQ6rK91E/s400/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2OYXNglShotpcUJLQWtifvFl1wqxDmpReLL-3bK6lynpTSIbTAAxllR9bQ9CK4dicfpjnS5Vn8vMpmZzIk1haYPZNGkbBymeq52hVBVO_ldytxF8kSZ3ddIXWBE5D9qGRRRDXx5KJZU8/s400/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
font-size:16px;
padding: 10px 0px;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
.clear {
clear:both;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}
.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
</style>
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCw5c0X6aqeilX2nNpF0IkR68SVDHDiZYNfY1t49O1BH8m7tS5FlTpLRaAbF52Vc6w2wGfhebFw81qwqn2YsHIUbQl31eoo0cZiC44I4KEsusj9kpVSHg4L8CWvpTxTRdfooJZCp0vaYR/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQa1ZsjEmMaDJ66FItBwWt-R6DKN7JhiKptIgy6KMimPY2KtH6DeeKyuHLK-1EhqqEHJJusKjtw5P_aF2ckVs9usCfalhYG5yX-IjU1GqvhyRkqScwXJlj_T0nIFUJqA0uw7Ut1szi9BIO/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB_mfO9Co5aMtpALd20uf3sPnAKSmxY831GkIerxwHAgDncjN7oUM3VNn3-7gXwTJbm2EXfwp0zHSUWEqJ9PjxgODbIu1clUAznVyIFyoFaqH2QAvEnlB9TPejXOtF_3aFpNXtZ07zTeP1/s800/Christmas_Cat.gif" alt="" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho-2Kq3h9xYvrFQmXP2VmVggR5WG8PZkjz993ybNzRPSFnotmTnhKPIRmfbPIg9BcbOeokD5Zsup85okcOFJH8imQc0OwVC5ostRzMwpRoLprWClW1u-Mt3gd6J7tYg4eAVW4rcPHfZa-D/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYLXvWejGgD35esk2xPU-7GBMQNB-2tiPGI5q-Ju01LqL3Mw3qcHpBiEVTZQXsIEK5mbSWjGAyMks5535zPX9aYQkV3SGAtU1-IHOHbYdVUhHwb06wGaYl00OoJTkzYP26-bDWaloMaYax/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" />
</div>
<br/>
<br/>
Now you are done.
Freindly sites
Latest Blogger Tips
Follow me Facebook
Blog Statistics
Twitter