اضافة اكواد Schema.org سكيما لقوالب بلوجر لتقوية السيو

اضافة زر الصعود و الهبوط في المدونة

ما هي أزرار الانتقال للأعلى والأسفل؟ زري الصعور و الهبوط هما زران يعملان في كلا الاتجاهين للقفز لأعلى ولأسفل بسهولة وبسرعة ، بدلا من تحريك بالماوس. هذه إحدى الطرق لتشجيع المستخدمين على تصفح المزيد من المحتوى الآخر بسهولة.

لدا زري الصعود والهبوذ دورا مهما للغاية بالنسبة إلى موقع يحتوي على صفحات طويلة. بالنسبة إلى المواقع التي تحتوي على الكثير من المعلومات على صفحاتها ، فإنها ستجعل المحتوى الآخر يمر دون أن يلاحظه أحد من خلال التمرير إلى أسفل الصفحة.

حسنا ، لنبداء في التثبيت ، يرجى اتباع الخطوات اسفله:

كيفية اضافة زر الصعود وزر الهبوط لمدونة بلوجر في المدونة

• الخطوة الأولى ، افتح Blogger > انقر على اعدادات القالب > انقر على تعديل HTML.

في هده الاضافة نستخدم ايقونة FontAwesome ، إذا لم تتم إضافته لقالبك بعد أضف الكود أدناه قبل </head>   في محرر القوالب.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

الان بعد إضافة FontAwesome ، يرجى إضافة الرمز التالي قبل  </head> 


الإصدار 1

<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>

الإصدار 2 أبسط

<style type='text/css'>

/* كود ازرار الصعود و الهبوط v2 */

#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}

#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}

#scrollToTop a:hover{color:rgba(0,0,0,0.5)}

#top{position:absolute;top:0}

</style>

• ثم أضف الكودين أدناه من قبل </body>

<ul id='scrollToTop'>

  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>

  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>

</ul>

<div id='top'/>

<div id='bottom'/>

<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});

$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});

//]]>

</script>

• احفظ القالب وشاهد النتائج على مدونتك.