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

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

 

ব্লগে যোগ করে নিন CSS এবং HTML 5 এর লাইভ ডেমো অথবা ডাউনলোড বাটন
  •  এখন বাটনের কালাল পরিবর্তন করার জন্য vtlal এর স্থানে নিচের ছবি অনুযায়ী কোড বসিয়ে দিন।
ব্লগে যোগ করে নিন CSS এবং HTML 5 এর লাইভ ডেমো অথবা ডাউনলোড বাটন
আশা করি সবাইকে আমি বুঝাতে পেরেছি। কার যদি বুঝতে অসুবিধা হয় তাহলে মন্তব্য করে জানাবেন। আর আমার কোন কিছু ভুল হলে তা ধরিয়ে দিবেন আশা করি।
প্রথম প্রকাশিত আমার ব্লগে ভার্চুয়াল তাজীম

আমি আছি

ফেসবুক | টুইটার | গুগল প্লাস

 

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

twenty + nineteen =