All Stories
Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Wednesday, 17 July 2013

Why do we need to change looking of our widget like popular post and others because every want to our blog looking better than others so i am hard working for your help and i share with you widget and plugins now i am sharing with you popular post rotation hover .


See demo
1. Login to blogger.com.
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin> 
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save. 

Remember you should always have a back up to your template.

#PopularPosts1 {    max-width: 300px}

#PopularPosts1 dd {    float: left;    border-bottom: none;    margin: 8px 8px 0 8px;    background: none;    display: block;    padding: 0}

#PopularPosts1 img {    -webkit-transition: all 0.5s ease;    -moz-transition: all 0.5s ease;    transition: all 0.5s ease;    padding: 4px;    background: #eee;    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);    box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover {    -moz-transform: scale(1.2) rotate(-350deg);    -webkit-transform: scale(1.2) rotate(-350deg);    -o-transform: scale(1.2) rotate(-350deg);    -ms-transform: scale(1.2) rotate(-350deg);    transform: scale(1.2) rotate(-350deg);    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Now save and enjoy must share this post or like .see our previous post about images rotation.

How To Make Popular Post Images Spining Rotate In Blogger

Why do we need to change looking of our widget like popular post and others because every want to our blog looking better than others so i am hard working for your help and i share with you widget and plugins now i am sharing with you popular post rotation hover .


See demo
1. Login to blogger.com.
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin> 
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save. 

Remember you should always have a back up to your template.

#PopularPosts1 {    max-width: 300px}

#PopularPosts1 dd {    float: left;    border-bottom: none;    margin: 8px 8px 0 8px;    background: none;    display: block;    padding: 0}

#PopularPosts1 img {    -webkit-transition: all 0.5s ease;    -moz-transition: all 0.5s ease;    transition: all 0.5s ease;    padding: 4px;    background: #eee;    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);    box-shadow: 0 0 3px rgba(0,0,0,.7);}

#PopularPosts1 img:hover {    -moz-transform: scale(1.2) rotate(-350deg);    -webkit-transform: scale(1.2) rotate(-350deg);    -o-transform: scale(1.2) rotate(-350deg);    -ms-transform: scale(1.2) rotate(-350deg);    transform: scale(1.2) rotate(-350deg);    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Now save and enjoy must share this post or like .see our previous post about images rotation.

Posted at 03:47 |  by Rashid Minhaj
This is my first post about image rotation do you know CSS code yes it is very help full or compatible  with all browser .Transformation is powerful feature of css its depend on Scaling, Translation, and Rotation.It is a pure code which is i explained today with you.I know you are thinking about demo of this code.
click below for see demo
1. Login to blogger.com.
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin>
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save.


