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

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

6:38 ص
السلام عليكم متابعي مدونة سمور الكرام ... اليوم نقجم لكم اضافة نادرة جدا في عالم بلوجر وقل ماتجدها منتشرة وهي اضافة صندوق الحصريات الرائع وهو عبارة عن صندوق يكون تحت الناف بار يتم من خلاله عرض المواضيع المميزة في المدونة .

صورة من الاضافة


شرح طريقة التركيب

اولا : نتوجه الى لوحة التحكم > القالب تحرير القالب ونضغط على ( ctrl + f ) ثم نبحث عن الوسم ]]></b:skin> ونلصق فوقه الكود التالي :


.container5 {
width: 970px;
height: 178px;
background-color: #333;
padding: 10px;
margin: 0 auto;
margin-top: 12px;
margin-bottom: -8px;
}
.post111 {
opacity: 1;
animation: load1 2s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
background-image: url(http://im88.gulfup.com/snE0LI.jpg);
-webkit-animation: load1 7s;
-moz-animation: load1 7s;
-o-animation: load1 7s;
transition: all 400ms ease-in-out 0s;
}
.post111:hover {
opacity: 0.7;
}
.post111title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post111title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post222 {
opacity: 1;
animation: load1 3s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/9bBnBH.png);
-webkit-animation: load1 6s;
-moz-animation: load1 6s;
-o-animation: load1 6s;
transition: all 400ms ease-in-out 0s;
}
.post222:hover {
opacity: 0.7;
}
.post222title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post222title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post333 {
opacity: 1;
animation: load1 4s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/bQpgrs.png);
-webkit-animation: load1 5s;
-moz-animation: load1 5s;
-o-animation: load1 5s;
transition: all 400ms ease-in-out 0s;
}
.post333:hover {
opacity: 0.7;
}
.post333title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
border-radius: 5px;
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post333title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post444 {
opacity: 1;
animation: load1 5s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/vqohFc.png);
-webkit-animation: load1 4s;
-moz-animation: load1 4s;
-o-animation: load1 4s;
transition: all 400ms ease-in-out 0s;
}
.post444:hover {
opacity: 0.7;
}
.post444title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post444title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.post555 {
opacity: 1;
animation: load1 6s;
float: left;
width: 180px;
height: 180px;
background-color: #fff;
border-radius: 5px;
margin-left: 5px;
background-image: url(http://im59.gulfup.com/VcCrKD.png);
-webkit-animation: load1 3s;
-moz-animation: load1 3s;
-o-animation: load1 3s;
transition: all 400ms ease-in-out 0s;
}
.post555:hover {
opacity: 0.7;
}
.post555title {
opacity: 1;
width: 180px;
height: 30px;
background-color: rgba(39, 39, 39, 0.36);
z-index: 2;
position: relative;
top: 150px;
transition: 1s;
}
.post555title p{
font-size: 15px;
margin-top: auto;
padding: 5px;
text-align: center;
font-family: droidkufi-bold, tahoma;
}
.title5 {
animation: load1 7s;
opacity: 1;
float: left;
width: 45px;
height: 180px;
background-color: #5FCECE;
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: 30px;
left: 25px;
}
* ثانيا : نبحث عن الوسم <div class='main-outer'> ونلصق فوقه الكود التالي :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='container5'>
<div class='post111'>
<div class='post111title'><a href='http://www.proayoub.com/search/label/programation' 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='http://www.proayoub.com/search/label/seo' 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='http://www.proayoub.com/search/label/photoshop' 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='http://www.proayoub.com' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس مصورة'>دروس مصورة</p></a>
</div>
</div>
<div class='post555'>
<div class='post555title'><a href='http://www.proayoub.com/search/label/blogger' style='text-decoration:none;color:#fff;'>
<p style='font-size:18px;margin-top:auto;padding:5px;' title='دروس البلوجر'>دروس البلوجر</p></a>
</div>
</div>
<div class='title5'><h3 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='http://www.proayoub.com/search/label/%D8%AD%D8%B5%D8%B1%D9%8A%D8%A7%D8%AA' style='color:#fff;'>حصريات</a></h3></div>
</div>
  </b:if>
وبعدها نغير الروابط والعبارات بما نريد ثم نحفظ القالب ومبروك عليك الاضافة الجديدة 

واقل ماتشكرنا به هو الرد على الموضوع

ودمتم في حفظ الله ورعايته
Unknown

الكاتب :

مدون عربي من السودان احب مجال التدوين على منصة بلوجر ولي فيه شغف كبير اعمل في هذا المجال لاكثر من سنة احب ان اشارككم افكاري عبر مدونتي ارشر


الإبتساماتإخفاء

الاشتراك في: تعليقات الرسالة (Atom)