أداة الشريط الإخباري المنزلق لمدونات بلوجر

من بين الأدوات الشائعة المستعملة في كثير من المواقع والمدونات، يعتبر الشريط الإخبار الأفقي المنزلق الذي يعرض آخر الأخبار، المشاركات والمواضيع من أهم الأدوات التي تساعد في زيادة عدد الزيارة وإثارة انتباه الزائر والسماح له بعدم تفويت اي شيء.

إضافة أداة الشريط الإخباري لمدونات بلوجر

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

1 - من منصة بلوجر الخاصة بمدونتكم تنقرون على التخطيط

2 - إضافة أداة من نوع HTML/Javascript

3 - داخل إطار الأداة قوموا بإضافة الكود التالي:

<script type='text/javascript'>
var w2bWidth="100";

var w2bScrollAmount="5";
var w2bScrollDelay="150";
var w2bDirection="right";
var w2btargetlink="yes";

var w2bnumPosts="5";
var w2bBulletchar =">>>";

var w2bimagebullet="yes";
var w2bimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgILmMAZxGxkIcFgqoXwLKuWvOkmu7_D8pwEP7GNs7cHctuqRvOWLbblkE3NQqjyxiiNqfD7T5g_ujmViQgBhZV5_Ytq1gM0MH-0ea60g1ZuJ1wgyHkFenfV9X4u6uAH62S_PLJBn-rGFI/h120/new.png";
var w2bfontsize="14";
var w2bbgcolor="transparent";
var w2blinkcolor="333333";
var w2blinkhovercolor="3366CC";
</script>

<script type='text/javascript'>
/*
* Advenced Recent Posts Scroller Version 3 For Blogger
* Widget By folfoly
* Url: http://www.folfoly.com/

* 
*/

function w2bAdvRecentPostsScrollerv3(json) {
var w2brecentposts;
var w2bpostlink;
var w2bobj;
var w2bmarqueehtml;
var w2bmarqueehtml2;
var byfolfoly;
var w2blinkgap;
var w2bposttargetlink;
var w2bBullet;
try {
w2bmarqueehtml = "\<marquee behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";

if (w2bScrollAmount) {
w2bmarqueehtml = w2bmarqueehtml + " scrollamount = \"" + w2bScrollAmount + "%\"";
} 
if (w2bWidth) {
w2bmarqueehtml = w2bmarqueehtml + " width = \"" + w2bWidth + "%\"";
} else {
w2bmarqueehtml = w2bmarqueehtml + " width = \"100%\"";
}
if (w2bScrollDelay) {
w2bmarqueehtml = w2bmarqueehtml + " scrolldelay = \"" + w2bScrollDelay + "\"";
}
if (w2bDirection) {
w2bmarqueehtml = w2bmarqueehtml + " direction = \"" + w2bDirection + "\"\>";
if (w2bDirection == "right" || w2bDirection == "left") {
w2blinkgap = "&nbsp;&nbsp;&nbsp;";
} else {
w2blinkgap = "\<br/\>";
}
}
if (w2btargetlink == "yes") {
w2bposttargetlink = " target= \"_blank\" ";
} else {
w2bposttargetlink = " ";
}
if (w2bimagebullet == "yes") {
w2bBullet = " \<img class=\"w2bbulletbimg\" src=\"" + w2bimgurl + "\" />";
} else {
w2bBullet = w2bBulletchar;
}
w2bmarqueehtml2 = "\</marquee\>"
w2brecentposts = "";
for (var w2brp = 0; w2brp < w2bnumPosts; w2brp++) {
var w2bobj = json.feed.entry[w2brp];
if (w2brp == json.feed.entry.length) break;
for (var w2bcc = 0; w2bcc < w2bobj.link.length; w2bcc++) {
if (w2bobj.link[w2bcc].rel == 'alternate') {
w2bpostlink = w2bobj.link[w2bcc].href;
break;
}
}
w2brecentposts = w2brecentposts + w2bBullet + " \<a " + w2bposttargetlink + " href=\"" + w2bpostlink + "\">" + w2bobj.title.$t + "\</a\>" + w2blinkgap;
}
byfolfoly = "\<a tareget =\"_blank\" href=\"http://www.folfoly.com\"\>\</a\>\<a tareget =\"_blank\" href=\"http://www.folfoly.com/\"\>\</a\>";

if (w2bDirection == "left") {
w2brecentposts = w2brecentposts + "&nbsp;&nbsp;&nbsp;" + byfolfoly;
} else if (w2bDirection == "left") {
w2brecentposts = byfolfoly + "&nbsp;&nbsp;&nbsp;" + w2brecentposts;
} else if (w2bDirection == "up") {
w2brecentposts = w2brecentposts + "\<br/\>" + byfolfoly;
} else {
w2brecentposts = byfolfoly + "\<br/\>" + w2brecentposts;
}
document.write("\<style style=\"text/css\"\>.folfoly-srp{font-size:" + w2bfontsize + "px;background:#" + w2bbgcolor + ";font-weight:bold; font-family: Tahoma; background-color: #B0ADAD; border: black 1px solid; border-radius: 2px; padding: 2px;}.folfoly-srp a{color:#" + w2blinkcolor + ";text-decoration:none;}.folfoly-srp a:hover{color:#" + w2blinkhovercolor + ";}img.w2bbulletbimg{vertical-align:middle;border:none;}\</style\>")
document.write("\<div class=\"folfoly-srp\"\>" + w2bmarqueehtml + w2brecentposts + w2bmarqueehtml2 + "\</div\>")
} catch (exception) {
alert(exception);
}
}
</script>

