Showing posts with label Blogger Tricks. Show all posts

Facebook Like Box with Hover Effect for Blogger

►
Before explaining this tutorial i would like to say thanks to all our readers for your support and contributions since last 2 years, Thanks also to everyone who has helped this blog in other ways, with suggestions, technical support, information and many other things. Now come up to tutorial, In our previous post we will teach you about how to add Facebook like box into blogger blog and today now we are sharing another 2 Facebook Subscription widget for blogger or website.  Here I have added as the box with simple jQuery hover effect. Lets see below tutorial to add them into your blog or website.

Facebook Like Box with jQuery Hover Effect

Adding Static Facebook Pop Out Like Box Widget To Blogger layout...Now let's start adding it. Just follow below producer.


  1. Login to your Blogger Account.
  2. Click Layout > Add A Gadget.
  3. Select HTML/Javascript
  4. Then Paste The Following Code In content Box from one of code given below.

(Style I) Static Facebook Pop Out Like Box with Hover Effect

 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false) .animate({ right: -200 }, 500); });
});
</script> <br /> <div id="on"> <a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="Indian Education Blog"><img src="http://img1.blogblog.com/img/blank.gif" alt="Indian Education Blog" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC4cqzWm_munWaNSCaLbz20bebIaIDu9FscvTToLsHzeMJNCEHY6p42CkRXxtQvYP5Iuh1f-6McyTAr2h1gwpHYAaKB032e-Bc12T_aB0IzqdEiNeWcFgOa-OtcVDncNmmw-CPaKgrXO6p/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/ThingsGuide/281417998619583&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div></div>

Before adding these code please replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.

(Style II) Facebook Stylish Popup Widget with Lightbox Effect

 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<style type="text/css">
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9bRlu0MrzbvTi08gOtkp0nphhgOEu2bsuEd9BOKsxO_9JoYvOqOglqVYBmMgq4PyrM1KTxtRfnpXl-u4DqRCK7gBAGlBZ0sfdXZNVf8hK-Dc1t3DGawZvS004Rg2by9z8WdtQLHhZQYF_/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style> <script type="text/javascript"> //<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
//]]> </script><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://things-guide.blogspot.com/" rel="dofollow" target="_blank" title="ThingsGuide"><img src="http://img1.blogblog.com/img/blank.gif" alt="ThingsGuide" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a> <script type="text/javascript"> jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(100).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
</center>
</div>
</div>

Before adding these code please replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.

Customization: These widget only shows up the first time the user visits your page. If you would like the Facebook box to popup everytime the page loads, then remove this line of code:

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

If you are facing any error during adding above widgets into your blog or website then please leave your comment below, we will catch you back as soon as possible.
Posted by Unknown
665 Comments
Tag : ,

Stop Your Image Stealing Using Jquery

►
Consider, you are working hard in creating images for your webpage and someone just copy and paste on their webpage without any credit or appreciation, then how would you like to feel? In today's post, here is a important trick for every blogger or webmaster to stop your Image stealing. You just have to put a little piece of code in your template which will prevent users to copy Images from your web page.

Stop Your Image Stealing Using Jquery

How To Stop Your Image Stealing ?


  • Go to Your Blogger Dashboard > Template > Edit HTML.
  • Take a backup of your template.
  • Now find for <head> in your template
  • Add below code just above/before <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Note - If your blog have already a jquery plugin then ignore this step.

  • Now again find </head>
  • And add below code just above/before </head>
<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSs99ysC5QivdXS4wMIdmGcPANfDKWGiDmPDLij4YG3mI4k-FerMG31yb6VjhTX1rLSTHFQ2MnRvMjzDvm8wXkwg3Ql2y7fIu8UEBfGgcnE4KUlVWVempW7qTSxAws6daIcHhI18fQqq6C/s1600/Stealing-Detected.png" alt="Things-Guide Stealing Detected" style="margin-left: -212px; opacity: 0; position: relative; top: 0;" />");
});
//]]>
</script>

