إضافة مواضيع ذات صلة مع مواقع النشر والقائمة البريدية في إصدارها الثاني

  

السلام عليكم ورحمة الله وبركاته ,

 في هذا الدرس اليوم مع الإصدار الثاني من اٍضافة

مواضيع ذات صله مع مواقع النشر والقائمة البريدية

وبشكل جديد ومختلف تماما عن السابق ولكن يؤدي نفس الوظائف دون تغيير .

  ولمشاهدة مثال على الإضافة في إصدارها الثاني  فيمكنك مشاهدة الصورة التالية لترى الإضافة كما تظهر أسفل الموضوعات.

 إن أعجبتك الإضافة وتود تطبيقها على مدونتك .

اتبع المراحل التالية:

1.       قم بتسجيل الدخول إلى لوحة تحكم بلوجر

2.      ثم اذهب إلى تصميم

3.       ثم إلى تحرير HTML وضع علامة على خانة توسيع القالب

4.       ثم ابحث عن ]]></b:skin>

5.       وضع قبلها مباشرة الكود التالي

 #related{background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-left:1px solid #666;text-shadow:0 1px 0 #000;margin:0 0 5px;padding:10px} ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0} #related .related-posts{font-weight:400;width:50%;float:left} #related .related-posts p{margin:0} ul#related-posts li{float:right;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px} *html ul.rp#related-posts li{margin:0 13px} ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #333;display:block;height:72px;position:relative;width:72px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000} ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 6px 0 0} ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.6} ul#related-posts li img{bottom:0;padding:0!important} ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)} #related .subscribe{width:43%;float:right;color:#bdbdbd;} #related .subscribe p.intro{font-weight:400} #related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-right:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn1v0bVF4yp8S5IFrB2KCaOFDfQ8LhXHMdFoBdtr-6va-3SWzAWURdK9pj1dfFN3bCx1bY9Fc1s-4EpZjJ9yvPK_q-6sk95JTQhkmBdanHDbXftfXf3c5__62qqN_czrVBvGBBzpgFm4/) 0 50% no-repeat;vertical-align:middle} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block} #inner{padding-top:40px;} #fixed {position:fixed;top:0;right:0;width:100%;height:40px;z-index:999;} #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}

 

6.      ثم البحث عن الكود التالي  <data:post.body/> قد تجده مكرر أكثر من مرة والغالب آن رقم 2 منه يكون المسؤل عن ظهور الإضافات في أخر الموضوع إذا تم وضعها بعده وقد يختلف الأمر في بعض القوالب الأخرى لذا عليك اخذ نسخه احتياطيه من القالب قبل التطبيق والتجربة... على كل حال بعد البحث عن الكود السابق ضع بعده مباشرة الكود التالي :

 <!-- Scripts Start --> <b:if cond='data:post.isFirstPost'> <!-- Facebook --> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/ar_AR/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Google +1 --> <script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <!-- Twitter --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </b:if> <!-- Scripts End --> <!-- Horizontal social buttons Start --> <div class='horizontal-social-buttons' style='padding:10px 0 10px;'> <!-- Twitter --> <div style='float:right;'> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <!-- Google +1 --> <div style='float:right;'> <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/> </div> <!-- Facebook Like+Send --> <div style='float:right;'> <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/> </div> </div> <div style='clear: both;'/> <!-- Horizontal social buttons End --> <b:if cond='data:blog.pageType == "item"'> <div class='clearfix' id='related'> <div class='related-posts'> <p>تدوينات مختاره من نفس القسم</p> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilr_D9Us3x8A6ccFSEH-09gM8d7GkAAZP3Iw9EmjYFHBC0ZKbk7RWPze_tmlZL2lfoBqfJ1bKrIyIfZn_Hin7jZVESup2hk7Jt9tqQfBmzZbkYqg_Q6WrkeqRHwmvvrNqwz8FbDDnbbtc/s1600/no+image.jpg"; var maxresults=6; </script> <script src='http://johnytemplate.googlecode.com/files/related.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> </div> <div class='subscribe'> <p class='intro'>ان اعجبتك تلك التدوينه وتود المزيد <a href='http://feeds.feedburner.com/JohnyTemplate' target='_blank' title='feedburner'> <b>اضغط هنا</b></a>, او يمكنك الاشتراك في القائمه البريديه لمدونتي للحصول على كل مايطرح فيها فور النشر..</p> <p class='feed'><a href='http://your-site.com/feeds/posts/default'>Subscribe via RSS Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=user-blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='user-blog'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='Enter your email....'/> <input id='botsubbutton' type='submit' value='اشترك'/><br/> <small>تأكد ان بيانات بريدك بأمان معنا.</small><br/> <a href='http://feeds.feedburner.com/blogspot/htbgh'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/htbgh?bg=f19c22&fg=444444&anim=1' style='border:0' width='88'/></a> </form> </div> </div> </b:if>

7.     قم بالبحث داخل الكود السابق عن user-blog واستبدلها بحسابك على موقع فيدبرنر ستجدها مكرره أكثر من مره

