شريط اخباري لمدونات البلوجر
السلام عليكم ، شريط اخباري أو شريط اخر الاخبار لمدونات البلوجر اضافة احترافية للمدونات خصوصا المدونات الأخبارية او التقنية بحيث يمكن للزائر الحصول على اخر الاخبار من ذلك الشريط التي يوجد في اعلى المدونة او أسفلها كل و ما يحب ، الأهم أن الاضافة احترافية و لا بد منها خصوصا لمن يتوفر على عديد المواضيع أو المدونات الأكثر تحديثا للمقالات .
يمكنك اضافة الشريط الاخباري بالشكل الذي تريده و الموافق للمدونتك على البلوجر ، و هو أيضا متوافق مع عديد الأجهزة منها اللوحية اكترونية و الهواتف الذكية و ذلك لحل عدة مشالك قد تواجهك في المستقبل و نظرا للذقة في تصميم و انشاء الشريط .
طريقة اضافة شريط اخر الاخبار الإحترافي لمدونات البلوجر
1. نتوجه الى مدونة البلوجر
2. نختار قالب من القائمة
3. نضغط على تحرير HTML
4. نبحث عن الكود الثالي
</head>
5. نضيف الكود الثالي من فوق الكود السابق
<script src='https://hukmat.googlecode.com/svn/trunk/breakingnews.js' type='text/javascript'/>
<style>
/*--------------News-------------*/
/* Powered By http://hukmat.blogspot.com ------------*/
.barf{
background-color: #c50001;
border-top: solid 1px #ba0001;
-moz-box-shadow: -5px 0px 4px 0 #282828;
-webkit-box-shadow: -5px 0px 4px 0 #282828;
box-shadow: -5px 0px 4px 0 #282828;
position: fixed;
width: 100%;
bottom: 0;
right: 0;
clear: both;
z-index: 99999;
paddin1g: 5px 0;
}
.Hukmatnews{
padding: 8px 10px 7px;
font: 21px 'Lateef', serif !important;
color: #fff;
background: none !important;
width: 90.2%;
float: left;
margin-top: -5px;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-o-transition: all 0s linear;
transition: all 0s linear;
list-style:none;
}
.Hukmatnews:hover{
color: #fff;
}
.n-post{
height: 34px;
width: 100%;
float: right;
}
.tnp{
direction:rtl;
background-image: url(http://im44.gulfup.com/hOfYaI.png);
background-repeat: no-repeat;
background-position: 0 2px;
width: 103px;
float: right;
height: 30px;
}
@media screen and (max-width: 1024px) {
/* CSS FOR TABLETS ------------*/
.Hukmatnews {font-size: 19px !important;width: 87.2%;}
}
@media screen and (max-width : 966px) {
.Hukmatnews {font-size: 19px !important;width: 82.2%;}
}
@media screen and (max-width : 800px) {
.Hukmatnews {font-size: 19px !important;width: 77.2%;}
}
@media screen and (max-width: 768px){
/* CSS FOR SMALL TABLETS ------------*/
.Hukmatnews {font-size: 19px !important;width: 74.2%;}
}
@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
.Hukmatnews {font-size: 19px !important;width: 70.2%;}
}
</style>
6. نبحث مرة اخرى عن الكود الثالي
<body>
اذا لم تجده فبحث عن الكود
<body
7. نضيف الكود الثالي أسفل منه "أسفل الكود السابق"
<div class='barf'>
<div class='n-post'>
<a class='tnp'/>
<script type='text/javascript'>
var w2bWidth="100";
var w2bScrollAmount="-50";
var w2bScrollDelay="100";
var w2bDirection="right";
var w2btargetlink="yes";
var w2bnumPosts="20";
var w2bBulletchar ="<<<";
var w2bimagebullet="no";
var w2bimgurl="http://im77.gulfup.com/3eRnbX.png";
var w2bfontsize="14";
var w2bbgcolor="FFFFFF";
var w2blinkcolor="fff";
var w2blinkhovercolor="fff";
</script>
<script src='http://hukmat.blogspot.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=40' type='text/javascript'>
</script>
</div>
</div>
8. نقوم بالتعديلات المناسبة على الشريط من حيث الخلفية ، رابط المدونة ،...
الاعدادات الاداة
لتغيير لون الشريط غير : #c50001
لتغيير رابط المدونة غير : Http://hukmat.blogspot.com
لتغيير اضافة ما بين المواضيع غير : >>>
لوضع صورة بين عرض المواضيع عير No الى Yes و ضع رابط صورة مكان im77.gulfup.com...
لتغيير أخبار التقنية غير : http://im44.gulfup.com/hOfYaI.png
لتغغير مكان الشريط غير Button الى Top