Remember you should always have a back up to your template.
.rotate img{
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotate img:hover{
-moz-transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
transform: rotate(350deg);
}

How it will be effect in blogger post see now. You need to some changes in your post HTML.
Go to your post HTML find below code.


<img border="0" src="http://2.bp.blogspot.com/-5mUB1e6RgvE/UeY6DXn6mnI/AAAAAAAAAdk/0ys6j9S0LOQ/s1600/demo1.jpg" /></a></div>

Add some code before this URL with End Tags.


<div class="rotate"> <img border="0" src="http://2.bp.blogspot.com/-5mUB1e6RgvE/UeY6DXn6mnI/AAAAAAAAAdk/0ys6j9S0LOQ/s1600/demo1.jpg" /></div></a></div>


NOTE :
In the above CSS code 350 deg specifies the degree of rotation you can change this value according to your own choice.

Almost done and look you site post drag mouse over in your images and play and must share this post .

How To Add Image Rotation Or Spinning Effect To Blogger

This is my first post about image rotation do you know CSS code yes it is very help full or compatible  with all browser .Transformation is powerful feature of css its depend on Scaling, Translation, and Rotation.It is a pure code which is i explained today with you.I know you are thinking about demo of this code.
click below for see demo
1. Login to blogger.com.
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin>
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save.


Remember you should always have a back up to your template.
.rotate img{
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotate img:hover{
-moz-transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
transform: rotate(350deg);
}

How it will be effect in blogger post see now. You need to some changes in your post HTML.
Go to your post HTML find below code.


<img border="0" src="http://2.bp.blogspot.com/-5mUB1e6RgvE/UeY6DXn6mnI/AAAAAAAAAdk/0ys6j9S0LOQ/s1600/demo1.jpg" /></a></div>

Add some code before this URL with End Tags.


<div class="rotate"> <img border="0" src="http://2.bp.blogspot.com/-5mUB1e6RgvE/UeY6DXn6mnI/AAAAAAAAAdk/0ys6j9S0LOQ/s1600/demo1.jpg" /></div></a></div>


NOTE :
In the above CSS code 350 deg specifies the degree of rotation you can change this value according to your own choice.

Almost done and look you site post drag mouse over in your images and play and must share this post .

Posted at 02:02 |  by Rashid Minhaj

Monday, 15 July 2013

Many friends asked me how to put facebook fan box in blogger or any site so not to to worry i am sharing you today how can you install it on your blog or site.Go to facebook developer.Now follow simple steps.


Step 1.
Facebook page URL copy your and paste in box.
Step 2.
Width chose as you want.
Step 3.
Height will be default.
Step 4.
Show face tick there if you dont want to show face un tick box.
Step 5.
Here is two option Light and Dark click on box and chose any one what you want.
Step 6.
Stream if you want to see your post stream in box so tick other if dont want then un tick.
Step 7.
Show border   if you want then tick or dont want border out side of box un tick.
Step 8.
Show header it will show find us on facebook on top of the box if you dont un tick.
Then final click on GET CODE.Now new window will pop up see bellow.

Top of the 4 option chose IFRAME and copy code.
Then go to Layout >>Add a Gadget / HTML Java script>> paste that code in box and save.Done.

If you have any problem  about this post put question bellow comments box .

Put Facebook Fan Page On Blogger Or Site.

Many friends asked me how to put facebook fan box in blogger or any site so not to to worry i am sharing you today how can you install it on your blog or site.Go to facebook developer.Now follow simple steps.


Step 1.
Facebook page URL copy your and paste in box.
Step 2.
Width chose as you want.
Step 3.
Height will be default.
Step 4.
Show face tick there if you dont want to show face un tick box.
Step 5.
Here is two option Light and Dark click on box and chose any one what you want.
Step 6.
Stream if you want to see your post stream in box so tick other if dont want then un tick.
Step 7.
Show border   if you want then tick or dont want border out side of box un tick.
Step 8.
Show header it will show find us on facebook on top of the box if you dont un tick.
Then final click on GET CODE.Now new window will pop up see bellow.

Top of the 4 option chose IFRAME and copy code.
Then go to Layout >>Add a Gadget / HTML Java script>> paste that code in box and save.Done.

If you have any problem  about this post put question bellow comments box .

Posted at 08:31 |  by Rashid Minhaj
Social Widget is common thing if you place like this it attractive and looking professional when visitor will see it must click on it to see what is there in side of this so main thing i design it on HTML so it is easy to install any one can install it. 

Step 1

Go To Blogger Layout.
Add HTML/Java Widget.
And Paste Below Code In It.


<center><a href="https://www.facebook.com/insuranceandeducation" target='blank'><img border='1' src="http://3.bp.blogspot.com/-3PFhI6gu7rg/UePe00WtR7I/AAAAAAAAAGk/Tg_loeM6A_U/s1600/fb.jpg" /></a><a href="https://twitter.com/rashidminhaj" target='blank'><img border='1' src="http://4.bp.blogspot.com/-tjIxwrEHvco/UePe1otvDnI/AAAAAAAAAGg/0-pajBj_seQ/s1600/twitter.jpg" /></a>
    <a href="https://plus.google.com/googleid" target='blank'><img border='1' src="http://2.bp.blogspot.com/-YD3y3Cd9wc0/UePe00YpY6I/AAAAAAAAAGQ/FZWzImq5gfk/s1600/g+.jpg" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=edurashid" target='blank'><img border='1' src="http://1.bp.blogspot.com/-caKYYSrplek/UePe0-vHv6I/AAAAAAAAAGU/3NnCu-E2tow/s1600/rss.jpg" /></a></center><center><a href='http://edurashid.blogspot.com/2013/07/beautiful-social-sites-sharing-widget.html' target='blank'>Get This Widget<a/><center>


You need to change following id,s.
If you want to add your Facebook Page replace it insuranceandeducation
If you want to add your Twitter Username replace it rashidminhaj
If you want to add your Google+ Id replace it googleid
If you want to add your FeedBurner Id replace it edurashid

Note:
If you find any problem regarding'Beautiful Social Sites Sharing Widget'then feel free to comment below.

Beautiful Social Sites Sharing Widget

Social Widget is common thing if you place like this it attractive and looking professional when visitor will see it must click on it to see what is there in side of this so main thing i design it on HTML so it is easy to install any one can install it. 

Step 1

Go To Blogger Layout.
Add HTML/Java Widget.
And Paste Below Code In It.


<center><a href="https://www.facebook.com/insuranceandeducation" target='blank'><img border='1' src="http://3.bp.blogspot.com/-3PFhI6gu7rg/UePe00WtR7I/AAAAAAAAAGk/Tg_loeM6A_U/s1600/fb.jpg" /></a><a href="https://twitter.com/rashidminhaj" target='blank'><img border='1' src="http://4.bp.blogspot.com/-tjIxwrEHvco/UePe1otvDnI/AAAAAAAAAGg/0-pajBj_seQ/s1600/twitter.jpg" /></a>
    <a href="https://plus.google.com/googleid" target='blank'><img border='1' src="http://2.bp.blogspot.com/-YD3y3Cd9wc0/UePe00YpY6I/AAAAAAAAAGQ/FZWzImq5gfk/s1600/g+.jpg" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=edurashid" target='blank'><img border='1' src="http://1.bp.blogspot.com/-caKYYSrplek/UePe0-vHv6I/AAAAAAAAAGU/3NnCu-E2tow/s1600/rss.jpg" /></a></center><center><a href='http://edurashid.blogspot.com/2013/07/beautiful-social-sites-sharing-widget.html' target='blank'>Get This Widget<a/><center>


You need to change following id,s.
If you want to add your Facebook Page replace it insuranceandeducation
If you want to add your Twitter Username replace it rashidminhaj
If you want to add your Google+ Id replace it googleid
If you want to add your FeedBurner Id replace it edurashid

Note:
If you find any problem regarding'Beautiful Social Sites Sharing Widget'then feel free to comment below.

Posted at 05:58 |  by Rashid Minhaj

Sunday, 14 July 2013

I am sharing you  today how to add comment box in blogger and any site via HTML gadget.Its another interesting gadget let suppose some people dont comments in your comments box so it will new for visitor when they will see facebook comments box must they will put some comments so follow my instruction and first see demo pic.


Now go to to facebook developers .
Then put your url , chose width and number of post what you want then hit get code.


Now after get code one window will appear like below .


There will be two code box just copy first code from the above then go Blogger Dashborad >>Template>>HTML now find <body> tag and paste above 1st one code after <body>.Next look another 2nd code and copy that and go to <<add a gadget>>add HTML JavaScript box and paste that 2nd code and drag and drop this gadget where you want to place .

 If you like this post must share or comments and need any help feel free ask question bellow i love to help other and also love to teach some thing new ...

Add Facebook Comments Box In Blogger And Any Site.

I am sharing you  today how to add comment box in blogger and any site via HTML gadget.Its another interesting gadget let suppose some people dont comments in your comments box so it will new for visitor when they will see facebook comments box must they will put some comments so follow my instruction and first see demo pic.


Now go to to facebook developers .
Then put your url , chose width and number of post what you want then hit get code.


Now after get code one window will appear like below .


There will be two code box just copy first code from the above then go Blogger Dashborad >>Template>>HTML now find <body> tag and paste above 1st one code after <body>.Next look another 2nd code and copy that and go to <<add a gadget>>add HTML JavaScript box and paste that 2nd code and drag and drop this gadget where you want to place .

 If you like this post must share or comments and need any help feel free ask question bellow i love to help other and also love to teach some thing new ...

Posted at 05:21 |  by Rashid Minhaj

Saturday, 13 July 2013

Html-CSS-Javascript code you can post with out back ground as plan text but its look better then that because your visitor when will see and will be know back grounded color is all coding. i know you wanna see live demo of  how will look after this coding apply see below screen shot.


Now got to blogger dashboard>>>>>Edit HTML>>>>>>>>>>
Now find this below code.

<b:skin>

A now expand  above code to click on left side  small arrow .
Now Find .

]]></b:skin>

