قائمة بتقنية css3 لاقسام مدونة بلوجر بالايكونات المعبره

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

فليس من عادتى التقطير على من يسعى لتحسين شكل ومستوى واداء مدونته ووضغ اضافه كل شهر مثلما يفعل البعض.

في مدونة تقارب ستجد تحديثات جديده كل يوم واضافات ودروس متنوعه لتحسين مدونة بلوجر وظهورها بشكل انيق.

اضافة اليوم او درس اليوم يتحدث عن القائمه الموجوده فوق رسائل المدونه وتحت الهيدر مباشرة وغالبا مايضع 

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

تلك القائمه فهمي بلا شك تسهل علي القراء والزوار والمتابعين الوصول السريع الي اقسام مدونتك..

واليوم اثناء تجولي في احد المواقع رايت قائمه قمة في الاناقه والجمال واحببت ان اشارككم اياها وهى كما تروها بالصورهبالاعلى.


والصوره توضح شكل القائمه اثناء مرور الماوس علي احد الاقسام فيها وشكل القوائم المنسدله التي تتدلى منها حقيقة روعه روعه.


بالتاكيد اعجبتك هيا معي نطبقها سويا علي مدونة بلوجر اقصد مدونتك انت ---->>>>

* سجل الدخول الي لوحة تحكم مدونتك.

* اضغط علي  تصميم ثم تحرير HTML.

* ابحث عن هذا الكود
<head> بواسطة CTRL+F.

* انسخ الكود الموجود بالاسفل وضعه بعد هذا الكود مباشرة
<head>


<link href="https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/megamenu.css" rel="stylesheet" type="text/css"></link>

* الان قم بحفظ قالب مدونتك.

* قم بالذهاب مره اخرى الي عناصر تصميم الصفحه.

* انت الان في --->>> عناصر تصميم الصفحه!!!.

* قم باختيار اداه جديده ولكن حاول ان يكون موضع الاداه اسفل الهيدر وفوق رسائل المدونة.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript.

* ضع الكود الموجود في الاسفل داخل الاداه الجديده.

<ul id="css3menu" class="topmenu" style="position: relative;top: -25px">
 <li class="topfirst"><a href="#" title="Item 0"><img src="http://santabanta.mywapblog.com/files/clock.png" alt="Item 0"/>Item 0</a></li>
 <li class="topmenu"><a href="#" title="Item 1"><span><img src="http://santabanta.mywapblog.com/files/attachment.png" alt="Item 1"/>Item 1</span></a>

 <div class="submenu" style="width:276px;">
 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="Item 1 0"><img src="http://santabanta.mywapblog.com/files/accept.png" alt="Item 1 0"/>Item 1 0</a></li>
  <li><a href="#" title="Item 1 1"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 1</a></li>
  <li><a href="#" title="Item 1 2"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 2</a></li>
  <li><a href="#" title="Item 1 3"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 3</a></li>
 </ul></div>

 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="Item 1 4"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 4</a></li>
  <li><a href="#" title="Item 1 5"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 5</a></li>
  <li><a href="#" title="Item 1 6"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 6</a></li>
  <li><a href="#" title="Item 1 7"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 7</a></li>
 </ul></div>
 <div class="column" style="width:33.33%"><ul>

  <li><a href="#" title="Item 1 8"><img src="http://santabanta.mywapblog.com/files/accept.png" alt="Item 1 8"/>Item 1 8</a></li>
  <li><a href="#" title="Item 1 9"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 9</a></li>
  <li><a href="#" title="Item 1 10"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 10</a></li>
  <li><a href="#" title="Item 1 11"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 11</a></li>
 </ul></div></div>

 </li>

 <li class="topmenu"><a href="#" title="Item 2"><img src="http://santabanta.mywapblog.com/files/chart-pie.png" alt="Item 2"/>Item 2</a></li>
 <li class="toplast"><a href="#" title="Item 3"><img src="http://santabanta.mywapblog.com/files/lock.png" alt="Item 3"/>Item 3</a></li>
</ul>

* لا تنسى تغيير المتغيرات المطلوبه داخل الكود الموجود بالاعلى واى مساعده تريدها ضع تعليق .

* تم بحمد الله الانتهاء من الشرح.
أصدقاء(تطوير ويب)
تعليقات Facebook
6تعليقات Blogger

6 عدد التعليقات على موضوع قائمة بتقنية css3 لاقسام مدونة بلوجر بالايكونات المعبره

Mohd Amin يقول...

فعلاً أنت مبدع شكراً لك و شكراً لجهودك الرائعة

غير معرف يقول...

@mohd amin
ردك وسام اخى الكريم واتمنى تعجبك الاضافه

Mohd Amin يقول...

و هل هناك إضافة منك ولا تعجبني !
ماشاء الله كل إضافاتك 100%

غير معرف يقول...

@mohd amin
ربنا يبارك لي فيك يارب وفي كل اهل سوريه رمضان كريم عليك وعلي كل المسلمين

حسام صبحي معروف يقول...

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

غير معرف يقول...

@اخي حسام صبحي
تأكد اولا من انك قمت بوضع روابط الاقسام بشكل صحيح
ها انت تراها تعمل عندي بدون مشاكل
تأكد من ذلك وان استعصى عليك الامر راسلني بقالب مدونتك اركبها لك

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .