إبحث في هذه المدونة

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

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

خمسة أشكال احترافية للمشاركات الشائعة بلوجر:

* الان قم بدخول لوحة تحكم مدونتك > المظهر > تحرير html.
* وقم بالبحث عن الوسم التالي.
</head>
عند ايجاده قم بوضع فوقه كود الشكل الذي يعجبك.

الشكل الاول للمشاركات الشائعة:

تغيير شكل المشاركات الشائعة في بلوجر
تغيير شكل المشاركات الشائعة في بلوجر
<style type='text/css'>
.PopularPosts ul{margin: 0;padding: 0;}
.PopularPosts ul li{list-style: none !important;padding: 0 !important;margin-bottom: 10px;}
.PopularPosts .item-thumbnail{height: 190px;margin: 0;overflow: hidden;width: 100%;}
.PopularPosts .item-title{position: relative;}
.PopularPosts img{height: 100%;width: 100%;object-fit: cover;}
.PopularPosts .item-title a{color:#FFFFFF;font: 15px &#39;Oswald&#39;, sans-serif;text-transform: uppercase;font-size: 20px;
padding: 10px;position: absolute;right: 0;left: 0px;margin: 0px auto;text-align: center;
text-decoration: none;top: 40px;width: 60%;height: 26px;overflow: hidden;z-index: 2;}
.PopularPosts .item-snippet{background:rgba(0, 0, 0, 0.35);border-top: 6px solid rgba(0, 0, 0, 0.1);border-bottom: 6px solid rgba(0, 0, 0, 0.1);
color: #FFFFFF;left: 0px;right: 0px;margin: 0px auto;padding: 65px 10px 10px;position: absolute;
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;text-align: center;top: 35px;width: 60%;z-index: 1;}
.PopularPosts .item-content{position: relative;}
</style>

الشكل الثاني للمشاركات الشائعة:

تغيير شكل المشاركات الشائعة في بلوجر
تغيير شكل المشاركات الشائعة في بلوجر
<style type='text/css'>
.PopularPosts ul{counter-reset: popularcount;margin: 0;padding: 0;}
.PopularPosts ul li{width: 100%;list-style: none !important;padding: 0 !important;margin-bottom: 20px;
position: relative;border: 0;}
.PopularPosts .item-thumbnail a{clip: auto;display: block;height: auto;height: 120px;}
.PopularPosts .item-thumbnail{width: 100%;position: relative;margin-bottom: 15px;}
.PopularPosts .item-thumbnail::before{background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-bottom: 29px solid #fff;border-left: 29px solid transparent;border-right: 29px solid ransparent;
bottom: 0px;content: &quot;&quot;;height: 0;width: 0px;left: 0px;right: 0px;margin-left: auto;
margin-right: auto;position: absolute;z-index: 3;}
.PopularPosts .item-thumbnail:after{color: #000;content: counter(popularcount, decimal);
counter-increment: popularcount;font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
list-style-type: none;position: absolute;bottom: 0;text-align: center;margin: 0px auto;
left: 0px;right: 0px;z-index: 4;}
.PopularPosts .item-thumbnail img{position: relative;width: 100%;
height: 120px;object-fit: cover;}
.PopularPosts .item-title{font: 15px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;text-align: center;margin: 0px auto;
padding-bottom: 10px;border-bottom: 1px solid #000;}
.PopularPosts .item-title a{color: #000;text-decoration: none;}
.PopularPosts .item-snippet{padding: 10px 15px;font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
text-align: center;}
</style>

الشكل الثالث للمشاركات الشائعة:

تغيير شكل المشاركات الشائعة في بلوجر
تغيير شكل المشاركات الشائعة في بلوجر
<style type='text/css'>
.PopularPosts ul{padding: 0;margin: 0;}
.PopularPosts .item-thumbnail a{clip: auto;display: block;height: auto;overflow: hidden;}
.PopularPosts .item-thumbnail{width: 130px;height: 130px;border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;position: relative;}
.PopularPosts .item-thumbnail img{position: relative;height: 100%;width: 100%;
object-fit: cover;}
.PopularPosts ul li{float: left;margin-bottom: 5px;max-height: 130px;
min-width: 250px;overflow: hidden;}
.PopularPosts ul li:first-child{background: #D9EDF7;}
.PopularPosts ul li:first-child + li{background: #F2DEDE;}
.PopularPosts ul li:first-child + li + li{background: #DFF0D8;}
.PopularPosts ul li:first-child + li + li + li{background: #FFEEBC;}
.PopularPosts ul li:first-child + li + li + li + li{background: #E0E0E0;}
.sidebar .PopularPosts .item-title{font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;padding: 10px 5px 10px;}
.PopularPosts .item-title a{color: #000;text-decoration: none;}
.PopularPosts .item-snippet{font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;}
.PopularPosts .widget-content ul li{padding: 0px 5px 0px 0px!important;}
</style>

الشكل الرابع للمشاركات الشائعة:

تغيير شكل المشاركات الشائعة في بلوجر
تغيير شكل المشاركات الشائعة في بلوجر
<style type='text/css'>
.PopularPosts ul{padding: 0;}
.PopularPosts ul li:first-child{width: 100%;max-height: 100%;opacity: 0.9;}
.PopularPosts ul li:nth-child(even){margin-right: 2%;}
.PopularPosts ul li{box-sizing: border-box;position: relative;padding: 0px !important;
width: 49%;max-height: 120px;opacity: 0.4;overflow:hidden;
float: left;margin-bottom: 2%;-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.PopularPosts ul li:hover{opacity: 1;}
.PopularPosts .item-thumbnail{margin: 0;width: 100%;}
.PopularPosts ul li img{box-sizing: border-box;width: 100%;height: 100%;
object-fit: cover;padding:0;}
.PopularPosts .item-content:hover .item-title a,
.sidebar .PopularPosts .item-thumbnail-only:hover .item-title a{visibility: visible;
opacity: 1;}
.PopularPosts .item-title a{color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;position: absolute;text-align: center;font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;right: 0;bottom: 0%;padding: 100px 10px 10px;opacity: 0;visibility: hidden;}
.PopularPosts .item-snippet{display: none;}
</style>

الشكل الخامس للمشاركات الشائعة:

تغيير شكل المشاركات الشائعة في بلوجر
تغيير شكل المشاركات الشائعة في بلوجر
<style type='text/css'>
.PopularPosts ul{counter-reset: popularcount;margin:0;padding: 0;}
.PopularPosts ul li{float: left;max-height: 130px;min-width: 250px;position: relative;}
.PopularPosts .item-thumbnail::after{color: rgba(255,255,255, 0.63);content: counter(popularcount, decimal);
counter-increment: popularcount;font: 70px &#39;Oswald&#39;, sans-serif;list-style-type: none;
position: absolute;left: 5px;top: -5px;z-index: 4;}
.PopularPosts .item-thumbnail::before{background: rgba(0, 0, 0, 0.3);bottom: 0px;
content: &quot;&quot;;height: 100px;width: 100px;left: 0px;right: 0px;
margin: 0px auto;position: absolute;z-index: 3;}
.PopularPosts .item-thumbnail a{clip: auto;display: block;height: auto;overflow: hidden;}
.PopularPosts .item-thumbnail{width: 100px;height: 100px;margin: 0px 10px 0px 0px !important;
position: relative;}
.PopularPosts .item-thumbnail:hover:before{display: none;}
.PopularPosts .item-thumbnail img{position: relative;padding-right: 0px !important;
height: 100%;width: 100%;object-fit: cover;}
.PopularPosts .item-title{font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;padding: 0px 5px 10px;}
.PopularPosts .item-title a{color: #000;text-decoration: none;}
.PopularPosts .item-snippet{font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;}
.PopularPosts .widget-content ul li{padding: 0px 5px 0px 0px !important;}
.PopularPosts .item-content{padding: 5px 0px;border-bottom: 1px dotted #dedede;
overflow: hidden;height: 100px;position: relative;}
</style>

بعدها احفظ المضهر وشاهد النتيجة، ملاحظة في حال كنت تستخدم ستايل لشكل الاخر للمشاركات الشائعة قم بحذفه حتى لا تواجه اي مشاكل.

ليست هناك تعليقات:

إرسال تعليق