*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks

ব্লগার Bullet List কাষ্টোমাইজ করুন এবং Image Hover Effect দিন

সবাই চায় তাদের ব্লগার টেমপ্লেটে আকর্ষনীয় ইউনিক কিছু ডিজাইন রাখতে। যে গুলি দেখে সাবাই ভাববে যে, এই ব্লগে অন্যদের চেয়ে আলাদা কিছু রয়েছে। বিশেষ করে পোষ্ট সেকশনটায় কিছু আলাদা ডিজাইন করা অনেক কষ্ট সাধ্য ব্যাপার। কারণ পোষ্ট সেকশনে ডিজাইন করার মত তেমন কিছু পাওয়া যায় না। Bullet List ব্লগার টেমপ্লেটের পোষ্ট সেকশনের একটি কমন অংশ। যে কোন পোষ্ট করতে গেলেই পোষ্টের বিভিন্ন জায়গা Bullet List ব্যবহার করতে হয়। কাজেই এই Bullet List এ কিছুটা ইফেক্ট দিতে পারলে আপনার পোষ্ট সেকশনটা কিছুটা হলেও আকর্ষণীয় হবে। আমি আজকে আপনাদের সাথে যেটি শেয়ার করছি এটিতে দুটি ছোট ইমেজ ব্যবহার করেছি। একটি নরমালি শো করবে এবং অন্যটি Mouse Hover অর্থাৎ লাইনের উপর মাউজ ধরলে শো করবে।
Blogger Bullet Hover Effect

 কিভাবে করতে হয়ঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
Blogger Template Edit
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
Blogger-Html-Css-Tag-Searching-System
  • এখন ]]></b:skin> ট্যাগের ঠিক ‍উপরে নিচের কোডগুলি পেষ্ট করুন।
.post ul { list-style:none; }
.post ul li {
    line-height: 1.4em;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyqw4sD4NE4ttsVvZR0EsaMfC4O9bZulHAcoB0CUV3A4b6w-7Aw9jYULKe8uTSlSfjDap6VNexD3FUCDNW97vePVVMwCmYgAnfpkTLOAUSfZ7yTiK1mQ6QK5TXjKtweUhmTcYsRyaf3UI/s1600/Green.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}

.post ul li:hover {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeZCdV8cT_bmZp5fBSuBRAy_O884RhqEuHfd6I2th36T5QUxIBuBSOtv5BwWh9hk9uXAbD7gKGvaOlBsl_jdWSF0VfT06rxtdsf_0J6AhPSZMIuMwVTwunoVU10gNyr021RoNsTAGIKU0/s1600/Blue.gif) no-repeat scroll 0px 4px;
}
  • সবশেষে Save Template এ ক্লিক করুন। That's all.

 কাষ্টোমাইজেশনঃ

  • আপনার পোষ্টের Text Align অনুসারে Bullet List এর সাইজ পরিবর্তন করতে পারবেন। এর জন্য ইমেজ এর শেষে যে, 4px দেয়া আছে তা পরিবর্তন করে আপনার পছন্দমত দিতে পারেন।
  • আপনি ইচ্ছে করলে ইমেজ Url পরিবর্তন করে নিজের পছন্দমত Bullet List ব্যবহার করতে পারেন।

Badiuzzaman ( Rubel )