اضافة المشاركات الشائعة بثلاثة اشكال مختلفة

اضافة المشاركات الشائعة بثلاث اشكال مختلفة - الجميع يعرف وظيفة المشاركات الشائعة في كل موقع على الويب أو مدونة على بلوجر

 فهي تقوم بعرض أخر المواضيع و الأكثر مُشاهدة مِن قِبل الزوار على أساس الوقت ويُمكن أن يكون كل اسبوع أو كُل شهر أو كُل الوقت و هي لا غنى

 عنها لذلك قررنا اليوم في مدون محترف مشاركتكم هذه الإضافة بثلاثة أشكال مُختلِفة حتى تتناسب مع أذواق الجميع و أتمنى أن تُعجبكم.

ننصحك بقراءة : اضافة المشاركات الشائعة على شكل شبكة
و الإطلاع على : اضافة المشاركات الشائعة الملونة في بلوجر

الان ننتقل إلى طريق تركيب الإضافة

1. ادخل إلى لوحة تحكم بلوجر
2. انتقل إلى تبويب قالب
3. انقر على تحرير HTML

ستايلات الإضافة

ابحث عن الوسم ]]></b:skin> و اضف احد الاكواد التالية فوقه

 الشكل الاول

/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{text-decoration:none;font-weight:400;font-size:14px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba(172,22,172,.83);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 0 0 10px;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-family: droid arabic kufi;font-size:12px;line-height:1.3em;font-weight:700}
/* Popular Post Style 1 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{font-family: droid arabic kufi;text-decoration:none;font-weight:400;font-size:12px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts li:first-child .item-snippet{font-family: droid arabic kufi;position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba(21, 6, 21, 0.35);padding:10px;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover:first-child .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{width:85px;height:72px;margin:0 0 0 10px;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:12px;line-height:1.3em;font-weight:700}

الشكل الثاني

/* Popular Post Style 2 */
.PopularPosts .widget-content ul{padding:0;margin-top:-10px}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .item-title {padding:0;}
.PopularPosts .item-title a{margin: 3px;font-family:droid arabic kufi;text-decoration:none;color:#000;}
.PopularPosts .item-title a:hover{color:#ff2d2d}
.PopularPosts .item-snippet{font-family:droid arabic kufi;font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts li{border-bottom:1px dashed #e3e3e3}
.PopularPosts li .item-thumbnail,.PopularPosts li .item-snippet{display:none}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{float:right;display:block;overflow:hidden;max-height:180px;margin-bottom:10px;}
.PopularPosts img{padding:0}
.PopularPosts .widget-content ul li{padding:10px 0;margin:0}

الشكل الثالث

/* Popular Post Style 3 */
#PopularPosts1 ul{padding:10px 0;margin-top:-15px;}
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{padding:0;margin-top:-7px}
.PopularPosts .item-title a{font-family: droid arabic kufi;text-decoration:none;font-weight:700;font-size:12px;color:#000;line-height:1.4em;transition:all ease-in-out .1s;}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .widget-content ul li:hover a,.PopularPosts .widget-content ul li a:hover{color:#48d;}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{list-style:none;margin:10px 0 0!important;padding:0 0 10px!important;line-height:1.3em!important;position:relative;border-bottom:1px solid #f1f1f1}
.PopularPosts li .item-snippet{position:absolute;top:0;opacity:0;visibility:hidden;width:85%;right:11px;color:#fff;background-color:rgba (23, 11, 23, 0.38);padding:10px;font-family: droid arabic kufi;font-size:90%;line-height:normal;transition:.3s}
.PopularPosts li:hover .item-snippet{top:20%;opacity:1;visibility:visible}
.PopularPosts li .item-thumbnail{margin:10px 0;overflow:hidden;float:right}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:100%;max-height:190px;overflow:hidden;margin-bottom:10px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}

أكواد الجافا سكريبت

الان بعد إضافة أحد اكواد الـ CSS من أجل أن تعمل الإضافات يجب علينا إضافة أحد أكواد الجافا سكريبت فوق الوسم </body>

الكود الخاص بالشكل الأول

<script type="text/javascript">
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

الكود الخاص بالشكل الثاني

<script type="text/javascript">
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,70)});
//]]>
</script>

الكود الخاص بالشكل الثالث

<script type="text/javascript">
//<![CDATA[
function resizeThumbarlina(e,t){for(var s=document.getElementById(e),r=s.getElementsByTagName("img"),c=0;c<r.length;c++)r[c].src=r[c].src.replace(/\/s72\-c/,"/s"+t),r[c].width=t,r[c].height=t}resizeThumbarlina("PopularPosts1",400);
//]]>
</script>

إعدادات الإضافة

الان الخطوة الأخيرة من أجل ان تعمل الإضافة بالشكل الصحيح
كل ستايل و له إعدادات خاصة من أجل ان يعمل بالطريقة الصحيحة و الصورة التالية توضح كلامي أضغط عليها.

يُمكن معاينة أحد الأشكال من خلال زر المعاينة التالي:

معاينة

لا تنسى الضغط على ازرار المشاركة من أجل دعمنا
اي سؤال أو استفسار لا تترد بوضعه في تعليق دُمتم بوِد