২৭ এপ্রিল, ২০১৫

ব্লগের Header এ যুক্ত করুন আকর্ষণীয় ডিজাইনের Social Media Icons

ব্লগের Header এ যুক্ত করুন আকর্ষণীয় ডিজাইনের Social Media Icons
4/ 5 stars - "ব্লগের Header এ যুক্ত করুন আকর্ষণীয় ডিজাইনের Social Media Icons" সব ধরনের ব্লগ এবং ওয়েবসাইটের সুন্দর্য বৃদ্ধি করার জন্য Social Media Icons যুক্ত করে থাকেন। আর ব্লগার টেমপ্লেটের Header এ Social Media ...
-
Blogger-Header-Social-Media-Icons
সব ধরনের ব্লগ এবং ওয়েবসাইটের সুন্দর্য বৃদ্ধি করার জন্য Social Media Icons যুক্ত করে থাকেন। আর ব্লগার টেমপ্লেটের Header এ Social Media Icon যুক্ত করার ফলে আপনার কাঙ্খিত ব্লগটির সুন্দর্য আরও অনেকগুন বেড়ে যায়। এ জন্য সবাই চায় অন্য কোথাও এই Social Media Icon যুক্ত না করে সরাসরি Header এ যুক্ত করতে। আমি আজ যে পোষ্টটি শেয়ার করবো এটিতে আপনি ইচ্ছে করলে আনলিমিটেড আইকন ব্যবহার করতে পারবেন। আপনার ইচ্ছামত আইকন যুক্ত করতে, আবার পছন্দ না হলে বাদ দিতেও পারবেন। কাষ্টমাইজ করার জন্য "প্রযুক্তি ডট কম" এর তৈরী বেশ কিছু Social Media Icons Set  ডাউনলোড করার লিংক দেব। যার ফলে ইন্টারনেট হতে আপনাকে খুজে খুজে এ গুলি সংগ্রহ করতে হবে না। এই Social Media Icons যুক্ত করার ফলে শুধুমাত্র যে আপনার ব্লগের সুন্দর্য বৃদ্ধি পাবে তা নয়, পাশাপাশি আপনার Social Media গুলির অনেক ফ্যান বৃদ্ধি পাবে।
Blogger-Header-Social-Media-Icons
কিভাবে যুক্ত করতে হয়ঃ
  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
Blogger Html Edit
  • এরপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • নিচের Css কোডগুলি কপি করে ]]></b:skin> এর উপরে পেষ্ট করুন।
#social-icons-V2 {
  height:50px;
  width:40%;
  float:right;
  clear:both;
  z-index: 2;
  position: relative;
  margin-right:10px;
  margin-bottom:0px;
}
.social-media-icons-V2 {
  display:table
}
.social-media-icons-V2 ul {
  text-align:right;
  padding:5px 5px 0 0
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
}
.social-media-icons-V2 ul {
  margin-bottom:0;
  padding:0;
  float:right;
}
.social-media-icons-V2 li.media_icon {
  margin-left:6px;
  padding-left:0 !important;
  background:none !important;
  display:inline;
  float:left;
}
.social-media-icons-V2 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;
}
  • তারপর প্রথমে নিচের ফুল ট্যাগটি সার্চ করুন। ফুল ট্যাগটি খুজে না পেলে শুধুমাত্র লাল অংশটি সার্চ করুন।
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  • উপরের লাইনটির ঠিক উপরে নিচের কোডগুলি কপি করে পেষ্ট করুন।
<div class='social-media-icons-V2' id='social-icons-V2'>
<ul>
 <li class="media_icon"><a href="#" target="_blank" title="Facebook"><img border="0" src="http://2.bp.blogspot.com/-xE7sjnxjz4Y/VHHZ-CDyBUI/AAAAAAAADlw/UAIc39a-Axg/s1600/FB.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Twitter"><img border="0" src="http://2.bp.blogspot.com/-zQ5luXJWYCU/VHHZ_c4JymI/AAAAAAAADmE/270Cny1r06s/s1600/Tw.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Google+"><img border="0" src="http://3.bp.blogspot.com/-0GCJDgc-rdY/VHHZ-ebZ9uI/AAAAAAAADl0/0ba2RRqTGfU/s1600/Go.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Youtube"><img border="0" src="http://2.bp.blogspot.com/-jQR3EOYAMqQ/VHHaAs12FgI/AAAAAAAADmQ/KR5an5a5vKU/s1600/YT.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Pinterest"><img border="0" src="http://2.bp.blogspot.com/-KKI86JOFLAI/VHHZ-BDRu4I/AAAAAAAADmU/llwK5LGm_6Q/s1600/Pi.png" /></a></li>
 <li class="media_icon"><a href="#" target="_blank" title="Rss"><img border="0" src="http://2.bp.blogspot.com/-w1gFVZK3Xkc/VHHZ_EsvcHI/AAAAAAAADmA/wnPfPJ0MlOQ/s1600/Rs.png" /></a></li>
</ul></div>
  • সবশেষে Save Template এ ক্লিক করুন।
কাষ্টমাইজেশনঃ
  • # এর স্থলে আপনার Social Media Url দিন।
  • যদি কোন আইকন Remove করতে চান তাহলে <li .... </li> অংশটি ডিলিট করুন।
  • যদি নূতন আইকন যুক্ত করতে চান তাহলে এখান থেকে Download করে নিন।
Subcribe to our all updates

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

0 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

একটি মন্তব্য পোস্ট করুন

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: