اندرويد

آخر الأخبار

اندرويد
اندرويد
جاري التحميل ...
اندرويد

اضافة شريط اخر الاخبار بتقنية news ticker للمدونة بلوجر

Add-new-news-blog-blogger-news-ticker
نقدم لكم شريط أخر المواضيع بشكل احترافي وحديث حيث أن الشريط يعمل بإطار news ticker وهو إطار جميل في عرض أخر الإخبار, تم استخدام هذه الإطار ودمجه مع سكربت بلوجر لجلب أخر مواضيع احد الأقسام أو اخر مواضيع المدونة.
هذه الإضافة جميله ومميزه حيث تعمل على جذب الانتباه مما تجعل الزائر يتصفح العديد من المواضيع ,أيضا إطار news ticker يعمل بشكل جميل حيث انه يعمل حركتها مثل كتابة شيء ما, يمكنك معاينة الشريط ومعرفة مميزاته بنفسك.


تركيب الشريط 

الشريط يعمل في أي مكان في المدونة لذالك لك الحرية في وضعه في أي مكان لكن نحن سنضع لك طريقة لوضعه في مكان مناسب
نبد في التركيب, نتوجه الى لوحة تحكم المدونة تم المظهر تم تحرير HTML

1- أولى يجب عليك تركيب الخط وخط الإيقونات في حال كانتا موجودتين في مدونتك فلا تقم بتركيبهما
           

2- نقوم بتركيب إطار عمل news-ticker و الجي كويري, عدتا رابط الجي كويري يكون مضمن في المدونة أد كان موجود في مدونتك لا تقم بتركيبه قم بتركيب فقط إطار news-ticker
  

3- تركيب تنسيق التصميم قم بل بحث عن ]]>  وضع الكود التالي فوقه
/*########Default Newsticker Styles#########*/

.ticker-content{direction: rtl;}
.ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}
.ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}
.ticker-title{padding-top:6px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}
.ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}
.ticker-content a{text-decoration:none;color:#1F527B}
.ticker-content a:hover{text-decoration:underline;color:#0D3059}
.ticker-swipe{position: absolute;padding-top:9px;top:0;background-color:#f8f0db;display:block;width:800px;height:23px;direction: rtl;}
.ticker-swipe span{margin-right:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}
.ticker-controls{padding:8px 0 0;list-style-type:none;float:right}
.ticker-controls li{padding:0;margin-left:5px;float:right;cursor:pointer;height:16px;width:16px;display:block}
.ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}
.ticker-controls li.jnt-play-pause.over{background-position:32px 32px}
.ticker-controls li.jnt-play-pause.down{background-position:32px 0}
.ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}
.ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}
.ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}
.ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}
.ticker-controls li.jnt-prev.over{background-position:0 32px}
.ticker-controls li.jnt-prev.down{background-position:0 0}
.ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}
.ticker-controls li.jnt-next.over{background-position:16px 32px}
.ticker-controls li.jnt-next.down{background-position:16px 0}
.js-hidden{display:none}
.no-js-news{padding:10px 0 0 45px;color:#F8F0DB}
.left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}
.left .ticker-controls{padding-left:6px}
.right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}
.right .ticker-controls{padding-right:6px}


/*########Blogger Newsticker by MBT#########*/
.ticker-wrapper.has-js{margin:0;padding:0;width:98%;height:42px;display:block;border-radius:0;background-color:#fff;border:1px solid #eee;font-size:12px}
.ticker{width:80%;height:42px;display:block;position:relative;overflow:hidden;background-color:#fff}
.ticker-title{background:#71db00;padding:6px;color:#FFF;font-size:16px;font-family:Droid Arabic Kufi;text-transform:uppercase;text-shadow:1px 1px 6px #666}
.ticker-title:after{right:100px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-right:0;margin-top:1px;border-right:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}
.ticker-content{background-color:#fff;margin-right:15px;color:#444;margin-top:1px}
.ticker-swipe{background-color:#fff;top:5px;right:100px!important}
.ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}
.ticker-controls{padding:0!important;margin:13px 0 0 10px !important;list-style-type:none;position:relative;right:0px;float: left !important;}
.ticker-controls li{padding:0;margin-left:5px;float:right;cursor:pointer;height:16px;width:16px;display:block}
.ticker-controls li a{border:0!important;padding:0!important}
.ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}
.ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
.ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
.ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}
.ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}
.ticker .iauthor:before,.ticker .icomments:before,.ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
.ticker .iauthorpic{width:16px!important;height:16px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
.ticker span{padding-right:5px;font-family:Droid Arabic Kufi;font-weight:400}
.ticker .icomments a{color:#71db00;font-size:11px}
.ticker .icomments a:hover{text-decoration:underline}
.ticker .icomments:before{content:'\f086';padding:0 3px 0 0;color:#777;position:relative;top:-1px}
.ticker .idate{font-size:11px;padding-right:7px}
.ticker .idate:before{content:'\f073';padding:0 5px;color:#777;position:relative;top:-1px}
.ticker .mbttitle{font-family:Droid Arabic Kufi;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none}
.ticker .mbttitle:hover{text-decoration:underline}
لتعديل الألوان ابحث عن #71db00 وقم بتغيره الى كود ألون المطلوب

4- كود وسكربت الشريط هد الكود في المكان الذي تضعه سيعمل لذالك لو لديك خلفية في التعامل مع البلوجر يمكنك تركيبة في المكان الذي تحب في المدونة, أد لم تكن لديك خلفية في البلوجر ابحث عن احد الاكواد التالية:



والصق الكود التالي تحته

           

قم بتغيير الرابط https://abduallah0.blogspot.com الى رابط مدونتك
وقم بتغيير التسمية الموجودة في ListLabel الى احد تسميات مدونتك لجلب منها المواضيع
في حالت كنت تريد عرض اخر مواضيع المدونة وليس اخر مواضيع قسم ابحث عن
/-/"+ListLabel+"
واحذفها
تم حفظ

تعديلات أخرى ابحث عن 

ListCount  : لتعديل عدد عناوين المواضيع
TitleCount  : لزيادة او أنقاص عدد حروف العنوان المعروض في الشريط
Speed : قم برفع او إنقاص (0.20) الخاص في سرعة الحركه
Controls : اجعل القيمة false  لحذف إيقونات إيقاف وتشغيل والتالي او السابق
titleText : لتغيير اسم الشريط
displayType: لتغيير نوع الحركة استبدلها من reveal  الى fade 

نكون هنا قد انتهينا من تركيب إضافة جميله في البلوجر
الكاتب : عبدالله منقوش

 : مولاي خالد

بقلم : مولاي خالد

مدون مغربي ناشئ يهتم بكل ما هو جديد في عالم التكنولوجيا و التقنية.

التعليقات



ندعوك للاشتراك في المدونة ليصلك الجديد دائما

إتصل بنا

زوار المدونة

جميع الحقوق محفوظة

الجليد

2016