সম্মানিত দর্শক আপনাকে স্বাগতম। আমাকে Facebook instagram Telegram এ পাবেন। কামরুলকক্স: ডেমো এবং ডাউনলোড বাটন যোগ করুন ব্লগে

ডেমো এবং ডাউনলোড বাটন যোগ করুন ব্লগে

আসসালামু আলাইকুম,আশা করি সবাই ভাল আছেন, আপনাদের জন্য নিয়ে আসলাম,ব্লগস্পটের জন্য অসাধারণ সুন্দর Demo এবং Dowanload বাটন, নিচে Demo এবং Dowanload বাটন এর Result দেখুন
See the Pen dodeQW by BodiulAlam (@AlamCox) on CodePen.

চলুন এবার ব্লগে কিভাবে যুক্ত করব দেখি, প্রথমে ব্লগের dashboard হতে Template এ ক্লিক করে Edit HTML গিয়ে ]]></b:skin> কোড টি সার্চ করে খুঁজে পেলে ঠিক তার আগে নিচের কোড গুলো Paste করে টেমপ্লেট Save করুন
#wrap {margin: 20px auto;text-align: center;}#wrap br {display: none;}.btn-slide, .btn-slide2 {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;}.btn-slide2 {border: 2px solid #efa666;}.btn-slide:hover {background-color: #0099cc;}.btn-slide2:hover {background-color: #efa666;}.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {left: 100%;margin-left: -45px;background-color: #fdfdfd;color: #0099cc;}.btn-slide2:hover span.circle2 {color: #efa666;}.btn-slide:hover span.title, .btn-slide2:hover span.title2 {left: 20px;opacity: 0;}.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {opacity: 1;left: 10px;}.btn-slide span.circle, .btn-slide2 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%;}.btn-slide2 span.circle2 {background-color: #efa666;}.btn-slide span.title,.btn-slide span.title-hover, .btn-slide2 span.title2,.btn-slide2 span.title-hover2 {position: absolute;left: 40px;text-align: center;margin: 0 auto;font-size: 12px;font-weight: bold;color: #30abd5;transition: .5s;}.btn-slide2 span.title2 {position: absolute;left: 40px;text-align: center;margin: 0 auto;font-size: 12px;font-weight: bold;color: #30abd5;transition: .5s;}.btn-slide2 span.title-hover2 {color: #efa666;left: 80px;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {left: 20px;opacity: 0;}.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {color: #fff;}
আপনি পোষ্ট করার সময় যখন বাটন গুলো বসাবেন তখন পোষ্টের compose হতে  HTML সেকশনে গিয়ে নিচের কোড গুলো Paste করুন
<div id="wrap"><a href="#" class="btn-slide" 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 href="#" class="btn-slide2" 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 লিংক দেবেন
উপকৃত হলে শেয়ার এবং কমেন্ট করতে ভুলবেন না

২টি মন্তব্য:

Comments করার জন্য Gmail এ Sign in করতে হবে।