طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر من الوليد نت
بسم الله الرحمن الرحيم
مرحبا بكم في موقع الوليد نت ... و اليوم موضوعنا عن طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر How to Add a RSS Feed News Ticker in Blogger Sidebar ...
طريقة اضافة اخر المواضيع rss متحركة في العمود الجانبي بلوجر
How to Add a RSS Feed News Ticker in Blogger Sidebar
يهتم كثيرا من المدونين باضافة اخر المواضيع rss متحركة في العمود الجانبي للمدونة ... أحيانا، ضبط الشريط الإخباري في الشريط الجانبي للموقع يكون صعب و ذلك بسبب حجمها الكبير. لذلك، قمنا بتطويرشريط الأخبار لاخر المواضيع RSS في الشريط الجانبي الخاص بك و يتميز بأنه مرن، أنيق، بسيط و بدرجة عالية من الاحتراف. اليوم في هذه المقالة، سوف نشرح لكم كيفية إضافة RSS شريط الأخبار في الشريط الجانبي للمدونة.
لمعاينة الاضافة من فضلك اضغط هنا
طريقة الاضافة:
♥ اول شئ هو الدخول الي حسابك في بلوجر.
♥ بعد تسجيل الدخول الي حسابك قم باختيار المدونة التي تريد ان تضيف بها هذه الاضافة.
♥ الذهاب الي قالب >> تعديل HTML >> و الان ابحث عن الكود التالي
طريقة الاضافة:
♥ اول شئ هو الدخول الي حسابك في بلوجر.
♥ بعد تسجيل الدخول الي حسابك قم باختيار المدونة التي تريد ان تضيف بها هذه الاضافة.
♥ الذهاب الي قالب >> تعديل HTML >> و الان ابحث عن الكود التالي
]]>و فوقه مباشرة قم باضافة كود CSS التالي:
.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
.MBL-container-header h2{font-size:30px; text-align:center;}
#MBLnewsticker1 ul { padding: 0px; }
.MBLnewsticker {
width: 100%;
overflow: hidden;
height: 440px;
position: relative;
padding: 0 5px;
box-sizing: border-box;
margin: 0 auto;
text-align:center;
}
.MBLnewsticker>ul {
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
.MBLnewsticker>ul>li {
display: none;
width: 100%;
height: 100px;
background: #FFF;
position: absolute;
overflow: hidden
}
.MBLnewsticker>ul>li>.MBL-content {
position: absolute;
top: 0;
bottom: 30px;
left: 0;
right: 0;
box-sizing: border-box;
padding: 5%;
overflow: hidden;
}
.MBLnewsticker>ul>li>.MBL-content a {
text-decoration: none;
}
.MBLnewsticker>ul>li>.MBL-content a:hover {
text-decoration: underline;
}
.MBLnewsticker>ul>li>.MBL-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
padding: 5px;
border-top: solid 1px #DDD;
}
.MBLnewsticker>ul>li>.MBL-info a {
display: inline-block;
width: 20px;
height: 20px;
background: #0F0;
opacity: 0.2;
cursor: pointer;
}
.MBLnewsticker>ul>li>.MBL-info a:hover {
opacity: 1;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV849PapDNH6-kBMOt8me4OAWx8XMJptPCy8M6EIRTrbEBlzPQ3HhujOww0TkxF_do4bgwdeeTfIDzCcx_dYUzaeJ0musy7A9iUqO2sOiGiFOrUim2mTR54b6KlZ0fQLYqAmAIY82Rv2Y/s1600/buttons-black.png) 0 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV849PapDNH6-kBMOt8me4OAWx8XMJptPCy8M6EIRTrbEBlzPQ3HhujOww0TkxF_do4bgwdeeTfIDzCcx_dYUzaeJ0musy7A9iUqO2sOiGiFOrUim2mTR54b6KlZ0fQLYqAmAIY82Rv2Y/s1600/buttons-black.png) -20px 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV849PapDNH6-kBMOt8me4OAWx8XMJptPCy8M6EIRTrbEBlzPQ3HhujOww0TkxF_do4bgwdeeTfIDzCcx_dYUzaeJ0musy7A9iUqO2sOiGiFOrUim2mTR54b6KlZ0fQLYqAmAIY82Rv2Y/s1600/buttons-black.png) -40px 0 no-repeat;
float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV849PapDNH6-kBMOt8me4OAWx8XMJptPCy8M6EIRTrbEBlzPQ3HhujOww0TkxF_do4bgwdeeTfIDzCcx_dYUzaeJ0musy7A9iUqO2sOiGiFOrUim2mTR54b6KlZ0fQLYqAmAIY82Rv2Y/s1600/buttons-black.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GILIaVcqUMAHcSFQHgckIVMB3PXvBXbEmqDrb-za7hVdvlLDHGjdpOH5FBavBXJxlF7Zc5YqEWzZ4njwRh9_v5sGjBw54MQBFh6jrXFjcsHm9ZMQPoHVbkhdcKSpLYRthNcqcevYyj_T/s1600/buttons-white.png) 0 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GILIaVcqUMAHcSFQHgckIVMB3PXvBXbEmqDrb-za7hVdvlLDHGjdpOH5FBavBXJxlF7Zc5YqEWzZ4njwRh9_v5sGjBw54MQBFh6jrXFjcsHm9ZMQPoHVbkhdcKSpLYRthNcqcevYyj_T/s1600/buttons-white.png) -20px 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GILIaVcqUMAHcSFQHgckIVMB3PXvBXbEmqDrb-za7hVdvlLDHGjdpOH5FBavBXJxlF7Zc5YqEWzZ4njwRh9_v5sGjBw54MQBFh6jrXFjcsHm9ZMQPoHVbkhdcKSpLYRthNcqcevYyj_T/s1600/buttons-white.png) -40px 0 no-repeat;
float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9GILIaVcqUMAHcSFQHgckIVMB3PXvBXbEmqDrb-za7hVdvlLDHGjdpOH5FBavBXJxlF7Zc5YqEWzZ4njwRh9_v5sGjBw54MQBFh6jrXFjcsHm9ZMQPoHVbkhdcKSpLYRthNcqcevYyj_T/s1600/buttons-white.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
position: absolute;
left: 80px;
right: 30px;
text-align: center;
opacity: 0.4;
z-index: 0;
font-size: 13px;
cursor: default;
}
.MBLnewsticker>div {
width: 50px;
height: 30px;
cursor: pointer;
position: absolute;
opacity: 0.3;
}
.MBLnewsticker>div:hover {
opacity: 1;
}
.MBLnewsticker>div.MBL-top-arrow {
top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmon_oTGtcZpymUw1iBxt5C5J4Ps1kRv-CQ8AX9NnsJaPLf8eHkmQnf3drTzX4FHKF7SWYGX8Oc552Qs-BrqnzFLssTVJrLCjO4LVvtqv43lZQk7WwLHiS4oTjcQkJjIr5s_1vN_LWxgCO/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmon_oTGtcZpymUw1iBxt5C5J4Ps1kRv-CQ8AX9NnsJaPLf8eHkmQnf3drTzX4FHKF7SWYGX8Oc552Qs-BrqnzFLssTVJrLCjO4LVvtqv43lZQk7WwLHiS4oTjcQkJjIr5s_1vN_LWxgCO/s1600/arrows-black.png) bottom no-repeat;
}
.MBLnewsticker .MBL-top0 {
-ms-transform: scale(0.80);
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.85;
top: 0;
z-index: 1;
display: block;
}
.MBLnewsticker .MBL-top1 {
-ms-transform: scale(0.87);
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.9;
top: 20px;
z-index: 2;
display: block;
}
.MBLnewsticker .MBL-top2 {
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0.95;
top: 45px;
z-index: 3;
display: block;
}
.MBLnewsticker .MBL-active {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
top: 75px;
z-index: 10;
display: block;
}
.MBLnewsticker .MBL-bottom2 {
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0.95;
top: 105px;
z-index: 6;
display: block;
}
.MBLnewsticker .MBL-bottom1 {
-ms-transform: scale(0.87);
-webkit-transform: scale(0.90);
transform: scale(0.90);
opacity: 0.9;
top: 130px;
z-index: 5;
display: block;
}
.MBLnewsticker .MBL-bottom0 {
-ms-transform: scale(0.80);
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.85;
top: 150px;
z-index: 4;
display: block;
}
.MBL-easing2 {
transition: .25s linear;
-moz-transition: .25s linear;
-webkit-transition: .25s linear;
}
.MBL-easing li {
transition: .5s ease-out;
-moz-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
}
.MBL-radius li {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.MBL-radius2 li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.MBL-shadow li {
-webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
.MBL-shadow-big {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
}
♥ و الان مرة اخري ابحث عن هذا الكود
و فوقه مباشرة قم بوضع كود JavaScript التالي: ( هذا الكود هو الذي سيجعل الشريط يعمل لذلك تأكد من اضافته بشكل صحيح)
♥ و الان لاضافة الشريط في العمود الجانبي للمدونة ... اذهب الي تخطيط >> اضافة اداة >> من القائمة الجديدة اختار
HTML/JavaScriptثم قم باضافة الكود التالي:
التعديل علي شكل الاضافة كما يحلو لك:
قم بتغيير ما يلي بما يناسبك:
♥ قم بتغيير
بالرابط الخاص بك
http://feeds.feedburner.com/blogspot/gHkhn
♥ تغيير 100% لتعديل عرض الاضافة
♥ تغيير 5000 لتعديل سرعة تناوب الشرائح
♥ تغيير #FFF لتعديل لون خلفية info bar
♥ تغيير #766D6D لتعديل لون الرابط الذي يظهر في الشريط
♥ تغيير #f2f2f2 لتعديل لون خلفية الشريط الاخباري
♥ تغيير #DDD لتعديل لون border او الحواف الخاصة بالشريط
بعد التعديل و الانتهاء من كل شئ قم بحفظ الاداة عن طريق الضغط علي زر "حفظ"
و مبروك عليك الاضافة الجديدة ...
عرض التعابير