إضافة "مواضيع ذات صلة" متحركة أسفل التدوينات

بسم الله الرحمان الرحيم

سأقدم لكم اليوم درس بعنوان إضافة "مواضيع ذات صلة" مُتحركة أسفل التدوينة حتى تجعل الزائر يدخل للقراءة موضوع أخر على مدونتك و بعد انتهائه يدخل للموضوع مشابه اخر و بذلك يكون قد بقي في مدونتك طويلا مِما يجعل ترتيب مدونتك يرتفع في الاليكسا و يتِم رفع الباج رانك الخاص بمدونتك وقد سبق لي أن وضعت درس لإضافة المواضيع ذات صلة لاكن هذه الطريقة الجديدة أفضل و أجمل إن شاء الله و هي تقوم بجمع كُل المواضيع المشابهة للتدوينة على شكل أيقونات الصُوَر الرئيسية للموضوع + عنوان الموضوع و جعلها متحركة من اليمين إلى الشِمال و من الشِمال إلى اليمين بجمالية وروعة كبيرة للنبدأ الدرس

إذ أردت معاينة الإضافة ستجدها أسفل هذه التدوينة

أولا نقوم بتوجه إلى تحرير القالب ثم نضغط على زر توسيع القالب و نبحث عن

كود:

 </head>

فوقه مباشرة نقوم بوضع الكود التالي :

كود:

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; width:100% min-height:100%; padding-top:5px; padding-right:5px; } #related-posts h2{ background: #FFF!important; font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
    </b:if> <script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en'} </script>

بعد ذلك نقوم بالبحث عن :

كود:

 <div  class='post-footer-line post-footer-line-1'>

اذا لم تجده في قالبك ابحث عن :

كود:

 <p class='post-footer-line post-footer-line-1'>

ثم أضف الكود التالي بعد الكود السابق مباشرة :

كود:

 <br/><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop> <h3 style='border-bottom: 3px #5D7D91 solid;padding-bottom:10px!important'><b>مواضيع ذات صلة :</b></h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=10; var relatedpoststitle=&quot;&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> </b:if>

قم بحفظ القالب و هنيئا لك الإضافة

لا تنسى ترك رأيك في تعليق

و إلى اللقاء في الدروس القادم إن شاء الله

بالتوفيق ^^

الموضوع من طرف : ANAS ATIFI

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