domdomrung
Showing posts with label Social Plugins. Show all posts
Showing posts with label Social Plugins. Show all posts

JQuery Plugin: Social Subscription Sliding Bar

Jquery Plugin Adding social widget can be important part of increasing your blog or website traffic, Social widget enable visitors to subscribe quickly on your official pages on social media networks. This tutorial have one really Amazing Sliding plugins, Sliding plugin bar sticky at the right side of your page that will slide out social share buttons when mouse hovers over.

Social Plugins: Stay Tuned Social Subscription Widget V 2.0

Plugin Preview There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with attractive design which we have created early, its a second version of our previous social subscription plugins with tooltip. In this version we have removed some CSS reset bugs and also make some addition in the plugin layout. The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google plus, FACEBOOK, Twitter, PINTERST, RSS FEED, LINKEDIN, TUMBLR and YOUTUBE.

Flat Flipping Floating Stay Connected Widget For Blogger

Colorful Application Icons In Hands Nowadays Stay connected Widget are very important websites and blogger owners. Whether you  run a website or you are a blogger, you definitely need social subscription widget. To tell your users or visitors about your social media accounts. With the increase of the use of social media, it has rather become a necessity to have social media accounts. But choosing the right social icons according to your theme is also important. You don’t want your visitor to just ignore your social media links, due to ugly looking icons.

Social Sharing Floating Bar With Multiple Background & 3D Border (V2)

Social sharing buttons previewRecently a lot of my readers have been saying me please sharing that floating bar which is you are using on your blog. So today we are going to bring it here for our valuable readers. To add as much value as possible i’ve included some other social sharing buttons plugins in the bar so your website or blog readers have more choice when he/she decide to share your articles. Social Share Buttons let the user stay on the site and share the content on their social media profiles with just a click and without leaving the site. Site visitors can choose interesting content to share, click on the social share button and easily post an update to their social media profiles. Check the previous version? Floating Sharing
In our newer version we just add sharethis button and also make it attractive with multiple background theme, I hope you will enjoy after adding plugin to you blog and website.

Stay Tuned Social Profiles Plugin With Tooltip For Blogger Blog

Social_profiles_with_tooltipIn today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a blue color. After the growth and advance development in Social media websites, lots of peoples are showing their interest in appearing their website with their favorite social networking website i.e. Facebook, Google Plus, Twitter and etc. Tooltips is the fancy addition in the Social networking Widgets. Whenever, your visitors would place their pointer on a social icon a small box will appear with information about the specific item that is being hovered.

AddThis Smart Layers Plugin For Blogger And WordPress

Addthis_Smart_layersIf you’ve read our previous tutorials on Addthis sharing tool, you probably know about AddThis. Any website that’s been developed over the last few years, now has social follow and social sharing options, and AddThis is the number one provider of those sharing buttons. Now good news is that, he lunched smart layer plugin for Blogger, WordPress and also for Joomla.  smart layer plugin is very  easy-to-install layers float effortlessly over your content without disrupting your layout. Now that's smart way to add sharing buttons, follow us buttons and also you can show recommended post slider at the right bottom corner. We are very excited to share this much pretty tool with our valuable readers. Below are the steps how to add it on your blog and website. it's also easy to set up, social sharing buttons in various places on your WordPress site.

Pinterest Pin It Official Button on Image Hover (Good News)

Pinning an image just got easier and more intuitive with this hover button. You may have noticed that some professional photographer website have custom pinterest hover button for their website's professional images, with Word Press it’s quite straightforward, whereas with Blogger it can be much more complicated, mostly for those who are hate modifying the code for their blog template.Now luckily we're excited to tell that pinterest developer team finally made an official image hover pin it button for blogger. The on hover pin it button appear just like the regular pin it button, but it only shows up when a person mouse over an image.The pin it button should disappear again when your mouse-cursor is not on the image anymore.They look great on pages with lots of images and might look and feel better if your design is on the minimal side. Pinterest developer team made it very easy to install on your blogger blog. It only takes one line of code to get the button on mouse over the image. So follow the simple step below.

 

Live Preview

 

How To Add It In Blogger Blog