Now copy below all codes and past it above which you find skin code after expand .

.post blockquote {
background: #C8EFFF url(https://lh4.googleusercontent.com/-A-bHiDpJJDQ/UOUZM15D_OI/AAAAAAAAAhQ/DfDswKeB_Kc/w497-h373/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

You can change background colour just replace background color code with yours. If it is Useful or helpful  for you then it will be others so dont hesitate to share and like and comments . or need any help from me most welcome any time just leave your comments or add me on facebook.

How TO Add HTML-CSS-Javascript Codes in Blogger Post As Plain Text

Html-CSS-Javascript code you can post with out back ground as plan text but its look better then that because your visitor when will see and will be know back grounded color is all coding. i know you wanna see live demo of  how will look after this coding apply see below screen shot.


Now got to blogger dashboard>>>>>Edit HTML>>>>>>>>>>
Now find this below code.

<b:skin>

A now expand  above code to click on left side  small arrow .
Now Find .

]]></b:skin>

Now copy below all codes and past it above which you find skin code after expand .

.post blockquote {
background: #C8EFFF url(https://lh4.googleusercontent.com/-A-bHiDpJJDQ/UOUZM15D_OI/AAAAAAAAAhQ/DfDswKeB_Kc/w497-h373/1.png);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 2px solid #DDD;
border-right: 5px solid #666;
border-left: 2px solid #DDD;
border-bottom: 5px solid #666;
font-size: 0.9em;
}
.post blockquote p {
margin: 0;
padding: 0 0 15px;
}
.blockquote {
font: 18px normal  sans-serif,Tahoma;
padding-top: 10px;
margin: 5px;
text-indent: 65px;
}
.blockquote div {
display: block;
padding-bottom:10px;
}
.blockquote p {
margin: 0;
padding-top:10px;
}

