Thursday, 29 August 2013

How to ADD Pinterest "Pin It"Button To Blogger

2 comments
Today I going to tel you about how to  Adding Pinterest “Pin It” Buttons To Blogger ,it is necessary to add a pinterest pin button on blog it give nice amount of traffic on your blog The Beginner must add Pinterest button blog First you must create a Account in Pinterest , Pinterest is the Fastest growing Social Media  It gave many platform to blogger ,Blogger must utilize this Amazing Social Network  
 Pinterest is the fastest growing Social Network Today According to official source, Pinterest is becoming the latest trend in social media. Pinterest have attracted millions of audience just under the nose of top rated social networking websites like Facebook, Google Plus, Twitter and etc. And just like other social networking platform, everyone is rushing towards registering there account on Pinterest to discover what the buzz is all about. The biggest reason behind the success of Pinterest is its uniqueness. Instead of writing boring content it uses images and videos. It allows users to Pin any featured image or video to their virtual pinboard. Users who are your friends or followers can like or even repin your shared content to their Pinboard. You can arrange your pins under specific pinboards (categorize) according to your need.

How to ADD Pinterest "Pin It"Button To Blogger
Adding Pinterest“Pin It” Buttons To Blogger:
So to insert a follow me button you don’t need any extra working like adding CSS to template. All you need to do is to place simple HTML coding any where in your blog i.e. In your Sidebar, Header, Below post and etc. Just paste the following code where you want to display Pinterest Follow me Button.

Style No: 1
 Adding Pinterest“Pin It” Buttons To Blogger:

a href="http://pinterest.com/abin007/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" /></a>




Style No: 2
 Adding Pinterest“Pin It” Buttons To Blogger:

<a href="http://pinterest.com/abin007/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/pinterest-button.png" width="80" height="28" alt="Follow Me on Pinterest" /></a>


Style No: 3 
 Adding Pinterest“Pin It” Buttons To Blogger:

<a href="http://pinterest.com/abin007/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/big-p-button.png" width="60" height="60" alt="Follow Me on Pinterest" /></a>




Style No: 4
 Adding Pinterest“Pin It” Buttons To Blogger:

<a href="http://pinterest.com/abin007/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/small-p-button.png" width="16" height="16" alt="Follow Me on Pinterest" /></a>



Remember: Don’t forgot to replace abin007 with your Pinterest Username

Adding Pinterest “Pin It” Buttons To Blogger:
 Remember: As I have mentioned above don’t try to edit the coding just do as directed. If you try to do some change then the scripts will not work. So to insert Pinterest “Pin It” Buttons to Blogger .


    1. Simply Go To Blogger.com >> Your Blog >>
    2. Now Go To Template >> (Your Can Backup Your Template, in case any thing went wrong)
    3. Now Click on Edit HTML >> Proceed
    4. Click the box named “Expend the Widget” (It is on the top left of your template coding)
    5. Now Search for the Following Code in your template
 <data:post.body/>
 Now it’s up to you where you want to place your widget. If you want to place Pin It button just under your post title then just paste the following code before <data:post.body/> (above) 


But if you want to place it at the end of your post then paste the following code after <data:post.body/> (below)

 6.Now Paste the Following Codes below or above <data:post.body/> (according to your choice)

Code For Horizontal Buttons: 
 Adding Pinterest“Pin It” Buttons To Blogger:
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a> <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>



Code For Vertical Buttons:
 Adding Pinterest“Pin It” Buttons To Blogger:

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;); e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script>





How Pin it button Works:
When you will click on any Pin it button a new window will pop'd out. Now from here you can select any post that you want to pin. The visitor can pin one image at a time. If the visitor don't want to pin any image then he can click the Blue Cancel Bar at the top to cancel pinning.


If history proofs itself true again, we might see a down fall in the active users at Pinterest. But we don't need to worry about it until we are receiving traffic from Pinterest. So that's how you can insert Pinterest "PIN IT" and "Follow Me" button in blogger. Follows these Simple Steps and happy pining,

if you want some suggestion comment it right now,  Stay tuned by subscribing our email feed or follow me on social networks. thanks for reading our post. happy bloggin........!!!!!!




Read More..

Add Facebook popup like box to your bloggger & blog

2 comments
Add Facebook Popup like box for your blogger blog

In Previous Post I tell you about How Can Add Twitter follow Button on blog Today I going to tell How Can Add Facebook Popup Like Box On Blog It is necessary to add Facebook Popup like Box in your blog because we can get more like from this and our Blog & Facebook Page Gets more Readers and Followers thus we can get many traffic from Facebook I.e. we add Facebook Popup like Box when a Visitor visit our blog the popup like Box appear first  suppose that visitor click like button we can get a visitor and we can connect that visitor  Today every Professional Blogger use this to Create close relationship and to increase Visitors also Follow this simple Method I listed Below 

Add It To Blogger
You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup..So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. And paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24
*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;});
}});</script>
·         *7 Setting this value will effect cookie refreshment. I have set the like box to appear once to the visitor and like box will appear again after 1 week. If you want to display like box to your visitors after a 1 day then set 7 to 1. if you set the value to 1 then it can annoying your regular readers.
4. Now Search for </b:skin>.  Click the black arrow to expand the code.
5.  And paste following css code before above </b:skin>
/* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #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; -webkit-overflow-scrolling: touch; } #cboxTitle { margin: 0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor: pointer; } .cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(http://2.bp.blogspot.com/-jcn46y_t6D0/Uc8cG9q6ExI/AAAAAAAAC1k/K63u_2VkemM/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(http://4.bp.blogspot.com/-wQsw3MW4DK4/Uc7_hhV5UzI/AAAAAAAAC1U/Uskeu5jhHbo/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }
6. Save your template and you are done second last step! Visit your blog to see it working just perfectly. 
7. Now finally find following code.
</body>
8. And paste the following code before closing </body> tag.
<div style='display:none'>
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F
ThePowerHouseBlog&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/>
  </div>
  </div>
    </div>
·         Replace ThePowerHouseBlogwith your Facebook fan page username.
save your template and you are all done. .!!
Visit your blogs and see it popping up just fine! Remember 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.
I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong facebook fan growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our Facebook page.if you want some suggestion comment it right now,  Stay tuned by subscribing our email feed or follow me on social networks. Thanks for reading our post. happy blogginG........!!!!!!
Read More..

About Us

Happy Tick tech you to the beginner how can do this stuff? Blogger Helper promise you with this blog you ensure success in Blogging field in this blog have nice Tutorial it helps to beginner and others, Blogger Helpers tutorial is the most trust tutorial today, I conduct various research in Blogger and WordPress. This blog very easy to read my tutorial I recommended to Beginners they achieve lot from me I used simple language so easily to Understood  

Read More..

Wednesday, 28 August 2013

Add Twitter follow Button on blog

0 comments
Add Twitter follow Button in your blog 2013

It is important to add a Twitter follow button in blogger and blogs , the growing social media it create so many chance to get visitor o your blog it is necessary to add a Twitter follow button on blog ,Thus visitor can follow you and you can connect you and build good and great relationship
Follow this Simplest Method to add Twitter Follow Button in your blog
Add Twitter follow Button below post
 1. Go to your Blogger Dashboard>> Template>> Edit HTML
2. Press CTRL+F and find the following code.
<data:post.body/>
3. and paste the following code below/after <data:post.body/>
<a href=http://twitter.com/abincb123 class="twitter-follow-button">Follow
@bl0ggertricks</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Replace abincb123 with your twitter user name.
4. Save your widget and you are done!
Add Twitter Follow Button Below Post Title
1. Go to your Blogger Dashboard>> Template>> Edit HTML
2. Press CTRL+F and find the following code.
<div class='post-header-line-1'> </div>
or this.
<div class='post-header-line-1'/>
3. and paste the follow code below/after <div class='post-header-line-1'/> or <div class='post-header-line-1'>
<a href=http://twitter.com/abincb123  class="twitter-follow-button">Follow
@bl0ggertricks</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Replace abincb123  with your twitter user name.
4. Save your widget and you are done!
Add Twitter Follow Button Any where
1. Go to Blogger  Dashboard>> Layout >> Add a Gadget
2. Choose HTML/Javascript Widget
3. Paste the following code inside it and drag the widget to add your button to any location you want.
<a href=http://twitter.com/abincb123 class="twitter-follow-button">Follow
@bl0ggertricks</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Replace abincb123 with your twitter user name.
4. Save your widget and you are done!
if you want some suggestion comment it right now,  Stay tuned by subscribing our email feed or follow me on social networks. thanks for reading our post. happy bloggin........!!!!!!
Read More..
Icon Icon Icon Follow Me on Google Plus Follow Me on Pinterest

Copyright 2013 All Rights Reserved / Privacy Policy / Sitemap / Contact Us

Template by / Happy Tick / Powered by / Blogger