Demo ও Download বাটন কোড। Demo and Download Buttons code for Blogger

ব্লগারের বেশ কিছু কাজের জন্য Demo ও Download বাটন খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে। বিশেষ করে বাহ্যিক বিভিন্ন লিংক সরবরাহ করার জন্য। কিন্তু অনেকে এই Demo ও Download বাটনের জন্য ভালো মানের তেমন কোড পায় না । আজকে আমি আপনাদের সাথে অসাধারণ একটি Demo ও Download বাটনের CSS ও HTML কোড শেয়ার করতে যাচ্ছি । 

ব্লগারে CSS ভিত্তিক ডেমো এবং ডাউনলোড বাটন এড করার নিয়ম :

ধাপ - ১ : প্রথমে আপনি আপনার ব্লগের থিম অপশনে চলে আসুন। এখন এখান থেকে Edit HTML অপশনে ক্লিক করুন। তারপর Ctrl+F বাটনে ক্লিক করে </head> ট্যাগ খুঁজে নিচের দেওয়া দেওয়া কোডটি </head> ট্যাগের উপরে পেস্ট করে দিন।

HTML

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");
//]]>
</script>
<noscript>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>
</noscript>

ধাপ - ২ : তারপর আবার Ctrl+F বাটনে ক্লিক করে ]]></b:skin> ট্যাগ খুঁজে নিচের দেওয়া দেওয়া কোডটি ]]></b:skin> ট্যাগের উপরে পেস্ট করে দিন।

HTML

/* CSS Demo & Download Buttons By (www.TwistBlogg.com) */
.bie-slide,
 .bie-slide2 {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 170px;
  line-height: 40px;
  padding: 0;
  border-radius: 50px;
  background: #fdfdfd;
  border: 2px solid #f84f4f;
  margin: 10px;
  transition: all 0.5s ease-in-out;
 }
 .bie-slide2 {
  border: 2px solid #36D7B7;
 }
 .bie-slide:hover {
  background-color: #f84f4f;
 }
 .bie-slide2:hover {
  background-color: #36D7B7;
 }
 .bie-slide:hover span.circle,
 .bie-slide2:hover span.circle2 {
  left: 100%;
  margin-left: -45px;
  background-color: #fdfdfd;
  color: #f84f4f;
 }
 .bie-slide2:hover span.circle2 {
  color: #36D7B7;
 }
 .bie-slide:hover span.title,
 .bie-slide2:hover span.title2 {
  left: 40px;
  opacity: 0;
 }
 .bie-slide:hover span.title-hover,
 .bie-slide2:hover span.title-hover2 {
  opacity: 1;
  left: 28px;
 }
 .bie-slide span.circle,
 .bie-slide2 span.circle2 {
  display: block;
  background-color: #f84f4f;
  color: #fff;
  position: absolute;
  float: left;
  margin: 5px;
  line-height: 30px;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  transition: .5s;
  border-radius: 50%;
 }
 .bie-slide2 span.circle2 {
  background-color: #36D7B7;
 }
 .bie-slide span.title,
 .bie-slide span.title-hover,
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  position: absolute;
  left: 65px;
  text-align: center;
  margin: 0 auto;
  font-size: 16px;
  font-weight: bold;
  color: #f84f4f;
  transition: .5s;
 }
 .bie-slide2 span.title2,
 .bie-slide2 span.title-hover2 {
  color: #36D7B7;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  left: 80px;
  opacity: 0;
 }
 .bie-slide span.title-hover,
 .bie-slide2 span.title-hover2 {
  color: #fff;
 }

Live Demo Of CSS Buttons

ধাপ - ৩ : এখন আর্টিকেল এর যেখানে বাটনটি বসাতে চান সেখানে নিচের কোডটি পেস্ট করে দিন।

Demo and Download Buttons HTML code একসাথে।

HTML

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="#" rel="nofollow" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

★ যদি আলাদাভাবে Demo and Download Buttons এড করতে চান তাহলে নিচের কোডটি পেস্ট করে দিন।

★ For Demo Button:

HTML

<div id="wrap" style="text-align:center">
<a class="bie-slide" href="#" rel="no-follow" target="_blank">
  <span class="circle"><i class="fa fa-laptop"></i></span>
  <span class="title">Demo</span>
  <span class="title-hover">Click here</span>
</a>
</div>

★ For Download Button:

HTML

<div id="wrap" style="text-align:center">
<a class="bie-slide2" href="#" rel="nofollow" target="_blank">
  <span class="circle2"><i class="fa fa-download"></i></span>
  <span class="title2">Download</span>
  <span class="title-hover2">Click here</span>
</a>
</div>

আশা করি বুজতে পারছেন । এভাবে খুব সহজে আপনি আপনার ব্লগে Demo and Download বাটনের কোড এড করে নিতে পারবেন। ব্লগিং সম্পর্কে যেকোন তথ্য সবার আগে পেতে আমাদের সাথে থাকুন।

বিকাশে বিদ্যুৎ বিল দেওয়ার নিয়ম

👁 Related Posts ↴

এই পোস্টে কোনো ভুল/আপডেট থাকলে আমাদের জানান

এই আর্টিকেলে কোনো ভুল তথ্য, বানান ত্রুটি, পুরোনো তথ্য, ভাঙা লিংক, প্রয়োজনীয় আপডেটের অভাব বা অন্য কোনো অসঙ্গতি লক্ষ্য করলে অনুগ্রহ করে সংক্ষেপে জানিয়ে আমাদের সহযোগিতা করুন।

সমস্যার ধরন নির্বাচন করুন : তথ্য ভুল পুরোনো তথ্য / আপডেট দরকার বানান বা ভাষাগত ভুল লিংক কাজ করছে না ছবি বা ফাইল সমস্যা অন্যান্য

বিস্তারিত লিখুন :

আপনার নাম (ঐচ্ছিক) :

বাটনে ক্লিক করলে আপনার ডিভাইসের ইমেইল অ্যাপ বা Gmail-এ রিপোর্টটি অটো লিখে খুলে যাবে।

রিপোর্ট পাঠানোর জন্য ইমেইল উইন্ডো ওপেন করার চেষ্টা করা হয়েছে। সরাসরি না খুললে ব্রাউজারে Gmail খুলে যেতে পারে (বিশেষ করে কম্পিউটারে)।