الرئيسية / أضافات بلوجر / أداة المشاركات المميزة بشكل أنيق لمدونة بلوجر

أداة المشاركات المميزة بشكل أنيق لمدونة بلوجر

المؤلف -  Mustafa Prince



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

طريقة تركيب هذه الأضافة للبلوجر

1-توجة الى لوحة التحكم في بلوجر وأختر منها التخطيط
2-قم بأضافة أداة جديدة ومن ثم أضافة HTML/Java Script
3-قم بنسخ ولصق أحدى هذه الأشكال في  HTML/Java Script
4-قم بأستبدال رابط موقع bloggersinarabic.blogspot.com برابط الموقع الخاص بك وقم بعملية حفظ القالب.

الشكل الأول
<div id='bp_recent'></div>
<script style='text/javascript' src='https://rawgit.com/bungfrangki/recentposts/master/recentpost_thumb.js'></script>
<script style='text/javascript'>
var numberOfPosts = 12;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 90;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='//bloggersinarabic.blogspot.com/feeds/posts/summary?max-results=12&amp;orderby=published&amp;alt=json-in-script&amp;callback=bprecentpostswiththumbnails'></script>

الشكل الثاني

<style type='text/css'>
#random-posts{width:100%;background:none;}
#random-posts ul {margin: 0 auto!important;  padding: 0 !important;text-align:center  }
#random-posts ul li {background:none ;list-style-type: none;margin:0;padding:0 !important}
#random-posts li{float:left;list-style:none;border:none;width:90px;height:90px;overflow:hidden;margin-right:5px !important;margin-top:5px !important}
#random-posts img{float:left;width:100%;height:100%;max-width:none;max-height:none;min-width:0;min-height:0;;border:none;outline:0;position:static;transition:all .8s ease-out;}
#random-posts img:hover {-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3);}
</style>
    <div id="random-posts">
    <ul>
    <script type='text/javaScript'>
    var rdp_numposts=12;
    var rdp_snippet_length=0;
    var rdp_info='no';
    var rdp_comment='Comment';
    var rdp_disable='';
    var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.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 i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
    </script>
    <script type='text/javaScript'>
    function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp9weQan2INnZPvdPyE5Vex2oV76f2O2ThGtvqWh-E-_RnkR6_HsiJz5ys_T4vGnZ2Mf0bb9Ik_ro8F3aOramOKBv3sHzRvv1I5JxD6x84mbIRZ93rQ0qrNvMZl3t3idjB9ZYBsfbCvOKr/"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_posttitle+'"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'" title="'+rdp_posttitle+'" height="90" width="90"/></a>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}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>
    </div>

*يعتبر var rdp_numposts=12; هو لأظهار عدد المشاركات التي تريد عرضها في الموقع قم بتغيير الرقم في حال أرت ذلك,الى هما أنتهى الدرس وأتمنى أن يعجبك ولاتنسى التعليق والمشاركة لكي تدعمنا أكثر .

شارك هذا الموضوع

0 تعليق

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)