How to Add the Facebook Comments Box to Blogger

Posted by admin | Posted on 26-10-2011

Category : Blogspot

Tags: , , , ,

Don’t you think it will be fun if you are able to add the Facebook Comments Box to blogger? Well, since blog visitors will be more interested to insert comments on your blog if you can make it more convenient for them. This is why, learning on how to add the facebook comments box to blogger will be beneficial to increase the feed back rate of your blog posts. This way, you don’t have to deal with anonymous spammers while your visitors don’t have to be worried if they don’t have the required account in case you set the comments only for registered users. This theory is supported with the fact that Facebook has tremendous amount of active users from all over the world which still keep on growing.

Most people access more than just one site during their browsing activities. While they are logged in into a Facebook account, they can also check their favorite sites and blogs to keep updated with the latest news. The availability of facebook comments box in your blog is a brilliant way to facilitate your visitors to comment your blog more actively since they only need to click and write without you have to deal with anonymous spammers. So without further ado, here is the method on how to add the facebook comments box to blogger you can apply. First of all, visit the facebook plugin to get a code. Once you have copied the code, access your layout page, click on Edit HTML and check on the option “Expand Widget Templates”. Just search the option <data:post body/> and you can paste the code below that option before saving it.

If you want the facebook comment box display in the post / page only, add this code: <b:if cond=’data:blog.pageType == &quot;item&quot;’> ……</b:if>.

The Script look like this:

<b:if cond=”data:blog.pageType == &quot;item&quot;”>
<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/all.js#xfbml=1″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

<div data-href=”http://your.blogspot.com” data-num-posts=”2″ data-width=”500″></div>
</b:if>

It is quite easy to find the code of facebook comments box that you can add to your blogger site. There are also several variations you can check. Don’t stop on just learning how to add the facebook comments box to blogger. Add more facilities for your visitors and you will be able to gain loyal users to grow your blog.

Note: If you want to comment display at each page is different, You can change the code: data-href=”http://your.blogspot.com” with this expr:data-href=”data:post.url”. To moderate the comment at facebook comment box, you need to add yourself as an admin. You can do this is very simple, search this code and then you place it in blogspot.

<meta property=”fb:admins” content=”{YOUR_FACEBOOK_USER_ID}”/>

Put that code  below <head>.

Note: You can find your facebook user ID with post your comment at other facebook comment, and then you highlight your mouse to facebook link your name, and then you can know your facebook user ID.

Tag:

How to Make Spoiler in Blogspot

Posted by admin | Posted on 26-10-2011

Category : Blogspot

Tags: , , ,

Spoilers are useful to make your blog or website becomes neater while adding some sense of practicality into some forums. There are many other advantages you can find by using spoilers while posting your articles or maybe discussing in online forums. If you have ever being complained for bothering other members of the forums or maybe by your visitors, you definitely need to learn on how to make spoiler in blogspot and other place. Keep on reading since you will find the answer here.

You have to keep a default spoiler code to be used anytime you need to insert the data in a spoiler. If you are a regular member of certain forums, you can easily ask to other members or seek for yourself on the facility provided by the forum to create spoilers. While for the answer on how to make spoiler in blogspot, all you need to do is just copying the code below and replacing the default word “your content” with the image or article that you want to put inside the spoiler. Here is the code that you can keep to be used anytime:

    <div style=”margin: 5px 20px 20px;”><div style=”margin-bottom: 2px;”>Your Title : <input value=”Show” style=”margin: 0px; padding: 0px; width: 60px; font-size: 10px;” onclick=”if (this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display != ”) { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ”; this.innerText = ”; this.value = ‘Hide’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show’; }” type=”button”> </div><br /><div class=”alt2″ style=”margin: 0px; padding: 6px; border: 1px inset;background: #f5f5f5 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(127, 69, 0); line-height: 1.5em;”><div style=”display:none;”>Your Text or Image Link<br /></div></div></div>

Now as you have got the spoiler code, it will be easy to make your blog becomes more organized and neat. Your visitors will find it more enjoyable to explore your site and you will find it quite easy to manage the content with its simplicity. Just experience many more advantages after learning on how to make spoiler in blogspot by applying it into your blog.

Tag:

How To Create Floating Ads in Blogspot

Posted by admin | Posted on 21-10-2011

Category : Blogspot

Tags: , , , ,

If you think your blog’s appearance is too lame, maybe you should consider to create floating ads in blogspot. Ads are advantageous to your blog, so it is such a shame to let it stay untouched and unnoticed in the corner of your blog. By creating floating ads in blogspot, you are not only enhancing its looks, but also making the ads becomes straighly noticeable by your visitors. Here is the method to create floating ads that you can apply into your blog.

1. Login to your blogspot account and then edit the HTML,  after it you check the Expand Widget
2. At the second step you need to Copy Script Below
5. Now you find tags <body>
6. After you find the tag then you paste the following code above body tag

As long as you are well supplied with the right code, you will find it quite simple to add this application into your blog. Here are some options you can consider to create floating ads in blogspot:

CSS Code

<style type=’text/css’>

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

 

 

.gbcontent{

float:right;

border:2px solid #A5BD51;

background:#ffffff;

padding:10px;

}

</style>

 

Java Script Code

<script type=’text/javascript’>

function showHideGB(){

var gb = document.getElementById(&quot;gb&quot;);

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById(&quot;gb&quot;);

var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;

var dir = xf&gt;x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.top = x.toString() + &quot;px&quot;;

if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}

}

</script>

 

 

Full Code

<style type=’text/css’>

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

 

 

.gbcontent{

float:right;

border:2px solid #A5BD51;

background:#ffffff;

padding:10px;

}

</style>

 

<script type=’text/javascript’>

function showHideGB(){

var gb = document.getElementById(&quot;gb&quot;);

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById(&quot;gb&quot;);

var dx = Math.abs(x0-xf) &gt; 10 ? 5 : 1;

var dir = xf&gt;x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.top = x.toString() + &quot;px&quot;;

if(x0!=xf){setTimeout(&quot;moveGB(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}

}

</script>

 

 

<div id=’gb’>

 

<div class=’gbtab’ onclick=’showHideGB()’> </div>

 

<div class=’gbcontent’>

 

<div style=’text-align:right’>

<a href=’javascript:showHideGB()’>

Click here 2x if you interfere with this ad

</a>

 

</div>

<center>

 

 

Sample Embeded Code For Ads:

<center>fill with your ads here

 

</center>

 

</center>

<script type=’text/javascript’>

var gb = document.getElementById(&quot;gb&quot;);

gb.style.center = (30-gb.offsetWidth).toString() + &quot;px&quot;;

</script></div></div>

As you have found the right code to be applied into your website, don’t forget to check the ad code and replacing the sample codes above. After that, go directly into the design or layout page and click “edit HTML” option. Pick Expand Widget and then to the option “This Copy Script Below”. Paste the script that you have already copied above the <bod> tags. Don’t forget to click save and you are finished to create floating ads in blogspot.

Tag:

How to Embed Facebook Videos

Posted by admin | Posted on 19-10-2011

Category : Blogspot, Wordpress

Tags: , ,

How to embed Facebook videos? Maybe you have ever embedded Youtube videos into your blog or website with the embedding option provided at the website. However, Youtube is not the only source of interesting videos to be embedded on your blog. Maybe you’ve stumbled upon a nice interesting video at Facebook and want to add it into your blog. However, with the absence of embedding option such as the one you can find on Youtube, it will be a little bit tricky to have it embedded in your site.

1. The first thing you have to do to embed facebook video is watch the video and get the option of facebook video url when the video have reached the end. Just click on the “Go to Video” link to be directed to the video page so you can find the right URL of the video. The answer on how to embed Facebook videos is on the next step.

2. You only need to find long url address in the browser location bar which need to be shorten so you can embed it. What you have to keep is the last numbers at the end of the URL. As an example, if the original URL shows :

http://www.facebook.com/video/video.php?v=888999888

then you have to edit it into something like this:

http://www.facebook.com/v/888999888

Now you need to copy an embed code from any Youtube video which actually a standard embed code for shockwave flash video.

<object width="500" height="314">
<param name="movie" value="http://www.youtube.com/v/kkkuyfQbsi0?fs=1&amp;hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/kkkuyfQbsi0?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" width="500" height="314" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

You only need to replace the URL of the Youtube video with the shorten URL of the Facebook video to get the code and that will be the answer on how to embed Facebook videos.

<object width="500" height="314">
<param name="movie" value="http://www.facebook.com/v/888999888"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.facebook.com/v/888999888" type="application/x-shockwave-flash" width="500" height="314" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>

You can embed this video with HTML MODE. So, your video at facebook can embed at you blog (wordpress or blogspot), congrats!

Tag:

How To Make a Drop Down Menu

Posted by admin | Posted on 12-10-2011

Category : Blogspot

Tags: , , , ,

When you are an active blogger, you will probably have many posts already and you like to share it to other people. The first thing that you like to do with your blog is to decorate it to be your blog with your characteristic on it. you can change your preferences on the setting menu. You can add and hide many things that you like to hide or show. And you can choose the best form of your posts. If you use Blogspot, there is one place you can find helpful to guide you make your blog page interesting so that there are many readers which will like it. it is Blogspottutorial.com.

Here, you will find many kinds of tutorial. One of it is how to make drop down menu in Blogspot. By making drop down menu, you will be able to save your space in the home page so that you can add much more gadget that you like. If you like to have drop down meny in your blog page, you just need to make this kind of menu:

<form><select name=”menu” onchange=”window.open(this.options[this.selectedIndex].value,’_blank’)”size=1 name=menu><option value=0 selected> Your text title here! </option>

<option value=” your address link here “> the text here will be display </option> </select></form>

Thus, you will need to save your changes. You will be able to make not only one but many drop down menus if you have many categories in your blog page. So, all you need to do is logging in to your blog with your ID and go to the Layout. You will need to go to the Page Element tab and Add a Gadget. There will be a pop-up window. You can Add to Blog on HTML/JavaScript and copy the code that you can find on Blogspot Tutorial so that you can paste it on the Add to Blog space. Have a try!

Tag:

Hiding Older Post and Newer Post Link

Posted by admin | Posted on 12-10-2011

Category : Blogspot

Tags: ,

When you have a blog, you will like to post some new things. And as when you make a blog you will probably follow and are followed by other people, you want to customize your templates. Sometimes, you don’t really like the fact that people can read your older posts just because you do not want others to dig on your history. However, when you use classic template, you will have three links on your blog page: older posts, home, and newer posts. This allows other people to read all of your posts. When you do not want them to read your blog posts, you can customize it in the CSS Setting for hiding older post and newer post link.

First, you ask yourself what do you want to hide, is it the newer posts, older posts, or home? or do you want to hide them all? If you like to hide the newer posts, all you need to do is changing the standard code of

#blog-pager-newer-link {

float: left;

}

Into

#blog-pager-newer-link {

display:none;

}

