اضافه نمودن قابلیت " نوشته های مرتبط با مطلب منتشر شده " با پیش نمایش تصویری به وبلاگ

از ویژگیهای سیستم بلاگر میتوان به سفارشی سازی وبلاگهای تحت این سیستم اشاره کرد. از این سو یکی از ترفندهای پر طرفدار در بین کاربران بلاگر که ب وبلاگهای خود اضافه میکنند ، قابلیت " نمایش مطالب مرتبط با مطلب منتشر شده "  است .
تصویر زیر نمایی از این ترفند است :


مطالب مرتبط در حالت تصویری

مراحل انجام کار :
1- وارد بخش layout  و سپس قسمت Edit HTML از بخش مدیریت وبلاگ خود شوید . از آنجا تیک گزینه Expand Widget Template را قرار دهید .
- کد زیر را در قالب پیدا کنید  :


</head>


3- کدهای زیر را با کدبالا جایگزین نمائید :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:right;
text-transform:none;
height:100%;
min-height:100%;
padding-top: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;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>


4- حال سه خط کد زیر را به دلخواه و با توجه به قالب وبلاگ خود ، در بین کدهای قالب خود پبداکنید :


<div class='post-footer-line post-footer-line-1'>

یا
<p class='post-footer-line post-footer-line-1'>

یا
<data:post.body/>


5- حال کدهای زیر را بعد از خط کدهای بالا قرار دهید :

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->




منبع: مستندات فارسی بلاگر

0 نظر

» لطفا در نظرات خود از الفاظ رکیک استفاده نکنید
» لطفا نظرات خود را به زبان فارسی تایپ کنید