I hope this small trick will surely help you to prevent your Images from republishing on other websites.
Posted by Unknown
407 Comments
Tag : ,

How to Embed PDF, DOC, XLS Files Into Blogger

►
Hello friends, Due to my exam i was unable to post a single post, So I'm really sorry for this. In today's post I will tell you how you can embed PDF, DOC, or XLS files into blogger blog. This post is also described How to show PDF, DOC or XLS files on blogger without using third party or services. Blogger is a free blogging platform by Google and there are some limits, you cannot upload pdf, doc, xls files directly. So before we used third party websites or hosting services to embed these files. But now you don't need to go to third party websites, you can embed  your PDF, DOC or XLS files using Google Drive, Google drive is a free cloud storage service by Google. So, without wasting a time let's come to the tutorial.



How to Embed PDF, DOC, XLS Files Into Blogger post

How to Show PDF, DOC, XLS files on Blogger 


  • At first, Go to the drive.google.com and login with your existing account or create a new one.
  • Now upload your PDF, DOC or XLS file, After upload completed click on the uploaded file link. It opens in new tab


  • In the new tab click on share and change the properties of sharing 'Private' to 'Public' or 'Anyone with the link'.


  • Now, go to File > Embed (this PDF file) in menu bar.


  • Now, Embed code will pops-up just copy that code and paste it on Edit HTML mode in blogger post editor.


I hope this tutorial will surely help you. If you have any questions or problem let me know.

» Awesome Facebook Like Box with Hover Effect for Blogger
Posted by Unknown
524 Comments
Tag : ,

How to Add Footer Column Widget into Blogger blog

►
You may have seen many blogs that have a three or four column widget at the bottom of there page. When we searching blogger template sometimes we can't find 3 column footer blogger template. In this tutorial i'm going to teach you how to add 3-4 columns footer widget box, With more columns in your blogger footer you can add extra stuff you like. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About me etc at the bottom of your template.

How to Add Footer Columns Widget to Blogger blog

Adding a 3 Column Footer Widget


1. Navigate to template > edit HTML
2. Before making any edit always remember to backup your template
3. Find the following section in your Blogger template
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

If you are having difficulty finding this section trying searching for footer-wrap or something similar.

4. Replace all the code located in Step 3 with the following,

<div id='footer-columns'>
<div id='footer1' style='width: 30%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Adding a 4 Column Footer Widget


Replace all the code located in Step 3 with the following,

<div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes'
style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes'
style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes'
style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0;
text-align: left;'>
<b:section class='footer-column' id='col4' preferred='yes'
style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

5. Save changes to your Blogger template
6. Navigate to Layout > Page Elements. You will now see a 3 column footer or a 4 column footer depending on what option you chose. 
Posted by Unknown
369 Comments
Tag : ,

Center or Right Alignment of Blogger Header Image

►
In general uploaded your header image via page element option you will see that image will automatically align to the left and there are no option for right or center alignment. For those who has been facing this problem we hope this article can help you have more control over the header positioning, Using CSS (Cascading Style Sheet) you can make this easily align right, left or center.

Alignment of Blogger Header Image

At first you need to check the image placement method you choose when you uploaded the header image to Blogger.


  • If you used “Behind title and description” option.
  1. Go to Dashboard
  2. Template > Customize > Add CSS
  3. Add the following snippet of code,
To align center
#header-inner {background-position: center !important; width: 100% !important;}

To align right
#header-inner {background-position: right !important; width: 100% !important;}

  • If you used “Instead of title and description” or “Have description placed after the image” option.

To align center
#header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/

To align right
#header-inner img {margin: 0 auto 0 300px;}

Enjoy!
Posted by Unknown
144 Comments
Tag :

Auto Read More Button With Thumbnails For Blogger

►
By default on blogger you have the option to add a jump break to your blog post, Using this option blogger displayed only a part of your posts on index pages and the link to read the full post will be below. This is a conventional read more option provided by blogger in post editor. In this conventional read more hack, every time you need to insert code in post.

