السلام عليكم ورحمة الله وبركاته,,موعدنا اليوم مع اضافه نادرا جدا ان رايناها في مدنه عربيه فقد اشتهرت بها فقط المدونات الاجنبيه وكذلك المواقع,,انها اضافة بار في اسفل المدونه دائم المشاهده كلما نزلت بمؤشر الفاره لاسل او طلعت به لفوق يظل ظاهرا للزائر ويكون بعرض المدونه متناسقا مع الوانها
اما فائدته فتتلخص في التالي انك يمكنك وضع اعلان جوجل ادسنس به وكذلك مواقع النشر مثل الفيس بوك وتويتر
انه حقا شئيا جميلا حين تنفرد انت بشئ في مدونتك لا تجده في مدونات الاخرين الا قليلاولكني اعتقد بكل تواضع انه سيصير منتشرا بعد مرور بعض الوقت على طرح موضوعي هذا,, لمشاهدة الاضافه يمكنك رؤيه ما باسفل الصوره المرفقه مع الموضوع وساضع كذلك موقع كمثال حى للتجربه الا وهو الموقع الرائد والمشهور في عرض المتصلين والزوار في مدونتك او موقعك وهو موقع histats.com ويمكنك زيارته عن طريق الضغط هنا ولكنه لم يقم باضافه اعلانات ادسنس بعكس اضافتنا تلك التي تفوق الموقع الذي وضعته احترافيه والان هل اعجبتك اضافة اليوم؟؟ بالتاكيد قد اعجبتك. اذن هيا بنا سويا لتطبيقها معا. قم بالذهاب الي لوحة تحكم مدونتك "ثم الي تصميم->ثم الي تحرير HTML" لا تنسى عزيزي المدون اخذ نسخه احتياطيه من قالب مدونتك للرجوع اليها عند حدوث خطا في التطبيق لا قدر الله ومن ثم قم بالضغط علي توسيع القالب
1. الان سنقوم بوضع كود ال css للاضافه في قالب مدونة بلوجر وذلك بالضغط "CTRL+F" ومن ثم البحث عن الكود الصغير التالي.
]]></b:skin>
2. ونضع قبله الكود الموجود بالاسفل مباشرة.
#mta_bar {
background-color:#dddddd;
border-top: 1px solid #ffffff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: hidden;
position: fixed;
height:20px;
}
#mta_bar img{border:none;}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left;
text-align:left;
padding-left:10px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #0000FF;
width:630px;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif;
float: right;
text-align: center;
font-weight: normal;
font-size: 10px;
letter-spacing: 0;
white-space: nowrap;
padding-right:10px;}
#mta_bar .right a {font-size: 10px;
color: #0000FF;
text-decoration: underline;}
#mta_bar .right a:hover {
font-size: 10px;
color: #0000FF;
text-decoration: none;}
#left_bar a {background: url() no-repeat; text-decoration: none;
color: #000;
padding:0px 0px 5px 30px;}
#left_bar a:hover {
text-decoration: underline;
color: #000; }
#search{border:1px solid #d1cdcd; height:18px; width:150px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{
margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;
background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:125px}
3. ثم نقوم مره اخرى بالبحث عن الكود التالي في قالب مدونة بلوجر .background-color:#dddddd;
border-top: 1px solid #ffffff;
margin: 0;
padding: 7px 0;
z-index: 100;
bottom:0px;
right:0px;
width: 100%;
overflow: hidden;
position: fixed;
height:20px;
}
#mta_bar img{border:none;}
* html #mta_bar{
/*IE6 hack*/
position: absolute;
width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#mta_bar .left { float: left;
text-align:left;
padding-left:10px;
font-family: Arial;
font-size: 13px;
font-weight: bold;
font-style: normal;
color: #0000FF;
width:630px;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif;
float: right;
text-align: center;
font-weight: normal;
font-size: 10px;
letter-spacing: 0;
white-space: nowrap;
padding-right:10px;}
#mta_bar .right a {font-size: 10px;
color: #0000FF;
text-decoration: underline;}
#mta_bar .right a:hover {
font-size: 10px;
color: #0000FF;
text-decoration: none;}
#left_bar a {background: url() no-repeat; text-decoration: none;
color: #000;
padding:0px 0px 5px 30px;}
#left_bar a:hover {
text-decoration: underline;
color: #000; }
#search{border:1px solid #d1cdcd; height:18px; width:150px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{
margin-top:0px;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:3px;
background-color:#FFFFFF;border:1px solid #000000;}
#topsearch #s{width:125px}
<div id='main-wrapper'>
4. قم بتحميل الملف التالي المرفوع برابط مباشر وفتحه فهو عباره عن ملف نصي وقم بنسخ الكود الموجود بداخله بالكامل - Scrolling Search Bar. ووضعه قبل الكود الذي بحثت عنه بالاعلى. وابحث عن تلك الكلمه في الكود pub وقم بتغيير الارقام التي تليها بارقام حسابك في جوجل ادسنس ثم قم بتغيير الرابط التالي داخل الكود الي رابط مدونتك www.newbloggingtipz.com
الان تستطيع حفظ قالب مدونتك فقد اكتمل تركيب الاضافه في المدونه ومبروك عليك
الان تستطيع حفظ قالب مدونتك فقد اكتمل تركيب الاضافه في المدونه ومبروك عليك
اي استفسارات يرجا ترك تعليق اسفل الموضوع..
أصدقاء(تطوير ويب)
0تعليقات Blogger
لا توجد تعليقات على موضوع "طريقة عمل سكرول بار باعلانات ادسنس وفيس بوك وتويتر لمدونة بلوجر"
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .
