إضافة قائمة أفقية إحترفية للبلوجر

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

إضافة قائمة أفقية إحترفية للبلوجر


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

معاينة الإضافة

يمكنكم معاينة الإضافة من  معاينة الإضافة

طريقة إضافة الأداة


نقوم بالتوجه للقالب تحرير html

إبحث بواسطة ctrl+f عن <head>
و ضع أسفله الكود التالي :
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

بعدها قم بالبحث عن <body> ثم ضع أسفلها الكود التالي :
<!--HTML code-->
<div class="menu-right cdtey">
<ul>
<li>
<a class="ss hom" href="/">
<i class="ka fa fa-home"></i>
<span class="na">الرئيسية </span>
</a>
</li>
<li>
<a class="ss win" href="#">
<i class="ka fa fa-windows"></i>
<span class="na">الويندوز </span>
</a>
</li>
<li>
<a class="ss cog" href="#">
<i class="ka fa fa-cogs"></i>
<span class="na">البرامج </span>
</a>
</li>
<li>
<a class="ss goo" href="#">
<i class="ka fa fa-google-plus"></i>
<span class="na">جوجل </span>
</a>
</li>
<li>
<a class="ss des" href="#">
<i class="ka fa fa-desktop"></i>
<span class="na">انترنت </span>
</a>
</li>
<li>
<a class="ss unl" href="#">
<i class="ka fa fa-unlock-alt"></i>
<span class="na">الحماية </span>
</a>
</li>
<li>
<a class="ss che" href="#">
<i class="ka fa fa-check-square"></i>
<span class="na">شروحات عامة </span>
</a>
</li>
<li>
<a class="ss thu" href="#">
<i class="ka fa fa-thumbs-o-up"></i>
<span class="na">مواقع مفيدة </span>
</a>
</li>
<li>
<a class="ss dow" href="#">
<i class="ka fa fa-cloud-download"></i>
<span class="na">تحميل </span>
</a>
</li>
<li><a class="ss arc" href="/p/archive.html">
<i class="ka fa fa-archive"></i>
<span class="na">الارشيف </span>
</a>
</li>
<li>
<a class="ss exc" href="/404">
<i class="ka fa fa-exclamation-triangle"></i>
<span class="na">خطا 404 </span>
</a>
</li>
</ul>
</div>
<!--Css Codes-->
<style>
.menu-right {
    top: 226px
}
}
.menu-right {
    background: none repeat scroll 0 0 #fff;
    border-left: 1px solid #F0F0F0;
    top: 166px;
    width: 41px;
    position: absolute;
    z-index: 9999999
}
.menu-right ul li {
    border-bottom: 1px solid #EBEBEB;
    box-shadow: 0 1px 0 0 #FFFFFF
}
.menu-right .na {
    width: 0;
    right: 41px;
    padding: 0;
    position: absolute;
    overflow: hidden;
    font-family: droid arabic kufi;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.6px;
    white-space: nowrap;
    line-height: 39px;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    transition: 0.25s
}
.menu-right.ss:hover .ka {
    color: #FFFFFF
}
.menu-right .ss {
    display: block;
    height: 39px;
    text-align: center;
    position: relative;
    width: 41px;
    z-index: 99999
}
.menu-right .ss:hover .na {
    width: auto;
    padding: 0 20px;
    overflow: visible
}
.menu-right .hom:hover {
    background: none repeat scroll 0 0 #00BAC7
}
.menu-right .hom .na {
    background: none repeat scroll 0 0 #00BAC7
}
.fa-home {
    color: #00BAC7
}
.menu-right .win:hover {
    background: none repeat scroll 0 0 #8F8898
}
.menu-right .win .na {
    background: none repeat scroll 0 0 #8F8898
}
.fa-windows {
    color: #8F8898
}
.menu-right .cog:hover {
    background: none repeat scroll 0 0 #43AF95
}
.menu-right .cog .na {
    background: none repeat scroll 0 0 #43AF95
}
.fa-cogs {
    color: #43AF95
}
.menu-right .goo:hover {
    background: none repeat scroll 0 0 #F3594D
}
.menu-right .goo .na {
    background: none repeat scroll 0 0 #F3594D
}
.fa-google-plus {
    color: #F3594D
}
.menu-right .des:hover {
    background: none repeat scroll 0 0 #5792B2
}
.menu-right .des .na {
    background: none repeat scroll 0 0 #5792B2
}
.fa-desktop {
    color: #5792B2
}
.menu-right .unl:hover {
    background: none repeat scroll 0 0 #F6C231
}
.menu-right .unl .na {
    background: none repeat scroll 0 0 #F6C231
}
.fa-unlock-alt {
    color: #F6C231
}
.menu-right .che:hover {
    background: none repeat scroll 0 0 #C61F89
}
.menu-right .che .na {
    background: none repeat scroll 0 0 #C61F89
}
.fa-check-square {
    color: #C61F89
}
.menu-right .thu:hover {
    background: none repeat scroll 0 0 #F75940
}
.menu-right .thu .na {
    background: none repeat scroll 0 0 #F75940
}
.fa-thumbs-o-up {
    color: #F75940
}
.menu-right .dow:hover {
    background: none repeat scroll 0 0 #4aa3df
}
.cdtey {
    margin-top: 0;
    position: fixed;
    top: 0 !important;
    z-index: 9999999;
    background: white;
    box-shadow: 0px 0px 5px 0px #8e8e8e
}
.menu-right .dow .na {
    background: none repeat scroll 0 0 #4aa3df
}
.menu-right .fa-cloud-download {
    color: #4aa3df
}
.menu-right .arc:hover {
    background: none repeat scroll 0 0 #34495e
}
.menu-right .arc .na {
    background: none repeat scroll 0 0 #34495e
}
.arc .fa-archive {
    color: #34495e
}
.menu-right .exc:hover {
    background: none repeat scroll 0 0 #f1c40f
}
.menu-right .exc .na {
    background: none repeat scroll 0 0 #f1c40f
}
.fa-exclamation-triangle {
    color: #f1c40f
}
.menu-right .plu:hover {
    background: none repeat scroll 0 0 #9b59b6
}
.menu-right .plu .na {
    background: none repeat scroll 0 0 #9b59b6
}
.fa-plus {
    color: #9b59b6
}
.fa-minus {
    color: #9b59b6
}
.menu-right .ka {
    font-size: 21px;
    line-height: 36px;
    transform: rotate(0deg);
    transition: all 0.5s ease 0s
}
.menu-right .na {
    color: #FFFFFF
}
.menu-right .ss:hover .ka {
    color: #FFFFFF;
    transform: rotate(360deg);
    transition: all 0.5s ease 0s
}
</style>
<!--End-->

يمكنك تغيير الأيقونات عن طريق البحث عن الأيقونة التي تريدها من صفحة الأيقونات و نسخ كود الأيقونة و تغييره بالأيقونات التي تريدها

إضافة قائمة أفقية إحترفية للبلوجر
  • أكواد الأيقونات ظللتها بـاللون الأزرق
أتمى أن تعجبكم الإضافة

نحاول قدر الإمكان في كوداتي وضع أفضل تصاميم بلوجر سواء من ناحية الإضافات أو قوالب بلوجر , كما نشارك طرق تحسين المواقع في ما يتعلق بالسيو

avatar

اضافة جميلة اخي

شكرااا لك :)

delete 22/1/17
avatar

اخى هى فعلا انضافت ولكن فى العرض بتاعها زيادة

delete 4/7/17



التعابير