إضافة شريط ترحيبي لمدونة بلوجر

إضافة شريط ترحيبي لمدونة بلوجر 

إضافة شريط ترحيب لمدونة بلوجر بطريقة كلاسيكية

السلام عليكم ورحمة الله وبركاته ومغفرته ، احبتي متابعي مدونة هشام هاشم للمعلوميات والتقنيات ، اليوم في قسم دروس بلوجر سوف نقدم لكم احد الاضافات الترحيبية التي تحسس الزوار انك تهتم بهم ، كما اننا وفرنا لكم اضافة جد سهلة الاستعمال و متجاوبة مع جميع القوالب ، كما انها كلاسيكية وخفيفة على المدونة ، ومن اجل الاستفادة منها عليك باتباع الشرح على مدونتنا العربية .

العديد من المدونين دائما تبحث عن اضافات عديدة وغير معقدة ، كما انها تبحث عن اضافات تشتغل مع القالب بطريقة سليمة ومتجاوبة ، ولا شك اصبح المدونين تستفيق من الاضافات التي تتوفر على عدد كبير من الالوان والاشكال التي تجلب الضيم لزوار ، ولهذا تبحث عن اضافات كلاسيكية على مدونة بلوجر لانها تكون سهلة و قابلة للمشاهدة كما انها لا تجعل الموقع صبياني ، ومن اجل ذلك اما ان تكون محترف وتقدم ما هو افضل في الاضافات في المدونة او تبحث عن اضافات كلاسيكية مثل شريط ترحيبي الذي هو الان بين ايديكم .

ماهو المقصود بشريط الترحيبي بلوجر وما هي مميزاته ؟

شريط الترحيب يكون احيانا مهم جدا في المدونة لتقديم ترحيب او اي معلومة لزوارك ، كما انها يضاف في الاداة الخاصة بالتخطيط او داخل المواضيع  ، كما يمكنك تغير اللون دون ان تؤثر على الكتابة والشكل ، والافضل من هذا انه متجاوب مع المكتب والهواتف الذكية .

ميزة هذه الاضافة الخاصة بالترحيب انه تقدم اعلان او موضوع او الترحيب نفسه لزوار بطريقة احترافية مبسطة.

كيفية تركيب إضافة شريط ترحيبي لمدونة بلوجر :

1 - ندخل الى القالب ثم >> تحرير HTML ثم >> نفتح مرحك البحث CTRL+F ونبحث عن ]]></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;}

تعديل على الكود :

#18629C : هذا اللون هو اللون الازرق الخاص بشريط الترحيب يمكنك تغييره الى اي لون .

center : هذا يخص الكتابة الترحيبية يمكنك جعلها على يسار تغيرها الى   " left "  ايضا الى اليمين " right "

1.6em أو 8px 20px : يمكنك تغير حجم العرض بزيادة او نقصان .
14px : حجم الكتابة 
#fff : لون الكتابة 
10px : اذا تريد ان تقرب الشريط الى الاداة الاخرى او بعدها بمساحة 

2 - نبحث عن امر </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>

3 - سوف اخذ هذا الكود ونبحث له عن مكان واضافته  سواء في اداة التخطيط او داخل المواضيع .

<div class='welcomeha1pc_bar' style='margin-bottom:10px;'><div id='welcomeha1pc_bar'>مرحبا بكم في مدونة هشام هاشم للمعلوميات والتقنيات<span data-target='#welcomeha1pc_bar' id='close_welcomeha1pc_bar'>&#215</span></div></div>

يتبقى لك فقط تغير العنوان الذي وضعت بالكلمة التي تريد انت .