اضافة قائمة رئيسية احترفية مع مواقع التواصل

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

شرح التركيب

قم بالدخول الى قالب مدونتك

ثم قم بالبحث عن الوسم ]]></b:skin>ثم قم بوضع فوقه الكود التالى

/* مواقع التواصل */
.socialicons{width:auto;height:65px;float:left;margin:0 0 0 0;display:block;margin-left:25px;line-height:65px}
.socialicons li{float:right;font-size:27px;text-align:center;margin:0 5px 0 5px;width:45px;background-color:#F74047}
.socialicons li:hover{background-color:#0F4566}
a.googleplus.ketchup.tooltipsocial{color:#FFFFFF}
a.facebook.ketchup.tooltipsocial{color:#FFFFFF}
a.youtube.ketchup.tooltipsocial{color:#FFFFFF}

/* القائمة الرئيسية */
.main-nav{background-color:#0B6EAB;display:block;list-style:none outside none;border-bottom:5px solid #0F4566;float:right;width:100%;height:70px}
.home-icon .fa{font-size:43px}
.home-icon .fa .home-icon:hover{background:none}
.menu li{height:72px;margin-top:-21px;list-style:none outside none;display:inline-block;position:relative;z-index:10;padding:8px 0}
.menu li a{text-align:center;list-style:none outside none;text-decoration:none;padding:0 16px;font-size:20px;:100;display:block;color:#fff;transition:all 0.2s ease-in-out 0s}
.menu li a:hover:hover>a{color:#F74047;background:none}
.menu ul{list-style:none;margin-top:10px;visibility:hidden;opacity:0;margin:0;padding:0;list-style:none outside none;width:175px;position:absolute;right:0;background:#0B6EAB;z-index:9;transform:translate(0,20px);transition:all 0.2s ease-out}
.menu ul:after{bottom:100%;right:20%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-bottom-color:#fff;border-width:6px;margin-left:-6px}
.menu ul li{border-top:none;list-style:none;display:block;float:none;background:none;margin:0;padding:0}
.menu ul li:hover{border-top:none}
.menu ul li a{list-style:none;font-size:15px;font-weight:normal;display:block;color:#FFFFFF;line-height:38px;text-align:center;width:155px;border-bottom:5px solid #0B6EAB}
.menu ul li:hover>a{background:#FFFFFF;color:#F74047}
.menu ul ul{left:149px;top:0;visibility:hidden;opacity:0;transform:translate(20px,20px);transition:all 0.2s ease-out}
.menu ul ul:after{left:-6px;top:10%;border:solid transparent;content:"";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255,255,255,0);border-right-color:#fff;border-width:6px;margin-top:-6px}
.menu li>ul ul:hover{visibility:visible;opacity:1;transform:translate(0,0)}
.menu lior{display:inline-block;position:relative;z-index:100;margin-left:10px;float:left;top:9px}
lior:before{content:'جديد';font-family:FontAwesome;font-style:normal;font-weight:normal;right:-13px;position:absolute;padding:0.4px 9px;background:#F74047;color:#FFFFFF;line-height:18px;font-family:ge_dinar_tworegular;font-size:11px;border-radius:2px}
.menu lior a{text-decoration:none;padding:13px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s;margin-top:8px}
.menu lior{display:inline-block;position:relative;z-index:100;margin-left:10px;float:left;top:9px}
lior:before{content:'جديد';font-family:FontAwesome;font-style:normal;font-weight:normal;right:-13px;position:absolute;padding:0.4px 9px;background:#F74047;color:#FFFFFF;line-height:18px;font-family:ge_dinar_tworegular;font-size:11px;border-radius:2px}
.menu lior a{text-decoration:none;padding:13px;display:block;color:#fff;transition:all 0.2s ease-in-out 0s;margin-top:8px}
.msubtitle{font-size:12px;font-weight:400;display:block;margin-top:0;color:#fff;line-height:37px}
.menu li:hover>ul{visibility:visible;opacity:1;transform:translate(0,0)}
.menu ul li:hover{border-top:none}
.menu li:first-child{list-style:none outside none;margin-left:0}
.menu ul li{border-top:none;list-style:none;display:block;float:none;background:none;margin:0;padding:0}
ul.menu{height:65px;float:right;padding-right:20px}
ul#recn-b{padding:1px 5px 5px 5px}
.menu li:hover{background-color:#0F4566;height:65px}
.menu li a:hover{color:#FFFFFF}

الان سوف نضع كود اظهار الإضافاة اسفل الهيد كما فى مدونتى
اذا تريد وضعه فى مكان اخر فاذا الامر يرجع اليك

<nav class='main-nav'>
<ul class='menu'>
<li>
<a class='with-ul' href='https://goo.gl/Uu37QV' itemprop='url'>
<span itemprop='name'>قوالب بلوجر</span>
<span class='msubtitle'>أحدث قوالب بلوجر</span>
</a>
</li>
<li>
<a class='with-ul' href='https://goo.gl/1Xm8AK' itemprop='url'>
<span itemprop='name'>إضافات بلوجر</span>
<span class='msubtitle'>أفضل الإضافات</span>
</a>
</li>
<li>
<a class='with-ul' href='https://goo.gl/Uus2EH' itemprop='url'>
<span itemprop='name'>دروس وشروحات</span>
<span class='msubtitle'>كل ما تريد معرفته</span>
</a></li>
<li>
<a class='with-ul' href='https://goo.gl/ewOdqF' itemprop='url'>
<span itemprop='name'>فوتوشوب</span>
<span class='msubtitle'>جديد التصميم</span>
</a></li>
<li>
<a class='with-ul' href='https://goo.gl/CKkl4y' itemprop='url'>
<span itemprop='name'>خدمات </span>
<span class='msubtitle'>اطلب ما تريد</span>
</a></li>
<li/></ul>
<div class='headrch'>
<div class='socialicons'>
<ul>
<li><a class='facebook ketchup tooltipsocial' href='https://www.facebook.com/wdbloog' target='_blank' title='فسبوك'>
<i class='fa fa-facebook'/></a></li>
<li><a class='googleplus ketchup tooltipsocial' href='https://plus.google.com/+أخبارريالمدريدبالعربية' target='_blank' title='جوجل +'><i class='fa fa-google-plus'/></a></li>
<li><a class='youtube ketchup tooltipsocial' href='' target='_blank' title='انضم الينا'><i class='fa fa-user'/></a></li>
</ul>
</div>
</div>
</nav>