<script type='text/javascript' src=" http://xxxxxxx//feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10"></script>

4 - غيروا رابط xxxxxxx برابط مدونتكم بالأحمر.

5 - قوموا بحفظ التغييرات وشاهدوا الأداة الجميلة على مدونتكم.

هذا كل ما يتعاق بأداة الشريط الإخباري المنزلق لعرض آخر المشاركات لمدونات بلوجر. لا تنسوا مشاركة الموضوع على فيس بوك وتويتر
.

أجمل وأخف قائمة منسدلة CSS لمدونات بلوجر

قائمة منسدلة ب CSS لمدونات بلوجر

نقدم لكم درس جديد حول اضافة رائعة وجميلة من اضافات بلوجر، وهي قائمة أو قوائم منسدلة أفقية بCSS فقط مما يجعلها خفيفة ولا تؤثر بالسلب على سرعة مدونتكم. وبها قوائم عادية إضافة إلى قوائم منسدلة للمزيد من الخيارات الثانوية.

قائمة منسدلة بCSS لمدونات بلوجر

طريقة اضافة قائمة منسدلة لمدونة بلوجر

طريقة اضافة قائمة أو قوائم CSS منسدلة لمدونة بلوجر خاصتكم بسيطة وهي كالتالي:

1 - من منصة التحكم في مدونتكم قوموا بالنقر على التخطيط

2 - إضافة أداة من نوع HTML/JavaScript ومن الأفضل أن تكون في الأعلى تحت العنوان الرئيسي للمدونة
3 - داخل إطار الأداة تقومون بإضافة الكود التالي:

<style>

/* CSS3 Drop Down Menu By Folfoly.com */

#nav {

float: right;

font: bold 12px Arial, Helvetica, Sans-serif;

border-bottom: 1px solid black;

border-top: 1px solid black;

overflow: hidden;

width: 100%;

background: #3C4042;

background: -webkit-gradientundefined linear, right bottom, right top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) );

background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;

}

#nav ul {

margin: 0;

padding: 2px;

list-style: none;

border-radius: 3px

}

#nav ul li {

float: right;

}

#nav ul li a {

float: right;

color: #d4d4d4;

padding: 10px 20px;

text-decoration: none;

background: #3C4042;

background: -webkit-gradientundefined linear, right bottom, right top, color-stopundefined0.09, rgbundefined59,63,65)), color-stopundefined0.55, rgbundefined72,76,77)), color-stopundefined0.78, rgbundefined75,77,77)) );

background: -moz-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

background: -o-linear-gradientundefined center bottom, rgbundefined59,63,65) 9%, rgbundefined72,76,77) 55%, rgbundefined75,77,77) 78% );

box-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.1) inset, 0 0 5px rgbaundefined0, 0, 0, 0.1) inset;

border-right: 1px solid rgbaundefined255, 255, 255, 0.05);

border-right: 1px solid rgbaundefined0,0,0,0.2);

