ব্লগার ব্লগের জন্য সুন্দর একটি সোশ্যাল মিডিয়া ওয়েডগেট !!

বন্ধুরা আজকে আমি আপনাদের সঙ্গে খুব সুন্দর একটি সোশ্যাল ওয়েডগেট শেয়ার করবো আশাকরি আপনাদের ভাল ও পছন্দ হবে । এটা একদম নতুন স্টাইল সঙ্গে এর ইফেক্ট টাও দারুন এটাতে মোট ৯ টি সোশ্যাল মিডিয়া যুক্ত আছে যেগুল দ্বারা আপনার ব্লগ ভিজিটর খুব সহজে আপনার ব্লগে যুক্ত থাকতে পারবে । তাহলে আর কথা না বাড়িয়ে নিচে থেকে ডেমো সহ কিভাবে যুক্ত করবেন সেটা দেখেনিন ।


ব্লগার ব্লগের জন্য সুন্দর একটি সোশ্যাল মিডিয়া ওয়েডগেট !!


কিভাবে আপনার ব্লগে ব্যবহার করবেন 



  • প্রথমে ব্লগার অ্যাকাউন্ট লগইন করুন 
  • ড্যাশবোর্ড থেকে Layout → Add a Gadget এ ক্লিক করুন
  • এবার HTML/Javascript এ ক্লিক করুন 
  • এবার নিচের কোড গুল ফাকা ঘরে বসিয়ে দিন 

<style> #wg-stytuch{ width: 415px; height: 80px; background: url("http://1.bp.blogspot.com/-cwPDl_I1XwE/UnjX5T7TNbI/AAAAAAAAD5I/vdBr7_ZsOsg/s1600/Bg.png") no-repeat 15px 10px; padding:22px 0px 15px 100px; margin: 14px auto; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); } .wg-stytuchwidgt{ height: auto; margin: 0 auto; } .wg-stytuchwidgt li{ float: left; list-style: none; } .wg-stytuchwidgt li a { display: block; width: 40px; height: 40px; margin: 0 auto; margin-top: 20px; outline: none; position: relative; z-index: 2; text-indent: -9000px; text-decoration: none; } .wg-stytuchwidgt li .facebook { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat; } .wg-stytuchwidgt li .twitter { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -45px; } .wg-stytuchwidgt li .gplus { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -90px; } .wg-stytuchwidgt li .pinterest { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -135px; } .wg-stytuchwidgt li .rss { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -180px; } .wg-stytuchwidgt li .linkedin { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -225px; } .wg-stytuchwidgt li .tumblr { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -270px; } .wg-stytuchwidgt li .youtube { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -315px; } .wg-stytuchwidgt li .mail { background: url("http://3.bp.blogspot.com/-qX-W99jV3Tk/VN33zyvEQDI/AAAAAAAAIms/aqpSXEVllvg/s1600/wg-keep-stytune.png") no-repeat 0px -360px; } .wg-stytuchwidgt li a span { width: 80px; height: 20px; line-height: 20px; padding: 5px; left: 50%; margin-left: -52px; font-family: 'Alegreya SC', Georgia, serif; font-weight: 400; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 5px solid #446cb3; background: #446cb3; text-indent: 0px; position: absolute; pointer-events: none; border-radius: 5%; opacity: 0; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); -webkit-transform: translate(35px) rotate(25deg) scale(1.5); -moz-transform: translate(35px) rotate(25deg) scale(1.5); -o-transform: translate(35px) rotate(25deg) scale(1.5); -ms-transform: translate(35px) rotate(25deg) scale(1.5); transform: translate(35px) rotate(25deg) scale(1.5); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .wg-stytuchwidgt li a span:before, .wg-stytuchwidgt li a span:after { content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 11px solid rgba(0,0,0,0.1); } .wg-stytuchwidgt li a span:after { bottom: -15px; margin-top: 6px; margin-left: -12px; border-top: 10px solid #446cb3; } .wg-stytuchwidgt li a:hover span { opacity: 0.9; bottom: 50px; -webkit-transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -o-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1); } </style> <div id="wg-stytuch"> <ul class="wg-stytuchwidgt"> <li><a class="facebook" href=http://www.facebook.com/#"><span>Facebook</span></a></li> <li><a class="twitter" href=http://twitter.com/#"><span>Twitter</span></a></li> <li><a class="gplus" href=https://plus.google.com/b/#"><span>Google Plus</span></a></li> <li><a class="pinterest" href=http://www.pinterest.com/#"><span>Pinterest</span></a></li> <li><a class="rss" href=http://feeds.feedburner.com/#"><span>RSS</span></a></li> <li><a class="linkedin"href=http://www.linkedin.com/in/#"><span>LinkedIn</span></a></li> <li><a class="tumblr" href=http://www.thumblr.com/#"><span>Tumblr</span></a></li> <li><a class="youtube" href=http://www.youtube.com/#"><span>Youtube</span></a></li> <li><a class="mail" href=Mailto:#"><span>Mail</span></a></li> </ul></div>


উপরের কোড থেকে # মুছে সেখানে আপনার বিভিন্ন সোশ্যাল মিডিয়া উজার নাম বসিয়ে দিন । এবং সব শেষে Save এ ক্লিক করে বেরিয়ে আসুন । এবং আপনার ব্লগ দেখুন


Live Demo 


See the Pen bdEYEK by MD Aslam parvez (@okpt123) on CodePen.




উপর থেকে ডেমো দেখে নিন আশাকরি আপনি কাজটি করতে সফল হয়েছেন । কোন রকম সমস্যা হলে নিচে কমেন্ট করুন পোস্টটি ভাল লাগলে বন্ধদের সঙ্গে শেয়ার করুন । ভাল থাকবেন সুস্থ থাকবেন । আসসালামু আলাইকুম ।

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

2 মন্তব্যসমূহ

আপনার একটি মন্তব্য একজন লেখক কে ভালো কিছু লিখার অনুপেরনা যোগাই তাই প্রতিটি পোস্ট পড়ার পর নিজের মতামত জানাতে ভুলবেন না । তবে বন্ধুরা এমন কোন মন্তব্য পোস্ট করবেন না যার ফলে লেখকের মনে আঘাত করে ! কারণ একটা ভাল মন্তব্য আমাদের আরও ভাল কিছু লিখার অনুপেরনা যাগাই !!

  1. নামহীন১১:৪৮ PM

    আমার যেই সাইটগুলোতে আইডি নাই সেইগুলোতে # এর জায়গায় কি বসাবো???

    উত্তরমুছুন
  2. সেগুল এমনি যেমন আছে সেই রকম রেখেদিন কোন সমস্যা নেই :) ধন্যবাদ ।

    উত্তরমুছুন
নবীনতর পূর্বতন

نموذج الاتصال