السلام عليكم ورحمة الله تعالى وبركاته
في اول درس بالمدونة بعد افتتاحها مؤخرا أردت ان اقدم لكم اضافة حصرية وجميلة للمدونات التقنية والاخبارية وحتى الرياضية وهذه الاضافة هي عبارة عن شريط أخبار احترافي حيث طلب مني بعض المتابعين على الفيسبوك بنشر هذه الاضافة بكونها تعطي جمالية للقالب أترككم مع المعاية وشرح التركيب.
في اول درس بالمدونة بعد افتتاحها مؤخرا أردت ان اقدم لكم اضافة حصرية وجميلة للمدونات التقنية والاخبارية وحتى الرياضية وهذه الاضافة هي عبارة عن شريط أخبار احترافي حيث طلب مني بعض المتابعين على الفيسبوك بنشر هذه الاضافة بكونها تعطي جمالية للقالب أترككم مع المعاية وشرح التركيب.
لمعاينة الاضافة
- اول خطوة هي أن تضع هذه الأكواد فوق الوسم </head>
<style>
.news-ticker .widget .HTML{display:block}
.news-ticker {height: 55px;background: #1b1b23;overflow: hidden;border-bottom: 1px solid #414141;}
.news-ticker .widget-title{float:right;margin-left:20px;line-height:52px;color:#fff;padding:0 15px;padding-left:0}
.news-ticker ul li{height:55px;padding:11px 0}
.ticker-items{float:left;line-height:52px;padding:0 15px}
.news-ticker .widget-content{float:right}
.ticker-items a {
color: #ffffff;
cursor: pointer;
background: #366299;
line-height: 33px;
height: 28px;
width: 30px;
display: block;
border-radius: 5px;
float: left;
text-align: -webkit-center;
margin-top: 14px;
margin-right: 2px;
font-size: 14px;
}.newsticker .news-tag{float:right;background:#366299;line-height:32px;color:#fff;padding:0 8px;border-radius:3px;font-size:14px;margin-left:10px}
.newsticker .news-tag:hover {background: #1b1b23;transition: 0.2s;}
.news-ticker .news-title {padding-top: 6px;padding-bottom: 8px;padding-left: 10px;padding-right: 10px;color: white;background: #414141;display: inline-block;border-radius: 4px;}
.news-ticker .news-title:hover{color:#366299}
display: none;
}
.newsticker .news-tag {
display: none;
}
.news-ticker .widget-title {
float: right;
margin-left: 20px;
line-height: 52px;
color: #fff;
padding: 0 15px;
padding-left: 0;
}
</style>
- ثاني خطوة هي ان تحمل هذا السكريبت وتضعه فوق الوسم </body>
لتحميل كود السكريبت
- وأخيرا يتبقى لك كود ليضهر هذا الشريط
- وأحسن مكان له هو فوق القائمة العلوية
- لذى سنضع الكود التالي أسفل <body
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='news-ticker'>
<b:section id='newsticker'>
<b:widget id='HTML211' locked='false' title='آخر الاخبار' type='HTML' version='1' visible='true'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<div class='widget-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div class='newsticker'>
<div class='widget-content'>
<data:content/>
</div>
</div>
<div class='ticker-items'>
<a id='prev-button'><i class='fa fa-step-backward'/></a>
<a id='next-button'><i class='fa fa-step-forward'/></a>
<a id='stop-button'><i class='fa fa-pause'/></a>
<a id='start-button'><i class='fa fa-play'/></a>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
- ثم اعمل حفظ للقالب
- وسنذهب للتخطيط وستظهر لك اداة جديدة باسم newsticker
- ثم نضع فيه هذا الكود
100/recent
الى هنا نكون قد وصلنا الى اخر الدرس
ولا تنسوا ان تشاركونا أرائكم لهذه الاضافة
الى اللقاء
merci bro !
ردحذفعقوا اخي .. زرنا مجددا
حذفاخي لقد وضعتها ولكن لا تضهر التدوينات
ردحذفعليك ان تذهب للتخطيط وستظهر لك اداة جديدة باسم newsticker ثم ضع فيها هذا الكود
حذف100/recent
اخي لقد وضعتها 100/recent ولكن لا تضهر التدوينات لماذا؟
ردحذفرابط مدونتك
حذفانا ايضا تفضل رابط المدونه http://www.elm5tas.ga/
حذفانت تستعمل قالب جزائري ويب وهذا القالب لا يعمل به السلايدرات التلقائية
حذفادا كيف اجعلها تعمل فيه
حذفاهلا اخي يبدو ان بعض الاكواد عندما اضعها في صناديق الاكواد تختفي بعض منها لذى من لم تعمل معه الاضافة ان يقوم بتحميل الشرح من خلال هذا الرابط http://up.top4top.net/downloadf-314t9eku1-rar.html
حذف