اهم اضافات بلوجر الضرورية والمميزة لكل مدونة

اهم اضافات بلوجر الضرورية والمميزة لكل مدونة

ربما حان الوقت للتوقف عن البحث عن المزيد من اضافات بلوجر لمدونتك. رغم أن جل القوالب  تتوفر على ما يهم من الادوات إلا أن الكثير من المدونين يقومون بالبحث عن أخرى ربما احترافية كما يعتقدون قبل تبديلها وتغييرها وهكذا ذوالك، النتيجة محتوى سيء والكثير من الوقت الضائع.

 نفس الأمر يحدث مع القوالب، لذلك اليوم سنحاول التطرق هنا لأهم الاضافات الضرورية والمميزة التي يجب أن تتوفر عليها كل مدونة. وعندما نقول "أهم" فالمقصود هو ادوات اجبارية تستعمل كثيرا في المدونات الاحترافية المشهورة.
اضافات بلوجر الضرورية والمميزة لكل مدونة  احترافية Blogger Widgets
اهم اضافات بلوجر الضرورية لكل مدونة

لائحة اهم اضافات بلوجر الضرورية والمميزة

لا تنسى أنك تستطيع التحكم في هذه الاضافات باخفاء اداة بلوجر على الصفحة الرئيسية او اظهارها في اي صفحة أخرى.

أهم الاضافات

إذا لم تكن مدونة بلوجر الخاصة بك تحتوي على هذه الاضافات والادوات فأنت بحاجة لاضافتها الان وليس لاحقا.

للاتصال بنا

ادة مهمة تسمح للزوار لارسال اراءهم وطلباتهم للمدون. هناك درس يمكنكم مراجعته للحصول على هذه الاداة:

خارطة المدونة

من الادوات التي يغفل عنها الكثير من المدونين، أهميتمها تتجلى في توفير مصدر يجمع جميع روابط المشاركات. لإضافتها قم بإنشاء صفحة ثابتة جديدة ثم اضف إليها هذا الكود مع تغيير رابط فولفولي بالاحمر برابط مدونتك:
<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link">
<a href="http://www.folfoly.com" style="font-size: 10px; text-decoration:none; color: #5146CD;">إضافات بلوجر</a></div>
')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="
<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>
";for(var g=0;g<postTitle.length;g++){if(a==""){h+='
<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>
';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='
<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>
';l++}}}h+="</table>
";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels">
<a href="/search/label/'+temp1+'">'+temp1+"</a></p>
<ol>");firsti=a;do{document.write("
<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>
");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>
");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY5NmUNh8iKV1KHB3HyALRz9NxdC-XsJMMDX8bcmsnyKUHipHfLMgpS8rFYnl4yZQLkVDnnzJjomw6ks6-mEsI9PBZKdqk9KAJ8gdMtvWkePEg-II-oBEBX-U-bTn1ZVoZrlvSjmOUBUfA/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://folfoly.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script></div>

المواضيع المشابهة

روابط مقترحة للمزيد من القراءة
المواضيع المشابهة والمرتبطة مع الصور

لجعل الزوار يقضون اطول مدة ممكنة في تصفحة محتوى مدونتك، ينصح بإضافة هذه الاداة في اسفل المواضيع. قم بفتح أداة تغيير القالب ثم تحرير html. من لوحة المفاتيح Ctrl+F للبحث عن الكود التالي: </head>

 فوقه مباشرة اضف الكود التالي:
<style>
#related-posts {
float: right;
width: 650px;
margin-bottom: 5px;
border-bottom: 1px dashed black;
}
#related-posts h2 {
margin-top: 5px;
border-bottom: 0px;
font-family: 'Droid Arabic Kufi', serif, 'PT Sans', Arial, sans-serif;
padding-top: 5px;
margin-bottom: 5px;
color: #666;
font-size: 16px;
margin-right: auto;
margin-left: auto;
}
#related-posts a {
font-family: Tahoma;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YXd4TilCbiTCBkJ20i1T2EBdSzh0R3rdvTUhaSGLgU5f9eUOaZgirNiL-HLOoYn2SnQkpiIASH8Ga2MCaeaiMKTwqHJgh5PTfUMPaepCt1EFAVNKheTyOr93RBCqTXlGqM2OBtPet9kY/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#fff";
var relatedpoststitle="مواضيع مشابهة لا تنسى مشاهدتها:";
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5YXd4TilCbiTCBkJ20i1T2EBdSzh0R3rdvTUhaSGLgU5f9eUOaZgirNiL-HLOoYn2SnQkpiIASH8Ga2MCaeaiMKTwqHJgh5PTfUMPaepCt1EFAVNKheTyOr93RBCqTXlGqM2OBtPet9kY/s1600/no_image.jpg";}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:right;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border: 1px solid black; " src="'+thumburl[r]+'"/><br/><div style="padding-right:0px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; width: 130px; font-size: 15px; line-height: normal; font-size-adjust: none; font-stretch: normal; font-family: Tahoma; color: black;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
document.write('</br><div style="padding-top:30px; display: none; width:100px"><a href="http://www.folfoly.com" target="_blank"><font size="1" color="black">مواضيع مشابهة</font></a>');
document.write('</div>');
}
//]]>
</script>

بعد ذلك لاظهار الروابط مع الصور في اسفل المشاركات قم بالبحث عن الكود التالي: <data:post.body/>

 وتحته مباشرة اضف المود التالي:
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>

