Aug 2, 2015

ব্লগারে যুক্ত করুন আকষর্ণীয় Social Media Icons উইজেট

আমরা ইতোপূর্বে আপনাদের সাথে এই ধরনের Social Media Icons শেয়ার করেছি। তবে আগের গুলিতে আমরা মিডিয়া আইকন হিসেবে Image ব্যবহার করেছিলাম। যার কারনে সেগুলি তেমন একটা কাষ্টমাইজ করার উপায় ছিল না। কিন্তু এখন আমরা যেটি শেয়ার করছি এটিতে Font Awesome Icon ব্যবহার করেছি। ফলে আপনি এটিকে ইচ্ছামত কাষ্টমাইজ করে যে কোন স্টাইল করতে পারবেন।
Blogger-Social-Media-Icons
সব ধরনের ব্লগ এবং ওয়েবসাইটের সুন্দর্য বৃদ্ধি করার জন্য Social Media Icons যুক্ত করা হয়। আমি আজ যে পোষ্টটি শেয়ার করবো এটিতে Font Awesome Icon ব্যবহার করে ইচ্ছে করলে আনলিমিটেড আইকন ব্যবহার করতে পারবেন। এই Social Media Icons যুক্ত করার ফলে শুধুমাত্র যে আপনার ব্লগের সুন্দর্য বৃদ্ধি পাবে তা নয়, পাশাপাশি আপনার Social Media গুলির অনেক ফ্যান বৃদ্ধি পাবে। তাছাড়া এটি আমরা Widgets হিসেবে আপনাদের সাথে শেয়ার করছি। যার ফলে ব্লগে যুক্ত করার জন্য কোন প্রকার ঝামেলা পোহাতে হবে না। শুধুমাত্র আপনার ব্লগে যে কোন একটি উইজেট নিয়েই সহজে এটি যুক্ত করতে পারবেন। ডেমো দেখুন - Live Demo

কিভাবে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগার একাউন্টে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
blogger-template-edit
  • এরপর কিবোর্ড হতে Ctrl+F চেপে </head> অংশটি সার্চ করুন।
  • নিচের Style Sheet টি কপি করে </head> ট্যাগের উপরে পেষ্ট করুন।
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
  • এরপর Save Template এ ক্লিক করে বেরিয়ে আসুন।

উইজেট বাটন যুক্ত করাঃ

  • ব্লগার ড্যাশবোর্ড হতে Layout এ ক্লিক করুন।
  • এখন ডান পাশের লেআউট হতে Add Gadget এ ক্লিক করুন। নিচের চিত্রে দেখুন -
add-blogger-gadget
  • তারপর HTML/JavaScript এ ক্লিক করুন।
  • এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।
<style type="text/css">
.pro-social {text-align:center; margin-top:10px}
.pro-social .fa {color:#FFF; font-size:15px; margin:0px 5px; width:14px; height:14px; border-radius:50%; padding:8px}
.pro-social .fa-facebook {background:#3a5795}
.pro-social .fa-google-plus {background:#d64431}
.pro-social .fa-twitter {background:#00aced}
.pro-social .fa-pinterest {background:#cb2027}
.pro-social .fa-youtube-play {background:#cc181e}
.pro-social .fa-rss {background:#f8991d}

.pro-social .fa {-webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); -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}
.pro-social .fa:hover {-webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg)}
</style>

<div class="pro-social">
<a href="#" target="_blank" title="Write Title"><i class="fa fa-facebook"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-twitter"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-google-plus"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-youtube-play"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-pinterest"></i></a>
<a href="#" target="_blank" title="Write Title"><i class="fa fa-rss"></i></a>
</div>
  • সবশেষে Gadget টি Save করুন।

কাষ্টোমাইজেশনঃ

  • উপরের নীল রংয়ের অংশ হতে বাটনগুলির কালার পরিবর্তন করতে পারবেন।
  • লাল রংয়ের অংশ হতে বাটনগুলি Height ও Width পরিবর্তন করতে পারবেন।
  • নতুন আইকন যুক্ত করার জন্য নীল কালারের একটি নতুন Css ও পিংক কালারের Html ট্যাগ যুক্ত করতে হবে।
Subcribe to our all updates

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

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

  1. vi amake
    (http://prozokthilab.blogspot.com)
    temple er download link ta den plz.

    ReplyDelete

 
Subscribe for all Updates

Subscribe Now

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

Powered by: