আসুন সিএসএস দিয়ে বিজ্ঞাপনের ব্যানার তৈরি করি ব্লগের জন্য

 

ব্লগে বিজ্ঞাপন দিয়ে আয় করা সব ব্লগারের স্বপ্ন। কিন্তু বিজ্ঞাপন পেতে হলে আপনাকে তো অবশ্যই বিজ্ঞাপ্তি দিতে হবে যাতে বিজ্ঞাপন দাতা বুঝতে পারে আপনি তার পন্যের বিজ্ঞাপ্তি দিতে রাজি। এক্ষেত্রে আপনার বিজ্ঞাপন চাওয়ার ব্যানার টা যদি আর্কষক হয় তাহলে বিজ্ঞাপন দাতা বিজ্ঞাপন দিতে আগ্রহী হতে পারে। তাই চলুন আজ আমরা দেখি কিভাবে সিএসএস ব্যবহার করে একটি বিজ্ঞাপন ব্যানার তৈরি করা যেতে পারে। আজ আমরা যে ব্যানারটি দেখব সেটি তাতে 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>

 

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

Level 0

আমি অসীম কষ্ট। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 8 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 39 টি টিউন ও 35 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি একজন ছাত্র পড়াশুনার ফাঁকে ফাঁকে কম্পিউটার নিয়ে ঘাটাঘাটি করি। এতে আমি যা জানতে পারি বা বুঝতে পারি তা বন্ধুদের সাথে শেয়ার করি। ঘুরে বেড়াতে ভাল লাগে একা একা থাকতে আর সারাদিন নাওয়া খাওয়া ছেড়ে কম্পিউটারের সাথে লেগে থাকতে ভাল লাগে। খুব বেশি বন্ধু তবে আমরা যখন একত্র হই তখন...


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

বস আমাকে সাহায়্য করুন কী ভাবে আপনার ব্লগের মত comment box যুক্ত করব

    @naiemkhannadim: ঠিক বুঝলাম না আমার মত কেমন, আমার ব্লগে তো নরমাল কমেন্টস্ বক্স দেওয়া আছে। তার উপরে শুধু একটি ইমোশন বক্স যুক্ত করেছি। যদি আপনি ইমোশন বক্স যুক্ত করতে চান তাহলে এই পোষ্টটি দেখতে পারেন।Add Emotion Box

Level 0

Very informative post. Would you tell me that, how can I show ads in this box if I want to show my own ad. Moreover, how can I create ads for my own blog?

Here is my Blog; HSP

Level 0

wordpress er জন্য ?