Dabour Phone

[name=محمد إبراهيم] [img=http://lh3.googleusercontent.com/-Ea4NJ91_ql0/AAAAAAAAAAI/AAAAAAAABQE/snk6h86Q3sI/s512-c/photo.jpg] [description=هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص.] (facebook=#) (youtube=#) (google-plus=#) (twitter=#) (linkedin=#) (instagram=#) (pinterest=#) (behance=#)
8/recent posts

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



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

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

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'/>



فى امان الله
Share This
هناك 16 تعليقًا:
  1. اضافة جميلة بالتوفيق :)

    ردحذف
    الردود
    1. شكرا لك بالتوفيق لك أيضا :)

      حذف
  2. الردود
    1. العفو لا شكر على واجب :)

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

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

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

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

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

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

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

    ردحذف

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