walid
11-01-2013, بتوقيت غرينيتش 08:04 AM
السلام عليكم ورحمه الله وبركاته
A Simple Related Posts Widget For Blogger (http://wiki-how-to.blogspot.com/search/label/Blogger)
In the last tutorial, i've been talking about the Related Posts widget (http://wiki-how-to.blogspot.com/2014/12/how-to-add-related-posts-widget-to.html) that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!
http://1.bp.blogspot.com/-k3EcPgQGY5o/UF-jHmfkZ0I/AAAAAAAACno/X3vwoXVbGyk/s1600/simple-related-posts-widget-blogger.png
مثال حي
Wiki How To - موسوعة المعرفة (http://wiki-how-to.blogspot.com)
للتركيب install
رمز Code:
</head>
فوق head
اضع
رمز Code:
<!--Related Posts Scripts and Styles Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; margin-top: 20px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 17px; font-weight: normal; color: black; font-family: Arial Narrow; margin-bottom: 0.75em; padding-top: 0em; } #related-posts a{ font-size:16px; color: #555555; font-variant:small-caps; } #related-posts a:hover{ text-decoration: none; color: #ffffff; font-weight: bold; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:none; text-color:#000000 } #related-posts ul li{ list-style-type: none; border-left: 2px solid #1399CF; border-bottom: 1px dotted #1399CF; margin-bottom: 3px; padding-left: 30px; padding-top:0px; } #related-posts ul li:hover{ background-color: #1399CF; border-left: 2px solid #B3CA3D; border-bottom: 1px dotted #B3CA3D; } </style> <script type='text/javascript'> var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End-->
ابحث عن
رمز Code:
<div class='post-footer'>
رمز Code:
<!-- Related Posts Code Start--> <!--Remove--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->
A Simple Related Posts Widget For Blogger | Wiki How To - موسوعة المعرفة (http://wiki-how-to.blogspot.com/2014/12/a-simple-related-posts-widget-for.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
A Simple Related Posts Widget For Blogger (http://wiki-how-to.blogspot.com/search/label/Blogger)
In the last tutorial, i've been talking about the Related Posts widget (http://wiki-how-to.blogspot.com/2014/12/how-to-add-related-posts-widget-to.html) that shows related posts along with thumbnails just at the end of your blog articles. Some of the users, however, would prefer a simpler and cleaner displaying of their related posts so that it would show just the posts titles. So let's begin adding it!
http://1.bp.blogspot.com/-k3EcPgQGY5o/UF-jHmfkZ0I/AAAAAAAACno/X3vwoXVbGyk/s1600/simple-related-posts-widget-blogger.png
مثال حي
Wiki How To - موسوعة المعرفة (http://wiki-how-to.blogspot.com)
للتركيب install
رمز Code:
</head>
فوق head
اضع
رمز Code:
<!--Related Posts Scripts and Styles Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; margin-top: 20px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 17px; font-weight: normal; color: black; font-family: Arial Narrow; margin-bottom: 0.75em; padding-top: 0em; } #related-posts a{ font-size:16px; color: #555555; font-variant:small-caps; } #related-posts a:hover{ text-decoration: none; color: #ffffff; font-weight: bold; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:none; text-color:#000000 } #related-posts ul li{ list-style-type: none; border-left: 2px solid #1399CF; border-bottom: 1px dotted #1399CF; margin-bottom: 3px; padding-left: 30px; padding-top:0px; } #related-posts ul li:hover{ background-color: #1399CF; border-left: 2px solid #B3CA3D; border-bottom: 1px dotted #B3CA3D; } </style> <script type='text/javascript'> var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End-->
ابحث عن
رمز Code:
<div class='post-footer'>
رمز Code:
<!-- Related Posts Code Start--> <!--Remove--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->
A Simple Related Posts Widget For Blogger | Wiki How To - موسوعة المعرفة (http://wiki-how-to.blogspot.com/2014/12/a-simple-related-posts-widget-for.html)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©