Menu
Web Development | No Comments | 6 months ago
আপনার সাইটের শেয়ার বাটন গুলো করে তুলুন আরও স্টাইলিস, শেয়ার হবে আরও বেশি।
HomeWeb Development Lady Coder / 6 months ago
Website এ কনটেন্ট শেয়ার একটা গুরুত্বপূর্ণ বিষয়। কারণ Web Traffic পাবার জন্য কনটেন্ট শেয়ারের ঝুড়ি নেই। আপনার শেয়ার বাটন গুলো যত আকর্ষণীয় হবে, ততই লোকের নজর কাড়বে। আর শেয়ার তার উপর নির্ভর করবে। আজ ওয়েব সাইটের শেয়ার বাটন নিয়ে কথা বলবো। তাহলে চলুন শুরু করা যাক_ সাথে আছি আমি Tasnifa zara
TrickFox

Step 01

# প্রথমে আপনার WordPress Admin panel এ যান।
# তারপর Appearance এ গিয়ে Theme Editor এ ক্লিক করুন। style.cssএ নিচের Css কোড টা কপি করে Paste করে Update file দিন। TrickFox

Style.css

Copy the css code & Paste your style.css


@import '//codepen.io/chrisdothtml/pen/ojLzJK.css';
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
  transition: all 0.35s;
  transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
  top: 90%;
  left: -110%;
}
.social-btns .btn .fa {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.social-btns .btn.facebook:before {
  background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
  color: #3b5998;
}
.social-btns .btn.twitter:before {
  background-color: #3cf;
}
.social-btns .btn.twitter .fa {
  color: #3cf;
}
.social-btns .btn.google:before {
  background-color: #dc4a38;
}
.social-btns .btn.google .fa {
  color: #dc4a38;
}
.social-btns .btn.dribbble:before {
  background-color: #f26798;
}
.social-btns .btn.dribbble .fa {
  color: #f26798;
}
.social-btns .btn.skype:before {
  background-color: #00aff0;
}
.social-btns .btn.skype .fa {
  color: #00aff0;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
  top: -10%;
  left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.social-btns {
  height: 60px;
  margin: auto;
  font-size: 0;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.social-btns .btn {
  display: inline-block;
  background-color: #fff;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin: 0 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 28%;
  box-shadow: 0 5px 15px -5px rgba(0,0,0,0.1);
  opacity: 0.99;
}
.social-btns .btn:before {
  content: '';
  width: 120%;
  height: 120%;
  position: absolute;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.social-btns .btn .fa {
  font-size: 38px;
  vertical-align: middle;
}


Step 02

এই স্টেপে আপনার কাজ হলো, আপনি আপনার ওয়েব সাইটের যে জায়গায় শেয়ার বাটন যুক্ত করতে চান, Edit করে সেখানে Paste করুন

 

<!-- partial:index.partial.html -->

<div class="social-btns"><a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a><a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a><a class="btn google" href="#"><i class="fa fa-google"></i></a><a class="btn dribbble" href="#"><i class="fa fa-dribbble"></i></a><a class="btn skype" href="#"><i class="fa fa-skype"></i></a>

</div>

<!-- partial -->



টিউনটি সম্পূর্ণ পড়ার জন্য অসংখ্য ধন্যবাদ। যদি ভালো লাগে তাহলে আমার সাইটি ভিজিট করে আসতে পারেন।
IT বিষয়ক যেকোন সমস্যায় সমাধান পেতে facebook এ #Help লিখে মেসেজ করতে পারেন।
Facebook: TasniFa Zara

তাহলে ভাই ভালো থাকুন সুস্থ থাকুন TrickFox এর সাথে থাকুন । আর এই সাইট যদি ভালো লাগে আপনার বন্ধুদের জানাবেন । ধন্যবাদ ।



Leave a Comment