تغير شكل المشاركات الشائعة بلوجر 2016

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

تغير شكل المشاركات الشائعة بلوجر 2016

معاينة

طريقة الاضافة

فوق هذا الوسم  <body/>  نضع الكود التالي

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var tbn = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + tbn)}); image.attr('width',tbn); image.attr('height',tbn); }); }); //]]></script>

فوق هذا الوسم  <b:skin/><[[  نضع الكود التالي

/***** Sidebar Popular Posts - jazairiweb.blogspot.com *****/
.sidebar .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } .sidebar .popular-posts ul li:first-child {} .sidebar .popular-posts ul li { font-family:tahoma; height: 130px; list-style: none !important; overflow: hidden; padding: 0 !important; position: relative; margin: 2px; border: 0; width: 48%; float: left; } .sidebar .PopularPosts .item-thumbnail {margin: 0; width: 100%;} .sidebar .PopularPosts ul li img { display: block; float: left; padding: 0; width: 100%; height: 130px; -webkit-transition-duration: 1.0s; /*Webkit: Animation duration*/ -moz-transition-duration: 1.0s; /*Mozilla Animation duration*/ -o-transition-duration: 1.0s; /*Opera Animation duration*/ transition:1.0s; } .sidebar .PopularPosts ul li img:hover { -webkit-transform:scale(1.06); /*Webkit: 0.5 times the original Image size*/ -moz-transform:scale(1.06); /*Mozilla 0.5 times the original Image size*/ -o-transform:scale(1.06); /*Opera 0.5 times the original Image size*/ transform:scale(1.06); overflow: hidden; } .sidebar .PopularPosts .item-title { bottom:0; left: 0; right: 0; padding-bottom: 0; position: absolute; z-index: 999; } .sidebar .PopularPosts .item-title a { background: rgba(32, 32, 32, 0.77); color: #FFFFFF; display: block; font-size: 12px; line-height: normal; padding: 5px 5px 8px 5px; text-transform: capitalize; transition: all .4s ease-in-out; } .sidebar .popular-posts ul li:hover .item-title a { color: rgba(255, 255, 255, 1); background: rgba(231, 76, 60, 0.88); text-decoration: none; } .sidebar .popular-posts ul li:before { background:#000; color: #fff; content: counter(popcount, decimal); counter-increment: popcount; float: left; font-size: 14px; line-height: 20px; list-style-type: none; padding: 0px 5px 1px 5px; position: absolute; top: 0; z-index: 4; border-width: 0px 1px 1px 0px; }

مصدر الاضافة مدونة جزائري ويب

ارجو ان تكون الاضافة اعجبتكم وشكرا لكم