تغيير شكل المشاركات الشائعة

تغيير شكل المشاركات الشائعة

 شكل المشاركات الشائعة هو اكثر ما يجذب الزوار الي مدونتك.

ستايلات المشاركات الشائعة

• شكلها طبعا.
• تأثيراتها.
• تناسقها الجميل ستغير نظرة نظرة الزوار الي قالبك بأكمله بمجرد تركيبها.

نصيحة : كل من لديه ستايل آخر فليحذفه لكي لا تتداخل الأكواد في ما بينها

الشكل الأول:

شرح طريقة التركيب

1. توجه إلى التخطيط ثم حرر أداة المشاركات الشائعة واختر من عرض ما يصل إلى "6"
2. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}.PopularPosts .item-title{background:rgba(0,0,0,0.5);position:absolute;display:block;clear:both;z-index:50;top:0;left:0;right:0;bottom:0;padding:15px;transition:all .4s;}.PopularPosts .item-title:hover{background:rgba(0,0,0,.2)}.PopularPosts .item-title a{color:rgba(255,255,255,0);font-weight:700;font-size:160%;text-shadow:0 0 5px rgba(0,0,0,0);font-family: 'Adobe Arabic','serif';}.PopularPosts .item-title:hover a,.PopularPosts .item-title a:hover{color:rgba(255,255,255,1);text-shadow:0 0 5px rgba(0,0,0,.3)}.PopularPosts .widget-content ul li img{translate(0,0) scale(1.0);transition:all .8s linear}.PopularPosts .widget-content ul li:hover img{transform:translate(0,-20px) scale(1.05);transition:all 3.6s linear;}.PopularPosts img{display:block;height:auto;width:100%;padding:0;backface-visibility:hidden;}.PopularPosts .item-snippet{display:none;}.PopularPosts ul li .item-content{position:relative;overflow:hidden;}.PopularPosts ul{padding:0;line-height:normal;counter-reset:count;}.PopularPosts .widget-content ul li{position:relative;padding:5px 0;overflow:hidden;max-height:100px;transition:all .4s;}.PopularPosts .widget-content ul li:before{color:#fff;counter-increment:count;content:counter(count);position:absolute;right:-15px;top:-5px;font:bold 80px/1 Sans-Serif;z-index:51;transition:all .4s;}.PopularPosts .widget-content ul li:hover:before{right:-55px;}.PopularPosts ul li:nth-child(1) .item-title {background:rgba(221,25,29,0.5);}.PopularPosts ul li:nth-child(2) .item-title {background:rgba(141,187,144,0.5);}.PopularPosts ul li:nth-child(3) .item-title {background:rgba(39,169,255,0.5);}.PopularPosts ul li:nth-child(4) .item-title {background:rgba(192,202,51,0.5);}.PopularPosts ul li:nth-child(5) .item-title {background:rgba(26,35,126,0.5);}.PopularPosts ul li:nth-child(6) .item-title {background:rgba(0,188,212,0.5);}.PopularPosts ul li:nth-child(1) .item-title:hover,.PopularPosts ul li:nth-child(2) .item-title:hover,.PopularPosts ul li:nth-child(3) .item-title:hover,.PopularPosts ul li:nth-child(4) .item-title:hover,.PopularPosts ul li:nth-child(5) .item-title:hover,.PopularPosts ul li:nth-child(6) .item-title:hover{background:rgba(0,0,0,0.2);}

3. إبحث عن </body> وضع الكود التالي فوقه

<script type='text/javascript'>// Popular Post Thumb$(document).ready(function() {$(&#39;.PopularPosts img&#39;).attr(&#39;src&#39;, function(i, src) {return src.replace( &#39;s72-c&#39;, &#39;s400&#39; );});});//<![CDATA[// Custom Popular Post$(".popular-posts ul li .item-snippet").each(function(){var t=$(this).text().substr(0,120),s=t.lastIndexOf(" ");s>10&&$(this).text(t.substr(0,s).replace(/[?,!\.-:;]*$/,"..."))});//]]></script>

الشكل الثاني 

شرح طريقة التركيب

1. توجه إلى التخطيط ثم حرر أداة المشاركات الشائعة واختر من عرض ما يصل إلى "6"
2. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

/* Popular Post keren warna-warni */ .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}.PopularPosts ul{list-style:none;font-size:15px;color:#fff;margin:0 !important;width:100% !important;font-weight:bold}.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}.PopularPosts ul li img:hover{border:4px solid rgba(0,0,0,0.5);transition:all 400ms ease-in-out}.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px;height:70px;}.PopularPosts .item-title{text-overflow: ellipsis;overflow:hidden;height:64px}.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-size:15px !important;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;font-size:35px !important;font-weight:700;color:rgba(0,0,0,0.2);top:40%;left:9px;} .PopularPosts ul li{margin:0 !important;padding:10px 5px 10px 40px} .PopularPosts ul li:nth-child(1){background-color:#5d93b2}.PopularPosts ul li:nth-child(2){background-color:#67b8b3}.PopularPosts ul li:nth-child(3){background-color:#67c27a}.PopularPosts ul li:nth-child(4){background-color:#ee9f7e}.PopularPosts ul li:nth-child(5){background-color:#ea6868}.PopularPosts ul li:nth-child(6){background-color:#b65757}.PopularPosts ul li:nth-child(7){background-color:#e9c462}.PopularPosts ul li:nth-child(8){background-color:#84d558}.PopularPosts ul li:nth-child(9){background-color:#4dd38c}.PopularPosts ul li:nth-child(10){background-color:#b44d7a} 

الشكل الثالث 

شرح طريقة التركيب

1. توجه إلى التخطيط ثم حرر أداة المشاركات الشائعة واختر من عرض ما يصل إلى "6"

2. داخل القالب ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

<div class="recentpoststyle">   

  <script type="text/javascript">   

  function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}   

  </script>   

  <script type="text/javascript">   

  var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>   

  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">   

  </script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://learnwebseo.com/2019/07/best-recent-post-widget-for-blogger.html

" rel="nofollow">Recent Posts Widget</a>   

  <noscript>Your browser does not support JavaScript!</noscript>   

  <style type="text/css">   

  .recentpoststyle {counter-reset: countposts;list-style-type: none;}   

  .recentpoststyle a {text-decoration: none;color: #49A8D1;}   

  .recentpoststyle a:hover {color: #000;}   

  .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}   

  .recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}   

  .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}   

  .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}   

  </style></div>