Auto read more with thumbnail
In today's post we will share auto read more hack with thumbnail for blogger blog, This script will automatically create post summaries with thumbnail. You don't need to add any extra code in every blogger post and if you insert image, it appears thumbnail.

Applying Auto Read More


  • Go to Design > edit HTML
  • Backup your template
  • Tick on "Expand Widget Templates"
  • In the code window Find this code..
<data:post.body/>
  •  Replace with this code below,
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read more...</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
  • Now, search for </head> and paste the following section of code immediately before it:
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>


 Customizing the code above :

You can customize the 'Read more' option by changing the value of the variables below:
  1. If you want to change image thumbnail size then find these numbers 100 and  120
  2. To change post cut height without image  find these line of code - summary_noimg = 430;
  3. To change post cut height with image find these line of code - summary_img = 340;

Posted by Unknown
46 Comments
Tag : ,

Adjust the Alignment of Sidebar on Blogger

►
If you are new on blogger, you get a ready-made page layout that allows you to post your articles or add new widgets. Many bloggers prefer changes to their layout to modify the blog and keep them in a neat and clean format, By the using of CSS (Cascading Style Sheets) you can adjust the alignment of your sidebar. Here in my post i will share how to align your blogger sidebar?

Layout Blogger

To Align Blogger Sidebar


Here we go :
  • Login to your blogger account.
  • Go to Dashboard > Design > edit HTML
  • In the code window find these lines..
div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: right;
}

Change the value of alignment 'right' to 'left'. Code will look like below:

div#sidebar-wrapper {
margin: 0px;
padding: 0px;
text-align: left;
}
Save it and you are Done!

Before you leave:
  • Do you find this article helpful then please share it via tweet, like or pin it buttons below.
  • Any suggestion or question please post in the comment below.

Posted by Unknown
59 Comments
Tag :

How To Add Categories Section To Blogger Blog

►
Blogger Blog does not support categories but has only comes with labels, In this tutorial  i will show you how to manually create categories in Blogger blog. Category is a very important section of any blog or website, because with the help of categories people can easily find what they are looking for. Now we would manually create category section in blogger from labels, This tutorial is aimed at beginner bloggers, Let me explain how to add category section in blogger blog.

» Awesome Facebook Like Box with Hover Effect for Blogger (No Coading Needed)


How To Create Categories Section To Blogger Blog

The first and easiest way to create categories section in Blogger is to rename the section of labels widget as categories. Of-course this is not the appropriate solution for a blog in which there are huge number of labels. An easy way round this problem is create a separate categories section.

  • Adding categories section to a Blogger blog involves following steps :
1. First of all you have to decide how you want to group your articles, according to the labels applied, and what group heading you want to give to each grouping of articles.

2. Navigate individual page of the label for first category which you want to use by clicking on the label in side bar. Copy URL address of this page. For example the URL address of the label of Blogger Widget on my site is :
http://things-guide.blogspot.in/search/label/Blogger%20Widget

3. Now go to Dashboard > Layout > Add a Gadget > Link List


5. Enter "Categories" as the title

6. In the Configure Link List dialog box, paste the link of the label you've copied from the address bar to  Site URL

Link List Widget blogger blog

7. Enter the name of your Category