No HTML is required for hoverbuttons; all you have to do is load the JavaScript listed below. Once you have this installed, images should show a Pin It button when hovered over. (If you're already running pinit.js, just add the data-pin-hover="true" attribute to the existing SCRIPT tag.)

 

1. Go to your blogger dashboard>>Template>> Edit HTML

2. and find the following code in your template code.

</body>

 

3. and put it just above your closing </BODY> tag. (provided by pinterst).

4. Click on save button and you're done..!!!

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

 

Note:- If you are already using pinterest pin it button then just add following attribute code in pinterest script tag.

data-pin-hover="ture"

 

You can see complete script above in step 3.

Note:- If you're not already running pinit.js on your page, please visit the Widget Builder to find out more about the Pin It button and the rest of Pinterest's fleet of handy widgets.

 

Some Images Won't Work with the following reasons.

CSS background images, images that are under 80 by 80 pixels in size, images that have the data-pin-no-hover="true" attribute set, images that have the nopin="nopin" attribute set, and images whose SRC attribute starts with data: won't show hover buttons.

You can definitely still use Pinterest regular Pin It button, and we think these new hover buttons are pretty nice, too..!!

Another Stay Connected Widget With All Subscription Option



social_subscription_for_bloggerSocial media has changed the world of SEO and online marketing. In last couple of years, many social media marketing companies are coming into the market to create brand awareness via Social media promotion. If you are into Blogging, I’m sure you must be aware of advantage of having a Blog subscription box and some time it’s hard to select from hundred of subscription options available. Last time i have shared Stay Connected Widget for Blogger. Today I'm going to share Another awesome & Unique Social Subscription and email subscription Box for our honorable readers . Its really looks awesome & give a unique look to your blog. So add this beautiful email subscription box to your blog & attract new visitors to make them your blog's subscriber. You can see live demo on our blog sidebar. We are also working on this widget make it more attractive and easy to edit. So Now Stop the Description and let's start the tutorial.





How to add it to blogger blog


1. Login to your blogger Dashboard

2. Go to Layout and click a Add A Gadget.
3. Select HTML/JavaScript gadget.

4. . In title Field Write anything you want. like Stay Connected, Subscribe Us, Subscribe Now.
5. Copy the following code and paste it inside the content box.




<style>
.mbt-subscribe-box-email-field {
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2F4GxQ9WLvTwnP_p1aPkl0sqqsyq6ybxsLkNsZo5fk4UVM9CVo4cp8Jvr2e-ZKW57h6bHp2CBgY-UmePsB-HdykNst8z7rnpzYv-2KAdPDGmxfnvz4W8aEXU79FnFJLiIUq1cZbixrrhi/s1600/sprites.png) no-repeat 0 -28px;
    width: 280px;
    float: left;
    color: #777;
    margin: 0 0 10px 0;
    padding: 10px 30px;
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
       
}

.mbt-subscribe-box-email-button {
    background: #09f;
    width: 280px;
    float: left;
    color: #fff;
    font-family: 'Verdana, Arial;
    font-size: 16px;
    font-weight: bold;
    padding: 10px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-transform: small-caps;
  
}

.mbt-subscribe-box-email-button:hover {
    background: #303030;
}
</style>

<!-- Social Profile Icons Start-->
<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'>
<a href='http://feeds.feedburner.com/bl0ggertricks' imageanchor='1' target='_blank' title='Grab Our Rss Feed'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXp4ZAlOCNbC-CMiKH12jN_dUJz745KxZBwjfSo-jBPQ-Pu_0bugB6sccHJHtflzYyCffKAsLueYy1mZaMALb2kwO81qPCGQHKPo6i59cwnsAuT0hU-LbzbEXXEmRL80vuCGinAVFx37D/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&loc=en_US' imageanchor='1' rel='nofollow' target='_blank' title='Get Free Updates Via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ExcFDVM5Y7tELnZtNvSs13GtMqL4LFDmpv6aljs3v2l4gdI2uV6_SQeWDneb8SyYYl27XpL2HeWaimxX2dj1CSLZ6lHJLbXnKFA3-WLgVedxhZ4NqBjIveAyVVpNFVu0GKh_5CTrDb82/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>

<a href='http://www.facebook.com/mybloggertiks' imageanchor='1' rel='nofollow' target='_blank' title='Like Our Facebook Page'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWqyCjbEt4SYV3uKTrxOhq10Ok3vmt4wpu6vbfgV-ScS56BI5C8pr-DeVrHRvjwm-xIU5niIbczZXLK-ZzeBwNjCXHh5n8FO6Ekcaozm4_Et3tPBuNPVjeZF5SmpcUnJNW4iSHG79ea91/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>

<a href='http://twitter.com/mybloggerstricks' imageanchor='1' rel='nofollow' target='_blank' title='Follow Our Updates On Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYiJcamdaqiZ6EtK3HJfQTc46AGWea5RFXUo_jMRi_P0IenullSj0vQSk-4uun5viukybD-fqixRDoE8l9j1Hy9suvzvZ3KrvEtgww0aJDuwF_GDlSsMF842EjRBaup26Qx9XFZ6IjJpL/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>

<a href='https://plus.google.com/108204301284356444972' rel='nofollow' target='_blank'><img alt='Follow Me on Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>

<a href='http://pinterest.com/mybloggertrickx/' rel='nofollow' target='_blank'><img alt='Follow Me on Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/>
</a>

<!-- Feedburner Chicklet Start-->
<center>
<a href='http://feeds.feedburner.com/bl0ggertricks'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=088A4B&amp;fg=444444&amp;anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center>
</div>
<!-- Social Profile Icons End-->

<!-- Feedburner Chicklet Start-->

<!-- Twitter Follow Button Start-->
<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;">
<a href="https://twitter.com/mybloggertriks" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MyBloggerTricks</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Twitter Follow Button End-->

<!-- Facebook Like Button Start-->
<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'>
<div class='fb-like' data-href='https://www.facebook.com/mybloggerstricks' data-send='true' data-show-faces='false' data-width='280'/>
</div>
<!-- Facebook Like Button End-->

<!-- Google plus Badge Start-->
<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/108204301284356444972" data-layout="landscape" data-rel="author"></div>
</div>

<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'>
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/103598710564060829080" data-layout="landscape" data-rel="publisher"></div>
</div>
<!-- Google plus Badge end-->

<!-- Email Subscription Start-->
<center>
<div class="mbt-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks" class="mbt-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Bl0ggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="mbt-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address"/><input class="mbt-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
</center></div>
<!-- Email Subscription End-->




Customization


Some customization are required for making this widget work perfectly for you. Follow the Steps:


  • Replace the all highlighted text in yellow color (Bl0ggertricks) with your RSS User Name.

  • Replace the all highlighted text in Red Color (mybloggerstricks) with your Facebook page User Name or user id.

  • Replace the all highlighted text in Blue Color (mybloggertriks) with your twitter username.

  • Replace the highlighted text in Brown Color (108204301284356444972) with your Google Plus Profile Id.

  • Replace the all highlighted text in Orange Color (103598710564060829080) with your Google Plus Page Id.


All Done: After customizing the Gadget according to your desire needs, just Save the Gadget. Now go and check your site, we are sure it would not let you down.




Optional Steps.


If in case the facebook like button did not work then add this Javascript SDK code just below <body>


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



If in case the Google Plus Page badge and Google Profile badget did not work then add this Javascript code just below <body>


<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>



You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves. Peace and blessings pals!..

Add Awesome Floating Sharing Bar on Blogger And WordPress Blog

Floating_share_barToday here’s a tutorial on how to add a floating social media bar to a blogger blog. In this widget we have included  Facebook ,like button, Google Plus, Tweet, likedin and also have a StumbleUpon, buttons in the bar and each of them comes with a counter. I have not using any scripts and this widget works purely on CSS and HTML and is fully compatible with all browsers. You can see this sticky widget to left of my blog post. I have made sure to keep the installation process as easy as possible. We made it very easy to install on blogger even wordpress, so you don’t need to edit your blogger html code. Just drop the whole code into a HTML/Javascript gadget. Designing this widget took to much time but after a very hard work we are finally make it 100% working fine..

Another Stay Connected Metro Style Responsive Social Subscription widget

 Stay Connected Widget Color Scheme Preview After 5 days we back with super cool widget tutorial. There are to many simple ways to display the Subscription options for your blog. But Stay Connected widget also known as social bookmarking buttons are the most used blogger widgets and Subscribing plays very important role in increasing traffic on your blog. Keeping that things in mind I am creating social subscription widgets and today we created cool social subscription also responsive gadget for our valuable readers. This widget is similar to Metro style widget but I made some changes to give it more impressive look. Adding the gadget is easy and here we will show you how to add it to your below your blog header. we will also show you how to add it in footer section, when someone reaches the end of a post if they like it they will often subscribe. Your readers will also get an opportunity to stay connected blog with feed burner.G et ready to see the amazing beauty in action which will nurture your blog . Lets see the Demo.


Add It To Blogger

1. Go to your blogger dashboard>>layout>>add gadget.
2. Scroll down the Add A Gadget window and select HTML/Javascript.
3. Leave the title box empty.
4. Copy and paste the HTML code below into the content box.

<style>
.Mbt-Social-metro {
    width: 960px;
    float: left;
    margin: 0;
    padding: 1em 0;
}
.Mbt-Social-metro ul {
    margin: 0;
    padding: 0;
}
.Mbt-Social-metro ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    text-transform: none;
    margin: 0;
    float: left;
    display: inline-block;
    width: 20%;
}
.Mbt-Social-metro ul li a {
    font-size: 80%;
    color: #fff!important;
    display: block;
}
.Mbt-Social-metro ul li a:hover {
    color: #000!important;
    background-color: #999;
    text-decoration: none;
}
idc-scoail ul li a, ul li a:hover {
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmLHyJhbestPKm-46_S0K7BbCkYmBGNMFM4SpFWrDTLdjzIfsoUbS82G5zRmKbk3pj4kdy7ksxd07WO6VsufUE2sBsl_jaj7OT7tpfzePtM-rfoxMOQfhxZGoT_lUNJ-CTa5rsE5AzLX5/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZZlz8L4ggtv6HJsPCR1Atj5FwkbgTfGJy_BPyhuq4EDcGGsfq1mCZLjYrpPWLuL9JK-_QeC5Xy25GqjbPfoCQdqStJ7P5KXX81GebcqgMjcPM60QtYQwZQaI9ba6GdZVZ8ZMKWmgkngY/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvq0fcyX-LkkkHzZ2O_HQaBNVIB8rjx2lyCY4lyqDIFxEYKSlQwGzBGhZjD68wT1-cPQ9rFVemgy0NGRFPsCaIAIQ_r55pqdSVFdfLj-kjfh6FizatJrr3dZONfW099m0cL3wUtgmFHTXZ/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .google {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZs_K6BCMx4VvvVhvixANxgMes66cwpRR9dfrPExJrzcBVrROpUg8t-Z-M4ENwVO8fgY2uPYstQdgdw0Fbzwf_gVSCrPeFhDZd8bZH5i6od2eZnGsvOH7ZP5sxs2JZGsFATCF_XRVcTMCf/s1600/google.png") no-repeat scroll 10px center #D44937;
    background-size: 20px;
    padding: 10px 50px;
}
.Mbt-Social-metro ul li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAWQ7lcTxILSrdGUP4WTFXqjjWAbQfRwHdPI0cKOOajmSuGuS-N_bUBUiGPBAc-HqbZAx8iK-YDcRjFeYlSMyvWdTiq1uxTEH4Iu_7fuuJOgPxw4Q-mofcc3CynXur8S7o8KfYvRn3UFMn/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
    background-size: 20px;
    padding: 10px 50px;
}
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .Mbt-Social-metro ul li {
        width: 50%;
    };
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .Mbt-Social-metro ul li {
        width: 50%;
    };
}
/* width of 320px */
@media only screen and (max-width: 480px) {
    .Mbt-Social-metro ul li {
        width: 100%;
    };
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/mybloggertricks'>Subscribe our Feed</a></li>
<li><a class='twitter' href='https://twitter.com/mybloggertriks'>Follow me on Twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/mybloggertriks'>Find me on Facebook</a></li>
<li><a class='google' href='https://plus.google.com/#'>Join me on Google+</a></li>
<li><a class='linkedin' href='http://in.linkedin.com/in/mybloggertriks'>Connect with LinkedIn</a></li>
</ul>
</div>

Note:- Replace Profile links with your own profile username ( mybloggertricks, mybloggertriks, and (#) with your Google plus page or profile id).

How To Drag and Drop Widget in Blogger Layout

  • First place your mouse cursor on the widget which you want to move from the current place and hold your mouse left click.
  • Now you have to move or drag that widget to the place where you want to move. Carefully see the image below. (In the below image I want to move my widget from place 1 to place 2)
Add blogger widget in your footer section
  • After positioning it in your required place you just leave the mouse means release your mouse from hold.
  • Then at last you have to do one main thing that is you have to click the "Save arrangement" option on the above means in top right corner of your layout window. That's it.
So here is the simple way to how to add, move as well as remove a widget or gadget from blogger. Hope you enjoyed this. Newbie's if you have any query or problem feel free to ask us below in the comment section. and also happy Ramzan-Ul-Mubarak with Lot’s of Blessing From MyBloggerTricks Team..

Add Facebook Sliding Like Box with jQUERY To blogger blog

Facebook Sliding Like Box Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget. It’s about how to add a pop out facebook like box with slide effect. I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.

 

View Live Preview

 

 

Add Like Box To Blogger Blog

 

1. Go To your Blogger Dashboard>>Template>> Edit HTML

2. and click on HTML Code then press CTRL+F and Find the Following code.

</head>


3. and paste the following jquery link before </head>



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


4. Find the following code.



</body>


5. and paste the following code before/above </body>



<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIqF9i3F2Sg5ptxB5Wg97HI8pzpRWnsMi-FOtoU6kwICrNeZeOnoIPEwpFNR_9LgmFNi7CP8FePjKkb4d4eYENToqVrTR94QZryqO_BMd7C0AGPokcVsOJdF7uw6mMz3BwkltNiU3OBIeq/s1600/w2b_vertical-right.png');background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}
/*]]>*/
</style>
<script type='text/javascript'>
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = 'medium'; // Duration of Animation
w2b('#fbplikebox').css({right: -250, 'top' : 350 })
w2b('#fbplikebox').hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b('#fbplikebox').show();
});
})(jQuery);
/*]]>*/
</script>
<div id='fbplikebox' style='display:none;'>
<div class='fbplbadge'></div>
<iframe src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>


