Animated Demo and Download Buttons যুক্ত করুন ব্লগস্পটে

আপনাদের জন্য নিয়ে আসলাম Animated Demo and Download Buttons যখন ব্লগের পোষ্টে ডাউনলোড লিংক দেয়ার প্রয়োজন হয়, Animated Demo and Download Buttons ব্যবহার করার ফলে ব্লগের পোষ্ট আরও আকর্ষণীয় হয়ে উঠে।বাটনগুলি আমি ইতি পূর্বেও শেয়ার করে ছিলাম।পূর্বের শেয়ার করা Buttons গুলো অনেকটা বড় ছিল কাষ্টোমাইজ করে অনেকাংশ পরিবর্তন করেছেন। মোঃ হারুন-অর-রশিদ তাই Buttons গুলো আরও আকর্ষণীয় হয়েছে।

আশা করি আপনাদের ভাল লাগবে

যেভাবে ব্লগস্পটে যুক্ত করবেন। 

✯ প্রথমে ব্লগে Login  করুন।

✯ তারপর ব্লগার  dashboard  হতে  Template > Edit Html  বাটনে ক্লিক করুন।

✯ কিবোর্ড হতে Ctrl+F চেপে </head>  কোডটি সার্চ করুন।

✯   সার্চ করে পাওয়া  </head> এর আগে নিচের javascript  কোড টি পেষ্ট করুন।

 <link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/> 

✯ কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin>  কোডটি সার্চ করুন।

✯   সার্চ করে পাওয়া  ]]></b:skin> উপরে নিচের CSS  কোড টি পেষ্ট করুন।

 #pro-buttons {margin:20px auto; text-align:center;}
#pro-buttons br {display: none;}
.pro-down, .pro-demo {
    position: relative;
    display: inline-block;
    height: 30px;
    width: 100px;
    line-height: 30px;
    padding: 0;
    border-radius: 5px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}
.pro-demo {border: 2px solid #fe6d4c;}

.pro-down:hover {background-color: #0099cc;}
.pro-demo:hover {background-color: #fe6d4c;}

.pro-down span.circle, .pro-demo span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 21px;
    height: 20px;
    width: 20px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.pro-demo span.circle2 {background-color: #fe6d4c;}

.pro-down:hover span.circle, .pro-demo:hover span.circle2 {
    left: 100%;
    margin-left: -25px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.pro-demo:hover span.circle2 {color: #fe6d4c;}
.pro-down span.title, .pro-down span.title-hover,
.pro-demo span.title2, .pro-demo span.title-hover2 {
    position: absolute;
    left: 40px;
    text-align: center;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.pro-demo span.title2, .pro-demo span.title-hover2 {color:#fe6d4c; left:35px;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {left:20px; opacity:0;}
.pro-down span.title-hover, .pro-demo span.title-hover2 {color: #fff;}
.pro-down:hover span.title, .pro-demo:hover span.title2 {left:20px; opacity:0;}
.pro-down:hover span.title-hover, .pro-demo:hover span.title-hover2 {opacity:1; left:10px;} 

✯ Save Template এ ক্লিক করে টেমপ্লেট Save করে বেরিয়ে আসুন।

যখন ব্লগের পোষ্টে ডাউনলোড লিংক দেয়ার প্রয়োজন হবে।
তখন পোষ্ট এর HTML Editor এ যাবেন এবং সেখানে নিচের HTML  কোড গুলো পেষ্ট করে সেভ করুন।

 <div id="pro-buttons">
 <a class="pro-down" href="#" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Click here</span>
</a>
<a class="pro-demo" href="#" 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> 

✯ উপরের  HTML  কোডের # এর স্থলে Demo এবং Download লিংক দেবেন।