.
,Sejarah jam gadang, danau singkarak, danau maninjau, hotel, tujuan wisata sumatera barat,daftar,jam gadang, fort de kock,West Sumatra, Sumatera Barat, Tourism

Many visitors who use social networking is a good opportunity for bloggers to share any article into social networking sites in the hope that more and more visitors coming to read our blog-reading, of course this is very influential on our blog position in the eyes of search engines. But if we own a share article by article from our blogs to social networking sites, then the visitors who will come to our blog is only a number of friends who exist on our network only. To that add a button or link that serves to share our articles to social networking sites are very useful for our blog visitors can share our articles link to their networks.
Share Button to Social Networking

Two Ways Social Networking Integration Sharing Button On Blog

1). Integrated Sharing button on the article

Step 1
Login to Blogger
Step 2
Go to "Design - Edit HTML" and click "Expand Widget Templates"
Step 3
Find the code below:

]]></ B: skin>

Step 4
Enter (copy and paste) the code below the above code in step 3:

. Sharesoc {
display: inline-block;
float: right;
height: 125px;
margin: 5px 0;
width: 60px;
}

Step 5
Find the code below:

<data:post.body/>

Step 6
Enter (copy and paste) the code below the above code in step 5:

<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'> Share </ a> <script src = 'http://static.ak.fbcdn. net / connect.php / js / FB.Share 'type =' text / javascript '/>
</ Div>
<div style='float: right; MARGIN: 0px 0pt 8px 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</ Div>
</ Span>

Step 7
Save the template and preview your blog ...

2). Floating Share button on the Sidewalk article

Step 1
Login to Blogger
Step 2
Go to "Design - Edit HTML"
Step 3
Find the code below:

]]></ B: skin>

Step 4
Enter (copy and paste) the following CSS code in step 3 above code:

# Sharehal {position: fixed; bottom: 20%; margin-left: 185px; float: left; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; background-color: # fff; padding: 0 0 2px 0; z-index: 10;}
# Sharehal. Tblshare {float: left; clear: both; margin: 5px 5px 0 5px;}
. Fb_share_count_top {width: 48px! Important;}
. Fb_share_count_top,. Fb_share_count_inner {-moz-border-radius: 3px;-webkit-border-radius: 3px;}
. FBConnectButton_Small,. FBConnectButton_RTL_Small {width: 49px! Important;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
. FBConnectButton_Small. FBConnectButton_Text {padding: 2px 2px 3px! Important;-moz-border-radius: 3px;-webkit-border-radius: 3px; font-size: 8px;}
. Sharesoc {display: inline-block; float: right; height: 125px; margin: 5px 0; width: 60px;}

Step 5
Find the code below:

</ Body>

Step 6
Enter (copy and paste) the code below the above code in step 5:

<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'> Share </ a> <script src = 'http://static.ak.fbcdn. net / connect.php / js / FB.Share 'type =' text / javascript '/>
</ Div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</ Div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</ Div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</ Div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</ A>
</ Div>
</ Div>

Step 7
Save the template and preview your blog ...

3).Both of the above will show the share of social networking on various pages
Both of the above will show the share of social networking on various pages (either main page or pages of the article). Now your task is to integrate the two ways to add social networking button above and then manage it looks, if we open the main page of the social networking buttons shown is from the first way (Integrated Sharing button on items) and if we open the article page, the social networking buttons shown is from the second way (Floating Share button on the Sidewalk article.) How to set the display of the share is the previous article that discusses Conditonal Tag.
Answer: (Please do not open it before trying ...)

<b:if cond='data:blog.pageType != "item"'>
<span class='sharesoc'>
<div style='float: right; margin-right: 0px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'> Share </ a> <script src = 'http://static.ak.fbcdn. net / connect.php / js / FB.Share 'type =' text / javascript '/>
</ Div>
<div style='float: right; MARGIN: 0px 0pt 8px 0pt;'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</ Div>
</ Span>
</ B: if>

<b:if cond='data:blog.pageType == "item"'>
<div id='sharehal'>
<div class='tblshare' id='fb'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'> Share </ a> <script src = 'http://static.ak.fbcdn. net / connect.php / js / FB.Share 'type =' text / javascript '/>
</ Div>
<div class='tblshare' id='rt'>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</ Div>
<div class='tblshare' id='su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</ Div>
<div class='tblshare' id='digg'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
<a class='DiggThitblshare DiggMedium'/>
</ Div>
<div class='tblshare' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</ A>
</ Div>
</ Div>
</ B: if>

Description:
To adjust the position of the button on the second way (Floating Share button on the Edge of article) note the code in Step 4 line 1:

* Bottom: 20% = 20% change the value to set the distance between the bottom of the browser with a button
* Margin-left: 185px = change the value 185 to adjust the distance between the edge of the browser with a button
* Float: left = change left to right if we want to put the button on the right page article
* Background-color: # fff = fff untuh change the value to set background color and adjust the background color of your blog posts

Good luck


Related Post



Follow by Email