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

بسم الله الرحمن الرحيم

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

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

الأولى : على اليمين فى الصورة عندما يكون العمود الجانبى للمدونة عريضا حوالى 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>

 لاحظ أنه عليك تغير كلمات "قسم" و "تعديل" بما تريد و ضع الرابط مكان العلامة #