7. Click on Add Link to add the link to your new categories list.
    8. For every label you wish to put into the Categories Section copy the link and add it to the Configure Links List. By the end you will end up with two or more categories in your list

    9. Use the arrow keys to each link to move them according to your choice where you want to place them.

    • Limit the number of posts :
    You can also Limit the Number of Posts Displayed in the Categories Section. For this you will need to adjust the URL's of each label as follows :

    From :
    http://yoursite.blogspot.com/search/label/CategoryName

    To :
    http://yoursite.blogspot.com/search/label/CategoryName?max-results=max number of posts to display

    Change the value of max results to number of posts you want to display, for example max-results=20

    I hope this Tutorial of manually adding categories using the Link List widget into blogger blog would of great importance to you.

    » Awesome Facebook Like Box with Hover Effect for Blogger (No Coading Needed)


    Posted by Unknown
    900 Comments
    Tag :

    How to Add Facebook Like Box into Blogger Blog

    ►
    Facebook fan Page are a great way to promote your blog or website and facebook like box is widely used social plugin from Facebook developers. This facebook like box will help your visitor to become regular reader just by clicking like button. So that this box will increase number of your facebook fans. To get this widget follow below procedure,

    Updated - 2 New Awesome Style of Facebook Like Box For blogger or Website
    • Simple fecebook like box

    Simple Facebook Like Box for Blogger

    Let me explain how to add simple facebook like box.

    1. Login To Blogger Account.
    2. Click Layout > Add A Gadget.
    3. Select HTML / Javascript > Paste The Following Code In content Box.

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" >

    Replace my facebook page URL  with your page URL, Change Width And Height According To Your Template.

    4. Now save and you are done.


    • Floating facebook like box for Blogger
    Floating Facebook Like Box for Blogger

    Now I came up with new tutorial for adding floating like box to blogger.

    • Adding Jquery Plugin
    1. Go To Dashboard > Template > Edit HTML
    2. Search for </head> teg in your template and just below it paste the following JQuery code (You can ignore this step if Jquery Link is already added in your template)

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

    • Adding Widget Code
    1. Go to Layout > Add A Gadget
    2. Select HTML/Javascript
    3. Paste the following code inside it,

    <script type="text/javascript">
     //<!--
     $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
     //-->
     </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjCU6XQGyR1I1UuP_MbDvMH4kA3mCHdxk-Y4LFUq-ebGDz5p2H4NU8IPcE__ge5WAxp39bX2WLar_EDnTy5mxkZhlK207n3gU9GPbbzzjl39dL_0hB2SI8u9lR6t3o4OdxqFA0-46rw7v/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/ThingsGuide/281417998619583&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://things-guide.blogspot.com/" target="_blank"> TG</a></span> </div> </div>

    4. Replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.
    5. Now save your template and you are all done!

    Visit your Blogs to see it floating at the right side of your webpage.

    Updated - 2 New Awesome Style of Facebook Like Box For blogger or Website

    Posted by Unknown
    772 Comments
    Tag : ,

    How to Remove or Customize Blogger Attribution Widget

    ►
    If you are using a template by Blogger Template Designer, All of them have an attribution at the bottom of the blog. by default, Blogger templates include attribution gadget at the bottom of each template. The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may noticed that gadget is locked and you are able to modify only the "Copyright" statement from the widget.
    Remove blogger footer attribution

    Most of  the blogger dislike it and ask are they allowed to remove this from their template? The answer is yes you are allowed! Follow my instructions below if you wish to remove or customize blogger attribution widget.

    Steps :
    Important Notice : Always Back Up Your Templates before Making Any Changes On it.
    1. Go to Design > Edit HTML
    2. Expand your Widget Template.
    3. Click Ctrl+F for the browser Find bar to pop up.
    4. Search for the code below in your template.

    <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

    5. Now change the locked value 'true' to 'false' in the line of code.

    <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

    6. Now find the code similar below,

    <b:section class='foot' id='footer-3' showaddelement='no'>

    7. Now change attribute value showaddelement no to yes as below,

    <b:section class='foot' id='footer-3' showaddelement='yes'>

    8. Save your template.
    9. Go back and navigate to Layout tab.
    10. Find Attribution element bottom of your page.

    11. Click on Edit
    12.  Now click on Remove button.

    Now Attribution element has been removed. You can add another element using bottom Add a Gadget link to add custom attribution.

    Enjoy...waiting for your comments.

    Posted by Unknown
    1129 Comments
    Tag :
    ThingsGuide

    Recommended Posts

    - © ThingsGuide - Neighbour JobsMag.In - Powered by Blogger -