إضافة قائمة جانبية مع زر إتصل بنا

السلام عليكم ورحمة اللـه متابعى مدونة بوزوم الكرام أقدم لكم اليوم موضوع جديد و حصرى كالعادة وهو بعنوان

إضافة قائمة جانبية مع زر إتصل بنا وربما يسألني البعض عن أهمية هذه الإضافة >> فهي تسهل علي الزائر التنقل السريع بين المدونات في حالة كان صاحبها يستعملها في خدمة التبادل النصي مثلا مدونة بوزوم أو التنقل بين روابط المدونة كما ان هذه الإضافة يمكن تخصيصها للعديد من الأمور في المدونة كما تحمل هذه الإضافة بين طياتها زر إتصل بنا كما هو موضح في الصورة 

ولكى لا أطيل عليكم تابعوا معى الشرح

♫ طريقة التركيب ♫

♥ الخطوة الأوليــ  ♥ 

اولا علينا التسيجل في بلوجر ◄ القالب ◄تحرير HTML ◄  نبحث(CTRL+F) عن هذا الوسم ]]></b:skin> ونضع اكواد الCSS فوقه مباشرة(قبله)
اكواد الCSS المستخدمة

#exchange-link {
font: 14px droid arabic naskh;
color: #007CDD;
border-bottom: 1px dashed #007CDD;
margin: 0 0 10px 0;
padding: 5px 0 5px 0;
text-align: center;
}
.list-link ul li a {
font: 14px droid arabic naskh;
color: #000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZ5LMMzUPY93iFGxjVnmjG63i8VnwRDr5Vy8PnVySnYuyXTiu_TFg13WCxO-w7amWHkDJcXS31iIiKlhiFc9NhTYzdbUFFtEHNiiPT74ziXTYRMBHywv5PDyJGLbwJBOCAUqDeP3PZ_Vf/s1600/1403664031_checkbox_yes.png) no-repeat right;
padding: 0 19px 1px 0;
}

♥ الخطوة الثانيــة  ♥ 

 اضغط على تخطيط من لوحة تحكم المدونة

 اختر اضافة اداة

 اختر اداة HTML /JavaScript

 اترك العنوان فارغ و انسخ الكود التالي و ضعه في الاداة

<h4 id="exchange-link">التبادل الاعلاني النصي</h4>

<div class="list-link">

<ul>

<li><a target="_blank" href="ضع هنا الرابط المراد الإنتقال اليه">يمكنك وضع مدونتك هنا</a></li>

<li><a target="_blank" href="ضع هنا الرابط المراد الإنتقال اليه">يمكنك وضع مدونتك هنا</a></li>

<li><a target="_blank" href="ضع هنا الرابط المراد الإنتقال اليه">يمكنك وضع مدونتك هنا</a></li>

<li><a target="_blank" href="ضع هنا الرابط المراد الإنتقال اليه">يمكنك وضع مدونتك هنا</a></li>

</ul>

</div>

<div id='call-wrapper'>

<a style="font:13px droid arabic naskh;color:#000;">يمكنك الإتصال بنا من هنا : <a target="_blank" href="ضع هنا الرابط المراد الإنتقال اليه"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsx7c1oFqaX_uLwq2Fharntv_pRsC1vaU0ON11100Ja9YLgpiLuvJCodF10N9TTLcYi5KvSghezf5kWyn4xFqRFyCXwWDagnRug7av8yWZhY7Tqs2nzYYHeq70jROjUgedfvTz-izfIUR/s1600/1403664575_phone.png" /></a></a>

</div>

♦ التعديلات المتاحة على القائمة ♦

اظن ان الشرح واضح مثل وضوح القمر المهم

غير ماهو موضح كا التالي

يمكنك وضع مدونتك هنا
ضع هنا الرابط المراد الإنتقال اليه

انتهى الموضوع بفضل اللــه تعالى و توفيقــه

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

من فضلك اضغظ لايك لمشاهدة لينك التحميل