مدونة نيو ويب بلوجر

السلام عليكم ... أداة مواضيع ذات صلة من أهم الأدوات التى يجب على كل مدون يضيفها إلى المدونة ؛ خصوصا إذا كانت تحتوى على مصغرات صور لما لها من أهمية كبيرة فى زيادة إحصائيات الموقع ؛ لأنها تمنح الزائر الذى يقرأ موضوع معين على موقعك فرصة لقراءة المزيد من الموضوعات عن نفس المجال التى ربما لم يلاحظها القارئ عند تصفح المدونة ؛ ولكن أداة مواضيع مشابهة ذات نفس التسمية تجعل الزائر يستفيد بأكبر قدر من المعلومات التى تعرضها فى موقعك ... وبما اننى سأقدم لكم شكلين فبأمكانكم معاينة الشكل الأول كالذى بالمدونة بالنزول قليلا اما الشكل الثانى فسنتعرف عليه بالصور ...

الشكل الأول

طريقة التركيب

1 . توجه لقالب -- > تحرير

2. ابحث بأستعمال CTRL+F عن :

]]></b:skin>

3. ضع ضع هذا الكود الأول فوقه :

/* CSS كود */

#at-picture{background:#F9F9F9;padding:12px;margin:6px 0 0;border:1px solid #f2f2f2;overflow:hidden}

#at-picture h2{font-family:Electrolize,ge_ss_tvbold;font-weight:700;font-size:15px;color: #e74c3c;}

#at-picture a{background:#FFFFFF;font-family:Electrolize,ge_dinar_oneregular;color:#716F6F;box-shadow:0 2px 2px #f0f0f0;overflow:hidden;text-align:center;font-size:12px;font-weight:400;border:1px solid #f8f8f8;text-decoration:none;margin:0 7px 5px 0;padding:6px;float:right}

#at-picture a img{width:100px;height:98px}.box-related{width:100px;padding-left:3px;height:50px;border:0 none;margin:0 0 5px;padding:0;line-height:normal;font-stretch:normal}#at-picture a:last-child{margin-right:0}

#at-picture a:nth-child(1):hover{box-shadow:0 -3px 0 #E50700 inset}#at-picture a:nth-child(2):hover{box-shadow:0 -3px 0 #0084C5 inset}#at-picture a:nth-child(3):hover{box-shadow:0 -3px 0 #6CAC00 inset}#at-picture a:nth-child(4):hover{box-shadow:0 -3px 0 #00C3B7 inset}#at-picture a:nth-child(5):hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:hover{box-shadow:0 -3px 0 #FF8168 inset}#at-picture a:nth-child(1):hover,#at-picture a:nth-child(2):hover,#at-picture a:nth-child(3):hover,#at-picture a:nth-child(4):hover,#at-picture a:nth-child(5):hover,#at-picture a:hover{background:#fff}#at-picture img{width:100%;margin:0;padding:0}#posting{width:auto!important;max-width:100%;margin:15px 20px 15px 0}

4 - ابحث عن :

<data:post.body/>

*** ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بأمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك ...

ضع بعده { أسفله } هذا الكود الثانى :

<b:if cond='data:blog.pageType == "item"'>

<script> var defaultnoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcxGoYa1nJlYgvPeXcQuwEuvKCbtfVzbx0QbceCZmSCutsWaKKAIHncUeVKp_C5Ii25pinl33nj3LCQPXycSYBxIiN-6M_h-HyscrY_EcY4tFPmEdEZ28FwSqD9nI9j9sBXLytgFXLVOk/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "تدوينات ذات صلة :"; </script>

<script src='https://ar1web-com.googlecode.com/svn/Hm/rehm.js' type='text/javascript'/>

<div id='at-picture'>

<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=999"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>

</div>

</b:if>

الشكل الثانى

الكود الأول :

/* CSS كود */

.related-post{margin:10px 0;}

.titlehead{margin:0 4px 10px;font-size:15px;border-bottom:3px solid #ecf0f1;color:#E74C3C;font-weight:700;padding-bottom:2px;font-family:Electrolize,ge_ss_tvbold;}

.titlehead span{border-bottom:3px solid #E74C3C;padding-bottom:4px;}

.related-post{margin:1em auto 0;background: #F5F5F5;border: 1px solid #ddd;}

.related-post-style-3,.related-post-style-3 li{margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}

.related-post-style-3 .related-post-item{float:right;width:299px;height:auto;margin:0 3px;margin-bottom:-993px;padding-bottom:999px;outline:0;}

.related-post-style-3 .related-post-item:first-child{border-left:none;}

.related-post-style-3 .related-post-item-thumbnail{max-width:none;max-height:none;padding:0;float:right;margin-right:10px;}

.related-post-style-3 .related-post-item-title{font-weight:500;font-size:14px;margin-right: 10px;font-family: Electrolize,ge_dinar_oneregular;}

div.rel-item-post{background:#FFF9E2;padding:8px;border:1px solid #EEDFB2;}

div.rich-snippet{padding:7px 7px 20px;margin:10px 0;background:#eee;border-top:1px solid #DBDBDB;font-size:12px;color:#525252;line-height:1.6em;font-family: Electrolize,ge_ss_threeregular;border: 1px solid #DFDDDD;}

div.st_share{margin:10px 0;}

div.rich-snippet span{color:#727272;}

الكود الثانى :

<div class='related-post' id='related-post'/>

<script type='text/javascript'>

var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>

</b:loop></b:if>];

var relatedPostConfig = {

homePage: "<data:blog.homepageUrl/>",

widgetTitle: "<h3 class='titlehead'><span>تدوينات ذات صلة:</span></h3>",

numPosts: 6,

summaryLength: 0,

titleLength: "auto",

thumbnailSize: 65,

noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",

containerId: "related-post",

newTabLink: false,

moreText: "Read More",

widgetStyle: 3,

callBack: function() {}

};

</script>

<script src='https://ar1web-com.googlecode.com/svn/Hm/related%20posts.js' type='text/javascript'/>

طريقة تركيب الشكل الثانى مثل الأولى ...

اتمنى من الله ان اكون وفقت بالشرح ...

عنوان التدوينة: مواضيع ذات صلة بشكل جميل وبدون أخطاء
تقييم : 100من 100مرتكز على 53 تقييم.
الكاتب / المدير : Unknown
التسميات : أضافات بلوجر
توقيت النشر : 11:50 م

عدد التعليقات : 0

عدد المشاهدات :

get

مواضيع ذات صلة بشكل جميل وبدون أخطاء

الشكل الأول

طريقة التركيب

الشكل الثانى

الكود الأول :

الكود الثانى :

نبذة عن الكاتب

0 التعليقات:

بحث

تابعنا

استمع للقرآن الكريم

التسميات

المشاركات الشائعة

Advertising