ব্লগে যোগ করে নিন CSS এবং HTML 5 এর লাইভ ডেমো অথবা ডাউনলোড বাটন 

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

যেভাবে যোগ করবেন আপনার সাইটে

• প্রথমে আপনার ব্লগের ড্যাশবোর্ডে লগইন করুন।
• এর পর Template ☛ Edit Html ক্লিক করুন।
• এখন ]]> লেখাটি খুঁজে বের করুন।
• এর পর নিচের সব কোড গুলো ]]> এর উপরে কপি পেস্ট করে দিন/

.vtnil{width:110px; height:25px; background:#32A8FE; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; padding-top:5px; -webkit-transition:-webkit-box-shadow .5s ease; -moz-transition:-webkit-box-shadow .5s ease; -ms-transition:-webkit-box-shadow .5s ease; -o-transition:-webkit-box-shadow .5s ease; transition:-webkit-box-shadow .5s ease; margin:auto}
.vtnil:hover{background:#46AFFC; -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4); box-shadow:0 0 0 9999px rgba(0,0,0,.4); position:relative; z-index:99999}
.vtnil a{color:#333; text-decoration:none; font:normal 16px Arial,Verdana; text-align:center}
.vtsobuj{width:110px; height:25px; background:#9dea4f; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; padding-top:5px; -webkit-transition:-webkit-box-shadow .5s ease; -moz-transition:-webkit-box-shadow .5s ease; -ms-transition:-webkit-box-shadow .5s ease; -o-transition:-webkit-box-shadow .5s ease; transition:-webkit-box-shadow .5s ease; margin:auto}
.vtsobuj:hover{background:#BBFD12; -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4); box-shadow:0 0 0 9999px rgba(0,0,0,.4); position:relative; z-index:99999}
.vtsobuj a{color:#333; text-decoration:none; font:normal 16px Arial,Verdana; text-align:center}
.vtlal{width:110px; height:25px; background:#FE324A; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; padding-top:5px; -webkit-transition:-webkit-box-shadow .5s ease; -moz-transition:-webkit-box-shadow .5s ease; -ms-transition:-webkit-box-shadow .5s ease; -o-transition:-webkit-box-shadow .5s ease; transition:-webkit-box-shadow .5s ease; margin:auto}
.vtlal:hover{background:#FB455A; -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4); box-shadow:0 0 0 9999px rgba(0,0,0,.4); position:relative; z-index:99999}
.vtlal a{color:#333; text-decoration:none; font:normal 16px Arial,Verdana; text-align:center}
.vtbegoni{width:110px; height:25px; background:#9232FE; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; padding-top:5px; -webkit-transition:-webkit-box-shadow .5s ease; -moz-transition:-webkit-box-shadow .5s ease; -ms-transition:-webkit-box-shadow .5s ease; -o-transition:-webkit-box-shadow .5s ease; transition:-webkit-box-shadow .5s ease; margin:auto}
.vtbegoni:hover{background:#9E49FD; -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4); box-shadow:0 0 0 9999px rgba(0,0,0,.4); position:relative; z-index:99999}
.vtbegoni a{color:#333; text-decoration:none; font:normal 16px Arial,Verdana; text-align:center}
.vtholod{width:110px; height:25px; background:#F2FE32; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; text-align:center; padding-top:5px; -webkit-transition:-webkit-box-shadow .5s ease; -moz-transition:-webkit-box-shadow .5s ease; -ms-transition:-webkit-box-shadow .5s ease; -o-transition:-webkit-box-shadow .5s ease; transition:-webkit-box-shadow .5s ease; margin:auto}
.vtholod:hover{background:#FAFD03; -webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4); -o-box-shadow:0 0 0 9999px rgba(0,0,0,.4); box-shadow:0 0 0 9999px rgba(0,0,0,.4); position:relative; z-index:99999}
.vtholod a{color:#333; text-decoration:none; font:normal 16px Arial,Verdana; text-align:center}

• এখন আপনার Template টি সেভ করুন।

যেভাবে ব্যবহার করবেন আপনার সাইটে

• ব্লগের নতুন পোস্ট করার সময় HTML অপশনে ক্লিক করুন এবং নিচের কোড কপি পেস্ট করে দিন। নিচের ছবিটি অনুযায়ী।

vtlal”>☲ Live Demo

অথবা,

vtlal”>☲ Download

•  এখন বাটনের কালাল পরিবর্তন করার জন্য vtlal এর স্থানে নিচের ছবি অনুযায়ী কোড বসিয়ে দিন।

আশা করি সবাইকে আমি বুঝাতে পেরেছি। কার যদি বুঝতে অসুবিধা হয় তাহলে মন্তব্য করে জানাবেন। আর আমার কোন কিছু ভুল হলে তা ধরিয়ে দিবেন আশা করি।