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

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

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

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


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

✯ কিবোর্ড হতে 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 লিংক দেবেন। 

Rules: Make sure your comment add content to the page. Then add your links thereafter. Irrelevant comments will be deleted.

Post a Comment

Add Comment (0)

Previous Post Next Post