http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp



6. Replace “Bloggertricks” with you facebook page user name highlighted above in blue.



7. Click on save button and take your blog new look..



Visit your Blogs to see it floating at the right side of your webpage.  The widget  was created by Harish and we reshared at BLOGGERTRICKS. If you wish to change the direction, width, height, background. of the Likebox or make the image changes then do let me know.  Thanks for reading our post.

how to Add FACEBOOK Like/Fan Box Using JAVASCRIPT SDK

Facebook_fan_box_using_java_script Today we will learn how to add a face book like box by using javascript to Bloggers Blog. Social networking websites like Face book, Twitter and Google+ are providing the custom follow and like boxes which helps every blogger. Now social networks are one the most important part of blogging. Face book like box help you to extend your reach and connect to the audience by proving them a mean to join you on face book. It does not only help you to grow your community but traffic as well. If people like your content they will voluntary like your Face book page. Facebook like box allows your visitors to join you easily and they don't have to find you manually. Face book developers have made this thing very easy to integrate a Face book like box in to your Blog by adding a few lines of code in it. We have already covered in our previous article how you can add a Face book like/fan box to blogger blog using Iframe.. you can see live demo on sidebar of our blog.

 

Add It To Blogger

 

1. First you need to go Face book Developer Page & Create your fan box by using your page user name and page id. (Get your Face book page user name & id URL by Visiting your Face book fan page.)

 

Facebook_Like_Box_Setting

2. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.

3. Click on get code (you will get code look like screenshot below)

 

Facebook_fan_box_code_window

4. Go To Blogger Dashboard>> Template>>Edit HTML

5. Press CTRL+F and Find the Following code. “</body>”

6. and paste 1st code before/above </body>

7. finally click on save and you are done first step.

8. Go to your blogger layout and click on add a gadget and choose HTML/JavaScript

9. Paste 2nd code in text area.

10 write your Desired name in title section( If you hide face book like box Header while you creating this. if you no hide while you creating like box so your don’t need write gadget title.)

11. Finally click on save take new look of your blog..

 

For Further Help See Video Tutorial. Enjoy!  Adding this widget is surely easy but still if you encountered any troubles just post your query below in comment box and I would love to reply back as soon as time allow thanks for reading our post. happy blogging..!!

Has Social Media Became Too Big?

Hows Social Media Becomes Most PopularGuest Post - Our host is Eric Santos, (Has explained Social Popularity.)The spawning of internet has led to the explosion of social media because many people are joining it in hordes. With over a billion members, sites such as face book have become overcrowded. Many companies are jostling for marketing space in the online sphere and the techniques of attracting the users are becoming stale. The Saturation of the market calls for innovative methods which could attract traffic to the website. Recent Market research has shown that the fan base of major companies on social media is dwindling. Many corporations are trying to devise new strategies for retaining the users and adding new ones.

 
In past people used the advertising platform as a means to enhance the customer base because it ensured round the clock presence. The medium is losing its sheen because people are indifferent towards the advertisement appearing in the sponsored section. Companies are making it more complex; however it does not have any results. Therefore, they are focusing on enhancing the ranking of the website in the organic search engine listings.


