موضوع جديد كما عهتمونا على مدونة عالم المدون وكل يوم جديد اليوم مع شريط اخر الأخبار المتحرك فى أصداره التانى على المدونة كما قد عرضا من قبل شريط اخر الأخبار مع مواقع التواصل بشكله ايضا المتحرك وكما ايضا عرضا شريط اخر الأخبار المنزلق على المدونة اليوم مع شريط لاخر الأخبار بشكل احترافى وهذا الشريط طلبه منى احد متابعى المدونة وها ان اقدم له اليوم ويمكنك مشاهد المعاينة من الرابط التالى .
معاينة الإضافة
معاينةشرح التركيب
1- قم بالبحث فى قالب مدونتك عن الوسم ثم قم بوضع الكود التالى فوقة (قبلة)
2- قم بالبحث عن الوسم ]]> ثم قم بوضع الكود التالى فوقة (قبلة)
.ticker {overflow: hidden;}
.ticker .title {float: right; width: 110px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background: #333333;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font:13px/1.5em tahoma;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 10px;display: inline-block;font-size: 13px;}
.ticker .title h6 {text-align: right; line-height: 38px; font-size: 16px; font-weight: bold; font-family: ge_ss_tvbold !important; color: #fff; border-left: 1px solid #464646;border-top: 1px solid #464646;width: 115px;}
.ticker .tickercontainer {width: 91.4%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {float: right;padding: 2px;height: 32px;margin-left: 15px;line-height: 20px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;font-family: ge_ss_tvbold !important;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(2) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(3) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(4) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(5) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(6) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(7) a.post-tag{background-color: #e5192c;}
.newsticker li:nth-child(8) a.post-tag{background-color: #e5192c;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {width: 95.5%; overflow: hidden;background-color: #333333;border-top: 1px solid #464646;margin-right: 30px;}
.jari { color: #fff; position: relative; right: 5px; }
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
.fa-globe:before {content: "\f1ea";}3- قم بالبحث عن الوسم ثم قم بوضع الكود التالى فوقة (قبلة)
4- الأن مع الكود الخاص باظهار الشريط يمكنك وضع فى المكان الذى تريد ومن الممكن ان يتم وضعه أسفل القائمة العلوية كما فى المعاينة .
أخبار حصرية
recent
وهذا كل شئ فى موضوع اليوم اذا واجهتك اى مشكلة فى تركيب الإضافة او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)