আইটি ছাদিক https://www.itsadik.xyz/2020/02/animated-demo-and-download-buttons.html

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 লিংক দেবেন। 
বিজ্ঞাপন স্পেসের আগে / পরে

অন্যদের সাথে শেয়ার করুন:

Sadikur Rahman
পোস্ট করেছেনঃ Sadikur Rahman
পোস্ট ক্যাটাগরি ,
0 মন্তব্য

দয়া করে নীতিমালা মেনে মন্তব্য করুন. ??

সর্বশেষ আপডেটেড অফার পেতে চান?

আইটি ছাদিক কী?