8.     وكذلك قم باستبدال كلمة your-site برابط مدونتك ثم قم بحفظ القالب . بالتوفيق للجميع .

هذا كل شيء بالنسبة للتطبيق الأول

________________________________________________________

ولمشاهدة المثال الثاني على الإضافة في إصدارها الثاني  فيمكنك مشاهدة الصورة التالية لترى الإضافة كما تظهر أسفل الموضوعات.

 إن أعجبتك الإضافة وتود تطبيقها على مدونتك .

اتبع المراحل التالية:

1.       سجيل دخول إلي لوحة تحكم مدونتك

2.      ثم الذهاب مباشرة إلي تحرير HTML ووضع علامة على خانة توسيع القالب

3.       ثم البحث عن الكود التالي  <data:post.body/> قد تجده مكرر أكثر من مره والغالب أن رقم 2 منه يكون هو المقصود, بعد البحث عن الكود السابق ضع بعده مباشرة الكود التالي :

<!-- Scripts Start --> <b:if cond='data:post.isFirstPost'> <!-- Facebook --> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "http://connect.facebook.net/ar_AR/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <!-- Google +1 --> <script type='text/javascript'> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <!-- Twitter --> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </b:if> <!-- Scripts End --> <!-- Horizontal social buttons Start --> <div class='horizontal-social-buttons' style='padding:10px 0 10px;'> <!-- Twitter --> <div style='float:right;'> <a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a> </div> <!-- Google +1 --> <div style='float:right;'> <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/> </div> <!-- Facebook Like+Send --> <div style='float:right;'> <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/> </div> </div> <div style='clear: both;'/> <!-- Horizontal social buttons End --> <b:if cond='data:blog.pageType == "item"'> <div class='clearfix' id='related'> <div class='related-posts'> <p>تدوينات مختاره من نفس القسم:</p> <ol> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=2"' type='text/javascript'/> </b:if></b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </ol> </div> <div class='subscribe'> <p class='intro'>ان اعجبتك تلك التدوينه وتود المزيد <a href='http://feeds.feedburner.com/user-blog' target='_blank' title='feedburner'> <b>اضغط هنا</b></a>, او يمكنك الاشتراك في القائمه البريديه لمدونتي للحصول على كل مايطرح فيها فور النشر.</p> <p class='feed'><a href='http://your-site.com/feeds/posts/default'>Subscribe via RSS Feed</a></p> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=user-blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='user-blog'/> <input name='loc' type='hidden' value='en_US'/> <input id='botsub' name='email' onblur='if (this.value == "") {this.value = "Enter your email";}' onfocus='if (this.value == "Enter your email") {this.value = "";}' type='text' value='اكتب بريدك الالكتروني هنا....'/> <input id='botsubbutton' type='submit' value='إشترك'/><br/> <small>تأكد ان بيانات بريدك بأمان معنا.</small> </form> </div> </div> </b:if>

بعد وضع الكود ابحث فيه عن كلمة  user-blog  ستجدها مكرره ثلاث مرات استبدل الثلاثة باسم حسابك على موقع فيد برنر .

ثم ابحث مجددا عن  http://your-site.com/feeds/posts/default  واستبدله برابط لخاصات مدونتك .

4.       بعد ذلك قم بالبحث داخل قالب مدونتك عن ]]></b:skin> وضع قبلها مباشرة الكود الموجود في الأسفل :

#related{background:#e4e4e4;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:inset #222 0 2px 8px;-moz-box-shadow:inset #222 0 2px 7px;width:auto;text-shadow:1px 0 0 #fff;margin:0 0 5px;padding:10px} #related .related-posts{font-weight:200;width:53%;float:left} #related .related-posts p{margin:0} #related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;margin:0} #related .related-posts ol{font-weight:200;margin:2px -20px 0 0} #related .subscribe{background:url(http://3.bp.blogspot.com/-Su4dLp9tZWI/TvnUmvgAqfI/AAAAAAAAA2U/7f4tn4C_8uM/s1600/icontexto-inside-rss.png) no-repeat bottom left;width:43%;float:right;color:#000} #related .subscribe p.intro{font-weight:200} #related .subscribe p.feed{margin-bottom:10px;font-weight:200;padding-right:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn1v0bVF4yp8S5IFrB2KCaOFDfQ8LhXHMdFoBdtr-6va-3SWzAWURdK9pj1dfFN3bCx1bY9Fc1s-4EpZjJ9yvPK_q-6sk95JTQhkmBdanHDbXftfXf3c5__62qqN_czrVBvGBBzpgFm4/) 0 50% no-repeat;vertical-align:middle} .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden} .clearfix{display:inline-block}

5.       وأخيرا قم بالبحث عن  </head>  وضع قبله مباشره ما بالأسفل

<script src='http://my-tqarob.googlecode.com/svn/trunk/related-maskolis.js' type='text/javascript'/>

6.       قم ألان بحفظ قالب مدونتك. للاستفسارات وطلبات تركيب الإضافة يرجا ترك تعليق من خلال بلوجر أو فيس بوك.