كنا في درس سابق شرحنا ' طريقة إضافة قائمة جانبية منبثقة على مدونات بلوجر بشكل إحترافية ' و كان هو الإصدار الاول للقائمة المبثقة لمدونات بلوجر التي تضفي شكل جميل على المدونة و تعطيك شعور لك و للزائر بان الموقع إحترافي و يحوي عديد الأشياء الرهيبة بداخله .
قبل كل شيء يمكنك معانية الإضافة على الموقع التالي.
قبل كل شيء يمكنك معانية الإضافة على الموقع التالي.
- المعاينة : من هنا
طريقة التركيب :
قم بتحري القالب ثم ctrl+f وابحث عن وسم ]]> و ضع الكود التالي قبله ( فوقه ) :
#sidebar2 {float: right;overflow: hidden;}
#sidebar2 h2 {color: #7986CB;position: relative;display: block;margin: 10px 0;font-size: 17px;padding: 8px 0;height: 50px;line-height: 25px;font-weight: 500;letter-spacing: 1px;text-align: right!important;border-bottom: 2px solid #ccc;}
#sidebar2 h2::before {content: "";position: absolute;height: 2px;width: 32px;background-color: #7986CB;bottom: -2px;left: initial!important;right: 0;}
#sidebar2 h2:after {content: "\f00c";display: block;background-color: #7986CB;font-family: FontAwesome;height: 28px;width: 32px;line-height: 28px;font-size: 14px;text-align: center;border-radius: 2px;float: right;margin-right: 0;margin-left: 10px;color: #FFF;}
#sidebar2 .widget {margin-bottom: 20px;background-color: #fff;padding: 10px 15px 10px;width: 315px;float: right;}
.center-copy {float: right;width: 100%;text-align: center;padding-bottom: 20px;font-size: 16px;font-weight: 500;}
.center-copy a {color: #7986CB;}
.t-menu2{margin:0;padding:0;width: 100%;padding-top: 15px;}
.t-menu2 a {color: #000!important;float: right;font-size: 16px!important;font-weight: 500;width: 100%;padding-right: 20px!important;height: 50px;line-height: 45px;}
.t-menu2 a i {margin-left: 10px;}
.t-menu2 a:hover {color: #7986cb!important;;}
.openNavw {
position: relative;
z-index: 9999;
height: 35px;
display: block;
float: left;
line-height: 37px;
font-size: 20px;
color: #fff;
background-color: #7B88CC;
margin-top: 0;
width: 35px;
padding: 0 8px;
margin-right: 3px;
}
.sidenav {height: 100%;width: 0;position: fixed;top: 0;right: 0;background-color: #FFF;overflow-x: hidden;transition: 0.5s;z-index: 99999999;padding-top: 65px;}
.sidenav .closebtn {position: absolute;top: 0;left: 0;font-size: 23px;}
.closebtn {position: relative;z-index: 9999;height: 65px;display: block;float: left;line-height: 55px;color: #fff;background-color: #7B88CC;width: 100%;padding: 0 20px 0 10px;}
.closebtn i {margin-left: 10px;}
#sidebar2 .widget-content ul li {color: #000;font-size: 18px;padding: 10px 0;font-weight: 500;}
#sidebar2 .widget-content ul li a:hover {color: #7986cb;}
Aucun commentaire:
Enregistrer un commentaire