Initially an explosive growth of the social media buoyed the people to extend the number of followers; nevertheless it has only become a numbers game because many people are not even bothered about the regular updates. Apps like DWIBBLES ( dwibbles ), Prismatic (getprismatic) could become solution for the users because it is tailor made for them by customizing the updates that users actually want to see. Undesired updates are rejected by the application because they are too many and tend to clutter the mindset. Apps like DWIBBLES are  responsible for bringing in new and relevant feeds to the users. 

 

The ticker and the graph are introduced by the face book to ensure that organic sharing is accomplished without pushing a button. Using a third party application, one can limit the number of updates to a great extent. To enhance the customer base, one has to be innovative and make the people interactive on the status updates. Although, a community might have many members but all of them are not interested in the products or services unless they are cajoled into.

 

The solution is not to acquire the different platforms but deploy novel ideas to attract the number of followers. They should be responsive unlike the present scenarios where their interaction is limited to only the likes on the updates.  Photo sharing is one of the best methods to inculcate interest among the users so that they could participate in discussion.


add Ornamented Slide Open Social Sharing to blogger blog


slide-out-christmas-ornament-blogger

In my previous Posts i have written a few Tutorials on Share this social Bookmarking Gadgets. Today i going to Share a beautiful ornament style sharing widget. This Ornamented Sharing widget Showing at Bottom Right Corner of your blog with Social Bookmarking options for your blog Readers. When Readers mouse hover the ornamented slides open with Sharing Buttons for FaceBook, Twitter, Pintrest, StumbleUpon, Google Plus & ETC. Check Out The Demo Link Below.







Add it to blogger


Note:-  Always Make a Backup of Your Template Before You Edit Your Template –( how to make a template backup)

1. Go To Your Blogger Dashboard>> Template>> Proceed.

2. Press CTRL+F and find the following Code in you template. (how to find code using search bar)

</head>

3. Paste The Following Code Above/Before </head>



<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;1cce35ce-6744-4bac-9fa5-8f17a67a6fa6&quot;, onhover:false});</script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Next Find the following piece of code.



</body>

5. and paste the following code before/above  “</body>.”



<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisOrnament'/><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisOrnament&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;pinterest&#39;,&#39;stumbleupon&#39;,&#39;linkedin&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39;
<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;holiday&#39;});</script></div>

Click To Save your Template & You’re Done! Also Check out Our Previous Posts on Social Bookmarking.



If you face any trouble while installing the Gadget then please let us know. I am always open to curious and delicious questions so never hesitate asking for help. Thanks For Reading Our Post…

Add Facebook like/fan Box To Blogger Blog Easily

Facebook Like Box

Facebook Page Is Also Good Way To Promote your  Blog And Increase Readers. This Facebook Box Will Help Your Visitor To Become A Regular Reader Just By Clicking Like Button. Most Of Readers Like To Fetch Updates From Facebook Page (This Is Better Than Email Newsletter). Follow These Steps To Add Facebook Like Box To Blogger Blog.  See how many users already Liked your page.
Like your Facebook page with just one click, without having to visit the page.Read your page’s recent posts (if you choose to display them).Here is a tutorial on adding a Facebook Like box (formerly a Fan box) to Blogger/blogspot. It’s a good way to promote your Facebook page. A Like box lets your readers. Follow the Simple Steps. in my previous I share with Facebook Activity Feed Widget Check out the our previous post.

 

Add it to blogger

 

1. Go to Facebook Developer Page

2. Get your Facebook page id URL by Visiting your Facebook fan page.Facebook Page id

3. and paste your fan page url in Facebook Page url box like screen shoot below.

Facebook Like Box Setting

4. Set other parameters such as width, height and stream. The Preview on the right will update itself as you enter the changes.
5. Click Get Code button when done. You’ll be given two codes, titled iframe and XFBML. You only need the iframe code.

The Iframe Code Should Look Like This . Don not Copy This Code

Iframe Code

6. Copy the code (the code provided by Facebook, not the sample code in no.5).
7. In Blogger Dashborad, go to Layout and click a Add-A-Gadget link. Select HTML/Javascript gadget and paste the code in the content box. Save and view your blog. For Further Help See Video Tutorial. Enjoy!

Adding this widget is surely easy but still if you encountered any troubles just post your query below in comment box and I would love to reply back as soon as time allow thanks for reading our post. happy blogging.