TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

Weebly জন্য সহজ সামাজিক শেয়ারিং আইকন উইজেট

16

আজকাল সামাজিক শেয়ারিং যে কোনো ওয়েবসাইটের একটি অপরিহার্য অংশ। তারা ব্যবহারকারীদের আপনার নিবন্ধটি ভাগ করে কয়েকটি ক্লিকের মাধ্যমে তাত্ক্ষণিকভাবে শব্দটি ছড়িয়ে দেওয়ার অনুমতি দেয়। যদিও সোশ্যাল মিডিয়া মার্কেটিং একটি জনপ্রিয় বিষয়, ওয়েবলির মতো সাইট নির্মাতারা ব্যবহারকারীদের জন্য সামাজিক শেয়ারিং উইজেট অফার করে না। দুlyখজনকভাবে এমনকি Weebly- এর ব্যবসায়িক পরিকল্পনা ব্যবহারকারীদের প্রতি মাসে প্রায় 25 ডলার প্রদানের পরে তাদের সাইটে উপযুক্ত সামাজিক শেয়ারিং আইকন থাকবে না। এই নিবন্ধে আমরা Weebly সাইটের জন্য একটি কাস্টম CSS সোশ্যাল শেয়ারিং উইজেট তৈরি করব এবং সোশ্যাল শেয়ারিং লিংক দিয়ে আপনার Weebly সাইটে কিভাবে এটি যুক্ত করব তা ব্যাখ্যা করব।

দুর্ভাগ্যবশত এটি পৃষ্ঠার URL যোগ করে প্রতিটি পৃষ্ঠায় করা হয়। আপনার Weebly সাইটে সামাজিক প্রোফাইল যুক্ত করার জন্য কিভাবে ডিফল্ট সোশ্যাল আইকন এবং একটি বিশেষ স্পিনিং আইকন উইজেট যোগ করা যায় সে সম্পর্কে আমাদের আলাদা নিবন্ধ দেখুন ।

কাস্টম CSS সামাজিক শেয়ারিং আইকন উইজেট

যেহেতু এই নিবন্ধের উদ্দেশ্য নকশা দিকটি নিয়ে আলোচনা করা হচ্ছে না তাই আমরা নীচে দেখানো হিসাবে সম্পূর্ণ CSS কোড প্রদান করব। ফেসবুক, টুইটার, Google+, Pinterest এবং লিঙ্কডইন – মূলত আমরা পাঁচটি সামাজিক আইকন – কন্টেইনার প্রস্থ সহ 300px হিসাবে সামাজিক আইকনগুলির জন্য ফন্ট অসাধারণ আইকন ব্যবহার করি ।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <style> /* Container */ .column { width: 300px; } /* Individual Icons with first Box for Facebook */ .box { background-color: #3b5998; color: rgba(251, 244, 217, 0.99); display: block; width: 17%; text-align: center; float: left; margin-right: 1px; border-radius: 50%; } /* Twitter */ .box:first-child + .box { background-color: #55acee; } /* Google+ */ .box:first-child + .box + .box { background-color: #dc4e41; } /* Pinterest */ .box:first-child + .box + .box + .box { background-color: #bd081c; } /* LinkedIn */ .box:first-child + .box + .box + .box +.box { background-color: #0077b5; } /* Link Effects */ .column a { text-decoration: none; color: #ffffff; outline: none; -webkit-transition: 0.5s ease; transition: 0.5s ease; } /*Font Awesome Icons Effects */ .box .fa { margin: 10px; display: block; font-size: 26px; } /* Box Hover Effects */ .box:hover { opacity: 0.7; } </style>

সামাজিক শেয়ারিং আইকন উইজেটের জন্য এইচটিএমএল

সামাজিক উইজেটের জন্য ইউআরএল শেয়ার করার সাথে HTML কোড নিচে দেওয়া হল:

<div class="column"> <a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box"> <div class="fa fa-facebook"></div> </a> <a href="https://twitter.com/home?status=www.webnots.com" class="box"> <div class="fa fa-twitter"></div> </a> <a href="https://plus.google.com/share?url=www.webnots.com" class="box"> <div class="fa fa-google-plus"></div> </a> <a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box"> <div class="fa fa-pinterest"></div> </a> <a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box"> <div class="fa fa-linkedin"></div> </a> </div>

উইজেটটি প্রকাশিত সাইটে নীচের মত দেখাবে:

আমরা এই সাইট ইউআরএল ব্যবহার করেছি, HTML থেকে নীচে নির্দেশিত প্রাসঙ্গিক বিষয়বস্তু প্রতিস্থাপন নিশ্চিত করুন:

  • ফেসবুক, টুইটার এবং Google+ – সাইটের ইউআরএল আপনার নিজের সাথে প্রতিস্থাপন করুন।
  • Pinterest – ছবি এবং URL প্রতিস্থাপন করুন।
  • লিঙ্কডইন – সাইটের URL এবং শিরোনাম প্রতিস্থাপন করুন।

যদি আপনি একটি "আমাদের অনুসরণ করুন" উইজেট হিসাবে ব্যবহার করতে চান, শুধু আপনার নিজের সামাজিক প্রোফাইল লিঙ্কগুলির সাথে "href" অংশের মধ্যে URL গুলি প্রতিস্থাপন করুন।

Weebly তে CSS এবং HTML যোগ করা

  • আপনার প্রয়োজনীয় পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে CSS পেস্ট করুন অথবা কোডটি সাইট লেভেলে কার্যকর হওয়ার জন্য "সেটিংস" এর নিচে রাখুন। Weebly সাইটে কিভাবে CSS যোগ করতে হয় সে সম্পর্কে আরও জানুন ।

Weebly জন্য সহজ সামাজিক শেয়ারিং আইকন উইজেট

পৃষ্ঠায় হেডার কোড যোগ করুন

  • এমন একটি পৃষ্ঠায় HTML বিষয়বস্তু যুক্ত করুন যেখানে আপনি " এম্বেড কোড " উপাদান ব্যবহার করে আইকনগুলি স্থাপন করতে চান ।
  • ভাগ করে নেওয়ার আইকনগুলি দেখতে আপনার সাইটটি প্রকাশ করুন।

উইজেট কাস্টমাইজ করা

  • যদিও আমরা পাঁচটি আইকন দিয়ে ব্যাখ্যা করেছি, আপনি যেকোনো সংখ্যক আইকন যোগ করতে পারেন। আপনার আইকনগুলির জন্য রঙ বাছাই করতে সামাজিক আইকন রঙ কোড পড়ুন ।
  • মোবাইল ডিভাইসে স্বয়ংক্রিয়ভাবে আইকনগুলিকে সারিবদ্ধ করার জন্য পূর্ণ ধারকের প্রস্থ 300px। যদি আপনি আরও আইকন যুক্ত করেন, তাহলে মোবাইলে আইকনগুলিকে যথাযথভাবে সারিবদ্ধ করতে @মিডিয়া প্রশ্নগুলি ব্যবহার করা নিশ্চিত করুন।
  • ".Box" CSS ক্লাসে ব্যক্তিগত আইকনের প্রস্থ 17% যা আপনি আপনার প্রয়োজন অনুযায়ী কমাতে বা বাড়িয়ে নিতে পারেন।
  • CSS ক্লাস “.box .fa" সহ আইকনের সাইজ 26px যা আপনি আপনার প্রয়োজন অনুযায়ী পরিবর্তন করতে পারেন।
  • যদি আপনি আরো আইকন যোগ করেন, শুধু "+ .box" যোগ করুন এবং আইকনগুলির পটভূমি রঙ নির্ধারণ করুন।

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত