قوائم CSS جانبية لمدونات بلوجر بشكل جميل

قوائم CSS جانبية لمدونات بلوجر بشكل جميل

ابراهيم زكاغ

1/29/2015

قوائم CSS جانبية لمدونات بلوجر 

رأينا في دروس سابقة طريقة إضافة مجموعة من القوائم لمدونات بلوجر. منها شريط قوائم أفقي وقوائم جانبية  منسدلة. اليوم سنقدم إليكم قوائم جانبية بCSS.
نموذج القوائم الجانبية:

قوائم CSS جانبية لمدونات بلوجر

مشاهدة مثال

إضافة قوائم CSS جانبية

لإضافة هذه القوائم على مدونتكم المرجو اتباع الخطوات التالية:
1- من منصة بلوجر تنقرون على التخطيط
2- ثم إضافة أداة وتختارون HTML/Javascript
3- داخل إطار الأداة تقومون بإضافة الكود التالي:

<style>
.side-nav {
text-align:right;
width: 180px;
margin: 50px auto;
padding: 10px;
background: #c5d5e6;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.5);
}

.side-nav-button, .side-nav:active .active {
display: block;
position: relative;
height: 36px;
line-height: 36px;
margin-bottom: 10px;
padding: 0 35px;
font-size: 13px;
font-weight: bold;
color: #597490;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
background: #d8e6f4;
background-clip: padding-box;
border: 1px solid;
border-color: #b2bcc8 #acb6c0 #97abba;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, #f1f6ff, #d3dde7 70%, #bfcddc);
background-image: -moz-linear-gradient(top, #f1f6ff, #d3dde7 70%, #bfcddc);
background-image: -o-linear-gradient(top, #f1f6ff, #d3dde7 70%, #bfcddc);
background-image: linear-gradient(to bottom, #f1f6ff, #d3dde7 70%, #bfcddc);
-webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.06);
box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.06);
}

.side-nav-button:before, .side-nav-button:after {
content: '';
position: absolute;
}
.side-nav-button:before {
top: 10px;
right: 12px;
width: 15px;
height: 15px;
background: #59718a;
border-radius: 3px;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
}

.side-nav-button:hover, .side-nav-button.active, .side-nav-button.active, .side-nav-button.active:active {
color: #f6fdff;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
background-clip: border-box;
}
.side-nav-button:hover {
background: #99abb9;
border-color: #718190;
background-image: -webkit-linear-gradient(top, #99abb9, #7e93a8);
background-image: -moz-linear-gradient(top, #99abb9, #7e93a8);
background-image: -o-linear-gradient(top, #99abb9, #7e93a8);
background-image: linear-gradient(to bottom, #99abb9, #7e93a8);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(255, 255, 255, 0.3);
}
.side-nav-button:active, .side-nav-button.active, .side-nav-button.active:active {
background: #7d91a9;
border-color: #708191 #6d8295 #7b8c9e;
background-image: -webkit-linear-gradient(top, #7d91a9, #92a7bc);
background-image: -moz-linear-gradient(top, #7d91a9, #92a7bc);
background-image: -o-linear-gradient(top, #7d91a9, #92a7bc);
background-image: linear-gradient(to bottom, #7d91a9, #92a7bc);
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
}
.side-nav-button:last-child {
margin-bottom: 0;
}


</style>
<nav class="side-nav">
<a href="https://www.folfoly.com/" class="side-nav-button">قائمة 1</a>
<a href="https://www.folfoly.com/" class="side-nav-button">قائمة 2</a>
<a href="https://www.folfoly.com/" class="side-nav-button">قائمة 3</a>
<a href="https://www.folfoly.com/" class="side-nav-button">قائمة 4</a>
<a href="https://www.folfoly.com/" class="side-nav-button">قائمة 5</a>
</nav>

4 -  تغييرات على أداتكم الجديدة القوائم الجانبية:
  * أضيفوا روابطم الخاصة بالأحمر
  * غيروا نصوص الروابط بما يناسبكم بالأزرق
5- إحفظوا التغييرات واشاهدوا التغيير على مدوناتكم.

قوائم CSS الجانبية لمدونات بلوجر تم تصميمها بCSS فقط مما يجعلها أكثر خفة وجمالية. 

بلوجر

ابراهيم زكاغ 1/29/2015