Monday, March 31, 2014
Friday, March 21, 2014
HOW TO ADD STYLISH FLOATING FACEBOOK LIKE BOX WIDGET IN BLOGGER
HOW TO ADD STYLISH FLOATING FACEBOOK LIKE BOX WIDGET IN BLOGGER
Today we will learn how to add facebook like box to blogger blog with a distinctive view, wonderful and attractive format, where the facebook like box is hidden on the right side of the screen and shows only the passage of the cursor on it. to add this widget to your blog,follow these two simple steps:
STEP 1
1. Go to Blogger Dashboard --> Template
2. Please! download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl+F to find </head>
5. Then copy and paste just above/before it, this code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
6. Save your template.
STEP 2
1. Now go to Layout--> click on "Add a gadget".
2. Select "html/java script" and add the code given below and click save.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCMMNP-OJ1J-lFAiY_bvNMiXAfZ4mkzpZzFr1MpfB1G8bocDSoimtZb9cdAFV-gcYFlkhmNH6hxEfNVpTAg8YvUOnld2hpsVaiMzMho8y4V_t5RyjOWDxnM6_G2QrIdhJzevaOntFgE4/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fadslooks&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.adslooks.blogspot.com"> adslooks</a></span> </div> </div>
Note: Replace adslooks with your facebook page URL or user name.
Now you can see the result and be happy. :-)
POWERD BY ADSLOOKS
Today we will learn how to add facebook like box to blogger blog with a distinctive view, wonderful and attractive format, where the facebook like box is hidden on the right side of the screen and shows only the passage of the cursor on it. to add this widget to your blog,follow these two simple steps:
STEP 1
1. Go to Blogger Dashboard --> Template
2. Please! download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl+F to find </head>
5. Then copy and paste just above/before it, this code:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
6. Save your template.
STEP 2
1. Now go to Layout--> click on "Add a gadget".
2. Select "html/java script" and add the code given below and click save.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcCMMNP-OJ1J-lFAiY_bvNMiXAfZ4mkzpZzFr1MpfB1G8bocDSoimtZb9cdAFV-gcYFlkhmNH6hxEfNVpTAg8YvUOnld2hpsVaiMzMho8y4V_t5RyjOWDxnM6_G2QrIdhJzevaOntFgE4/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fadslooks&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://www.adslooks.blogspot.com"> adslooks</a></span> </div> </div>
Note: Replace adslooks with your facebook page URL or user name.
Now you can see the result and be happy. :-)
POWERD BY ADSLOOKS
HOW TO ADD ADSENSE ADS INSIDE BLOGGER BLOG POSTS OR BETWEEN BLOG POSTS UPDATED APRIL 2014
HOW TO ADD ADSENSE ADS INSIDE BLOGGER BLOG POSTS OR BETWEEN BLOG POSTS
1. Sign in to your blogger dashboard>Template>Edit html
Check the box next to 'Expand Widget Templates'
2. Scroll down the window till you see this code
<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>
3. Replace that code in the template with the below code
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
4. Again,scroll down the template and find out data-post body tag and paste the below code just above that code{this will show ads above the post body.If you want ads to show below the post,paste the code below that tag.
Here is the code to paste:-
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
That's it!
How to place adsense ads between Blog posts:
1. Sign in to your blogger dashboard>click on the layout link
2. Click on the Edit link in the "Blog Posts' column
..............a pop up window opens..........
3. Check the box next to 'Show ads between Posts'
next,configure the ads,choose the format,colours,etc and SAVE THE CHANGES.
That's it! Now your adsense ads will show between blog posts.
1. Sign in to your blogger dashboard>Template>Edit html
Check the box next to 'Expand Widget Templates'
2. Scroll down the window till you see this code
<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>
3. Replace that code in the template with the below code
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
4. Again,scroll down the template and find out data-post body tag and paste the below code just above that code{this will show ads above the post body.If you want ads to show below the post,paste the code below that tag.
Here is the code to paste:-
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
That's it!
How to place adsense ads between Blog posts:
1. Sign in to your blogger dashboard>click on the layout link
2. Click on the Edit link in the "Blog Posts' column
..............a pop up window opens..........
3. Check the box next to 'Show ads between Posts'
next,configure the ads,choose the format,colours,etc and SAVE THE CHANGES.
That's it! Now your adsense ads will show between blog posts.
HOW TO MADE A "SCROLL TO TOP" BUTTON TO BLOGGER
HOW TO CREATE "SCROLL TO TOP" BUTTON TO BLOGGER
How To Create "Scroll to Top" Button To Blogger?
1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Find below code in your template
]]></b:skin>
6. Now add below CSS code before ]]></b:skin> tag .
/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
7. Now add below code before </body> tag:
<A HREF="#" ID="TOTOP">^ SCROLL TO TOP</A>
<SCRIPT SRC='HTTP://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/1.3.2/JQUERY.MIN.JS' TYPE='TEXT/JAVASCRIPT'></SCRIPT>
<SCRIPT TYPE='TEXT/JAVASCRIPT'>
/*-----------------------
* JQUERY PLUGIN: SCROLL TO TOP
* BY CRAIG WILSON, PH.CREATIVE (HTTP://WWW.PH-CREATIVE.COM)
* BRING TO YOU BY ZEN FROM HTTP://ZENPLATE.BLOGSPOT.COM
* COPYRIGHT (C) 2009 PH.CREATIVE LTD.
* DESCRIPTION: ADDS AN UNOBTRUSIVE "SCROLL TO TOP" LINK TO YOUR PAGE WITH SMOOTH SCROLLING.
* FOR USAGE INSTRUCTIONS AND VERSION UPDATES TO GO HTTP://BLOG.PH-CREATIVE.COM/POST/JQUERY-PLUGIN-SCROLL-TO-TOP.ASPX
* DO NOT DELETE THESE INFOMATION
* VERSION: 1.0, 12/03/2009
-----------------------*/
$(FUNCTION(){$.FN.SCROLLTOTOP=FUNCTION(){$(THIS).HIDE().REMOVEATTR("HREF");IF($(WINDOW).SCROLLTOP()!="0"){$(THIS).FADEIN("SLOW")}VAR SCROLLDIV=$(THIS);$(WINDOW).SCROLL(FUNCTION(){IF($(WINDOW).SCROLLTOP()=="0"){$(SCROLLDIV).FADEOUT("SLOW")}ELSE{$(SCROLLDIV).FADEIN("SLOW")}});$(THIS).CLICK(FUNCTION(){$("HTML, BODY").ANIMATE({SCROLLTOP:0},"SLOW")})}});
$(FUNCTION() {
$("#TOTOP").SCROLLTOTOP();
});
</SCRIPT>
8. Save your template and you are done!
HOW DESABLE COPYING TEXT FROM YOUR BLOG AND WEBSITE
HOW DESABLE COPYING TEXT FROM YOUR BLOG?
Exclusive content is usually under the eyes of thieves, who steal these posts and articles without permission or even the source said, so I've written this post to stop this process.
1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl + F to find <head> and paste the following code after it.
<!--- www.adslooks.blogspot.com Disable Copy and Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
5. Save template.
That is it!!
Exclusive content is usually under the eyes of thieves, who steal these posts and articles without permission or even the source said, so I've written this post to stop this process.
1. Go to Blogger Dashboard > Template
2. Download a copy of your template
3. Now click on Edit HTML
4. Use Ctrl + F to find <head> and paste the following code after it.
<!--- www.adslooks.blogspot.com Disable Copy and Paste-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
5. Save template.
That is it!!
ADD CSS3 BRICKS/BOX STYLE LABELS FOR BLOGGER
ADD CSS3 BRICKS/BOX STYLE LABELS TO BLOGGER
How To Customize Blogger Labels With CSS3?
First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.
1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Find for this tag in your template ]]></b:skin>
7. add below CSS code just above it,
How To Customize Blogger Labels With CSS3?
First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.
1. Now go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click on Edit HTML
4. Hit Proceed button
5. Check Expand Widget Templates checkbox
6. Find for this tag in your template ]]></b:skin>
7. add below CSS code just above it,
#textwidget {
color: #666;
font-size: 0.925em;
font-style: italic;
line-height: 1.6em
}
a.tag {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background: #f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
border: solid 1px #ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none
}
a.tag:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
a.tag:active {
color: #000;
border-color: #444
}
.slides {
font-size: 85%;
line-height: 130%;
overflow: hidden;
padding: 0;
margin: 30px 0 10px;
border-bottom: 1px solid #000
}
Recent Comments Widget For Blogger
Recent Comments Widget For Blogger
The Recent Comments Widget for Blogger displays the recent blog comments on your blog's sidebar, showing a snippet of the last comments along with the title of the post to which the comment was made and the list will be gathered in descending order (newest at the top).
This gadget is coded in Javascript and styled with CSS but I didn't add too much style to it, so that it could fit the colour scheme of your blogger template.
Parameters which can be configured:
Number of comments: total number of comments to display
Date on which the comment has been published: either display or hide it
Posts on which a comment has been made: you can either hide the post titles or show them
Number of words per comment excerpt: The first "n'' words of the comment will be listed
To add the Recent Comment Widget to your Blogger blog is very easy. Just follow the next steps below:
How To Add Recent Comments Widget to Blogger
Step 1. Login to your Blogger Dashboard, select your blog - go to Layout and click the Add a Gadget link
Step 2. From the pop-up window, scroll down and choose the HTML/JavaScript option:
Step 3. Copy and paste the below code in the HTML/JavaScript box:
<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
Step 4. Obviously, you need to replace http://your-blog-name.blogspot.com/ with your blog address.
Other settings:
- To change the number of comments that are being displayed, replace the "5" value from a_rc=5
- If you want to add the date on which the comment has been made, then change the "false" statement from m_rc=false to "true"
- If you want to hide the post titles, then change the "true" statement from n_rc=true to "false"
- And finally, to show more or less comment characters, change the "100" value from o_rc=100
Step 5. Click Save and you're done.
Hope you'll enjoy it!
Powerd by ADSLOOKS
The Recent Comments Widget for Blogger displays the recent blog comments on your blog's sidebar, showing a snippet of the last comments along with the title of the post to which the comment was made and the list will be gathered in descending order (newest at the top).
This gadget is coded in Javascript and styled with CSS but I didn't add too much style to it, so that it could fit the colour scheme of your blogger template.
Parameters which can be configured:
Number of comments: total number of comments to display
Date on which the comment has been published: either display or hide it
Posts on which a comment has been made: you can either hide the post titles or show them
Number of words per comment excerpt: The first "n'' words of the comment will be listed
To add the Recent Comment Widget to your Blogger blog is very easy. Just follow the next steps below:
How To Add Recent Comments Widget to Blogger
Step 1. Login to your Blogger Dashboard, select your blog - go to Layout and click the Add a Gadget link
Step 2. From the pop-up window, scroll down and choose the HTML/JavaScript option:
Step 3. Copy and paste the below code in the HTML/JavaScript box:
<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>
Step 4. Obviously, you need to replace http://your-blog-name.blogspot.com/ with your blog address.
Other settings:
- To change the number of comments that are being displayed, replace the "5" value from a_rc=5
- If you want to add the date on which the comment has been made, then change the "false" statement from m_rc=false to "true"
- If you want to hide the post titles, then change the "true" statement from n_rc=true to "false"
- And finally, to show more or less comment characters, change the "100" value from o_rc=100
Step 5. Click Save and you're done.
Hope you'll enjoy it!
Powerd by ADSLOOKS
Subscribe to:
Posts (Atom)