ব্লগে বিজ্ঞাপন দিয়ে আয় করা সব ব্লগারের স্বপ্ন। কিন্তু বিজ্ঞাপন পেতে হলে আপনাকে তো অবশ্যই বিজ্ঞাপ্তি দিতে হবে যাতে বিজ্ঞাপন দাতা বুঝতে পারে আপনি তার পন্যের বিজ্ঞাপ্তি দিতে রাজি। এক্ষেত্রে আপনার বিজ্ঞাপন চাওয়ার ব্যানার টা যদি আর্কষক হয় তাহলে বিজ্ঞাপন দাতা বিজ্ঞাপন দিতে আগ্রহী হতে পারে। তাই চলুন আজ আমরা দেখি কিভাবে সিএসএস ব্যবহার করে একটি বিজ্ঞাপন ব্যানার তৈরি করা যেতে পারে। আজ আমরা যে ব্যানারটি দেখব সেটি তাতে Hover Effects যুক্ত করা আছে। আপনি চাইলে যে কোন মাপের ব্যানার যুক্ত করতে পারবেন। যা ব্যানারটির সৌন্দর্য বৃদ্ধি করবে।

125px X 125px

250px X 250px

480px X 60px

728px X 90px

তাহলে চলুন দেখি কিভাবে ব্লগে Hover Effect যুক্ত সিএসএস ব্যানার তৈরি যুক্ত করা যায়।

প্রথমে আপনাকে আপনার ব্লগে লগইন করতে হবে এবং Dashboard যেতে হবে। তারপরে Dashboard থেকে Template নির্বাচন করতে হবে। এখন আপনাকে খুজে বের করতে হবে ]]></b:skin> কোড টি। যদি আপনি কোডটি পেয়ে থাকেন তাহলে নিচের কোডগুলো কপি করে ঐ কোডগুলোর উপরে কিংবা আগে পেষ্ট করুন।

img{max-width:100%;height:auto}
#footer-wrapper{overflow:hidden;padding:0 5px}
.footnya{width:33%;display:inline-block;float:left}
.tab-widget-menu ul,.tab-widget-menu li{padding:0;margin:0;list-style:none}
#mobinavul{display:none}
::selection{background:#0F83A0;color:#fff;text-shadow:none}
::-moz-selection{background:#0F83A0;color:#fff;text-shadow:none}
.post-body blockquote{margin:15px;padding-left:10px;border-left:2px solid #0F83A0;font-style:italic;color:#0F83A0}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}
.bsad li{padding:0;width:50%;float:left;margin-bottom:5px}
.tipsworld{cursor:pointer}
.ads125{width:125px;height:125px;text-align:center;line-height:125px;margin:0 auto}
.bd{border:1px solid #60ADE9;background:#C2E0F1}
.bd:hover{background:#ABE1FF}

কোডগুলো কপি পেষ্ট করা হয়ে গেলে Template টি সেইভ করুন। এখন Layout ট্যাবে যান এবং একটি নতুন HTML/JavaScript Widget যুক্তু করুন এবং নিচের কোডগুলো কপি পেষ্ট করে সেইভ করুন।

125px X 125px ব্যানার বিজ্ঞপ্তির জন্য

<ul>
<li><div>Advertise Here</div></li>
<li><div>Advertise Here</div></li>
<li><div>Advertise Here</div></li>
<li><div>Advertise Here</div></li>
</ul>
</div>
</div>

250px X 250px ব্যানার বিজ্ঞাপির জন্য

<div style="width:260px;height:200px;text-align:center;line-height:200px;margin:0 auto;">Advertise Here</div>

480px X 60px ব্যানার বিজ্ঞাপির জন্য

<div style="width:468px;height:60px;line-height:60px;text-align:center;font-size:12px;">Advertise Here</div>

728px X 90px ব্যানার বিজ্ঞাপির জন্য

<div style="width:728px;height:90px;text-align:center;line-height:90px;margin:0 auto;">Advertise Here</div>

আরও দেখুন কিভাবে একটি সুন্দর ফ্লাটিং শেয়ারিং বাটন যুক্ত করতে হবে ব্লগে