طبعا كلنا نعرف إضافة مواضيع ذات صله لمدونات بلوجر إن لم يكن معظمنا يستخدمها بالفعل, ولكن كا يعيب عليها انها فى أحسن حالاتها لها شكل غير لائق بالمدونه او أن تأخذ مساحه كبيره من المدونه كما أنها لا تستهوى القراء للضغط عليها للبقاء فى المدونه لأكبر قدر ممكن والحصول على الإستفاده من المدونه بأكبر قدر ممكن.
الآن تم طرح إضافة موضوعات ذات صله لمدونات بلوجر بشكل أنيق جدا وتصميم جذاب فعلا, كما أنها لا تاخذ حيزا كبيرا فى المدونه وتستطيع التحكم فيها أيضا.
كيف أضيف موضوعات ذات صله إلى مدونتى على بلوجر :
1- إذهب إلى تحرير html لقالب مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة المستخدم ) كى يظهر الكود كاملا.
ثم إبحث عن الكود
وفى حال وجود اى أعطال أو أى عقبات أمام إضافتك لهذه الأكواد أو عدم ظهور الإضافه برجاء إبلاغنا.
الآن تم طرح إضافة موضوعات ذات صله لمدونات بلوجر بشكل أنيق جدا وتصميم جذاب فعلا, كما أنها لا تاخذ حيزا كبيرا فى المدونه وتستطيع التحكم فيها أيضا.
كيف أضيف موضوعات ذات صله إلى مدونتى على بلوجر :
1- إذهب إلى تحرير html لقالب مدونتك ولا تنسى أن تضغط على مربع ( توسيع قوالب عناصر واجهة المستخدم ) كى يظهر الكود كاملا.
ثم إبحث عن الكود
وقم بوضع هذا الكود فوقه مباشرة]]></b:skin>
2- والآن إبحث عن هذا الكود/* Related Posts Widget
----------------------------------------------- */
ul#related-posts{
font-family:Helvetica,Arial,sans-serif !important;
font-size:10px !important;
list-style: none !important;
margin: 20px 0 !important;
padding: 0 !important;
text-transform: none !important;
}
ul#related-posts li{
float: left !important;
height: auto !important;
margin:0 15px !important;
padding: 2px 1px 4px !important;
}
*html ul#related-posts li{
margin:0 13px !important;
}
ul#related-posts li a {
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
border: 2px solid #FFFFFF !important;
display: block !important;
height: 72px !important;
position: relative !important;
width: 72px !important;
}
ul#related-posts li a {
color: #474C51 !important;
text-decoration: none !important;
text-shadow: 0 1px 0 #FFFFFF !important;
}
ul#related-posts li .overlay {
height: 66px !important;
line-height: 14px !important;
padding:6px 0 0 6px !important;
position: absolute !important;
width: 66px !important;
z-index: 10 !important;
}
ul#related-posts li a:hover .overlay {
background: #fff !important;
display: block !important;
opacity:0.9 !important;
}
ul#related-posts li img {
bottom: 0 !important;
padding:0px !important;
}
ul#related-posts li a:hover {
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
وقم بإستبداله بالكود التالى<b:includable id='backlinks' var='post'>
3- والآن الخطوه الأخيره وعليك فيها البحث عن أحد الأكواد التاليه فى كود قالب مدونتك<b:includable id='RelatedPosts' var='post'>
<!--remove--><b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeXZRkx1zag7frML2jmJrPy5liBKzc_N6y59lpnVmn_Gi-S6asFCeg1D_EgO2adettqDt7r2XWCXB9HZdbi09R1g7s-_5MQW2Z_hPL35aNkETuvj4n_4g7jXYlQ9J8ecqPZhNgP-yf-Qc0/";
var maxresults=6;
</script>
<script src='http://bloggerz.googlecode.com/files/related_posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<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=6"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</b:if> <!--remove-->
<div style='clear:both'/>
</b:includable>
<b:includable id='backlinks' var='post'>
وقم بوضع الكود التالى أسفل الكود الذى تجده فى مدونتك من الاكواد السابقه<div class='post-footer'>
أو
<div class='post-footer-line post-footer-line-1'>
أو
<div class='post-footer-line post-footer-line-2'>
أو
<div class='post-footer-line post-footer-line-3'>
4- والآن قم بحفظ القالب وشاهد مدونتك ... الإضافه تظهر فى مدونتك فى صفحات التدوينات اسفل التدوينه مباشرة.<b:include data='post' name='RelatedPosts'/>
وفى حال وجود اى أعطال أو أى عقبات أمام إضافتك لهذه الأكواد أو عدم ظهور الإضافه برجاء إبلاغنا.
0 التعليقات:
إرسال تعليق
بقلم احمد حجازي
الاسم ل احمد حجازي ،البلد مصر ، العمل مصمم ازياء ،