Add Demo and Download button in Blogger - যারা ব্লগস্পটে কাজ করেন তারা হয়ত এতক্ষনে বুঝে গেছেন যে আমি শেয়ার করতে যাচ্ছি।

আজকে আমার এই টিউনটি তাদেরকেই হেল্প করবে যারা টেমপ্লেট অথবা থীম নিয়ে ব্লগে পোষ্ট করেন। মনে করুন আপনার ব্লগে একটি টেমপ্লেট নিয়ে পোষ্ট করলেন। সেখানে আপনাকে Demo and Download এই দুইটা বাটন বা লিংক দিতে হবে। সেখানে এই দুইটা বাটন যদি একটু চমকপ্রদ হয় তাহলে মন্দ কি?

এই ডেমো এবং ডাউনলোড বাটন গুলো CSS এর মাধ্যমে তৈরী করা হয়েছে এবং তাতে রয়েছে Mouse hover effect.

কাজ শুরু করার আগে ডেমো টি দেখে নিন। (পোষ্টের একদম নিচে ডেমোটি দেখতে পারবেন।)। আশা করি ভালো লেগেছে বিষয়টা আপনার কাছে। তাহলে চলুন এবার মূল কাজে চলে যাওয়া যাক।

কাজ শুরু করার আগে আপনার টেমপ্লেট এর ব্যাক-আপ নিয়ে রাখুনঃ

প্রথমে Blogger Dashboard > Template > Edit HTML  এ  </style> ট্যাগটি খুজে বের করুন। এবং নিচের কোডটুকু </style> ট্যাগের আগে পেষ্ট করুন।

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .btn ul {margin:0;padding:0} .btn li{display:inline;margin:5px;padding:0;list-style:none;} .demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .demo {background-color:#3498DB;} .download {background-color:#1ABC84;} .demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;} .download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;} .demo:before {content:&#39;\f135&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} .download:before {content:&#39;\f019&#39;;display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

এবার টেমপ্লেটটি সেভ করে নিন।

এখন আপনি যেখানে ডেমো এবং ডাউনলোড বাটন গুলো দেখাতে চান সেখানে নিচের কোড গুলো বসিয়ে দিবেন। বলতে প্রত্যেক পোষ্টের HTML Section এ নিচের কোড গুলো বসিয়ে দিবেন।

<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li> <li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div>

নোটঃ উপরের কোডে দেখুন দুইটি লাইনেই YOUR-LINK-HERE লিখা আছে। প্রথমে Demo লাইনে আপনার ডেমো লিংক দিবেন। আর Download লাইনে আপনার ডাউনলোড লিংক দিবেন।

আর কোন সমস্যা হলে টিউনমেন্ট এ জানাবেন। অথবা ফেইসবুকে আছি আমি।

সৌজন্যেঃ MS Design