More Related Post এর পাশে কিভাবে বিজ্ঞাপন/গুগল এডসেন্স বসাবেন [প্রোগ্রামিং জ্ঞান প্রয়োজন]

More Related Post এর পাশে বিজ্ঞাপন… এইটা আবার কি?

যারা আমার ইংরেজি ব্লগে পা রেখেছেন, তার লক্ষ করলে দেখবেন যেকোনো ব্লগ পোষ্টের শেষে Most Related Post লিষ্টের পাশে গুগল এডসেন্সের বিজ্ঞাপন দেখে থাকবেন। এভাবে বসালে বেশি ক্লিক পড়ে কিনা আমি এখন টেস্ট করছি, উত্তরে পৌঁছাতে পারিনি। তবে আপনার আগ্রহী হলে নিজেদের ব্লগে টেষ্ট করে দেখতে পারেন। আমি এখানে কেবল নিজ সার্ভারে ইনস্টল করা ওয়ার্ডপ্রেস সাইটের জন্য টিউটোরিয়ালটি বর্ণনা করব।

এই কাষ্টমাইজেশনটি তিনটি স্তরে সম্পন্ন করতে হবে, প্লাগইন ইনস্টল, ওয়ার্ডপ্রেসের পোষ্ট হুকে কোড স্থাপন (php) এবং সঠিক স্থান ও রং বসানো (css)। তাই তাড়াহুড়া করার কোনোই দরকার নেই, ধীরে ধীরে করুন। নাইলে কিন্তু…

এক – প্লাগইন ইনস্টল

এই কাজের জন্য আমি Yet Another Related Post Plugin প্লাগইনটি ব্যবহার করেছি। আপনার Plugin ইনস্টলে গিয়ে YARPP দিয়ে সার্চ দিলে এই প্লাগইনটি খুঁজে পাবেন, তা ইনস্টল করে ফেলুন।

এবার Settings এ গিয়ে Display Options for your website এর ঘরে Automatically display related posts? এর পাশের টিক চিহ্নটি তুলে দিন। তা না হলে এটি অটোমেটিকভাবে আপনার ব্লগে Related Post দেখাতে শুরু করবে। যা আমরা দেখাতে চাই না। আর যারা কাষ্টমাইজেশন করতে চান না, তারা এখানেই থেমে যেতে পারেন।

দুই – সঠিক স্থান এবং রং বসানো (CSS)

আমি পোষ্টের শেষে যে জায়গায় বসিয়েছি, সেখানকার প্রস্থ হচ্ছে ৫৫০ পিক্সেল, তাই আমি স্থানটিকে সমান দুইভাগে ভাগ করে প্রথম অংশে Related Post এবং অন্য অংশে বিজ্ঞাপন বসিয়েছি। এবং পছন্দসই রং ব্যবহার করেছি – রং বাছাইয়ের জন্য এই পোষ্টটি পড়ুন।

এখন রং পছন্দ হয়ে গেলে কাগজে টুকে রাখুন।

এবার Appearance > Editor এ গিয়ে style.css ফাইলটি খুলুন এবং সবার শেষে গিয়ে নিচের কোডটি বসিয়ে দিন।

/******* main container ***************/
.custom .format_text div.ads {
background: #F4EFA4 center no-repeat; border: 2px solid #E0C64C; padding:15px 8px 15px 8px;
-moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px;
-moz-border-radius-topleft:4px; -moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px;
-webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; margin-bottom:10px; overflow:hidden; }

/******* related post container **********/
#yarpp { float: left; font-size:13px; width:50%; font-weight:bold; }
#yarpp ul { border:0px; padding:0px; }
#yarpp ul li a { text-decoration:none; }
#yarpp ul li a:hover { text-decoration:none; }

/******* related post title **************/
#yarpp .title { padding:0px; border:0px; font-size:18px; color:#960101; font-family:'century gothic'; text-transform:uppercase; font-weight:bold; }

/******* ads container ****************/
#yarpp-ads { float: right; width: 50%; text-align:right; verticle-align:top; }

আপনার পছন্দসই রং #F4EFA4 (background) এবং #E0C64C(border) এর পরিবর্তে ব্যবহার করতে পারেন।

এক – টেমপ্লেটে কোড স্থাপন (php)

যারা php কোডিং নিয়ে ধারনা রাখেন, তারা নিচের কোডটুকু main index template/ single post template পেজের do_action(‘the_entry’); এর পর সুবিধাজনক স্হানে বসিয়ে দেবেন।

if (!is_home() && !is_page() ) {
?>
<div class = 'ads'>
<div id=yarpp>
<font class = title >More Related Posts</font><? related_posts(); ?>
</div>
<div id = yarpp-ads>
/**** your adsense code here ****/
</div>
</div>

<? }

আর যারা php কোডিং জানেন না কিংবা php কোডে হাত দিতে চান না, তারা comments template পেজে সবার উপরে নিচের কোডটুকু যোগ করে দিন।

<? }
if (!is_home() && !is_page() ) {
?>
<div class = 'ads'>
<div id=yarpp>
<font class = title >More Related Posts</font><? related_posts(); ?>
</div>
<div id = yarpp-ads>
/**** your adsense code here ****/
</div>
</div>

<? } ?>

এরপর পছন্দমতো আপনার পছন্দমতো background এবং border এর রঙয়ের সাথে মিল রেখে এডসেন্স কোড তৈরি করুন এবং /*** your adsense code here ****/ লাইনের নিচে যোগ করে টেমপ্লেটটি save করুন। আমি এখানে এডসেন্সের ২৫০ * ২৫০ সাইজটি ব্যবহার করেছি।

ব্যাস, সবকিছু ঠিক থাকলে স্বল্প সময়ের মধ্যে More related post এবং এডসেন্সের বিজ্ঞাপনকে পাশাপাশি দেখতে পারেন। এডসেন্সের পরিবর্ত অন্য যেকোনো বিজ্ঞাপন, লেখা প্রদর্শণ করতে পারবেন।

সর্তকতা

প্রোগ্রামিং জ্ঞান প্রয়োজন, এই ধরনের পোষ্ট দিতে ভয় লাগে। কারণ এতে দূর্ঘটনা ঘটার সম্ভাবনা থাকে। আর দূর্ঘটনার পর আমি দোষী প্রমাণিত না হলেও ক্ষতিপূরণ হিসেবে আমাকে ব্লগকে পুরোনো জায়গায় ফেরত নিয়ে যাওয়ার অনুরোধ শুনতে হতে পারে। যা আমার ব্যস্ত জীবনে সবসময় সম্ভব নয়। তাই এই পোষ্টটি নিজের ব্লগে প্রয়োগের আগে সর্তকতা অবলম্বন করবেন, সম্ভব হয়ে দক্ষ কারোও সাহায্য নেবেন।

যেকোনো টেমপ্লেট ফাইল পরিবর্তন করার পূর্বে notepad এর পুরো কোডটি সংরক্ষন করুন। কোনো সমস্যা হলে notepad থেকে কোডটি নিয়ে আবার টেমপ্লেটে বসিয়ে দিন।

সবশেষে, সবাই ভাল থাকুন, সুস্থ থাকুন।

শুভ কামনা রইল সবার জন্য।

এ ধরনের আরও কিছু পোষ্ট:

• গুগল এডসেন্স একাউন্টের জন্য আবেদন করার পূর্বে যা যা করবেন
• গুগল এডসেন্স চেক – জানুয়ারী, ২০১০
• কিভাবে গুগল এডসেন্স/বিজ্ঞাপন পোষ্টের মধ্যে ডানে/বামে সরাবেন? [টিউটোরিয়াল]
• জনগুরুত্বপূর্ণ পোষ্ট – গুগল এডসেন্স একাউন্ট ব্যান এবং ওয়েবসাইট বিষয়ক একটি প্রসঙ্গ
• গুগল এডসেন্স বিজ্ঞাপনে বৈচিত্র্য আনুন – Multiple Palettes ব্যবহার করুন
• গুগল এডসেন্স চেক – সেপ্টেম্বর, ২০০৯
• কিভাবে গুগল এডসেন্স বিজ্ঞাপনের রং নির্ধারণ করবেন?
• গুগল এডসেন্স ভুয়া চেক/রিপোর্ট জালিয়াতি থেকে সাবধান

Tagged as: css, More Related Post, php, গুগল, গুগল এডসেন্স, টিউটোরিয়াল, পিএইচপি, প্রোগ্রামিং, বিজ্ঞাপন, সিএসএস