القوائم مفيدة لمدونات بلوجر حيث تسمح لنا بإضافة روابط كثيرة في مكان واحد
بدون أن تأخد لنا مساحة كبيرة من المدونة , أشارك معكم في هذه التدوينة
واحدة من القوائم الرأسية المميزة للبلوجر تتميز بشكلها الرائع و البساطة
في إستخدامها .
يمكنك أن تضع في هذه القائمة مختلف أنواع الروابط مثل أقسام المدونة أو روابط الصفحات أو حتى الروابط الخارجية , كما يمكنك تغيير الأيقونات المرفقة بواسطة خطوط Fontawesome , تعد القوائم واحدة من أهم إضافات بلوجر حيث تساعد الزوار على تصفح المدونة بسلاسة
نقوم بالتوجه للقالب تحرير html
إبحث بواسطة ctrl+f عن <head>
و ضع أسفله الكود التالي :
بعدها قم بالبحث عن <body> ثم ضع أسفلها الكود التالي :
صفحة الأيقونات و نسخ كود الأيقونة و تغييره بالأيقونات التي تريدها
يمكنك أن تضع في هذه القائمة مختلف أنواع الروابط مثل أقسام المدونة أو روابط الصفحات أو حتى الروابط الخارجية , كما يمكنك تغيير الأيقونات المرفقة بواسطة خطوط 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-->
- أكواد الأيقونات ظللتها بـاللون الأزرق
أتمى أن تعجبكم الإضافة
17 سنة مؤسس مدونة ستروكس للمعلوميات انشأت مدونة ستروكس للمعلوميات سنة 2015 يقتصر عملي على الدعم وتقديم الشروحات المجانية على المدونة