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

إضافة صناديق واردة لمدونات بلوجر إضافة جميلة لعرض مواضيع بشكل منسق ولطيف التصميم يحتوي فقط على أكواد سس لذلك لا داعي للقلق حول الثقل، تضم الإضافة أربعة صناديق بنفس الحجم مع بعض التعديلات تم إضافة ألوان متعددة تتناسق مع شكل الصورة، وكذلك حجم الصورة أياً كان فسيتناسب تلقائياً أترككم مع المعاينتان

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

1. توجه لتخطيط

2. أضف أداة HTML/JAVASCRIPT

3. ضع بها الكود التالي

<style>   
.befeature{height: 250px;overflow: hidden;width: 995px;padding: 0px 0px 0px 0px;  margin: 0 auto;}
.bebox:hover{margin-top: -180px;}
.bebox{float: right;height: 485px;margin: 0px 9px 0px 9px;margin-left: 0%;moz-transition: all .3s ease-in-out;ms-transition: all .3s ease-in-out;o-transition: all .3s ease-in-out;overflow: hidden;padding: 193px 0 0 0;transition: all .3s ease-in-out;webkit-transition: all .3s ease-in-out;width: 24%;}
.beupbox{height: 50px;margin: 0;overflow: hidden;padding: 5px 10px 0px 10px;width: 100%;}.beupbox h1{color: #fff;font-family: cursive,droid arabic kufi;font-size: 15px;font-weight: 400;margin: 0;padding: 0px 0px 0px 0px;width: 95%;text-shadow: 0 -1px 0 rgba(137, 137, 137, 0.25);}
.beupbox a{text-decoration: none;}
.bedownbox{height: 400px;margin: 0;padding: 5px 10px 0px 9px;width: 94%;}
.bedownbox p{color: #FDFDFD;font-family: cursive;font-size: 13px;font-weight: 400;  text-align: right;}
#bebox1{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox2{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox3{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
#bebox4{background: #F9CD2A url(هنا رابط الصورة) no-repeat;background-size: 100% 180px;}
    </style>
    <div class='befeature'>
    <div class='bebox' id='bebox1'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox2'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox3'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div>

    </div>
    <div class='bebox' id='bebox4'>

    <div class='beupbox'><h1><a href='#' target='_blank'><span style='color: #fafafa;'>هنا العنوان</span></a></h1></div>

    <div class='bedownbox'><p>هنا الوصف</p></div></div></div>

عن Unknown

هذا النص هو مثال لنص يمكن ان يستبدل في نفس المساحة ايضا يمكنك زيارة مدونة مدون محترف لمزيد من تحميل قوالب بلوجر.

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

عن Unknown

مواضيع ذات صلة