Showing posts with label Facebook. Show all posts
Showing posts with label Facebook. Show all posts
Saturday, April 7, 2012

How To Create Facebook Like Box On Blogger

How To Create Facebook Like Box On Blogger. Until now, Facebook still be the first social media networking on the world. So if we optimize our facebook network (Fanpage) we can earn more visitor to our site. But how to optimize our facebook network? I think put a like box on our site is a great way, more followers you have more visitor you get.
And now i will share a tutorial how to create facebook likebox on blogger
1. Click this link to go to the facebook developers page
2. And now fill the form 
Facebook page url : Fill it with your facebook page url, if you doesnt have it you can create it first. Click here to create facebook page
Width : The like box width
Height : The like box height
Color scheme : The like box color
Show face : Do you want to show face of your page followers?
Border color : The likebox border color
Show stream : Do you want to show the latest post of your site?
Show header : Show the 'find us on facebook' text on the top of like box
3. After fill the form now click the 'get code' button
4. After copy that code the html code to your site.

How To Add The HTML Code to Blogger

1. Login to blogger
2. Go to layout page
3. Click add a gadget
4. Choose HTML/Javascript
5. And then paste the html code from facebook
6. Save it

Facebook Logo
Put your question below
How to create facebook like box on blogger
Read More How To Create Facebook Like Box On Blogger
Monday, March 12, 2012

Awesome Rss, Facebook and Twitter Counter Widget For Blogger

Awesome Rss, Facebook and Twitter Counter Widget For Blogger
Rss, Facebook and Twitter is the most useful media to promote a website for developer.
Why Rss, Facebook and Twitter become the most useful media for website developer?
Because 52% people in this world used internet to open any social media like Rss, Facebook and Twitter. Just try to compare Rss,Facebook and Twitter
1. Rss has Alexa rank #1 because its a subdomain from google.
2. Facebook has alexarank #2 in world wide and #2 in USA. They reach 44,6% Internet User/day
3. Twitter has rank #9 on world wide and #8 in USA. Reach for 8% Internet user/day.
So i estimate that 52% People in this world will open Rss, Facebook and Twitter per/day.
And web developers see a chance if they optimize their social media network.
Now, how about you? Do you have a Rss, Facebook or twitter account? And are you a web developers? Are you optimize your Rss, Facebook or Twitter account?
 If you asked me "Are you optimize your social media account?"
Exactly i will answer "Not yet!"
I just have 88 Rss Subscriber, 14 Facebook Fans and 1486 Twitter Followers.
I think its a little on rss and facebook and i think thats enough on twitter. So how to optimize your social media account?
i guess that you can install a Rss, Facebook and Twitter Counter widget on your site.
As you can see on my sidebar, you'll look a Rss, Facebook and twitter counter like this
Rss, Facebook And Twitter Counter For Blogger

