إخواني الكرام كيف حالكم
في هذه التدوينة إن شاء الله سأضع لكم قائمة مدونتي العمودية لكي تستفيدوا منها أيضا
تتميز هذه الاخيرة:
-بخفتها وسهولة تركيبها
-زر الإخفاء والإظهار
-إمكانية وضع أي إضافة جاهزة داخلها
صورة للإضافة
معاينة حية أنظر ليسارك :)
حسنا بعد هذا التقديم حان وقت شرح التركيب
لن تحتاج للتعديل على قالبك فقط أظف أداة جديدة من التخطيط ثم ضع فيها هذا الكود
<!-- قائمة عين العر. -->
<script language="javascript">
function exetoggle(exeshowHideDiv, exeswitchImgTag) {
var saalim = document.getElementById(exeshowHideDiv);
var imageEle = document.getElementById(exeswitchImgTag);
if(saalim.style.display == "block") {
saalim.style.display = "none";
imageEle.innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtxpff7h6Y_cZm5uktKYXQfBxq7i-SiWQhoBBnKEACoZ89Nea_xWIJaqGBj-oWUonH1H66xct_CLGEBN1p-PME0cznknlxPWJB2Dcdu2s2GSNmPn65N-5xXSQpm5GvLC_TMkja3kLWQ/s24/plus.png" BORDER=0>';
}
else {
saalim.style.display = "block";
imageEle.innerHTML = '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2X2W5oP9ICE1X5cdW-2PWKI7DD-f57MbOdFETkOfHFafSNs2bu_-RuLTiEwUHmIHccLVRybDdvreV21vuqqCY845RRcIxfeig7sDAkZe_4XcRLPp8w9z4XrlHdFdYfHP2MMiOCO-3_A/s24/minus.png" BORDER=0>';
}
}
</script>
<style>
#exetitle {border: 1px solid #292929; background-color:#01B1D3; padding:5px;margin-bottom:2px;margin-top:2px;font-size:15px;font-family:GESSTwoMediumRegular;color:#fff;}
#exetitle a {float:left; margin:0 auto;}
.exediv {border: 1px solid gray; background-color:#efefef; padding:5px; display:none;}
</style>
<div id="exetitle">صفحات أساسية<a id="myHeader1" href="javascript:exetoggle('myContent1','myHeader1');" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtxpff7h6Y_cZm5uktKYXQfBxq7i-SiWQhoBBnKEACoZ89Nea_xWIJaqGBj-oWUonH1H66xct_CLGEBN1p-PME0cznknlxPWJB2Dcdu2s2GSNmPn65N-5xXSQpm5GvLC_TMkja3kLWQ/s24/plus.png" border="0" /></a></div>
<div id="myContent1" class="exediv">
ضع أي إضافة هنا
</div>
<div id="exetitle">أدوات للمدون<a id="myHeader2" href="javascript:exetoggle('myContent2','myHeader2');" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtxpff7h6Y_cZm5uktKYXQfBxq7i-SiWQhoBBnKEACoZ89Nea_xWIJaqGBj-oWUonH1H66xct_CLGEBN1p-PME0cznknlxPWJB2Dcdu2s2GSNmPn65N-5xXSQpm5GvLC_TMkja3kLWQ/s24/plus.png" border="0" /></a></div>
<div id="myContent2" class="exediv">
ضع أي إضافة هنا
</div>
<div id="exetitle">خدمات ترفيهية<a id="myHeader3" href="javascript:exetoggle('myContent3', 'myHeader3');" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtxpff7h6Y_cZm5uktKYXQfBxq7i-SiWQhoBBnKEACoZ89Nea_xWIJaqGBj-oWUonH1H66xct_CLGEBN1p-PME0cznknlxPWJB2Dcdu2s2GSNmPn65N-5xXSQpm5GvLC_TMkja3kLWQ/s24/plus.png" border="0" /></a></div>
<div id="myContent3" class="exediv">
ضع أي إضافة هنا
</div>
<div id="exetitle">نبذة عنا<a id="myHeader4" href="javascript:exetoggle('myContent4', 'myHeader4');" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtxpff7h6Y_cZm5uktKYXQfBxq7i-SiWQhoBBnKEACoZ89Nea_xWIJaqGBj-oWUonH1H66xct_CLGEBN1p-PME0cznknlxPWJB2Dcdu2s2GSNmPn65N-5xXSQpm5GvLC_TMkja3kLWQ/s24/plus.png" border="0" /></a></div>
<div id="myContent4" class="exediv">
ضع أي إضافة هنا
</div>
<div id="exetitle">رأيك يهمنا<a id="myHeader5" href="javascript:exetoggle('myContent5', 'myHeader5');" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtxpff7h6Y_cZm5uktKYXQfBxq7i-SiWQhoBBnKEACoZ89Nea_xWIJaqGBj-oWUonH1H66xct_CLGEBN1p-PME0cznknlxPWJB2Dcdu2s2GSNmPn65N-5xXSQpm5GvLC_TMkja3kLWQ/s24/plus.png" border="0" /></a></div>
<div id="myContent5" class="exediv">
ضع أي إضافة هنا
</div>
<!-- قائمة عين العر. -->
ثم بدل كلمة "ضع أي إضافة هنا"
بأي إضافة تريد مع تغيير العناوين الرئيسية بما يناسب
وهكذا تكون إنتهيت من تركيب القائمة في مدونتك
لمن رغب في تركيب هذا الشكل الذي أستعمل
ههو الكود الخاص به
<!-- قائمة عين العر. --><style>
#vbar ul{list-style-type:none;list-style: none;margin:0px;padding:0px;border-top:1px solid #d6d6d6;}
#vbar ul li{background:#f8f7f7;padding:10px 10px;margin-right: 6px;color:#666;box-shadow:inset 0 0 1px #fff;border-bottom:1px solid #d6d6d6;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6;margin:0;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
#vbar ul li:hover{background:#efefef;box-shadow:inset 0 0 2px #ddd;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
#vbar a{text-decoration:none;color:#2D2D2D;}
#vbar a:hover{text-decoration:none;color:#037DFF;}
#vbar h2{margin:8px;color:#666;border:1px solid #d6d6d6;background: -moz-linear-gradient(top, #f8f8f8, #eaeaea);background: -webkit-gradient(linear top, #f8f8f8, #eaeaea);background: -ms-linear-gradient(top, #f8f8f8, #eaeaea);background: -o-linear-gradient(top, #f8f8f8, #eaeaea);padding:8px;font-family:'alweeam', 'Droid Arabic Kufi', Arial,Helvetica,Sans-serif;font-size:12px;line-height:24px;font-weight:bold;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;-ms-transition: All 1s ease;transition: All 1s ease;}
#vbar ul li a {color:#000;font-size:12px;font-family: Tahoma, Arial;font-weight: normal;text-decoration: none;-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
#vbar .widget { border: 1px solid #ddd; background-color: #fff; margin-bottom: 10px; box-shadow:inset 0 0 4px #eee; }
.menu a img {float:right;padding-left:10px;}
</style>
<div id="vbar">
<ul>
<li class="menu"><a href="http://quran.arabe-eye.com/index.php"><img src="https://cdn1.iconfinder.com/data/icons/styleislam_icons/24/kuran.png" />القرآن الكريم</a></li>
<li class="menu"><a href="http://www.arabe-eye.com/p/blog-page_15.html"><img src="https://cdn1.iconfinder.com/data/icons/Pretty_office_icon_part_2/24/Briefcase.png" />فرص شغل</a></li>
<li class="menu"><a href="http://www.arabe-eye.com/p/blog-page_3349.html"><img src="https://cdn1.iconfinder.com/data/icons/free-social-media-icons/24/Phone_number.png" />إتصل بنا</a></li>
<li class="menu"><a href="http://www.arabe-eye.com/p/blog-page_29.html"><img src="https://cdn1.iconfinder.com/data/icons/free-green-cloud-icons/24/Antivirus.png" />سياسة الخصوصية</a></li>
<li class="menu"><a href="http://www.arabe-eye.com/p/archive.html"><img src="https://cdn1.iconfinder.com/data/icons/bloggin/24/archive.png" />فهرس المدون</a></li>
<li class="menu"><a href="http://www.arabe-eye.com/p/terms-of-use.html"><img src="https://cdn1.iconfinder.com/data/icons/free-blue-button-icons-1/24/Book_of_record.png" />شروط الخدمة</a></li>
<li class="menu"><a href="/"><img src="https://cdn1.iconfinder.com/data/icons/freeapplication/png/24x24/Info.png" />نبذة عنا</a></li>
</ul>
</div><!-- قائمة عين العر. -->
غير العناوين والصور والروابط بما يناسبك وتكون إنتهيت
هذا كل شيئ اتمنى ان تعجبكم وأي سؤال لا تترددو في طرحه
بالتوفيق للجميع ودمتم في رعاية الله وحفظه
0 comments: