আসসালামু-আলাইকুমঃ কেমন আছেন সবাই , আশা করি আল্লাহর রহমতে খুব ভাল আছেন । আমিও আপনাদের দুয়াই ও আল্লাহর অশেষ রহমতে  অনেক ভাল আছি।

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

হভার ইফেক্ট ব্লগার রেলাটেড পোস্ট সম্পর্কে কিছু কথা ঃ এই হভার ইফেক্ট ব্লগার রেলাটেড পোস্ট তৈরি করার জন্য কন Html/JavaScript Gadget ব্যবহার করা হইনি। এবং এর কডগুলি অনেক সহজেই সেটআপ করা যাই। জার কারনে খুব ফাস্ট লোড হই। আমি অনেক রকম রেলাটেড পোস্ট Gadget ব্যবহার করেছি। কখন শুধু টেক্সট রেলাটেড পোস্ট আবার কখন Thumbnails। ও হা! এই রেলাটেড পোস্ট টি Thumbnails সহ এবং অনেক আকর্ষণীয়। বড় কথা হল একেক জনের চোখে একেক রকমের পছন্দ। তাই এই রেলাটেড পোস্ট টি আপনার পছন্দ হবে কি না টা আমি জানি না, তবে আমার ভাল লেগেছে তাই আপনাদের সাথে শেয়ার করলাম। যাইহোক, মুল কাজে ফিরে যাই।

কাজ শুরু করার আগে একবার লাইভ ডেমো টা দেখে নেওয়া জাক

১.  প্রথমে আপনার ব্লগ এ লগিন করেন। তারপর Templates > Edit Html > Tick the Expand Widget templates ।

২. তারপর কীবোর্ড এর কন্ট্রোল + এফ চেপে এই কড টি খুজুন   ]]></b:skin>

৩.  ]]></b:skin> এই কড এর উপরে নিচের কড গুলি বসান।

<!--start related posts css Info : http://www.netalamin.blogspot.com--&gt;

ul#related-posts{
font-family:"Droid Sans",Helvetica,Arial,sans-serif;
font-size:10px;
list-style: none;
margin: 20px 0;
padding: 0;
text-transform: none;
}
ul#related-posts li{
float: left;
height: auto;
margin:0 5px;
padding: 2px 1px 2px;
list-style-type:none;
}
*html ul.rp#related-posts li{
margin:0 13px;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
border: 2px solid #FFFFFF;
display: block;
height: 72px;
position: relative;
width: 72px;
}
ul#related-posts li a {
color: #474C51;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
ul#related-posts li .overlay {
height: 66px;
line-height: 16px;
padding:6px 0 0 6px;
position: absolute;
width: 66px;
z-index: 10;
}
ul#related-posts li .overlay {
}
ul#related-posts li a:hover .overlay {
background: #fff;
display: block !important;
opacity:0.9;
}
ul#related-posts li img {
bottom: 0;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

<!--end related posts css.Info : http://www.netalamin.blogspot.com--&gt;

৪. <div class='post-footer'> এই কডটি খুজুন।

৫.  <div class='post-footer'> এই কড এর নিচে, নিচের কড গুলি বসান।

<!--start related posts code Info : http://www.netalamin.blogspot.com--&gt;

<h3>Related Posts</h3>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh4.googleusercontent.com/-UAd7HnUcWa8/TW4s1zgCBWI/AAAAAAAAC78/qV4YWequmkk/s1600/no-image.gif&quot;;
var maxresults=6;
</script>
<script src='http://suyb.googlecode.com/files/rph.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/>
</b:loop>

<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>

<div style='clear:both'/>
<br/><br/>
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a>
<!--end related posts code Info : http://www.netalamin.blogspot.com--&gt;

এখানে ৬ টি রেলাটেড পোস্ট শো করান হয়েছে, আপনি ইচ্ছে করলে কম/বারাতে পারেন। বাড়ান / কমানোর জন্য ( max-results=6 ) এই কডটি খুজুন এবং ৬এর জাইগাই যত লিখবেন ততো শো করবে।

৬. আপনার টেম্পলেট সেভ করেন।

নোট : কাজের শুরুতেই আপনার টেম্পলেট টি ব্যাকআপ রাখুন ।

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