ব্লগারের জন্য একটা সেরা ডাউনলোড ও ডেমো বাটন কোড | Best Download & Demo Bottom Code for Blogger

আসসালামুয়ালাইকুম। কেমন আছেন সবাই? আশা করি সবাই ভাল আছেন। 

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

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

Button Look like this picture

যেভাবে আপনার ব্লগার সাইটে ডেমো ও ডাউনলোড বাটনের জন্য CSS কোড অ্যাড করবেন।

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

Copy This Code

<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> ট্যাগের উপরে পেস্ট করে দিন।

Copy This Code

/* 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;
}

ধাপ ৩ : এখন আপনি আর্টিকেলের যেখানে ডাউনলোড ও ডেমো বাটনটি বসাতে চান সেখানে নিচের কোডটি পেস্ট করে দিন। (নিচের কোডটি পেস্ট করার সময় অবশ্যই কম্পোজ ভিউ থেকে HTML ভিউ করে নিন।)

Demo & Download Buttons HTML code একসাথে বসানোর ক্ষেত্রে নিচের কোডটি ব্যবহার করুন।

Copy This Code

<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 Only:

Copy This Code

<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 Only:

Copy This Code

<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 & Download বাটনের কোড গুলো এড করে নিতে পারবেন।

আজ এই পর্যন্তই। পরবর্তী পোস্ট নিয়ে হাজির হবো খুব শীঘ্রই। ততক্ষণ পর্যন্ত সবাই ভাল থাকুন সুস্থ থাকুন।

আল্লাহ হাফেজ ।