اضافة سلايد شو الحصريات لمدونات بلوجر

السلام عليكم زوار ومتتبعي مدونة بوزوم اليوم وصل متابعي المدونة 100 متابع 

بافضل الله وارادته كما اشكر جميع اعضاء المدونة جزيل الشكر وبهذه المناسبة 

سأقدم لكم سلايد شو الحصريات لمدونات بلوجر با شكل حصري 

معاينة الإضافة 

طريقة تركيب سلايد شو الحصريات

نتوجه الي لوحة التحكم بلوجر >> قالب >>تحرير html 

نبحث عن الوسم التالي 

]]></b:skin>

ونضع فوقه الكود التالي 

.blogbzm{width: 100%;
height: 200px;
margin:4px;
background-color: #007CDD;
border-radius: 5px;
padding: 10px;}.post111{opacity:1;animation:load1 2s;float:left;width:180px;height:180px;background-color:#fff;border-radius:5px;background-image:url(رابط صورة الموضوع);-webkit-animation:load1 7s;-moz-animation:load1 7s;-o-animation:load1 7s;transition:all 400ms ease-in-out 0}.post111:hover{opacity:.7}.post111title{opacity:1;width:180px;height:30px;background-color:rgba(39,39,39,.36);z-index:2;position:relative;top:150px;transition:1s}.post111title p{font-size:15px;margin-top:auto;padding:5px;text-align:center;}.post222{opacity:1;animation:load1 3s;float:left;width:180px;height:180px;background-color:#fff;border-radius:5px;margin-left:5px;background-image:url(رابط صورة الموضوع);-webkit-animation:load1 6s;-moz-animation:load1 6s;-o-animation:load1 6s;transition:all 400ms ease-in-out 0}.post222:hover{opacity:.7}.post222title{opacity:1;width:180px;height:30px;background-color:rgba(39,39,39,.36);z-index:2;position:relative;top:150px;transition:1s}.post222title p{font-size:15px;margin-top:auto;padding:5px;text-align:center;}.post333{opacity:1;animation:load1 4s;float:left;width:180px;height:180px;background-color:#fff;border-radius:5px;margin-left:5px;background-image:url(رابط صورة الموضوع);-webkit-animation:load1 5s;-moz-animation:load1 5s;-o-animation:load1 5s;transition:all 400ms ease-in-out 0}.post333:hover{opacity:.7}.post333title{opacity:1;width:180px;height:30px;background-color:rgba(39,39,39,.36);z-index:2;position:relative;top:150px;transition:1s}.post333title p{font-size:15px;margin-top:auto;padding:5px;text-align:center;}.post444{opacity:1;animation:load1 5s;float:left;width:180px;height:180px;background-color:#fff;border-radius:5px;margin-left:5px;background-image:url(رابط صورة الموضوع);-webkit-animation:load1 4s;-moz-animation:load1 4s;-o-animation:load1 4s;transition:all 400ms ease-in-out 0}.post444:hover{opacity:.7}.post444title{opacity:1;width:180px;height:30px;background-color:rgba(39,39,39,.36);z-index:2;position:relative;top:150px;transition:1s}.post444title p{font-size:12px;margin-top:auto;padding:5px;text-align:center;}.post555{opacity:1;animation:load1 6s;float:left;width:180px;height:180px;background-color:#fff;border-radius:5px;margin-left:5px;background-image:url(رابط صورة الموضوع);-webkit-animation:load1 3s;-moz-animation:load1 3s;-o-animation:load1 3s;transition:all 400ms ease-in-out 0}.post555:hover{opacity:.7}.post555title{opacity:1;width:180px;height:30px;background-color:rgba(39,39,39,.36);z-index:2;position:relative;top:150px;transition:1s}.post555title p{font-size:15px;margin-top:auto;padding:0px;text-align:center;}.title5{animation: load1 7s;
opacity: 1;
float: left;
width: 45px;
height: 180px;
background-color: #02B302;
border-radius: 5px;
margin-left: 5px;
transition: 1s;
-webkit-animation: load1 2s;
-moz-animation: load1 2s;
-o-animation: load1 2s;}.title5 a{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);color:#fff;position:relative;-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);font-size:20px;left:25px}

ثم نقوم بتغير ما بلون الأحمر 

الخطوة الثانية

نبحث عن الكود التالي  

</header>

  واضف اسفله الكود التالي

<!--AD code-->
<div class='blogbzm'>
<div class='post111'>
<div class='post111title'><a href='رابط الموضوع الأول' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='اضغط للتحميل'>عنوان الموضوع الأول</p></a>
</div>
</div>
<div class='post222'>
<div class='post222title'><a href='رابط الموضوع الثاني' style='text-decoration:none;color:#fff;'>
<p style='font-size:17px;margin-top:auto;padding:5px;' title='اضغط للتحميل'>عنوان الموضوع الثاني</p></a>
</div>
</div>
<div class='post333'>
<div class='post333title'><a href='رابط الموضوع الثالث' style='text-decoration:none;color:#fff;'>
<p style='font-size:16px;margin-top:auto;padding:5px;' title='اضغط للتحميل'>عنوان الموضوع الثالث</p></a>
</div>
</div>
<div class='post444'>
<div class='post444title'><a href='رابط الموضوع الرابع' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='اضغط للتحميل'>عنوان الموضوع الرابع dll</p></a>
</div>
</div>
<div class='post555'>
<div class='post555title'><a href='رابط الموضوع الخامس' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='اضغط للتحميل'>عنوان الموضوع الخامس</p></a>
</div>
</div>
<div class='title5'><h1 style='-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);color:#fff;position:relative;top:80px;-o-transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);' title='اضغط للمزيد'><a href='ضع هنا رابط مدونتك' style='color:#fff;'>حصريات</a></h1></div>
</div>
<!--AD code-->

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

 واضغط حفظ القالب 

√ فى انتظار تعليقاتكم المشجعة على تقديم المزيد √ 

من فضلك اضغظ لايك لمشاهدة لينك التحميل