اخر الاخبار

breaking/انترنيت/9
قوالب

10:00 م

تكبير النص تصغير النص أعادة للحجم الطبيعي
اضافة شريط ترحيبي الى البلوجر css3

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

شرح طريقة التركيب :
  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>

    إرسال تعليق