تغيير شكل المشاركات الشائعة إلي شكل مدهش - إتقان ويب - دليلك التقني لعالم المعلوميات تغيير شكل المشاركات الشائعة إلي شكل مدهش - إتقان ويب - دليلك التقني لعالم المعلوميات

آخر المواضيع

breaking/الكل/9
قوالب عربية

الثلاثاء، 15 نوفمبر، 2016

4:38:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي

السلام عليكم سوف أشرح لكم كيفية تغيير شكل المشاركات الشائعة في مدونات بلوجر إلي شكل مدهش ورائع ، المشاركات الشائعة من أسياسات تصميم قوالب بلوجر حيث عن طريقها يعرف الزائر المواضيع اكثر مشاهدة سواء في الشهر أو في الأسبوع فعندما يري الزائر هذه المواضيع أمامه عند دخول المدونة سوف يعجب بها ومن ثم يقوم بالضغط عليها لمعرفة سبب مشاهدة الكثيرين لهذه المواضيع ، حتي تقوم بتغيير شكل المشاركات تابع الشرح الاتي وحتي تفهم اكثر تابع الشرح بالفيديو فهو مفيد لك وخاصة إذا كنت مبتدئي في بلوجر.
شرح التركيب :
  1. أولا من لوحة تحكم القالب ثم إلي قسم القالب وبالضغط علي تحرير HTML.
  2. بعد هذا قم بالبحث في القالب عن هذا الوسم ]]></b:skin>.
  3. وقم بالنسخ الأكواد الأتية ولصقها فوقه.
/* Popular Posts */
.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:120%;text-shadow:0 0 5px rgba(0,0,0,0)}
.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:10px 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);}
  1. بعد هذا قم بالنسخ كود الجافا سكربت وضعه قبل هذا الوسم </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. ثم قم بالحفظ النموذج.

إرسال تعليق

الربح