২৩ জুন, ২০১৫

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

ব্লগার Bullet List কাষ্টোমাইজ করুন এবং Image Hover Effect দিন
4/ 5 stars - "ব্লগার 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(http://3.bp.blogspot.com/-seIVQ5f7y-Y/VCOwywAMIGI/AAAAAAAADKA/qWe4Y2vV9Yk/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(http://1.bp.blogspot.com/-BmmZydO9hc8/VCOwy0pJmVI/AAAAAAAADJ8/g4C_isTWqVw/s1600/Blue.gif) no-repeat scroll 0px 4px;
}
  • সবশেষে Save Template এ ক্লিক করুন। That's all.

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

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

and Share on
পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট

2 টি মন্তব্য: Post Yours! Read Comment Policy ▼
লক্ষ্য করুনঃ
পোষ্টের সাথে সম্পৃক্ত নয় এমন কোন কমেন্ট করা যাবে না। কোন কারণ ব্যতীত আপনার ব্লগের লিংক শেয়ার করতে যাবেন না। সবসময় গঠনমূলক মন্তব্য প্রদানের চেষ্টা করবেন। আমরা সবার মতামত সমানভাবে মূল্যায়ন করি এবং যথাসময়ে প্রতি উত্তর দেয়ার চেষ্টা করি।

  1. হারুন সাহেব! যদি আংশিক আরেকটু ধারণা দিতেন কৃতজ্ঞ থাকতাম ৷ কোড দিয়েছি, লিষ্ট কোন অংশে দেখাবে, কিভাবে/কোথায় লিষ্ট করবো ইত্যাদি ৷

    উত্তরমুছুন
    উত্তরগুলি
    1. পোষ্ট লিখার সময় Bullet সিলেক্ট করলেই হবে।

      মুছুন

 
Subscribe for all Updates

Subscribe Now

কপিরাইট © 2015- প্রযুক্তি ডট কম ™, সর্বস্বত্ব সংরক্ষিত

Powered by: