-->

تغيير ستايل المشاركات الشائعة مع مجموعة من الاشكال الرائعة

  • السلام عليكم ورحمة الله وبركاته
اليوم احببت ان اقدم لكم مجموعة من الطرق البسيطة لتغير شكل المشاركات الشائعة لمدونات بلوجر والذي الكثير من المدونين يحتاجون الى تغيير شكل المشاركات ليبدو قالبهم اكثر جمالية, طبعأ الاشكال الذي سوف اقدمه لكم اشكال احترافية وبسيطة وانيقة وتصميم أنيق وسوف تلائم جميع المدونات انشاء الله مع امكانية اختيارالوان الذي يتناسب مع مدونتك ...
  • ♦ طريقة التركيب ♦
 1- ابحث عن الكود التالي .PopularPosts ul او PopularPosts وقم بحذفة جميعاً
2- ابحث عن الكود التالي ]]></b:skin> واضف قبله مباشرة كود شكل المشاركات الشائعة الذي تريد مع ازالة كلمة style> و </style ان وجدة في الكود لك الاختيار او بوضع الكود فوق </head> في كل الحالات الاضافة ستعمل
راسلني ان وجدت اي مشكلة اجيبك ان شاء الله . لكي لا اطيل اترككم مع الاشكال...
  • ♦ الشكل 1 ♦
/* code by anaswebinfo
------------------------------ */
.item-thumbnail {
    margin-bottom: 10px;    width: 100% !important;
    height: 200px !important;
}
.item-title a {
    color: #fff !important;
    font-weight: 600;
    font-size: 18px;
    font-family: flat-jooza;
}
.item-thumbnail a img {
    width: 100% !important;
    height: 100% !important;
transition: 0.2s;
transition: transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1);
}
.item-content .item-title {
    text-shadow: 0 1px 10px #0C0C0C;
    height: auto;
    bottom: 10px;
    text-align: center;
    width: 100%;
    padding: 5px;
    z-index: 1;
    right: 0px;
    position: absolute !important;
    margin-bottom: 0px;
    background: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,.8),rgba(0,0,0,.6),rgba(0,0,0,.4),rgba(0,0,0,.1));
    transition: .1s all ease;
    -webkit-animation: rotateOutDownRight 1s both ease;
    animation: rotateOutDownRight 1s both ease;
}
.item-content { position: relative; width: 100% !important;
    height: 100% !important;}
.item-snippet {
    top: 0px;
    text-align: center;
    transition: .3s all ease;
    background: rgba(0,0,0,.75);
    color: #fff;
    z-index: 222;
    display: none;
    font-size: 12px;
    width: 100%;
    line-height: 20px;
}
.item-content:hover .item-snippet {
    position: absolute;
    display: block;
}
  • في هذه الاضافة لك الاختيار ان تضع علامة على صورة مصغرة من الصورة فقط او مقتطف
  • ♦ الشكل 2 ♦
/*popular-posts by anaswebinfo
---------------------------------*/
.sidebar .PopularPosts ul { counter-reset: popularcount; margin: 0; padding: 0; } .sidebar .PopularPosts ul li { width: 100%; list-style: none !important; padding: 0 !important; margin-bottom: 20px; position: relative; border: 0; } .sidebar .PopularPosts .item-thumbnail { width: 100%; height: 100%; max-height: 190px; overflow: hidden; margin-bottom: 0px; } .sidebar .PopularPosts .item-thumbnail a { clip: auto; display: block; height: auto; max-height: 180px; } .sidebar .PopularPosts .item-thumbnail:after { content: counter(popularcount, decimal); counter-increment: popularcount; float: left; font-size: 14px; list-style-type: none; padding: 10px; position: absolute; top: 0; z-index: 4; background: #09f; color: #fff; } .sidebar .PopularPosts .item-title { position: relative; } .sidebar .PopularPosts .item-title a { background-color: rgba(0,0,0,0.5); overflow: hidden; text-shadow: 0 1px 10px #0C0C0C; height: auto; bottom: 0px; text-align: center; width: 100%; padding: 5px; position: absolute !important; color: #FFFFFF; } .sidebar .PopularPosts .item-snippet { padding: 10px 8px; font-size: 13px; text-align: center; background: #2d4562; color: #fff; line-height: 18px;transition: all .3s;}
.sidebar .PopularPosts .item-snippet:hover { background: #09f; color: #ffffff;}
.item-thumbnail a img { width: 100% !important; height: 180px !important; transition: 0.2s; transition: transform 400ms cubic-bezier(0.175,0.885,0.32,1),box-shadow 400ms cubic-bezier(0.175,0.885,0.32,1); }
  • في هذه الاضافة لك الاختيار ان تضع علامة على صورة مصغرة من الصورة فقط او مقتطف 
  • ♦ الشكل 3 ♦
/* Popular Post */
.popular-posts ul li:first-child .item-thumbnail{width:100%;background:#000;margin:0;height:200px;overflow:hidden}
.popular-posts ul li .item-snippet{display:none}
.popular-posts ul li:first-child .item-thumbnail img{height:200px}
.popular-posts ul li:first-child{margin-bottom:-10px}
.popular-posts ul li:first-child .item-thumbnail a{opacity:.5;padding:0;margin:0}
.popular-posts ul li:first-child .item-title a{position:absolute;width:inherit;bottom:13px;font-size:20px;z-index:999;padding:20px;line-height:25px;color:#fff}
.popular-posts ul li:first-child .item-title{position:relative;width:88%;display:inline-block}
.PopularPosts h2{padding-right:.4em;padding-left:0}
.popular-posts ul{padding:10px 0 0;margin:0}
.popular-posts ul li{list-style:none outside none!important;margin:0;margin-bottom:0;padding-top:0!important}
.PopularPosts .item-title a{font-size:13px;line-height:20px;display:block;letter-spacing:1px;margin-bottom:8px;color:#333;font-weight:700;font-family:neo;text-transform:uppercase}
.PopularPosts a{color:#666;font-size:.9rem;line-height:normal;text-decoration:none}
.PopularPosts a:hover{color:#222}
.PopularPosts img{padding-right:0;height:70px;object-fit:cover;width:100%}
.PopularPosts .item-thumbnail{width:120px;margin:0 10px 5px 0;float:left}
.popular-posts ul li:last-child{border:0;margin:0}
 لتعمل الاضافة بدون اخطاء ضع علامة على صورة مصغرة من الصورة فقط
 
  • ♦ الشكل 4 ♦
.PopularPosts ul li {border-bottom: 1px solid #ccc;position: relative;}
.PopularPosts .item-thumbnail {float: right; margin-left: 8px;width: 80px;height: 80px;}
.PopularPosts .item-thumbnail img {width: 100%;height: 100%;border-radius: 50%;padding: 3px;border: 1px solid #929292;transition: 0.3s;}
.PopularPosts .item-thumbnail img:hover {border-radius: 0;transition: 0.4s;}
.PopularPosts .item-title {margin-bottom: 3px;}
.PopularPosts .item-title a {color: #2E6A9C;font-size: 16px;}
.PopularPosts .item-snippet {height: 31px;overflow: hidden;font-size: 13px;font-family: Droid Arabic Naskh;}
.popular-posts li .item-thumbnail:before {position: absolute;margin-right: 28px;margin-top: 26px;z-index: 9999;    background: #2E6A9C;color: #fff;display: block;border-radius: 50%;font-size: 16px;    width: 25px;text-align: center;line-height: 26px;height: 25px;}
.popular-posts li:nth-child(1) .item-thumbnail:before {content: &#39;1&#39;;}
.popular-posts li:nth-child(2) .item-thumbnail:before {content: &#39;2&#39;;}
.popular-posts li:nth-child(3) .item-thumbnail:before {content: &#39;3&#39;;}
.popular-posts li:nth-child(4) .item-thumbnail:before {content: &#39;4&#39;;}
.popular-posts li:nth-child(5) .item-thumbnail:before {content: &#39;5&#39;;}
.popular-posts li:nth-child(6) .item-thumbnail:before {content: &#39;6&#39;;}
.popular-posts li:nth-child(7) .item-thumbnail:before {content: &#39;7&#39;;}
.popular-posts li:nth-child(8) .item-thumbnail:before {content: &#39;8&#39;;}
.popular-posts li:nth-child(9) .item-thumbnail:before {content: &#39;9&#39;;}
.popular-posts li:nth-child(10) .item-thumbnail:before {content: &#39;10&#39;;}
.PopularPosts ul li:before{font-family:fontawesome;content:&#39;\f005\f005&#39;;display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;left:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:&#39;\f005\f005\f005\f005\f005&#39;;}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:&#39;\f006\f005\f005\f005\f005&#39;;opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:&#39;\f006\f006\f005\f005\f005&#39;;opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:&#39;\f006\f006\f006\f005\f005&#39;;opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:&#39;\f006\f006\f006\f006\f005&#39;;opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts .item-snippet{display:none}
في هذه الاضافة لك الاختيار ان تضع علامة على صورة مصغرة من الصورة فقط او مقتطف
 
  • ♦ الشكل 5 ♦
/* 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);}
  • لتعمل الاضافة بدون اخطاء ضع علامة على صورة مصغرة من الصورة فقط

 
  • ♦ الشكل 6 ♦
.popular-posts { max-width: 400px; margin: 0 auto; } .popular-posts ul { padding: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; } .popular-posts ul li:nth-child(1) { background-color: #f44336; } .popular-posts ul li:nth-child(2) { background-color: #e91e63; } .popular-posts ul li:nth-child(3) { background-color: #9c27b0; } .popular-posts ul li:nth-child(4) { background-color: #673ab7; } .popular-posts ul li:nth-child(5) { background-color: #3f51b5; } .popular-posts ul li:nth-child(6) { background-color: #2196f3; } .popular-posts ul li:nth-child(7) { background-color: #03a9f4; } .popular-posts ul li:nth-child(8) { background-color: #00bcd4; } .popular-posts ul li:nth-child(9) { background-color: #009688; } .popular-posts ul li:nth-child(10) { background-color: #4caf50; } .popular-posts ul li:hover { background-color: #757575; } .popular-posts ul li { box-sizing: border-box; list-style-type: none; margin: 0; padding: 10px 10px 10px 72px !important; min-height: 68px; line-height: 1.5rem; height: inherit; position: relative; } .popular-posts ul li a { color: #FFF; text-decoration: none; } .popular-posts ul li img { width: 50px !important; height: 50px !important; position: absolute; padding: inherit; border-radius: 50%; overflow: hidden; left: 15px; border: 0; display: inline-block; vertical-align: middle; } .item-snippet { color: #1e163a; }
  • لتعمل الاضافة بدون اخطاء ضع علامة على صورة مصغرة من الصورة فقط
  • ♦ الشكل 7 ♦
.popular-posts { max-width: 400px; margin: 0 auto; } .popular-posts ul { padding: 0; border-radius: 2px; border: 0; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: relative; overflow: hidden; } .popular-posts ul li { box-sizing: border-box; list-style-type: none; margin: 0; padding: 10px 10px 10px 72px !important; min-height: 68px; line-height: 1.5rem; height: inherit; position: relative; } .popular-posts ul li:nth-child(1) { background-color: #00bcd4; } .popular-posts ul li:nth-child(2) { background-color: #009688; } .popular-posts ul li:nth-child(3) { background-color: #4caf50; } .popular-posts ul li:nth-child(4) { background-color: #8bc34a; } .popular-posts ul li:nth-child(5) { background-color: #cddc39; } .popular-posts ul li:nth-child(6) { background-color: #ffeb3b; } .popular-posts ul li:nth-child(7) { background-color: #ffc107; } .popular-posts ul li:nth-child(8) { background-color: #ff9800; } .popular-posts ul li:nth-child(9) { background-color: #ff5722; } .popular-posts ul li:nth-child(10) { background-color: #795548; } .popular-posts ul li:hover { background-color: #757575; } .popular-posts ul li a { color: #FFF; text-decoration: none; } .popular-posts ul li a:hover { color: #EEE; } .popular-posts ul li img { width: 50px; height: 50px; position: absolute; padding: inherit; border-radius: 50%; overflow: hidden; left: 15px; border: 0; display: inline-block; vertical-align: middle; } .item-snippet { color: #1e163a; }
  • لتعمل الاضافة بدون اخطاء ضع علامة على صورة مصغرة من الصورة فقط
  • ♦ الشكل 8 ♦
/*----Sidebar Popular Posts Widget Style by anaswebinfo----*/ .widget .widget-item-control a img { border: none; width: 20px !important; height: 20px !important; padding: none; background: none; -moz-box-shadow: none; -webkit-box-shadow: none; -ie-box-shadow: none; box-shadow: none; } .sidebar .PopularPosts .widget-content ul li { padding: 0px 0px 0px; height: 73px !important; overflow: hidden !important; list-style-type: none !important; list-style: none; } .sidebar .popular-posts ul { padding-left:0px !important; list-style-type: none !important; } .sidebar .popular-posts ul { counter-reset: popcount; margin: 0; padding: 0; } /*---- Change Counter Box Style Here ----*/ .sidebar .popular-posts ul li:before { background: rgba(247, 247, 247, 1); color: #000000; content: counter(popcount,decimal); counter-increment: popcount; float: right; font-size: 15px; line-height: 20px; list-style-type: none; padding: 0px 6px 1px 5px; border-radius: 0px 0px 7px 7px; position: relative; display: inline-block; box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7); font-weight: normal; top: 0px; right: 1px; z-index: 999999999999; border: solid #B5B5B5; border-width: 0px 1px 1px 1px; } .sidebar .PopularPosts .item-thumbnail { float: left; margin: 0px!important; } .sidebar .PopularPosts img { padding-right: 0px !important; width: 72px; height: 62px; overflow: hidden !important; margin-right: 0px; } .sidebar .PopularPosts .item-title a:hover { background: #09f; color: #fff; } /*-----Change Font Family - Background - Style - Size or Color Here-----*/ .sidebar .PopularPosts .item-title a { background: #fff; color: #6E6E6E; display: block; font-size: 13px; font-weight: normal; line-height: normal; padding: 10px 30px 0px 78px; transition: all .4s ease-in-out; height: 62px; text-decoration: none; transition: background .3s, color .3s; text-transform: capitalize; }
  • لتعمل الاضافة بدون اخطاء ضع علامة على صورة مصغرة من الصورة فقط
  • ♦ قريبا اشكال اخرى ساعمل عليها ان شاء الله ♦
  1. √ اتمنى من كل من مر على هذا الموضوع ان يترك كلمة شكر فى تعليق √
,

0تعليقات