خريطة للمدونة من أجمل الخرائط

فى هذا الموضوع سأذكر أفضل كود لإنشاء خريطة للمدونة أو أقسام و تستخدمها كما تشاء

هناك طريقتان لعرضها :

الأولى : على اليمين فى الصورة عندما يكون العمود الجانبى للمدونة عريضا حوالى 330 إلى 360 بيكسل

الثانية: على اليسار فى الصورة عندما يكون العمود الجانبى للمدونة ضيق نسبيا حوالى 140 إلى 180 بيكسل  

لمعاينة هذه الأداة من هنا

كل ما عليك فعله هو إتباع الخطوات البسيطة التالية:

1. فى صفحة التحكم الرئيسية لمدونتك اختر اداة تخطيط "layout"

2. اختر إضافة أداه "Add a Gadget" فى المكان الذى تريد أن تضع به هذه الأداة 

3. إختر أداة "HTML/JavaScrript" 

4. إلصق الكود التالى فى المربع HTML الذى يظهر مباشرة ثم إضغط حفظ "Save" 

يمكنك التعرف على المزيد عن كيفية إضافة الأداة من هنا

الكود:

<link href='https://sites.google.com/site/uploadwdn/navigation.css?attredirects=0&d=1' rel='stylesheet' type='text/css'/>

<div id="container">

 <ul class="nav">

<li>

   <div class="nested">

    <a href="#"target="_blank">قسم 1</a>

    <ul>

<li><a href="#"target="_blank">تعديل 1</a></li>

<li><a href="#"target="_blank">تعديل 2</a></li>

<li><a href="#"target="_blank">تعديل 3</a></li>

<li><a href="#"target="_blank">تعديل 4</a></li>

</ul>

</div>

</li>

<li>

   <div class="turqoise-white nested">

    <a href="#"target="_blank">قسم 2</a>

    <ul>

<li><a href="#"target="_blank">تعديل 1</a></li>

<li><a href="#"target="_blank">تعديل 2</a></li>

<li><a href="#"target="_blank">تعديل 3</a></li>

<li><a href="#"target="_blank">تعديل 4</a></li>

</ul>

</div>

</li>

</ul>

<br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <br />

 <ul class="nav">

<li>

   <div class="red-white nested">

    <a href="#"target="_blank">قسم 3</a>

    <ul>

<li><a href="#"target="_blank">تعديل 1</a></li>

<li><a href="#"target="_blank">تعديل 2</a></li>

<li><a href="#"target="_blank">تعديل 3</a></li>

<li><a href="#"target="_blank">تعديل 4</a></li>

</ul>

</div>

</li>

<li>

   <div class="ye-white nested">

    <a href="#"target="_blank">قسم 4</a>

    <ul>

<li><a href="#"target="_blank">تعديل 1</a></li>

<li><a href="#"target="_blank">تعديل 2</a></li>

<li><a href="#"target="_blank">تعديل 3</a></li>

<li><a href="#"target="_blank">تعديل 4</a></li>

</ul>

</div>

</li>

</ul>

</div>

<br>

• غرد
• شارك
• شارك
• شارك
• شارك

عن Youssef elm3dawey

مدون مصري اعشق التكنولوجيا اهتم بكل جديد في عالم التدوين

تدوينات ذات صلة