السلام عليكم اعزائى متابعى المدونة اليوم نقدم لكم تدوينة فى اضافات بلوجر التدوينة الى حد ما حصرية خاصة أداة مواضيع ذات صلة من أهم الأدوات التى يجب على كل مدون يضيفها إلى المدونة خصوصًا إذا كانت تحتوى على مصغرات صور لما لها من أهمية كبيرة فى زيادة إحصائيات الموقع لأنها تمنح الزائر الذى يقرأ موضوع معين على موقعك فرصة لقراءة المزيد من الموضوعات عن نفس المجال التى ربما لم يلاحظها القارئ عند تصفح المدونة ولكن أداة مواضيع مشابهة ذات نفس التسمية تجعل الزائر يستفيد بأكبر قدر من المعلومات التى تعرضها فى موقعك . وبما اني سأقدم لكم شكل فبإمكانكم معاينة الشكل كالذي بمدونة عرب ويب
شرح طريقة التركيب
1- من لوحة التحكم >> قالب >> تحرير HTML
2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغير
3- قم بالبحث عن الكود التالي بالاستعانة بلوحة التحكم (CTRL+F)
4- قم بالبحث عن الكود ]]></b:skin> واضف فوقه مباشراً الكود التالي
/* CSS Related Post Dabour Phone */
.related-post {margin:5px 5px 0 0; padding:5px 22px 15px; font:normal normal 11px/1.4 Arial,Sans-Serif; background:#FDFDFD; border-radius:1px;border:1px solid #F0F0F0;}.related-post h4:before {content: "\f0f3";font-family: fontawesome;margin-left: 10px;color: #BD2E1F;}
.related-post h4 {font-family: Electrolize,ge_ss_tvbold;font-weight: 700;color: #FDFDFD;margin: 0 0 .5em;display: inline-block;padding: 6px 10px 7px 8px;line-height: 16px;font-size: 13px;border: 1px solid #E8E4E4;border-radius: 3px;background: #E74C3C;}
.related-post-style-5,
.related-post-style-5 li {margin:0;padding:0;list-style:none;word-wrap:break-word;overflow:hidden;}
.related-post-style-5 .related-post-item {display:block;float:right;width:82px;height:auto;padding:0;padding-bottom:3px;margin-left:2px;}
.related-post-style-5 .related-post-item:first-child {border-left:none;}
.related-post-style-5 .related-post-item-wrapper {display:block;position:relative;overflow:hidden;}
.related-post-style-5 .related-post-item-thumbnail {display:block;margin:0;width:77px;height:77px;max-width:none;max-height:none;background-color:#fafafa;border:2px solid #E0E0E0;padding:0;-webkit-border-radius:-1px;-moz-border-radius:-1px;border-radius:-1px; }
.related-post-style-5 .related-post-item-tooltip {background-color: rgba(229, 40, 20, 0.73);position: absolute;top: 0;right: 0;bottom: 0;left: 0;padding: 10px;
line-height: normal;font-size: 10px;font-style: normal;color: #FFFFFF;overflow: hidden;display: none;font-family: Electrolize,ge_dinar_oneregular;}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip { display:block;}
5. ابحث عن <data:post.body/> ضع بعده [ أسفل] الشكل المختار
* ملاحظة قد تجد الكود متكرر مرتين أو أكثر الأخير هو المقصود .. بإمكانك الإستغناء عن البحث عنه إذا كان لديك أزرار المشاركة أو تعريف الكاتب إلى غير ذلك وتعرف مكان الأكواد ضع الكود بالمكان المناسب لك
6- ضع الكود التالى اسفله مباشرة
<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: "<h4>تدوينات ذات صلة:</h4>",numPosts:6,summaryLength:370,titleLength: "auto",thumbnailSize: 72,noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId: "related-post",newTabLink: true,moreText: "Read More",widgetStyle: 5,callBack: function() {}};</script><script src='//ar1web-com.googlecode.com/svn/Hm/relatedar1web.js' type='text/javascript'/>
اكواد خطوط الاضافة
1- للتركيب قم باضافة هذه الاكواد فوق الوسم <head>
↓
<link href='//cdn.jsdelivr.net/darfonts/0.1/tv-tha-tye-wide/stylesheet.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet'/>
فى امان الله
اضافة رائعة ;)
ردحذفشكرا لك :)
حذفالف شكر يا غالي
ردحذفالشكر لله اخى :)
حذفاضافة جميلة بالتوفيق :)
ردحذفشكرا لك بالتوفيق لك أيضا :)
حذفشكرا لك اخي
ردحذفالعفو لا شكر على واجب :)
حذفاضافة رائعة شكرا لك اخي
ردحذفtech1net.com
انت الاروع وشكرا لك على تشجيعنا :) Db:
حذفالسلام عليكم اضافة رائعة اخي محمد
ردحذفيالغالي ياليت تنزلنا شرح طريقة تركيب المشاهدات وعدد
المواضيع والتعليقات مثل شكل الاضافة في الاعلى وشكرا لك
حاضر اخى من عينى وشكرا لك على تشجيعنا :) Db:
حذفممكن عشان خطري تشرحلي كيفية اضافة اداة قسم معين مثل مدونتك في الاسفل ارجوك رد علية
ردحذفتم اخى مراسلتك على بريدك بالطريقة Db: :)
حذفاضافة جميلة اخى بالتوفيق
ردحذفشكرا لك خى الكريم Db: :)
حذف