كثيرا ما نصادف في مدونات ومواقع كثيرة شريطا ثابت لا يختفي حتى وإن
نزلنا أسفل الصفحة أو غيرنا الصفحة
صراحة هذه الإضافة رائعة جدا وتثير الإنتباه
حيث أن الزائر أثناء تصفحه لمدونتك يظل يرى الشريط
إذا الرسالة التي يتضمنها الشريط ستصل للزائر بشكل كبير ومتكرر
وتجعل الزائر يزور الرابط المتضمن في الرسالة سواء كان رابط لصفحة فيسبوك
أو تويتر أو جووجل بلس أو أي رابط آخر
هذه الإضافة حصرية لعرب بلس ولا يحق نقلها دون ذكر المصدر
احتراما وتقديرا لمجهود الكاتب الأصلي
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
مثال عن الإضافة:
ملاحظة:عرض الإضافة هو عرض المدونة كما في مدونتي
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
الشرح
نذهب إلى:
تصميم|تحرير HTML|توسيع القالب|Ctrl+F
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
نبحث عن الكود التالي:
]]></b:skin>قبله مباشرة نلصق هذا الكود:
#mbt-stickybar{
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEiPHitRdhOCDA8SqCsXOWo7QUDFdn-bfnCVd9QVrc4GEKNV-QiXo8f-mD42YaMQSxKq4Zl3hs-pFqPAdocMQ4zMNc5nX1b3mGnHjSzZjgUx7lYCwml2lvX_8qSU2ML-EocjQA-Ta5BE/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}
background:#0080ff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzEiPHitRdhOCDA8SqCsXOWo7QUDFdn-bfnCVd9QVrc4GEKNV-QiXo8f-mD42YaMQSxKq4Zl3hs-pFqPAdocMQ4zMNc5nX1b3mGnHjSzZjgUx7lYCwml2lvX_8qSU2ML-EocjQA-Ta5BE/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
margin-right: 6px;}
لتغيير لون خلفية الشريط يكفي تغيير هذا الكود #0080ff بكود اللون الذي تريد
وهنا أكواد الألوان لمساعدتك
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
نتابع
نبحث عن هذا الكود
<body>بعده مباشرة نضع التالي:
<div id='mbt-stickybar'>
<img src='رابط الصورة'/><a href='الرابط'>النص أو الرسالة </a>
</div>
رابط الصورة:إذا أردت أن تظهر صورة ما في الشريط بشرط أن تكون أبعادها صغيرة مثل 28*28<img src='رابط الصورة'/><a href='الرابط'>النص أو الرسالة </a>
</div>
الرابط:الرابط الذي تريد أن يتحول إليه الزائر عند النقر عليه
النص أو الرسالة:أكتب رسالتك أو أي شيء تريده
ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
تذكير ليس لك الحق في نقل الموضوع دون ذكر المصدر احتراما وتقديرا لمجهودات الكاتب الأصلي
تحياتي
شرح رائع منك اخوي
ReplyDeleteجزاك الله خيراً
http://3lhwa.blogspot.com
شكرا اخي على المعلومات المفيدة
ReplyDeletehttp://www.school2life.blogspot.com/
تسلم كتير ع المعلومات المفيده ونرجو المزيد
ReplyDeleteتسلم يا اخي ع الفايده www.faisallee.ahlablog.com
ReplyDelete