You can change background colour just replace background color code with yours. If it is Useful or helpful  for you then it will be others so dont hesitate to share and like and comments . or need any help from me most welcome any time just leave your comments or add me on facebook.

Posted at 23:55 |  by Rashid Minhaj

Wednesday, 10 July 2013

facebook-like-box-pop-up-one-time-widget

This widget pops up a jQuery window containing Facebook like box when new visitor arrives.That is a magic of jQuery, how ever, that didn't work in some third party blogger templates. Therefore, i saw many my friends worrying about the codes not working so i am sharing  today a very simple and more attractive pop like box which will be only used if you want to increase your Facebook likes rapidly.It will appear one time and visitor will come after 30 days or visitor will delete cookies then it will pop before 30 days. I have set the cookie refresh time to 30 days, which means that this popup box 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 go to the one step installation process.

Now got to blogger>>>>>Layout>>>>>Then ''Add  Gadget>>>>>(''Html,Javascript'')

Now copy below code.

<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://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-jMjssBv0t1Q/UQejbimsNeI/AAAAAAAACG4/jAGaEw2fzMs/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh4.googleusercontent.com/-bpGBUwdDCxY/UQej05KBhOI/AAAAAAAACHQ/iBcR1hU4K3E/h120/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://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.pngno-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: #3B5998;
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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://supportivehandsjs.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" align="center">Receive all updates via Facebook. Just Click the Like Button Below<p style="line-height:3px;" >?</p></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fapnakarachiha&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:330px;" allowtransparency="true"></iframe>
</center>
</div>
</div>

Now change page name with your which is highlighted yellow color done now .
If you like this post must share and comments bellow thanks.

Facebook Like Box Pop Up One Time Widget

facebook-like-box-pop-up-one-time-widget

This widget pops up a jQuery window containing Facebook like box when new visitor arrives.That is a magic of jQuery, how ever, that didn't work in some third party blogger templates. Therefore, i saw many my friends worrying about the codes not working so i am sharing  today a very simple and more attractive pop like box which will be only used if you want to increase your Facebook likes rapidly.It will appear one time and visitor will come after 30 days or visitor will delete cookies then it will pop before 30 days. I have set the cookie refresh time to 30 days, which means that this popup box 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 go to the one step installation process.

Now got to blogger>>>>>Layout>>>>>Then ''Add  Gadget>>>>>(''Html,Javascript'')

Now copy below code.

<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://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://lh4.googleusercontent.com/--FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://lh4.googleusercontent.com/--FBCRU4vJA8/UQeigKTEAwI/AAAAAAAACGU/iF6HNU1Nga8/h120/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://lh6.googleusercontent.com/-jMjssBv0t1Q/UQejbimsNeI/AAAAAAAACG4/jAGaEw2fzMs/h120/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://lh4.googleusercontent.com/-bpGBUwdDCxY/UQej05KBhOI/AAAAAAAACHQ/iBcR1hU4K3E/h120/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://lh4.googleusercontent.com/-ZLgkBWQnMbE/UQeWwl6CSFI/AAAAAAAACFs/YwFjD4OA5dQ/h120/controls.pngno-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: #3B5998;
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='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://supportivehandsjs.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" align="center">Receive all updates via Facebook. Just Click the Like Button Below<p style="line-height:3px;" >?</p></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fapnakarachiha&amp;width=350&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:330px;" allowtransparency="true"></iframe>
</center>
</div>
</div>

Now change page name with your which is highlighted yellow color done now .
If you like this post must share and comments bellow thanks.

Posted at 02:47 |  by Rashid Minhaj

About the Author



Rashid Minhaj is a B.Tech Holder in Electronics, He loves to making Blogging and Seo who is working online for last 7 years,he mostly creates blogs, he is managing several blogs.

Comments

Blog Archive

© 2013 BLOGGER TRICKS All rights reserved
back to top