Ok now lets we go to the step, how to install awesome Rss, Facebook and Twitter Counter Widget For Blogger
1. Login to blogger
2. Go to design-layout
3. Find </b:skin> code
4. Copy this code below before </b:skin> code
.rss-mbt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJ1iIRXSH-Frt4qWhNBkyXSCcNPOinq_YE8ow41CrnCgMlh_8JsUN82CzKLQ4MUeiqNDWzdalqxR_WL-HHP-V9yhK6P_fAH9n2gXnQ8mkWOufNXzd333ULsCVHOr9SD-07mwOZvQGvYg/s1600/rss+sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 5px;
}
.twitter-mbt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMCrMVD5sXSqgyI8ROYhGzizh9VjulOOhFpdi39dll8qD-lSI_AIpQUCBQZVIkVzBMlc2ta_QxUqqnrI61eWLaJ8_NznCteh8sA5Cg7HaLKCuf5HmzOQChMovZj54w6ZxyxpcTvi6rhV0/s1600/twitter.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.facebook-mbt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmgnQ3NKwcf8QpU3dZqLkrRAVuPwMixeEMI8iyIMU5wptgGuUoM-WZqLXoojt2oYfYxWz63xMbrqdfXlOrzXl7a9Hl-Oh-3Chp5Jw_A-3O-wXjD3Fe_Notgt6wfIieoMGMPlB8qOYQVBc/s1600/fb+sepia.png) no-repeat;
height: 64px;
padding: 0px 20px 0px 80px;
margin-top: 10px;
}
.follower-rss, .follower-twitter, .follower-facebook {
font-family: Georgia,  sans-serif, Times;
font-size: 1.5em;
font-style:italic;
color:#D3C5B1;
padding-top:20px;
text-shadow:1px 1px #B2A99D;
}
.follower-rss a, .follower-twitter a, .follower-facebook a {
color:#AA9C89;
}
.follower-rss span {
font-size: 2.2em;
font-weight: bold;
font-style:italic;
}
.follower-twitter span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
}
.follower-facebook span {
font-size: 1.9em;
font-weight: bold;
font-style:italic;
}
5. After that save it. 
6. Go to layout and click "add a gadget" button
7. Copy this code below
<div class='rss-mbt'>
<div class='follower-rss'>
<span><a href='http://feeds.feedburner.com/BlogYahyagan'>88</a></span> loyal readers</div></div>
<div class='twitter-mbt'><div class='follower-twitter'><span><a href='http://twitter.com/#!/blogyahyagan'rel="nofollow" >1491</a></span> followers</div></div>
<div class='facebook-mbt'>
<div class='follower-facebook'><span><a href='http://www.facebook.com/blogyahyagan'>14</a></span> followers</div>
</div>
8. Finally save it.
Congratulations, you've dont to install the widget. So this is it the "Awesome Rss, Facebook and Twitter Counter Widget For Blogger"

Note
- Change the url with you own account url
- Change the number (Counter) with your own
Read More Awesome Rss, Facebook and Twitter Counter Widget For Blogger
Sunday, March 11, 2012

How To Get 100 Facebook Like Per Day

Hai guys, are you looking for facebook likers? If you searching on google with this query "How To Get Twitter Followers" maybe there's thousand website that explained how to do that. But if you search with "How to get facebook like" query, you'll not found anything. or "Free Facebook Likes For Website And Fan Page", i guess you'll not found any website like that.
Yesterday i visited a site called Spreadyourlike
So what?
Spread Your Like
Ya, Spreadyourlike is the simple way to increase your fanpage like.
Amazing, and now how to do that?
Ok that's simple, click here to go to the website Spreadyourlike.
1. Register on spread your like site
2. Go to add your site page 
3. Fill the form
Page title = Fill it with your page title
Page Url = insert your page URL here. example : http://www.facebook.com/BlogYahyagan 
Coint Per Like (CPL) = How many coint you give out if somewho like your page
Hint : The more coins per like you give out the faster you will gain new likes for your pages.
4. Click add website
5. Go to Listing page
6. Like some page to get coint
Ok that's it, the simple way to get facebook fanpage like
Latest Post Stylish jQuery Image Slideshow For Blogger
Read More How To Get 100 Facebook Like Per Day
Saturday, February 11, 2012

Awesome jQuery Facebook Likebox Popup For Blogger

And now, the great web design tutorial again. Yeah, now i will share a great blogger stuff to you. Hmm "Awesome jQuery Facebook Likebox Popup For Blogger" maybe?
The most searched blogger stuff is Popup Facebook fanpage, because if your fan page has liked by a thousand or more people, i think you've a lot of traffic. Ok so this is it Awesome jQuery Facebook Likebox Popup For Blogger

Add Awesome Facebook Likebox Popup

