تغيير شكل المشاركات الشائعة الى شكل انيق واحترافي 2016

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

1. فوق هذا الوسم <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>

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

/***** Sidebar Popular Posts - ha1pc.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; }

3

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

1. فوق هذا الوسم <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>

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

/***** Sidebar Popular Posts - ha1pc.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; }