اضافة تدوينات ذات الصلة مثل عرب ويب



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

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

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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig = {homePage: &quot;<data:blog.homepageUrl/>&quot;,widgetTitle: &quot;<h4>تدوينات ذات صلة:</h4>&quot;,numPosts:6,summaryLength:370,titleLength: &quot;auto&quot;,thumbnailSize: 72,noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId: &quot;related-post&quot;,newTabLink: true,moreText: &quot;Read More&quot;,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'/>



فى امان الله

دبور فون

M.H.I

هناك 16 تعليقًا:

  1. اضافة جميلة بالتوفيق :)

    ردحذف
  2. اضافة رائعة شكرا لك اخي
    tech1net.com

    ردحذف
    الردود
    1. انت الاروع وشكرا لك على تشجيعنا :) Db:

      حذف
  3. السلام عليكم اضافة رائعة اخي محمد
    يالغالي ياليت تنزلنا شرح طريقة تركيب المشاهدات وعدد
    المواضيع والتعليقات مثل شكل الاضافة في الاعلى وشكرا لك

    ردحذف
    الردود
    1. حاضر اخى من عينى وشكرا لك على تشجيعنا :) Db:

      حذف
  4. ممكن عشان خطري تشرحلي كيفية اضافة اداة قسم معين مثل مدونتك في الاسفل ارجوك رد علية

    ردحذف
    الردود
    1. تم اخى مراسلتك على بريدك بالطريقة Db: :)

      حذف
  5. اضافة جميلة اخى بالتوفيق

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن فى إطار الموضوع وليس خارجه حفاظاً على راحتك الشخصية
لوضع اى اكواد Html فى التعليقات يرجى تحوليها اولاً بمحول الأكواد من هنا
لذلك نرجو منك ان تستعمل كل شىء بطريقته الصحيحة شكراً لتفهمك 😊

أحدث الأخبار

10/recent