1. Login to your blogger account
2. Go to Design tab
3. Click "Add a Gadget" and then choose "HTML/javascript"
4. Paste the following code instead it


    <style>
        /* Jquery Facebook Likebox Popup Version 2.0 by MBT    MyBloggerTricks.com
        */
        #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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiP11mU_MA8LKJ-CRqkvljrz3qZb4zO3_trP-LTGc9qMoJvB7nI8R3UDqcBEFhKRtrIxz1vlOZST_ucSQBHHlDxBid6e8_YhllD4emvds2TopacJelBJles7mp7CyDFhqXY42zaOJiWU/s400/border.png) repeat-x top left;}
        #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat -36px 0;}
        #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat 0 -32px;}
        #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiP11mU_MA8LKJ-CRqkvljrz3qZb4zO3_trP-LTGc9qMoJvB7nI8R3UDqcBEFhKRtrIxz1vlOZST_ucSQBHHlDxBid6e8_YhllD4emvds2TopacJelBJles7mp7CyDFhqXY42zaOJiWU/s400/border.png) repeat-x bottom left;}
        #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat -36px -32px;}
        #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) repeat-y -175px 0;}
        #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) repeat-y -211px 0;}
        #cboxContent{background:#fff; overflow:visible;}
            #cboxLoadedContent{margin-bottom:5px;}
            #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjklYVo9fPMW1Aj5rzaJ7pbAbJdua6WOEUXv31M1b5gXFrpbx5mG5bKW3oADiHqCkROWxA6yKY8O6oEYi2L7yIQUhWaAfsOPPxwfT6r9HKr732pmxoQWGrVpIG69sJnZ10KLdi9_U8Hh1g/s400/loadingbackground.png) no-repeat center center;}
            #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_xis4sPKnA5TAvm_KxSA513k4171LLi5WBxqcXM-i8Y0Qg4NWpucuv0as0fKIK17m7mj-yz52_kjjpU1Zfa2VFlh0FqIC94rGrnmbBY_0Q-Xk3dD5MaaKC0RaZ-m6ZZfc_9j2jejP0I/s400/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-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 Version 2.0
        /*-----------------------------------------------------------------------------------*/
        #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: #F66303;
           font-size: 18px !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;
        }

    

    /* ---------MBT Subscribe Form---------- */

        .box-title1 {
        border:1px solid #ddd;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        box-shadow: 5px 5px 5px #CCCCCC;
            padding:10px;
      margin: 10px 0;
        }


        .enteryouremail{
    background: #fff !important;

    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999; font-size: 12px;
    height: 25px; width: 165px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin:0px;
    }

        .submitbutton{
    background:#F66303;
    border: 1px solid #F66303;
    text-shadow: 1px 1px 1px #333;
    box-shadow: 3px 3px 3px #666;
    font:bold 12px Arial, sans-serif;
    color: #fff;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor:pointer;}

        </style>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
    <script src="http://mybloggertricks.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>
    
    
            <div style='display:none'>
           <div id='subscribe' style='padding:10px; background:#fff;'>
                <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
              <center>

    
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogYahyagan&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

    </center>
    <div class="box-title1 ">

    <center>
    <h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogYahyagan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="BlogYahyagan" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>

    </center>
    </div>

    <!--Please Do not Remove the Credits -->
        <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
        </div>
        </div>
5. Save it, and you'll see how the "Awesome jQuery Facebook Likebox Popup For Blogger" look like

Information

Make this change :

  •  *30 Setting this value will effect cookie refreshment. I have set the popup to appear only once to the visitor and this popup will appear again after 30 days. If you wish to display popup to your visitors after a week then set 30 to 7. Similar if you want it to appear daily then set 30 to 1. Note that if you set the value to low then it can irritate your daily readers.
  • Replace BlogYahyagan with your facebook username. If your facebook username is too long and includes numbers then do not panic and first create a Branded Facebook username for your blog in seconds by going to Facebook.com/username
  • Next replace twice BlogYahyagan with your feed title. It appear at the end of your feed link. 
6. Save the widget and place/drag where anything you want.
7. Save it

Visit your blogs and see it popping up just fine! Remember as we already mentioned on previous post that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again.
Next Post Create An Awesome Social Media Widget With Hover Effect
Source : MyBloggerTricks
Read More Awesome jQuery Facebook Likebox Popup For Blogger