حصريا اضافة شريط ترحيبي الى البلوجر بتفنية CSS

حصريا اضافة شريط ترحيبي الى البلوجر بتفنية CSS

طريقة اضافة شريط ترحيبي الى البلوجر هي طريقة جميلة جدا ولقد أظهرت على جودة وفعالية كبيرة في دورها في حين يمكنك استعماله على سبيل المثال بالترحيب...

0

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

شرح طريقة التركيب :

1. ادهب الى لوحة التحكم ثم تحرير "HTML"  
2. ابحث عن كلمة  <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;}

1. بعد دلك اضف الكود التالي فوق هدا الوسم  <body/>  

<script type='text/javascript'> var button=document.querySelector(&quot;#close_welcomeha1pc_bar&quot;);button.addEventListener(&quot;click&quot;,function(){var t=document.querySelector(button.getAttribute(&quot;data-target&quot;));t.style.display=&quot;none&quot;==t.style.display?&quot;block&quot;:&quot;none&quot;});</script>

1. اضف الكود التالي في المكان الدي تريد ان تضهر فيه الاضافة

<div class='welcomeha1pc_bar' style='margin-bottom:10px;'><div id='welcomeha1pc_bar'>مرحبا بك في موقعنا ! :) .. للبحث عنا من غوغل يمكنك كتابة "محترفي الحاسوب" أو "Ha1pc" ! لا تنسى جعل المدونة الصفحة الرئيسية لمتصفحك! :)<span data-target='#welcomeha1pc_bar' id='close_welcomeha1pc_bar'>&#215</span></div></div>