Demo and Download Buttons code for Blogger । ব্লগারের জন্য সেরা ডেমো ও ডাউনলোড বাটন কোড

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

Live Demo Of CSS Buttons

ব্লগারে যেভাবে 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;
 }

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

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 বাটনের কোড এড করে নিতে পারবেন। ব্লগিং সম্পর্কে যেকোন তথ্য সবার আগে পেতে আমাদের সাথে থাকুন।

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

-------------------------------------

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