Sunday 10 June 2012

Customize Facebook Like Box With Css Part1

customize facebook like box with css 

Facebook is the best social network to monetize our website traffic and also Facebook plugin are very useful to increase fans at our Facebook page.Facebook like is the plugin to show how many fans are subscribed at our Facebook page with their Facebook accounts.When ever we publish the posts the subscribers can see the link on their Facebook wall.Maximum 90% of all websites use Facebook like box on their website with default colors and model given by Facebook app developers.But bloggers made the customization of this Facebook like box with Css which matches colors to your templates by using java script.

Customize Facebook like Box with css Part1

1.Login to blogger.

2.Layout (or) Page elements >>Add a Gadget >> Html/Java Script.

customize facebook with css Html java script

 

 

 

3.Add below code in the Html/Java Script box

<style type="text/css">

.facebookOuter {

background-color:#F4F4F4;

width:250px;

padding:10px 0 10px 10px;

height:250px;

border:1px solid #CCCCCC;

}

.facebookInner {

height:250px;

overflow:hidden;

}

</style>

<div class="facebookOuter">

<div class="facebookInner">

<div class="fb-like-box"

data-width="245" data-height="290"

data-href=”http://www.facebook.com/bloggertricksand tips”

data-border-color="#F4F4F4" data-show-faces="true"

data-stream="false" data-header="false">

</div>

</div>

</div>

<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>

5.Customize all above highlighted colored text.

6.Save and done successfully.

Posted on 00:04 | Categories:

Friday 8 June 2012

Add Background Color and Image To Sidebar Titles and Widget Titles.

background image and color for gadget title

Customization of template in blogger makes looks attractive.When coming to blogger sidebar gadget titles or widget titles  customization,adding background color or image to titles.To add this in your blogger templates follow below tutorials.

Color To Widget Titles and Gadgets Titles

1.Login to blogger

2.Template >> Edit Html

3.Search for ]]></b:skin> using Ctrl+f  shortcut key.

4.Add below code before ]]></b:skin>

.sidebar h2, .rsidebar h2, .lsidebar h2 {
    background:#000000;
    color: #FFFFFF;
    font-family: verdana,arial;
    font-size: 12px;
    font-weight: bold;
    height: 33px;
    margin: 0;
    padding: 3px 0 3px 7px;
    text-transform: uppercase;}

5.You can change colors as you like.

 

Image To Widget Titles and Gadgets Titles

1.Login to blogger

2.Template >> Edit Html

3.Search for ]]></b:skin> using Ctrl+f shortcut key.

4.Add below code before ]]></b:skin>

