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

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