text-shadow: 0 -1px 1px rgbaundefined0, 0, 0, 0.6);

}

#nav ul li a:hover,

#nav ul li:hover > a {

color: #252525;

background: #3C4042;

background: -webkit-gradientundefined linear, right bottom, right top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) );

background: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

background: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

text-shadow: 0 1px 0 rgbaundefined255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover,

#nav ul li li:hover > a {

color: #2c2c2c;

background: #5C9ACD;

background: -webkit-gradientundefined linear, right bottom, right top, color-stopundefined0.17, rgbundefined61,111,177)), color-stopundefined0.51, rgbundefined80,136,199)), color-stopundefined1, rgbundefined92,154,205)) );

background: -moz-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% );

background: -o-linear-gradientundefined center bottom, rgbundefined61,111,177) 17%, rgbundefined80,136,199) 51%, rgbundefined92,154,205) 100% );

border-bottom: 1px solid rgbaundefined0,0,0,0.6);

border-top: 1px solid #7BAED9;

text-shadow: 0 1px rgbaundefined255, 255, 255, 0.3);

}

#nav li ul {

background: #3C4042;

background-image: -webkit-gradientundefined linear, right bottom, right top, color-stopundefined0.09, rgbundefined77,79,79)), color-stopundefined0.55, rgbundefined67,70,71)), color-stopundefined0.78, rgbundefined69,70,71)) );

background-image: -moz-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

background-image: -o-linear-gradientundefined center bottom, rgbundefined77,79,79) 9%, rgbundefined67,70,71) 55%, rgbundefined69,70,71) 78% );

right: -999em;

margin: 35px 0 0;

position: absolute;

width: 160px;

z-index: 9999;

box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;

-moz-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;

-webkit-box-shadow: 0 0 15px rgbaundefined0, 0, 0, 0.4) inset;

border: 1px solid rgbaundefined0, 0, 0, 0.5);

}

#nav li:hover ul {

right: auto;

}

#nav li ul a {

background: none;

border: 0 none;

margin-right: 0;

width: 120px;

box-shadow: none;

-moz-box-shadow: none;

-webkit-box-shadow: none;

border-bottom: 1px solid transparent;

border-top: 1px solid transparent;

}

.nav ul li ul {

position: absolute;

right: 0;

display: none;

visibility: hidden;

}

.nav ul li ul li {

display: list-item;

float: none;

}

.nav ul li ul li ul {

top: 0;

}

.nav ul li ul li a {

font: normal 13px Verdana;

width: 160px;

padding: 5px;

margin: 0;

border-top-width: 0;

border-bottom: 1px solid gray;

}

#nav li li ul {

margin: -1px 0 0 160px;

visibility: hidden;

}

#nav li li:hover ul {

visibility: visible;

}

/* CSS3 Drop Down Menu By Folfoly.com */

</style>

<div id="nav">

<ul>

<li><a href='/'>الرئيسية</a></li>

<li><a href="xxxxxxx">قائمة منسدلة 1</a>

<ul>

<li><a href="xxxxxxx"> خيار1</a></li>

<li><a href="xxxxxxx">خيار2</a></li>

<li><a href="xxxxxxx">خيار3</a></li>

</ul>

<li>

<li><a href="xxxxxxx">قائمة منسدلة 2</a>

<ul>

<li><a href="xxxxxxx"> خيار1</a></li>

<li><a href="xxxxxxx">خيار2</a></li>

<li><a href="xxxxxxx">خيار3</a></li>

</ul>

</li>

<li><a href="xxxxxxx">قائمة عادية1</a></li>

<li><a href="xxxxxxx">قائمة عادية 2</a></li>

</li></li></ul>

</div>

4- قوموا بتغيير كلمات الروابط بالأزرق ثم أضيفو روابطك في مكان xxxxxxx  بالأحمر
5 - إحفظوا التغييرات وهذا كل ما في الأمر

كما أشرت لذلك سابقا، فقوائم CSS منسدلة وبدون استعمال جافا تساعد في الزيادة من سرعة تحميل مدونتكم  وهو شيء مهم بالنسبة ل سيو وتسريع أرشفة محتوى مدونة بلوجر خاصتكم.
إذا أعجبتكم الأداة لا تنسوا مشاركتها مع أصدقائكم
.