طريقة اضافة شريط ترحيبي الى البلوجر هي طريقة جميلة جدا ولقد أظهرت على جودة وفعالية كبيرة في دورها في حين يمكنك استعماله على سبيل المثال بالترحيب بزوار مدونتك او استعمالها كالاشعار الخ , ولقد تلقيت طلبات كثيرة من أجل إضافة هده الاداة الجميلة ,و الان اقول لكم انه يمكنك زيادة اتقانك مجال تطوير مدونتك والطريقة سهلة جدا فقط اتبع الخطوات اسفله .
- ادهب الى لوحة التحكم ثم
تحرير "HTML" - ابحث عن كلمة
<b:skin/> والصق الاكواد التالية فوقها:
/* CSS welcome Bar */#welcomeha1pc_bar{width:auto;height:auto;display:block;text-align:center;line-height:1.6em;font-size: 14px;padding:8px 20px;background:#18629C;color:#fff;position:relative;margin:0 auto 10px 0;font-weight:normal;border-radius:2px;margin-top: 10px;}#welcomeha1pc_bar a{background: rgba(255, 255, 255, 0.22); color: #FFFFFF; padding: 4px 0px; border-radius: 2px; margin-left: 5px; padding-right: 6px;}#close_welcomeha1pc_bar {background:#254E71;border-left: double;font-size: 21px;display:inline-block;cursor:pointer;padding:8px 15px;position:absolute;top:0px;bottom: 0;right:0;font-weight:normal;border-radius:0 3px 3px 0;transition:initial;transition:all .3s ease-out;color: #fff;}#close_welcomeha1pc_bar:hover {color: #ccc; transition:initial;-webkit-animation:swing .5s;}
- بعد دلك اضف الكود التالي فوق هدا الوسم
<body/>
<script type='text/javascript'> var button=document.querySelector("#close_welcomeha1pc_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});</script>
- اضف الكود التالي في المكان الدي تريد ان تضهر فيه الاضافة
<div class='welcomeha1pc_bar' style='margin-bottom:10px;'><div id='welcomeha1pc_bar'>مرحبا بك في موقعنا ! :) .. للبحث عنا من غوغل يمكنك كتابة "محترفي الحاسوب" أو "Ha1pc" ! لا تنسى جعل المدونة الصفحة الرئيسية لمتصفحك! :)<span data-target='#welcomeha1pc_bar' id='close_welcomeha1pc_bar'>×</span></div></div>
طريقة اضافة شريط ترحيبي الى البلوجر هي طريقة جميلة جدا ولقد أظهرت على جودة وفعالية كبيرة في دورها في حين يمكنك استعماله على سبيل المثال بالترحيب بزوار مدونتك او استعمالها كالاشعار الخ , ولقد تلقيت طلبات كثيرة من أجل إضافة هده الاداة الجميلة ,و الان اقول لكم انه يمكنك زيادة اتقانك مجال تطوير مدونتك والطريقة سهلة جدا فقط اتبع الخطوات اسفله .
- ادهب الى لوحة التحكم ثم
تحرير "HTML" - ابحث عن كلمة
<b:skin/> والصق الاكواد التالية فوقها:
/* CSS welcome Bar */#welcomeha1pc_bar{width:auto;height:auto;display:block;text-align:center;line-height:1.6em;font-size: 14px;padding:8px 20px;background:#18629C;color:#fff;position:relative;margin:0 auto 10px 0;font-weight:normal;border-radius:2px;margin-top: 10px;}#welcomeha1pc_bar a{background: rgba(255, 255, 255, 0.22); color: #FFFFFF; padding: 4px 0px; border-radius: 2px; margin-left: 5px; padding-right: 6px;}#close_welcomeha1pc_bar {background:#254E71;border-left: double;font-size: 21px;display:inline-block;cursor:pointer;padding:8px 15px;position:absolute;top:0px;bottom: 0;right:0;font-weight:normal;border-radius:0 3px 3px 0;transition:initial;transition:all .3s ease-out;color: #fff;}#close_welcomeha1pc_bar:hover {color: #ccc; transition:initial;-webkit-animation:swing .5s;}
- بعد دلك اضف الكود التالي فوق هدا الوسم
<body/>
<script type='text/javascript'> var button=document.querySelector("#close_welcomeha1pc_bar");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});</script>
- اضف الكود التالي في المكان الدي تريد ان تضهر فيه الاضافة
<div class='welcomeha1pc_bar' style='margin-bottom:10px;'><div id='welcomeha1pc_bar'>مرحبا بك في موقعنا ! :) .. للبحث عنا من غوغل يمكنك كتابة "محترفي الحاسوب" أو "Ha1pc" ! لا تنسى جعل المدونة الصفحة الرئيسية لمتصفحك! :)<span data-target='#welcomeha1pc_bar' id='close_welcomeha1pc_bar'>×</span></div></div>