.sidebar h2, .rsidebar h2, .lsidebar h2 {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5UkEvQbZ6eydD5QbzshGN4VIYxRzo5ND5jpOOtBA2lMuA1jYjCSAS7XmZGVhHtPv1RlRmF1hA1-C7HjahnwyyxibrdVVnPVpj92ef4uwZNG9Ph57fQrGqLzj54hHQ0aXpNfR2XH0ZWdL0/s150/sas.png") no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    font-family: verdana,arial;
    font-size: 12px;
    font-weight: bold;
    height: 33px;
    margin: 0;
    padding: 3px 0 3px 7px;
    text-transform: uppercase;

5.Save template and check your template.

Posted on 22:14 | Categories:

Add New Facebook comments Box To Blogger Blogs

facebook comments box in blogger

 

 

 

 

 

In 2009 Facebook Developers introduced their best social plugin is “Facebook Comment Box”.This plugin can be embedded into any blog,websites and also in google blogger.In the starting of this plugin embedded in websites make some difficult work and sometimes it don’t work.Our senior blogger Max (founder of Allblogtools) made this easy to work perfect on any bloggers blogs.Using below option you can also save previous comments.

Part1

1.Login to your Facebook.

2.Then go to Developers Page

3.Select “Create App”

facebook comments box in blogger

4.Now you will see pop-up window as below

facebook comments box in blogger

5.In App Name-write your blog title

6.Leave App Namespace and Web Hosting

7.and click on continue.

facebook comments box in blogger

8.Enter Captcha and click on Submit.

9.In the new window click on Edit App

facebook comments box in blogger

10.Fill required fields as below image

facebook comments box in blogger

11.Save changes.

12.Now copy the App Id code to notepad

facebook comments box in blogger

 

 

 

 

 

Part2

1.Log in to blogger.

2.Template >> Edit Html

3.Tick at Expand Widgets.

4.Search for <html and just after it give a space and add this code,

xmlns:fb='http://www.facebook.com/2008/fbml'

5.Next Search For any of the codes

<body>

                                                   (or)

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
6.Just after it paste below code



<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>


7.Replace App Id with that you saved in Notepad.


8.Next search for </head> and just above it add below code



<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Tricks' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/bloggertricks' property='fb:admins'/>
<meta content='article' property='og:type'/>


9.Make these changes(customizations):


a.Replace Blogger Trickswith Title  of your blog


b.BLOG-LOGO-IMAGE-LINK' with Your blog logo.


c.Replace 'YOUR_APP_ID with that code saved in notepad.


d.Change http://www.facebook.com/bloggertricks with facebook page id.


10Now,search for the code



<b:includable id='comment-form' var='post'>


11.Just after it paste the code given below,



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>


12.Save template and you are done.

Posted on 04:55 | Categories:

Thursday 7 June 2012

How To Add Thumbnail Related Posts In Blogger?

related posts with thumbnails for blogger Related posts is useful to show the others posts related to the present open post page.Suppose, you are publishing a faceebook post when the visitor open this post he also can see the related posts of facebook at the end of post.Today related posts become the alternative to every bloggers post.You can add this related posts with thumbnails of your posts.Follow below tutorial to add this related posts widget to your blogger.

Part1

1.Log in To Blogger account.

2.Back up Template.

3.Template- >> Edit Html

4.Search the </head> using ctrl+f  shortcut key.

5.Add below code above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {float:center;text-transform:none;height:100%;min-height:100%;margin-top:10px;padding-top:5px;padding-bottom:5px}
#related-posts h2{font-size:12px;color:#000;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em}
#related-posts a{color:#000;text-align:center}
#related-posts a:hover{color:#FFF;text-shadow:0 0 1px #222;text-align:center}
#related-posts a:hover{background-color:#222;border:none}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO-kkVPcygKnUSIX1ALrNugEdRtJ3ZwIxD92QPZ0zDfWOiIO1ddrAGFeaSp02lFCN6PKF4k_xt1QuhYPXS-1UgNco2FP3UCNaNhze-Grk3pE7ffT645yUudEXX6gbQSwRkzvN_UPt2BWY/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border:none"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:85px;border:2px outset #EAEAEA" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:10px;height:25px;border:none;margin:3px 0px 0px;padding-top:5px;font-style:normal;font-variant:normal;font-weight:normal;font-size:11px;line-height:normal;font-size-adjust:none;font-stretch:normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

6.Save Template.

Part2

1.Now Tick at Expand Widgets.

2.Search for the any one of following code

<div class='post-footer-line post-footer-line-1'>

                                (or)

<p class='post-footer-line post-footer-line-1'>

3.paste below code before at any one of the above codes

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Related Posts with Thumbnails Code Start-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle=&quot;<b>Related Posts :</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

4.Save Template.

Posted on 22:29 | Categories:

Wednesday 6 June 2012

How To Add “Twitter Followers Fan Box” to Blogger?

 

Twitter followers fan box widget

Twitter is the social networking site and also good platform to publish websites by getting more fans and followers.Twitter has given official tweet button with different styles.But where twitter has not produced “Twitter Followers Box” widget as Facebook like box.To get twitter unofficial followers fan box with fans name and image thumbnail.

Part1

1.Login to Blogger

2.Select Layout –>Add a Gadget--->Html/Java Script

3.Add Below code in it

<div class="twitterboxot"><div>
<script type="text/javascript"
src="http://script-ot.googlecode.com/svn/twitterbox.js"></script><div
id="twitterfanbox"></div
id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("twitter username");</script></div><div style="font-size:10px;">
<a href="http://modifymyblogs.blogspot.com/2012/01/add-twitter-follow-fan-box-widget-for.html" target="_blank">Get This Widget</a>
</div>

4.Replace Twitter Username With twitter account username

Note:-

Remove Privacy settings at your twitter account if the above script not worked.