الخميس، 21 مارس 2019

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

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

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


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

  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>

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


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

هذه هي الإعدادات الخاصة بإضافة المشاركات الشائهة

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


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


إضافة تعليق

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *