كيفية إضافة زر موضوع عشوائي في Blogger

كيفية إضافة زر موضوع عشوائي في Bloggerهل ترغب في إعادة توجيه القراء إلى منشور يتغير في كل نقرة؟ 

وظيفة عشوائية يسمح للزوار لاستكشاف وقراءة  المواضيع القديمة الخاصة بك المحتويات التي كانت مخبأة .

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

يمكن استخدام زر الموضوع العشوائي هذا في أي مكان على مدونتك. يمكنك استخدامه في نهاية منشور المدونة الخاص بك أو في شريط جانبي أو في أي مكان أو في أي مكان. 

المزيد: كيفية إضافة عنصر واجهة مستخدم مميز تلقائي في Blogger

كيفية إضافة زر نشر عشوائي في Blogger


من السهل جدًا تحقيق إضافة زر نشر عشوائي في Blogger. عليك فقط اتباع الخطوات البسيطة والسهلة التالية وسيتم القيام بذلك في أي وقت من الأوقات:

المزيد: أفضل أزرار منبثقة لـ Blogger

الخطوة 1. قم بتسجيل الدخول إلى مدونة Blogger الخاصة بك وحدد Template / Theme وانقر على Edit HTML .

كيفية إضافة زر موضوع عشوائي في Blogger


الخطوة 2. ابحث في </ body> العلامة ولصق رمز أدناه فقط فوق العلامة </ body> .

  <script type="text/javascript">   
  /*<![CDATA[*/   
  function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'موضوع عشوائي'; document.getElementById('wk_random_post_button').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">   
  /*]]>*/   
  </script>   

خطوة 3. الآن مرة أخرى بحثا عن  ]]></b:skin> العلامة لصق رمزCSS  أدناه فقط فوق  العلامة </b:skin>.

 #wk_random_post_button a {  
 background-color:#3bb3e0;  
 padding:20px;  
 position:relative;  
 font-family: 'Open Sans', sans-serif;  
 font-size:14px;  
 text-decoration:none;  
 color:#fff;  
 border: solid 1px #186f8f;  
 background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  
 background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  
 background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  
 background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  
 background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);  
 background-image: -webkit-gradient(  
 linear,  
 left bottom,  
 left top,  
 color-stop(0, rgb(44,160,202)),  
 color-stop(1, rgb(62,184,229))  
 );  
 -webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;  
 -moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;  
 box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;  
 -webkit-border-radius: 5px;  
 -moz-border-radius: 5px;  
 -o-border-radius: 5px;  
 border-radius: 5px;  
 }  
 #wk_random_post_button a::before {  
 background-color:#ccd0d5;  
 content:"";  
 display:block;  
 position:absolute;  
 width:100%;  
 height:100%;  
 padding:8px;  
 left:-8px;  
 top:-8px;  
 z-index:-1;  
 -webkit-border-radius: 5px;  
 -moz-border-radius: 5px;  
 -o-border-radius: 5px;  
 border-radius: 5px;  
 -webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;  
 -moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;  
 -o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;  
 box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;  
 }  
 #wk_random_post_button a:active {  
 padding-bottom:9px;  
 padding-left:10px;  
 padding-right:10px;  
 padding-top:11px;  
 top:1px;  
 background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  
 background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  
 background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  
 background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  
 background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);  
 background-image: -webkit-gradient(  
 linear,  
 left bottom,  
 left top,  
 color-stop(0, rgb(62,184,229)),  
 color-stop(1, rgb(44,160,202))  
 );  
 }  

الخطوة 4. انقر فوق "  save"  لحفظ إعداداتك.

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

 <div id="wk_random_post_button">  

استنتاج حول كيفية إضافة زر نشر عشوائي في Blogger


المزيد: كيفية إنشاء خزانة للمحتوى الاجتماعي في منشورات Blogger ، آمل أن تكون قد قمت بنجاح بإضافة زر /موضوع عشوائي في مدونة Blogger الخاصة بك ، أو إذا واجهت أي صعوبة في إضافة الرموز فعليك ترك تعليق أدناه وسأعود إليك.


إذا كان هذا البرنامج التعليمي مفيدًا لك ، ففكر في مشاركته لتشجيعنا.

ليست هناك تعليقات:

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

Abstract photo created by freepik - www.freepik.com