by doing this, your newer posts will be displayed none.

The similar thing happens when you want to hide your older posts, you just do change this code from

#blog-pager-older-link {float:right;padding-right:5px;}

Into

 #blog-pager-older-link {display:none;}.

And when you want to hide your home links, you can change your template from

#blog-pager {text-align: center;}

Into

#blog-pager {display:none;}

By doing this, you will be able to make your blog page without any particular links that you do not like to show. If you think that you cannot follow these instructions because you are confused, you can follow other easier instructions.

1.      You just need to log in to your blog with your ID and..

2.      Go to Layout and click Edit HTML. And then, you save your first template to back it up and then find the code like this:

#blog-pager-newer-link {

float: left;

}

#blog-pager-older-link {

float:right;

padding-right:5px;

}

#blog-pager {

text-align: center;

}

And then you change the code into:

#blog-pager-newer-link {
display:none;
}
#blog-pager-older-link {
display:none;
}
#blog-pager {
display:none;
}

3.      You should find the code similar with the explanation before and change it into the code just like what has been explained. And then you can save it!

Tag:

How to Create a Custom Header in Blogger

Posted by admin | Posted on 07-10-2011

Category : Blogspot

Tags: , , ,

How to Create a Custom Header in Blogger. Changing the custom header is not something that is difficult to do. You just need to follow the steps that are needed in making the blogger. There are several steps that are needed to be done in creating certain custom header within a blogger. A blogger would be more attractive with the existing of images, hence the first thing that a blogger should do is putting on such images that can be done through a software special for image making.

There are many software that can be used to create those images include Corel Draw that you might have been familiar as the software has been widely used in many personal computers for various image creations, Photoshop which is also as famous as Corel Draw, paint, and the likes. In this case, you can definitely choose your own software that would fit you and is the easiest of all.

The second thing that you have to do is finding out the HTML to make certain notes include the width that you are going to use for the header. Make sure you backup your existing template before doing to the next step, just in case something goes wrong and you need to put your current template back in place instead. Look for the following section of code:

<div id=’header-wrapper’> <b:section class=’header’ id=’header’ maxwidgets=’1‘ showaddelement=’no‘> <b:widget id=’Header1′ locked=’true‘ title=’Header (Header)’ type=’Header’/> </b:section> </div>

There some elements that we need to be changed, look at the highlighted words:

  • We need Change maxwidgets=’1′, we can change itu from ‘1’ to at least 2, we are do it for add another element in the header section.
  • Change showaddelement=’no’ to showaddelement=’yes’, this for add a different element to the header of your blog (your new image)
  • Change locked=’true’ with locked=’false’, this is for remove the old header.

After making the templates you have to change the bold highlights and then save the templates before you return to the dashboard. In this session you are allowed to put other elements within the header or adding certain pictures. You can arrange the width and the height based on your preference.

Linking the header has to be done by first uploading the image within the site and then putting the address as well as the extension. Then, choose to add a “HTML/Javascript element and add the following:

 <img src=”http://www.yoursite.com/images/yourimage.jpg”>

However, you can choose any dress that you want based on your preference that you need for your image. Remember, that when you put the address you are making code that you need to display the header that you have created within your blogger. Hence, you have to remember the address so that you can enter your own site that you have made.

The most important thing to do in creating certain header for the blogger is saving the blog otherwise your work will end with nothing. For better result it is suggested that you always review your current blogger that you have made and see whether the new blogger has met your criteria or not. If it is not that you can directly fix the things that are not suitable according to you. You can recreate or just adding some other points that would make your blogger look more like what you want. After you have done with all of those steps, you are about to enter the next step which is considered as the last step yet is the most important thing that you have to. Such step is clicking on the header within the genuine header of your blogger then removing it. By doing this, your previous blogger will be deleted and you can customize it with your new header that you have created. If you have done arranging those steps then you can use your new header as you like.

Next
25