ازرار المشاركة على الشبكات الاجتماعية

ازرار المشاركة
ازرار المشاركة على الشبكات الاجتماعية
اضافة ازرار متجاوبة 

صندوق المتابعة عبر البريد

صندوق المشاركة عبير البريد
صندوق المشاركة البريدية

لجمع متابعين عبر البريد الالكتروني، قم باضافة هذا الصندوق. من واجهة التحكم انقر على التخطيط ثم اضافة أداة من نوع HTML/Javascript وداخل اطار الأداة اضف الكود التالي مع تغيير folfoly بالأحمر باسم خلاصات فيدبرنرز الخاصة بمدونتك:
<style>
.technopcarea-newsletter{text-align:center;margin:0px 0;}
.technopcarea-newsletter .technopcarea-newsletter-form .activate p {
color: #FFFFFF;
font-family: Tahoma;
font-size: 13px;
clear: bothe;
padding-top: 100px;
}
.technopcarea-newsletter .technopcarea-social{padding-top:20%;width:20%;float:left;position:relative; height: 25px;}
.technopcarea-newsletter #form-technopcarea-newsletter{display:block;width:90%;margin:0 auto}
.technopcarea-newsletter:before,.technopcarea-newsletter:after{content:" ";display:table}
.technopcarea-newsletter:after{clear:both}
.technopcarea-newsletter h4{color: #F3F5F7;
font-family: 'Droid Arabic Kufi', Sniglet;
font-size: 16px;
font-weight: 300;
width: 100%;
/* margin: 1em auto; */
text-align: center;
marging: 5px 0px 5px 0px;
}
.technopcarea-newsletter .share-buttons {
margin: 5px;
width: 100%;
clear: both;
padding-bottom: 30px;
}

.technopcarea-newsletter .buttons {
float: right;
padding-left: 5px;
width: 30%;
display: inline;
}
.technopcarea-newsletter .technopcarea-newsletter-form{ background: none repeat scroll 0 0 #1E293B;
position: relative;
width: 100%;
height: 100px;}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset{height:38px;left:10%;position:absolute;top:1%;width:80%;border:none}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset h2{color:#FFF;font-family:Sniglet;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.technopcarea-newsletter .technopcarea-newsletter-form fieldset .fields{position:relative}
.fields .email{outline:0 none;width:85%;border:0;right:0;position:absolute;padding:11.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;color:#FFF;left:0px;position:absolute;padding:11.5px;transition:all ease 0.6s; width: 30%;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}

</style>
<section class='technopcarea-newsletter'>
<div id='form-technopcarea-newsletter'>
<div class='technopcarea-newsletter-form'>
<fieldset>
<h4>
سجل بريدك اللآن ولا تدع أي جديد يفوتك
</h4>
<div class='fields'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=folfoly', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input class='email' id='email' name='email' onblur='ifundefinedthis.value=='')this.value=this.defaultValue;' onfocus='ifundefinedthis.value==this.defaultValue)this.value='';' placeholder='أكتب بريدك هنا...' type='text'/>
<input name='uri' type='hidden' value='folfoly'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='subscribe' name='commit' type='submit' value='أرسل'/>
</form>
</div>
</fieldset>
</div>
<p>
هام: ستتوصلون برسالة بعد تسجيل بريدكم. ويكفي النقر على رابط داخلها لتفعيل التسجيل
</p>
</div>
</section>

ترقيم الصفحات

أداة مهمة تسهل الولوج للمحتوى الأقدم. لاضافتها راجع الدرس التالي:

القوائم المنسدلة

قائمة منسدلة
قائمة افقية منسدلة ب css و html فقط

تساعد في تقسيم محتوى المدونة وتنظيمه. لاضافتها على مدونتك اتبع الخطوات التالية:
داخل كود القالب قم بالبحث عن    </head>  وفوقه أضف الكود التالي:
<style>
/* Custom Cookies Info Dark */
/*
* Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
*/
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 400;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Droid Arabic Kufi';
font-style: normal;
font-weight: 700;
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),
url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype');
}
#menu a {
font-family: Droid Arabic Kufi;
}
#menu ul {
text-align: right;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
#menu ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-left: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
#menu ul li:hover {
background: #555;
color: #fff;
}

#menu ul li ul {
padding: 0;
position: absolute;
top: 48px;
right: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
#menu ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
#menu ul li ul li:hover { background: #666; }
#menu ul li:hover ul {
opacity: 1;
visibility: visible;
display: block;
}

#menu li:hover ul {
display: block;
z-index: 99999;
}
</style>

ثم قم بالبحث مرة أخرة عن كود راس الصفحة وأضف داخله الكود التالي:
<div id='menu'>
<ul><li><a href='#'>الرئيسية</a></li>
<li><a href='#'>من نكون؟</a></li>
<li>
<a href='#'> بلوجر</a>
<ul>
<li><a href='#'>قوالب</a></li>
<li><a href='#'>دروس</a></li>
<li><a href='#'>سيو</a></li>
</ul>
</li>
<li><a href='#'>خدمات</a></li>
<li><a href='#'>للإتصال بنا</a></li>
</ul>
</div>

شرح طريقة اضافة القوائم بالفيديو مع ربطها بالتقسيمات:

سنقوم لاحقا باضافة اضافات أخرى عند إيجاد ادوات مميزة والتي تستحق النشر.