إضافة زر مشاهدة موضوع عشوائي لمدونات بلوجر

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

هيا إلى التطبيق العملي :

* قم بإضافة أداة HTML/JavaScript و ضع بها الكود التالي :

<style type="text/css"> 

@import url(http://fonts.googleapis.com/css?family=DroidArabicKufi:700); 

    #myLuckyPost a{ 

      -moz-border-radius:8px; 

      -moz-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px rgba(0,0,0,.7); 

      -webkit-border-radius:8px; 

      -webkit-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px rgba(0,0,0,.7); 

      background-color:#497ce5; 

      border-radius:8px; 

      box-shadow:0 9px 0 #2f6ae0, 0 9px 10px rgba(0,0,0,.7); 

      color:#fff; 

      display:block; 

      font-family:'Droid Arabic Kufi'; 

      font-size:15px; 

      font-weight:700; 

      height:40px; 

      margin:10px auto; 

      padding:10px 2px 2px; 

      position:relative; 

      text-align:center; 

      text-decoration:none; 

      width:200px; 

      -moz-transition:color 1s ease; 

      -ms-transition:color 1s ease; 

      -o-transition:color 1s ease; 

      transition:color 1s ease; 

    } 

    #myLuckyPost a:hover{ 

      color:#000; 

      -moz-transition:color 1s ease; 

      -ms-transition:color 1s ease; 

      -o-transition:color 1s ease; 

      transition:color 1s ease; 

    } 

    #myLuckyPost a:active{ 

      font-size:14px; 

      width:198px; 

      height:38px; 

      position:relative; 

      top:6px } 

</style> 

<div id="myLuckyPost"></div> 

<script type="text/javascript"> 

      function showLucky(e){var t=e.feed; 

      var n=t.entry||[]; 

      var r=t.entry[0]; 

      for(var i=0; 

      i<r.link.length; 

      ++i){if(r.link[i].rel=="alternate"){window.location=r.link[i].href}}}function fetchLuck(e){script=document.createElement("script"); 

      script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky"; 

      script.type="text/javascript"; 

      document.getElementsByTagName("head")[0].appendChild(script)}function feelingLucky(e){var t=e.feed; 

      var n=parseInt(t.openSearch$totalResults.$t,10); 

      var r=Math.floor(Math.random()*n); 

      r++; 

      a=document.createElement("a"); 

      a.href="#random"; 

      a.rel=r; 

      a.onclick=function(){fetchLuck(this.rel)}; 

      a.innerHTML="شاهد موضوعاً عشوائياً"; 

      document.getElementById("myLuckyPost").appendChild(a)} </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"> 

</script> 

شارك

Tweet

المزيد

مواضيع ذات صلة