আজকে আমার এই টিউনটি তাদেরকেই হেল্প করবে যারা টেমপ্লেট অথবা থীম নিয়ে
ব্লগে পোষ্ট করেন। মনে করুন আপনার ব্লগে একটি টেমপ্লেট নিয়ে পোষ্ট করলেন।
সেখানে আপনাকে Demo and Download এই দুইটা বাটন বা লিংক দিতে হবে। সেখানে
এই দুইটা বাটন যদি একটু চমকপ্রদ হয় তাহলে মন্দ কি?
এই ডেমো এবং ডাউনলোড বাটন গুলো CSS এর মাধ্যমে তৈরী করা হয়েছে এবং তাতে রয়েছে Mouse hover effect.
প্রথমে Blogger Dashboard > Template > Edit HTML এ </style> ট্যাগটি খুজে বের করুন। এবং নিচের কোডটুকু </style> ট্যাগের আগে পেষ্ট করুন।
এবার টেমপ্লেটটি সেভ করে নিন।
এখন আপনি যেখানে ডেমো এবং ডাউনলোড বাটন গুলো দেখাতে চান সেখানে নিচের কোড গুলো বসিয়ে দিবেন। বলতে প্রত্যেক পোষ্টের HTML Section এ নিচের কোড গুলো বসিয়ে দিবেন।
নোটঃ উপরের কোডে দেখুন দুইটি লাইনেই YOUR-LINK-HERE লিখা আছে। প্রথমে Demo লাইনে আপনার ডেমো লিংক দিবেন। আর 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:'\f135';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:'\f019';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 লাইনে আপনার ডাউনলোড লিংক দিবেন।
