فى احدى الأضافات السابقة من قسم اضافات بلوجر وضعت لكم طريقة تجعل الصور تتحرك لخاصية المشاركات الشائعة من خلال هذا العنوان وهو : جعل صور المشاركات الشائعة تتحرك بشكل دائرى وايضا وضعت لكم طريقة اخرى تجعل المشاركات الشائعة مرقمة بشكل رائع من خلال هذا العنوان : كيفية ترقيم المشاركات الشائعة بتقنية css بشكل مميز Popular Posts . نترك الاضافات السابقة ونأتى الى طريقة جديدة وهى وضع المشاركات الشائعة بشكل راسى اكثر من رائع هذه الاضافة من الممكن اضافتها براس المدونة او بوسط المدونة او بتذيل المدونة فالاضافة خفيفة وتم تجربتها على مدوناتى التجريبية وان شاء الله هذه الاضافة تعجبكم .
صورة لشكل الاضافة
كما تلاحظون بالصورة السابقة شكل الاضافة وهى بشكل رائسى
كيفية تركيب الاضافة
قم بنسخ هذا الكود واذهب الى لوحة التحكم بالمدونة ثم الى التخطيط وقم بأضافة اداء جديدة واختار HTML/JAVA SCRIPT
الكود :
<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #random-posts li{width:130px;height:180px;margin-right:16px;float:right;list-style:none;position:relative} #random-posts li:last-child{margin-right:0} #random-posts li img{width:100px;height:100px} #random-posts li img a{border:#333 solid 2px}; #random-posts li .isinyako{position:absolute;width:250px;top:0px;z-index:2;background-color:#F0F0F0;padding:5px;font-size:90%;border-bottom:1px solid black;transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition:all 0.6s cubic-bezier(1,2,0,0) 0s;visibility:hidden;opacity:0} #random-posts li:last-child .isinyako{right:0} #random-posts li:hover .isinyako{top:-40px;opacity:1;visibility:visible} .isinyako span{font-size:50%;color:#B30B0B} .isinyako p{font-size:90%;} </style> <span class="glap"> <ul id="random-posts"> <script type="text/javaScript"> var rdp_numposts = 6; var rdp_snippet_length = 0; var rdp_info = 'no'; var rdp_comment = 'Comments'; var rdp_disable = 'Turn off comments'; var rdp_current = []; var rdp_total_posts = 0; var rdp_current = new Array(rdp_numposts); function totalposts(a){rdp_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"><\/script>');function getvalue(){for(var b=0;b<rdp_numposts;b++){var d=false;var c=get_random();for(var a=0;a<rdp_current.length;a++){if(rdp_current[a]==c){d=true;break}}if(d){b--}else{rdp_current[b]=c}}}function get_random(){var a=1+Math.round(Math.random()*(rdp_total_posts-1));return a}; </script> <script type="text/javaScript"> function random_posts(n){a=location.href;y=a.indexOf("?m=0");for(var f=0;f<rdp_numposts;f++){var l=n.feed.entry[f];var m=l.title.$t;if("content" in l){var o=l.content.$t}else{if("summary" in l){var o=l.summary.$t}else{var o=""}}o=o.replace(/<[^>]*>/g,"");if(o.length<rdp_snippet_length){var k=o}else{o=o.substring(0,rdp_snippet_length);var b=o.lastIndexOf(" ");k=o.substring(0,b)+"…"}for(var e=0;e<l.link.length;e++){if("thr$total" in l){var h=l.thr$total.$t+" "+rdp_comment}else{h=rdp_disable}if(l.link[e].rel=="alternate"){var d=l.link[e].href;if(y!=-1){d=d+"?m=0"}var g=l.published.$t;if("media$thumbnail" in l){var c=l.media$thumbnail.url}else{c="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnG1qIQnU5xrOX_yPha83qYCwF91mmI_UafjYuMntkjR109kLb5DLy5l7MzCl0SW9_GSz4sK789NoCszVAcBgbj5JDu5laJISKNIb02WYrAfRIdvdw61o4bCFodlEyGWNN6QGRUlH5v7c/s1600/no_image.jpg"}}}document.write("<li>");document.write('<a href="'+d+'" rel="nofollow"><img alt="'+m+'" src="'+c+'"/></a>');document.write('<div class="isinyako"><h5>'+m+"</h5>");if(rdp_info=="yes"){document.write("<span>"+g.substring(8,10)+"/"+g.substring(5,7)+"/"+g.substring(0,4)+" - "+h+"</span>")}document.write("<p>"+k+"</p></div>");document.write('<div style="clear:both"></div></li>')}}getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"><\/script>')}; </script> </ul></span> <script type='text/javascript'> //<![CDATA[ function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("random-posts",120); //]]></script> </b:if>
بالاخير اضغط على حفظ
الأن اتجهة الى الصفحة الرئيسية لتشاهد النتيجة
ارجو بأن هذه الاضافة اعجبتكم وانتظرونى بأضافة جديدة قادمة .