ব্লগার ব্লগে ব্যবহার করুন যুম ইফেক্ট রিলেটেড পোস্ট ওয়েডগেট ! একদম নতুন স্টাইল !

আসসালামু আলাইকুম , বন্ধুরা আজকে আমি আপনাদের সঙ্গে একদম নতুন স্টাইল রিলেটেড পোস্ট ওয়েডগেট নিয়ে এলাম এটা একদম নতুন স্টাইল এটা নতুন স্টাইল কারন এটাতে আছে যুম ইফেক্ট এবং এটা আপনার ব্লগের প্রতিটি পোস্টের নিচে দেখা যাবে । নতুন যারা তাদের উদ্দেশ্য বলি এটা আপনার ব্লগের বিভাগ অনুসারে আপনার পোস্টের নিচে এটা দেখা যাবে সঙ্গে ফটো । তাহলে চলুন দেখে যাক কিভাবে এটা ব্যবহার করবেন । নিচের সাধারন স্টেপ গুল একটু লক্ষ করে আপনার ব্লগে ব্যবহার করুন এই ওয়েডগেট টি ।

Related Post Widget Zoom Effect

Related Post Demo

কিভাবে ব্যবহার করবেন রিলেটেড পোস্ট ওয়েডগেট :

• প্রথমে আপনার ব্লগার ব্লগ লগইন করুন 

• ড্যাশবোর্ড থেকে Template → Edit HTML এ যান

• এবার কীবোর্ড এর CTRL+F প্রেস করে নিচের ট্যাগ খুজুন 

</head>

• উপরের ট্যাগ খুজে পেলে তার ঠিক উপরে নিচের কোড গুল বসান 

<!--Related Posts with zOOm Styles Start-->
<style type='text/css'>
        .post-body img{
          border:none;
          box-shadow:0 0 0;
        }
        #related-posts {
          float:center;
          text-transform:none;
          height:100%;
          min-height:100%;
          padding-top:5px;
          padding-right:5px;
          padding-left:5px;
  }
        #related-posts h2{
          font-size: 1.6em;
          font-weight: bold;
          color: black;
          font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
          margin-bottom: 0.75em;
          margin-top: 0em;
          padding-top: 0em;
        }
        #related-posts a {
    color: black;
    transition: all 0.2s ease-in 0s;
}
        #related-posts a:hover {
    background-color: #232A2B;
    transform: scale(1.3);
    z-index: 5;
}

        #related-posts  a:hover {
          background-color:#232A2B;
        }
      </style>
<script type='text/javascript'>
        var defaultnoimage=&quot;http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png&quot;;
        var maxresults=5;
        var splittercolor=&quot;#d4eaf2&quot;;
        var relatedpoststitle=&quot;Related Tricks For You&quot;;
      </script>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
<!--Related Posts with zOOm Styles End-->

উপরের কালার 5 নাম্বার মুছে সেখানে আপনার পছন্দ মত দিন মানে আপনি ওখানে যেই নাম্বার ব্যবহার করবেন আপনার ব্লগে সেই ভাবে Related পোস্ট দেখা যাবে উপরে ৫ টা আছে তাহলে ৫ টা দেখা যাবে । 

• এবার একি ভাবে নিচের ট্যাগ খুজুন CTRL+F প্রেস করে

<data:post.body/> or <div class='post-footer'>

• এবার উপরের ট্যাগ এর ঠিক নিচে নিচের কোড গুল বসিয়ে দিন

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>

<data:post.body/> or <div class='post-footer'> আপনি ১ , ২ ,৩ বা ৪ বার পেতে পারেন কিন্তু আপনি দ্বিতীয় বা তৃতীয় বার যেটা পাবেন তার ঠিক নিচে নিচের কোড গুল বসাবেন । 

ব্যাস এবার Save Template এ ক্লিক করুন এবং আপনার ব্লগ ভিজিট করে দেখুন আশাকরি আপনি কাজটি আমার মতই করতে সফল হয়েছেন । পোস্টটি থেকে বুঝতে কোন সমস্যা হলে নিচে কমেন্ট করুন ।। পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে শেয়ার করুন । ভাল থাকবেন সুস্থ থাকবেন আবারও দেখা হবে নতুন কিছু নিয়ে । আসসালামু আলাইকুম ।