Saturday, February 7, 2015

Post title ရဲ႕ေအာက္မွာ floating social media sharing buttonsေလးထည့္ခ်င္ရင္

ေရးသူ ICE Photography ရက္စြဲ 7.2.15

Step 1. Access your Blogger Dashboard and go to Template > click on the Edit HTML button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it.

Search ကေန ေအာက္ကကုဒ္ေလး႐ွာေပးပါ

</head> မေတြြ႔ခဲ့ရင္ ပံုမွာျပထားတဲ့အတိုင္း

....ေနရာမွာ click လိုက္ပါ...

Step 3.. </head> ကိုေတြ႔ပီဆိုရင္ေတာ့ သူ႔ရဲ႕အထက္က ေအာက္ကကုဒ္ကို ထည့္ေပးပါ.. .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function() {
var $movesbuttons = $("#floating-social-buttons"),
$window = $(window),
offset = $movesbuttons.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'});
} else {
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'});
}
});
});
//]]>
</script>

Step 4. Now ဆက္သြားရေအာင္ ]]></b:skin> ကို႐ွာမယ္ ေတြ႕ရင္သူ႕ရဲ႕အေပၚမွာ ေအာက္ကကုဒ္ေလး ထည့္ေပးပါ:

#floating-social-buttons {
padding: 6px 0px 12px;
position: absolute;
background: #F6F6F6;
border-bottom: 1px solid #DEDEDE;
width: 550px;
height: 18px;
z-index: 99;
}
.floating-social-buttons {
margin-left: 5px !important;
}
.floating-social-buttons li {
float: left;
margin-left: 5px;
list-style:none;
}

Step 5. Finally, ေနာက္ဆ့ံုးအဆင့္အေနနဲ႔
<div class='post-header'> ရွာေပးပါ ေတြ႔ပီဆိုရင္ သူ႔ရဲ႕ေအာက္မွာ ေအာက္ကကုဒ္ကို ထည့္္ေပးပါ:

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 0 35px0;clear:both;'>
<div id='floating-social-buttons'>
<ul class='floating-social-buttons'>

<li><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url+ "&layout=button_count&show_faces=false&width=100&height=25&action=like&font=tahoma&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li>

<li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li>

<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li>

<li><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li>

</ul>
</div>
</div>
</b:if>