Home » » ব্লগার হেডারে স্যোসাল মিডিয়া আইকন সংযুক্ত করুন

ব্লগার হেডারে স্যোসাল মিডিয়া আইকন সংযুক্ত করুন

Written By Ruhul on Wednesday

Social Media icon
"বর্তমানে সোস্যাল মিডিয়া বাটন খুবই গুরুত্বপূর্ণ যেকোন ওয়েবসাইট এর জন্য। এই টিউটোরিয়ালটির মাধ্যমে শিখতে পারবেন  কিভাবে আপনার Bogger or Blogspot সাইটে Social media icon সংযুক্ত করবেন।" 


ব্লগার হেডারে Social media icon সংযুক্ত করুন খুব সহজে



Facebook, Twitter, Google Plus সোস্যাল মিডিয়ার বিভিন্ন পেজ লাইক করতে ও ভিজিটর বাড়াতে পেজগুলোর লিংকসহ আইকন সংযুক্ত করা অত্যাবশ্যক। বেশ কয়েকভাবে ব্লগার সাইটে সোস্যাল মিডিয়ার আইন সংযুক্ত করা যায়। তবে নিচের টিউটোরিয়ালটি অনুসরণ করুন আপনি নিজেই পারবেন:

Step #1
আপনার ব্লগার সাইটে লগইন করুন তারপর ব্লগার Dashboard থেকে Template এ যান তারপর Edit HTML ক্লিক করুন।
Rose computer Institute


Step #2
Template এ কোড এর মধ্যে যেকোন জায়গায় মাউস ক্লিক করুন তারপর Ctrl+F চেপে সার্চ
 করুন ]]></b:skin> এই ট্যাগটি। তারপর নিচের কোডটি এই ট্যাগের উপরে কপি করে পেষ্ট করে দিন।


 /* Social icons for Blogger
----------------------------------------------- */

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}



Step #3
এবার নিচের কোডটি সার্চ করুন:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Step #4
কোডটি খুঁজে বের করার পর কোডটির উপরে, নিচের  কোডটি কপি করে পেষ্ট করুন:
<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://2.bp.blogspot.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>

<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='http://3.bp.blogspot.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>

<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='http://1.bp.blogspot.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>

<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='http://2.bp.blogspot.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>

</ul></div>



Step# 5
উপরের কোডটির কিছু কিছু জায়গায় এডিট করতে হবে:
Facebook, twitter এর username এর স্থলে আপনার Facebook ও Twitter এর username টাইপ করুন।
Google plus এর xxxxxxxxxxxx এর স্থলে আপনার google plus আইডি ব্যবহার করুন।
Feeds/posts এর পূর্বে আপনার ব্লগ এর url ব্যবহার করুন।

Step# 6
এখন আপনার Template টি সেভ করুন। তারপর  আপনার ব্লগটি দেখুন।
Designed by: Ruhul | Facebook | Twitter | Instagram
Copyright © 2018. Alamin Computer - All Rights Reserved