سلايد شو تلقائي للبلوجر بحسب التسمية

السلام عليكم ورحمة الله وبركاته

منذ فترة لم اشارك موضوع عن هندسة بلوجر واليوم سوف أشارك معكم سلايد شو تلقائي بحسب التسمية او التصنيف هذا السلايد شو هو نسخة متوفرة بعدة أشكال لكن هو قابل للتغيير في اي وقت, هذا السلايد خفيف ومميز ويمكنكم إضافته لقالب VUSION كما أضفته أنا :)

معاينة السلايد شو إضعط هنا

كيفية تركيب سلايد شو تلقائي على مدونتك؟

نذهب إلى لوحة تحكم المدونة  -->> القالب ثم أنقر على تحرير html
الآن نبحث عن الرمز ]]> ثم نضع الكود التالي فوقه مباشرةً:

/*--------------Slider-------------*/
#alwansd{
height: 276px;
margin: 0 auto;
padding: 18px;
background: #fbfbfb;
width: 1229px;
margin-right: -132px;
border-bottom: 2px solid #E6E6E6;
position: relative;
}
.alwanw{
position: relative;
height: 241px;
width: 78%;
margin: 0 auto;
}
.alwanw .contentdiv{
visibility: hidden;
opacity: 1;
position: absolute;
height: 240px;
}
.alwan-ps{
text-align: right;
float: left;
width: 490px;
height: 13px;
margin: 0 auto;
}
.alwan-ps .toc {
float: right;
font-size: 0;
width: 13px;
height: 13px;
background: #e74c3c;
margin-left: 8px;
border-radius: 60px;
}
.alwan-ps .selected {background: #95A5A6;}
.alwan-ps .prev ,.alwan-ps .next{
display:none;
}
.alwan-ps .next:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ZHbT7Otfgea2iNojPXFkKXGurnMY0R9XhcbnRX10fgFxRKipRKd4HQRWes8Mu2fmZiK6sN9LWl_0x3GQDmpyaVMqnjU83NkaCcfB2M1aLG-hs-35KF6-zTX656vJ6-F-TX3jK3Vb2XY/s1600/next-h.png);}
.alwanip{
width: 486px;
float: left !important;
padding: 0 37px 0 0;
margin: 0 auto;
}
.alwanip a{
color: #2c3e50;
font: 19px DroidKufi-Bold;
margin: 0 auto;
line-height: 37px;
}
.post-body img {
margin: -1px 0 0 8px;
padding: 3px;
border: 1px solid #dfdfdf;
border-radius: 3px;
}
.alwanip h6{margin: 0;}
.alwanip h6 a:hover {color:#95A5A6;}
.alwanip .alwand{
color:#fff;
}
.alwanip p{
margin: 0 auto;
color: #95A5A6;
font-family: hacen_liner;
}
.alwansf {
float: right !important;
margin:0 auto;
}
.alwansf a img {
width: 435px;
height: 275px;}
.alwansf a img:hover{
}
.alwansf a img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}

الخطوة الثانية نبحث عن الرمز  ثم نضع الكود التالي فوقه مباشرةً:

غير كلمة تقنية باسم التسمية التي تريد أن تظهر بالسلايد شو بما يناسبك
الرقم 6 هو لعدد المشاركات التي ترغب بأن تظهر بالسلايدر numposts1 = 6;


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

أو الرمز 

او من خلال التخطيط ثم إضافة أداة javascrpt/html
المهم أن تختار مكان مناسب للسلايد شو ثم لصق الكود التالي:

لكن على السلايد أن يكون موضوع في نفسك المكان كما شاهدته في المعاينة ليظهر بشكل جيد


الخطوة الأخيرة نبحث عن الرمز  ثم نضع الكود التالي فوقه مباشرةً:

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