আসসালামু আলাইকুম কেমন আছেন সবাই? আশা করি ভাল আছেন, অনেক দিন পরে আবার আপনাদের সামনে হাজির হলাম,
[****বর্তমানে ৬০০ টাকায় ওয়েবসাইট দেয়া হচ্ছে, এই অফার সীমিত সময়ের জন্য দরকার হলে যোগাযোগ করতে পারেন Md Abul Bashar ****]
অনেক দিন’ই কিছু শেয়ার করতে পারিনি আপনাদের সাথে, তাই আজ আমার ডিজাইন করা একটি Social Bookmarks icon” fixed করা আপনাদের সাথে শেয়ার করব, অনেক ওয়েব সাইটে’ই দেখা যায় আপনি যদি ওয়েব সাইট ভিজিট করেন তাহলে যেকোন এক পাশে ফেসবুক/টুইটার/ফিড এই রকম আইকন গুলো থাকে যা আপনি মাউস নারাচারা করলেও ঐ আইকন গুলো নিদিষ্ট স্থান থেকে নরবে না, হ্যাঁ বন্ধুরা আজ আমি সেই পদ্ধতিটি’ই আপনাদের মাঝে শেয়ার করব। এখনও যদি আপনাদের বুঝতে অসুবিধা হয়, আসলে আমি কি বোঝাতে চেয়েছি? তাহলে এখানে ডেমো দেখুন। ডান পাশে ফেসবুক+ আইকন গুলো।
[button size=”large” type=”info” value=”DEMO” href=”http://www.shaplahost.com/web-design/bootstrap/bootstrap”]
এবারে আপনি এই পদ্ধতিটি আনার ওয়েব সাইটের কোথায় এ্যড করতে চান? মানে আপনার ওয়েব সাইট কেহ ভিজিট করিলেই? ইনডেক্সে’ই এটা সো করবে? নাকি সাইট ভিজিট করলে দেখাবে না, কিন্তু যদি কেহ কোন পোষ্ট ভিউ করে তাহলে সো করব? কোনটা চান? যাক আপনি যেটা চান কোন সমস্যা নেই, আমি দুটো’ই শেয়ার করতেছি।
প্রথমে এই কোর্ড গুলো কপি করুন
/* social bookmarks icon fixed position by: Md Abul Bashar www.pchelpcenterbd.com */
.social_bookmarsk_icon{position:fixed;right:0;top:50%;width:40px}
.social_bookmarsk_icon img{width:40px}
এবার আপনার থিম অপশন থেকে Style.css নামের পেজটি ওপেন করে একদম শেষে কোর্ডটি পেষ্ট করুন। পিক্সারটি দেখুন।
পিক্সার একঃ
এবার আপনি যদি চান যে, আপনার সাইট কেহ ভিজিট করলেই দেখতে পাবে, তাহলে আপনি এই কোর্ড গুলো কপি করুন
<div>
<a href=”https://www.faecbook.com/shaplahost“><img src=”http://www.pchelpcenterbd.com/wp-content/uploads/2014/02/facebook.png” alt=”www.pchelpcenterbd.com facebook logo” title=”Facebook”/></a>
<a href=”https://www.twitter.com/“><img src=”http://www.pchelpcenterbd.com/wp-content/uploads/2014/02/twitter.png” alt=”www.pchelpcenterbd.com twitter photos” title=”Twitter”/></a>
<a href=”http://www.pchelpcenterbd.com/feed“><img src=”http://www.pchelpcenterbd.com/wp-content/uploads/2014/02/feed.png” alt=”www.pchelpcenterbd.com feed photos” title=”RSS Feed”/></a>
<a href=”https://www.in.com/“><img src=”http://www.pchelpcenterbd.com/wp-content/uploads/2014/02/in.png” alt=”www.pchelpcenterbd.com in photos” title=”In”/></a>
</div>
এবার আপনার সাইটের থিমের <body> এই ট্যাগটির পরে কোর্ড গুলো পেষ্ট করুন, আপনার যদি ওয়ার্ডপ্রেস সাইট হয় তাহলে header.php পেজটি ওপেন করে <body> নামের ট্যাগটি পাবেন, সেখানে <body> ট্যাগের পরে কোর্ড গুলো পেষ্ট করুন। পিক্সারটি দেখুন
পিক্সার দুইঃ
এবার আপনার সাইট ভিজিট করুন, তাহলে দেখতে পারবেন ডান পাশে দেখা যাচ্ছে।
আর আপনি যদি চান ওয়েব সাইট ভিজিট করলেই কেহ দেখবে না, কোন পোষ্ট ভিউ (দেখার সময়) দেখবে, তাহলে শুদু একটু পরিবর্তন, তা হল, আপনি header.php তে কোর্ডটি পেষ্ট না করে, আপনি Single post.php নামে একটি পেজ আছে সেই পেজটি ওপেন করুন, এবার get_header(); ?> এই ট্যাগটির পরে কোড গুলো পেষ্ট করুন, যেমন নিচের ছবিটি দেখুন।
পিক্সার ৩।
ব্যাস এবার ভিজিট করে যেকোন পোষ্ট ভিউ করুন।
এখানে যা যা এডিট করতে হবে আপনাকে।
লাল রং- লাল রং দেয়া যে গুলো আছে সেগুলো এডিট করে আপনার লিংক গুলো বসিয়ে দিন, খেয়াল রাখবেন যেন, “” কোটেশন গুলো কাটা না যায়, তাহলে কাজ করবে না।
নীল রং- হলুদ রং দেয়া গুলো এডিট করে আপনি যদি চান এই আইকন গুলো আপনার ডান পাশে না থেকে বাম পাশে থাকবে, তাহলে right কেটে left লিখে দিন, এবং right/left যে টাই থাক, আপনি এর সামনে যেখানে 0 আছে, সেখানে আপনি 1px/2px ইত্যাদি দিয়ে আপনি একটু আগপাছ করতে পারবেন, আপনি পরিবর্তন করলেই দেখতে পারবেন, কি পরিবর্তন হচ্ছে, এবার আপনি যদি চান এটা আরো একটু উপরে বা নিচে থাকবে তাহলে top এখানে 50% আছে, আপনি এখান থেকে ইচ্ছে মত দিয়ে নিবেন।
এবারে আপনি যদি চান, আইকন গুলো আরো একটু বড় বা ছোট দরকার, তাহলে .social_bookmarsk_icon img{width:40px} এখানে আপনি width:40px এর যায়গাতে বাড়িয়ে কমিয়ে দিন। তাহলে কাজ শেষ। ধন্যবাদ সবাই ভাল থাকবেন।
[বিঃ দ্রঃ আমি শুদু যে গুলো এডিট করতে বলেছি, বা অনুমতি দিয়েছি সে গুলো এডিট করতে পারবেন, অন্য গুলো এডিট করবেন না]
এটা কিভাবে ব্লগার সাইটে ব্যবহার করতে হয় তা যদি আপনার জানা থাকে তাহলেতো ভাল, ব্যবহার করুন, আর যদি জানা না থাকে তাহলে আমাদের সাথেই থাকুন, সেটা নিয়েও পোষ্ট করা হবে।
Our Other Site:
Islamic Bangla Blog: IslamicAmbit
Technology Bangla Blog: PC HELP CENTER (BD)
Domain And Hosting Sell: ShaplaHost, HostAmbit
All Android Apps Free Download: Top Android Apps Free Download
Agriculture Bangla Blog: AgricultureTune
All Update Information: UPDATE IT NEWS AND ALL INFORMATION
All Java Application Free Download: Java Jar Application Free Download
Bangladeshi All website Collation: Bangladeshi All Web Address
Bangladeshi All Bogging Web link: Bangladeshi all blog link
pchelpcenter Duplicate site: PC HELP CENTER Blogspot
pchelpcenter Duplicate site: PC HELP CENTER WordPress
Islamic Audio/Video and etc… Download: IslamicZone (bd)
Bangladeshi All News Paper site: Bangladeshi All News Paper Web address
ভাল লাগলে কমেন্টে জানাতে ভুলবেন না। ধন্যবাদ ভাল থাকবেন।
তাহলে আজ এই পর্যন্তই আলোচনা রাখলাম, আবার পরবর্তি পোষ্ট নিয়ে খুব তারাতারিই আপনাদের মাঝে হাজির হব, ততক্ষন আমাদের সাথে থাকুন।
ভুলে ভরা জীবনে ভুল হওয়াটা অসম্ভব কিছু নয়,যদি আমার লেখার মাঝে কোন ভুলত্রুটি থাকে ক্ষমার দৃষ্টিতে দেখবেন। ধন্যবাদ সবাই ভাল থাকবেন।
tag: social bookmarks icon fixed position, how to social bookmarks icon fixed position, social icon fixed position, কিভাবে ফেসবুক আইকন সহ অন্যান্য আইকন নিদিষ্ট যায়গাতে রাখা যায়
চমৎকার একটি পোস্ট শেয়ার করার জন্য অনেক ধন্যবাদ ।
আপনারও চমৎকার একটি মন্তব্যের জন্য অনেক ধন্যবাদ 😀