3D Social Media Button බ්ලොග් එකට දාගන්න

කවුරුත් දන්න දෙයක් තමයි Social Media Network එකක් හරහා නරඹන්නන් සම්බන්ද කරගැනීම මගින් තමන්ගේ අඩවියේ Trafic වැඩිකරගැනීමට පුළුවන් බව.ඒක හින්දා අපි අද කියන්න යන්නේ 3D Animated Social Media Button ටිකක් ඔයාලගෙ Blog එකට දාගන්න විදිහ ගැන.මේ 3d Social Media Button Gadget  එක Animated ,3D ඒවගේම Fixed ඒ කිව්වේ අපි පහලට Scroll කරගෙන යනකොට Gadget එකත් පහලට එනවා.  

1. මුලින්ම ඔයාලගෙ Blogger ගිණුමට Log වෙලා More options->Layout තොරන්න.

 

1. Layout එකේ තියෙන Add a Gadget Button එකක් Click කරන්න.
2. ලැබෙන Pop Up Window එකේ HTML/JavaScript කියන එක Select කරන්න.

දැන් ලැබෙන Window එකේ Content කියන තැනට පහලින් මම දීලා තියෙන Code  එක Paste කරන්න. Title එකක් දාන්න එපා. Save කරන්න.

1. නිල් පාට කොටස වෙනුවට Facebook Fan page Link එක යොදන්න.
2. රතු පාට කොටස වෙනුවට Twitter Fan page Linkඑක යොදන්න.
3. තැඹිලි පාට කොටස වෙනුවට RSS Feed Link එක යොදන්න.
4. කොළ පාට කොටස වෙනුවට Google Plus Fan page Link එක යොදන්න. 

<!-- 3D Social Media Widget Code -->
<style> .SFT-flt-wdt { position:fixed; right:10px; top:36% ; } .TNT-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .TNT-flt-wdt img:hover { -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg);  -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);  } </style>
<div class="SFT-flt-wdt">
<style> .SFT1 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBdfSlcqY1Vp-tghClJUSEymekR0T25JfISM4UfoeBrjc6_Hm8GL8d048FXdygc9jGhj2bi9CWxtxDlzIklpFyARwi4xf6NFtBcoIEmV6V6t6wfMRK1eWQyxt15B4uK6oHyuUzm5pDFJu6/s1600/Facebook+Icon.png') bottom;  text-indent: -99999px; } .SFT1:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxpP-KJSJC8uUnNDa29RKT_XqdWpi791SKHI6VMm4t9drntXFbkbbiashBcEMpJMlkDqlG3wnarWcRCcIzglEIW1RzJ4BOmhA7iiVVpa22NkVZWUhzuAcufmLDbvEE1pNgMPkK1iWt_hn/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style>
<p>
<a class="SFT1" href="YOUR FACEBOOK LINK HERE"></a><br />
<style> .SFT2 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRq6weM9rnmErnYtMg7dkfA07ChrJvuQh7VEChoziIUQmVKRfXGmeEvqYbXu2qtrWnvKNjHfFvsiNl8br_2oiSz5ZCK62uHa2_kYVSgHCRVd_kwP8akuO2aQbiVcItKLz4OwipuAyIcRQ6/s1600/Twitter+Icon.png') bottom;  text-indent: -99999px; } .SFT2:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVBRD2GQAYzFv13CNk9GwidF7Ow6sY05LOP9B3V8p-pDlbPhbFjLAMyirflsqSpVbtnq0kjl-gnqkoTjdxm7zj2WKUyP6RSHrdfIF4pTuMU-2p1wM-pt3I9j3OT7OOoo9aKJZ8_v0y5yxh/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style>
<p>
<a class="SFT2" href="YOUR TWITTER LINK HERE"></a><br />
<style> .SFT3 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3bP3i3GpUOpK343j0kVumuvCrvFeFqYdeHBexhnrS7YbNkXLO8lFaLxSbVxWzdmXIkfzvLumt0ov9l405I-CFwSNKGAzsqS2HNOVab_9whHwMGRlGk_XOMA-0Zb1CIak7pXmIeIIw177/s1600/Feedburner+Icon.png') bottom;  text-indent: -99999px; } .SFT3:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz4ZdIJ8TBqyzej2oeTrMRyfvekcn8whsj309M5qgs-cz_E4LC2_PPAC6J89IOYk8TIIGi6Dd4Sw_OuxH7YZvGa2gR6S6COQNPA3MQLVUGAzKGzK4TXdVVcXlwdMPMOLa1jXFc4zvex5S4/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style>
<p>
<a class="SFT3" href="YOUR RSS FEED LINK HERE"></a><br />
<style> .SFT4 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhm7uTmgVJQ-2soxv0eGfyQkskcNS6_k0cZmu7CEouBhvQUed_aUyPgixeZipFENSF3vIPpo7MYeMQapEgsMwkfbmE_gnk3xW5Cwt-hc198dEDuwoj1LqaVeomkEqVCnfNG8-uutP24Hhv/s1600/Google+Icon.png') bottom;  text-indent: -99999px; } .SFT4:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZeIqG3d8kG6oK7FjFb3N9_FJ3YlBFR77Quwn_sRYfEuoqN74xtaNJVYV3-Zukb-KvpL3rdFI5lLw1eGR7-b_Gd6l2THSVWKAKAvOQo6rtR_Pd5paxM5xV9R3GusMT3iw0g3zr_KxCxbjN/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style>
<p>
<a class="SFT4" href="YOUR GOOGLE PLUS LINK HERE"></a></div>
<p>
<!-- 3D Social Media Widget Code -->