زوار ومتابعي المدونة
السلام عليكم ورحمة الله وبركاته
أقدم لكم اليوم مجموعة من القوائم المنسدلة وغير المنسدلة لمدونات بلوجر في غاية الروعة والجمال
نبدأ على بركة الله وتوفيقه
1- القائمة الأولى : منسدلة مع مربع البحث .
- طريقة التركيب :
1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة HTML/JavaScript
الـــكـــود
<style>
#navigation{
width:1000px;
height:40px;
display:block;
padding:0;
margin:0 0 22px 0;
margin-right:auto;
margin-left:auto;
background: #45484d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}
#menu{
float:right;
width:740px;
height:40px;
display:block;
padding:0;
margin:0;
}
#menu ul{
float:right;
margin:0;
padding:0;
}
#menu li{
float:right;
list-style:none;
line-height:40px;
margin:0;
padding:0
}
#menu li a, #menu li a:link{
color:#fff;
display:block;
margin:0;
padding:0 10px;
text-decoration:none;
font-family:verdana,arial;
}
#menu li a:hover, #menu li a:active, #menu .current_page_item a {
color:#fff;
padding:0 10px;
background:#00bd39;
border-radius:18px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited{
background: #111111;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
border-bottxom:1px solid #00bd39;
}
#menu li li a:hover, #menu li li a:active {
background:#00bd39;
border-radius:0px;
color: #fff;
}
#menu li ul{
z-index:9999;
position:absolute;
right:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul{
right:auto
}
#menu li:hover, #menu li.sfhover{
position:static
}
/* === Search Form === */
#search {
float:left;
width:230px;
padding:0px 0px ;
margin:9px 0px 0px 10px;
.margin:8px 0px 0px 10px;
background:#fff;
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size:12px;
}
#s {
width:180px;
margin:0;
padding:3px 5px;
height:18px;
color:#444;
background:#fff;
float:right;
border:none;
display:inline;
}
input#searchsubmit{
background:url('http://2.bp.blogspot.com/-hTiuEA1yMzQ/UTsummbkmMI/AAAAAAAABbs/CyyGd92XiVM/s1600/searchbu.png');
float:left;
display:inline;
margin:2px 0px 0px 5px;
height:21px;
width:22px;
color:#fff;
border:none;
text-indent:-9999px;
.font-size: 0;
.display:block;
.line-height: 0;
}
</style>
<div id='navigation'>
<div id='menu'>
<ul>
<li>
<a href='#'>
الرئيسية
</a>
</li>
<li>
<a href='#'>
القائمة »
</a>
<ul>
<li>
<a href='#'>
تعديل1
</a>
</li>
<li>
<a href='#'>
تعديل2
</a>
</li>
<li>
<a href='#'>
تعديل3
</a>
</li>
<li>
<a href='#'>
تعديل 4
</a>
</li>
<li>
<a href='#'>
تعديل 5
</a>
</li>
<li>
<a href='#'>
تعديل 6
</a>
</li>
<li>
<a href='#'>
تعديل 7
</a>
</li>
<li>
<a href='#'>
تعديل 8
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
اتصل بنا
</a> <a href='http://homeblog7.blogspot.com/' title='Translated by هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a>
</li>
</ul>
</div>
<div id='search'>
<form action='http://www.homeblog7.blogspot.com/search/' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='searchsubmit' type='submit' value='search'/>
</form>
</div>
</div>
<!--navigation menu with search ends-->
- التعديلات :
1- عدّل ( # ) برابط الصفحة المطلوبة .
2- عدّل ماهو باللون الأخضر برابط صفحة أتصل بنا خاصيتك .
3- عدّل ماهو باللون الأخضر بوضع رابط مدونتك من أجل مربع البحث .
2- قائمة متعددة الألوان :
- طريقة التركيب :
1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة HTML/JavaScript
الـــكـــود
<style>
#multicolor-bar {
background: #222222;
width: 100%;
color: #FFF;
margin: 10px 0;
padding: 0;
position: relative;
border-top:0px solid #0099FF;
height:35px;
}
#multicolor-nav {
margin: 0;
padding: 0;
}
#multicolor-nav ul {
float: right;
list-style: none;
margin: 0;
padding: 0;
}
#multicolor-nav li {
list-style: none;
margin: 0;
padding: 0;
}
#multicolor-nav li a, #multicolor-nav li a:link, #multicolor-nav li a:visited {
color: #FFF;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding:9px 12px 11px 12px;
text-decoration: none;
}
#multicolor-nav li a:hover, #multicolor-nav li a:active {
background: #ee7d07;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding:9px 12px 11px 12px;
}
#multicolor-nav li {
float: right;
padding: 0;
}
.color-1
{
background:#0b5394;
}
.color-2
{
background:#3d85c6;
}
.color-3
{
background:#6fa8dc;
}
.color-4
{
background:#990000;
}
.color-5
{
background:#d6253a;
}
.color-6
{
background:#e06666;
}
.color-7
{
background:#274e13;
}
.color-8
{
background:#38761d;
}
.color-9
{
background:#6aa84f;
}
.color-10
{
background:#93c47d;
}
.color-11
{
background:#b45f06;
}
.color-12
{
background:#e69138;
}
.color-13
{
background:#f6b26b;
}
.color-14
{
background:#741b47;
}
.color-15
{
background:#a64d79;
}
.color-16
{
background:#c27ba0;
}
</style>
<div id='multicolor-bar'>
<ul id='multicolor-nav'>
<li class="color-1"><a href='#'>الرئيسية</a></li>
<li class="color-2"><a href='#'>تعديل 2</a></li>
<li class="color-3"><a href='#'>تعديل 3</a></li>
<li class="color-4"><a href='#'>تعديل 4</a></li>
<li class="color-5"><a href='#'>تعديل 5</a></li>
<li class="color-6"><a href='#'>تعديل 6</a></li>
<li class="color-7"><a href='#'>تعديل 7</a></li>
<li class="color-8"><a href='#'>الرئيسية</a></li>
<li class="color-9"><a href='#'>تعديل 2</a></li>
<li class="color-10"><a href='#'>تعديل 3</a></li>
<li class="color-11"><a href='#'>تعديل 4</a></li>
<li class="color-12"><a href='#'>تعديل 5</a></li>
<li class="color-13"><a href='#'>تعديل 6</a></li>
<li class="color-14"><a href='#'>تعديل 7</a></li>
<li class="color-15"><a href='#'>تعديل 6</a></li>
<li class="color-16"><a href='#'>تعديل 7</a></li>
</div>
3- قائمة عائمة منسدلة :
- طريقة التركيب :
1- ادخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم </head>
3- ضع كود القائمة تحت الوسم .
الـــكـــود
<style>
#wctopdropcont{
width:100%;
height:40px;
display:block;
padding:0;
margin:0 0 22px 0;
z-index:100;
top:0px;
right:0px;
position:fixed;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
background:#180000;
}
#wctopdropnav{
float:right;
width:700px;
height:40px;
display:block;
padding:0;
margin-right:40px;
}
#wctopdropnav ul{
float:right;
margin:0;
padding:0;
}
#wctopdropnav li{
float:right;
list-style:none;
line-height:40px;
margin:0;
padding:0
background:#180000;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#fff;
display:block;
margin:0;
font:16px georgia, verdana;
padding:10px;
text-decoration:none;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color:#fff;
padding:10px;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 12px;
background:#180000;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #fff;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top, rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, right top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li ul{
z-index:9999;
position:absolute;
right:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
right:auto
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#wctopdropsoc {
float:left;
width:220px;
padding:0px 0px ;
margin:9px 0px 0px 10px;
}
#wctopdropsoc img
{
margin-right:5px;
margin-top:-2px;
height:26px;
border:none;
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<ul>
<li><a href=''>الرئيسية</a></li>
<li><a href='#'>عن المدونة</a></li>
<li><a href='#'>أدوات المدونة</a>
<ul>
<li><a href='#'>تعديل 1</a></li>
<li><a href='#'>تعديل 2</a></li>
<li><a href='#'>تعديل 3</a></li>
<li><a href='#'>تعديل 4</a></li>
</ul>
</li>
<li><a href='#'>أقسام المدونة</a>
<ul>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
<li><a href='#'>تعديل</a></li>
</ul>
</li>
<li><a href='#'>اتصل بنا</a>
</li>
</ul>
</div>
<div id='wctopdropsoc'>
<a href='http://feeds.feedburner.com/blogspot/lxWRa' target='_blank'><img alt='Subcribe to our RSS feeds' src='http://2.bp.blogspot.com/-ea9ILzszTF0/UR3ySvlxd0I/AAAAAAAABMQ/4QBrWHbt0FU/s1600/feed.png'/></a>
<a href='http://www.facebook.com/هوم بلوجر' target='_blank'><img alt='Join Us on Facebook' src='http://1.bp.blogspot.com/-3wW_EmAR24w/UR3tVFL5fFI/AAAAAAAABLc/RMS76XM5sK8/s1600/fbb.png'/></a>
<a href='https://twitter.com/homeblog7' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-wSCdvgK8Ctw/UR3tWusvgyI/AAAAAAAABL0/FY3nUvdlJx0/s1600/tww.png'/></a>
<a href='https://plus.google.com/115831608850519879364' target='_blank'><img alt='Add to Circles' src='http://1.bp.blogspot.com/-YWI0K2Ebh2Q/UR3tVS1gDhI/AAAAAAAABLk/8hYaD0Yur_k/s1600/gpp.png'/></a> <a href='http://blog4temp.com' title='Translated by CBT soft' style='font-size:8px;'>custom blogger templates</a>
</div>
</div>
4- قائمة الفيس بوك عائمة :
- طريقة التركيب :
1- ادخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم </head>
3- ضع كود القائمة تحت الوسم .
الـــكـــود
<style>
.wcfloat-icons
{
height:50px;
width:100%;
top:0px;
position:fixed;
z-index:100000;
margin-right:auto;
margin-left:auto;
background:#3b5998;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
}
.wcfloat-icons li
{
margin-top:auto;
margin-bottom:auto;
float:right;
padding:2px;
list-style:none;
}
.wcfloat-icons li a
{
padding:5px;
color:#222222;
font:14px verdana;
text-decoration:none;
border-radius:15px;
color:#dcdcdc;
}
.wcfloat-icons li a:hover
{
background:#8b9dc3;
color:#ffffff;
}
.wcfloat-icons a
{
font:30px georgia, verdana;
color:#ffffff;
text-decoration:none;
}
.wcfloat-icons a:hover
{
color:#ffffff;
}
#search {
float:left;
width:230px;
padding:0px 0px ;
margin-top:auto;
margin-bottom:auto;
margin-left:50px;
background:#fff;
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size:12px;
}
#s {
width:180px;
margin:0;
padding:3px 5px;
height:18px;
color:#444;
background:#fff;
float:right;
border:none;
display:inline;
}
input#searchsubmit{
background:url('http://2.bp.blogspot.com/-hTiuEA1yMzQ/UTsummbkmMI/AAAAAAAABbs/CyyGd92XiVM/s1600/searchbu.png');
float:left;
display:inline;
margin:2px 0px 0px 5px;
height:21px;
width:22px;
color:#fff;
border:none;
text-indent:-9999px;
.font-size: 0;
.display:block;
.line-height: 0;
}
</style>
<div class='wcfloat-icons'>
<div class='fbook-menu'>
<ul>
<li><a href='#'>الرئيسية</a></li>
<li> <a href='#'>تعديل 1</a></li>
<li><a href='#'>تعديل 2</a></li>
<li><a href='#'>عن المدونة</a></li>
<li><a href='#'>اتصل بنا</a> <a href='http://homeblog7.blogspot.com' title='Translated by هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a></li>
</ul>
</div>
<div id='search'>
<form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='searchsubmit' type='submit' value='search'/>
</form>
</div>
</div>
5- قائمة الأكورديون :
- طريقة التركيب :
1- أدخل إلى مدونتك | ثم أختر تخطيط | ثم إضافة أداة HTML/JavaScript
الــكــود
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
$('li.title a').click(function(e){
var dropDown = $(this).parent().next();
$('.downlistie').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});</script>
<style>
ul.container{
width:275px;
padding:5px;
}
li.accoi-menu{
list-style:none;
padding:1px;
width:100%;}
li.title
{
border-radius:5px;
background:#333333;
list-style:none;
padding:5px;
}
li.title a{
color:#ffffff;
display:block;
padding:5px;
font:14px georgia, verdana;
overflow:hidden;
position:relative;
width:100%;
text-decoration:none;
}
.downlistie{
list-style:none;
display:none;
padding-top:5px;
width:100%;
}
.downlistie li{
list-style:none;
border-right:1px solid #dcdcdc;
border-left:1px solid #dcdcdc;
border-bottom:1px solid #dcdcdc;
border-radius:5px;
margin:5px ;
padding:4px 10px;
}
.downlistie li:hover {
background:orange;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333333;
}
</style>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >بلوجر</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >تعديل</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >تعديل</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >خدماتنا</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >قوالب بلوجر</a></li>
<li><a href="#">دروس بلوجر</a></li>
<li><a href="#">سيو</a></li>
<li><a href="#">إضافات بلوجر</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >تعديل</a></li>
<li class="downlistie">
<ul>
<li><a href="#" >عن المدونة</a></li>
<li><a href="#">اتصل بنا</a></li>
<li><a href="#">تعديل</a></li>
<li><a href="#">تعديل</a> <a href='homeblog7.blogspot.com' title='Translated by هوم بلوجر' style='font-size:8px;'>هوم بلوجر</a></li>
</ul></li></ul></li>
</ul>
0 Comments:
إرسال تعليق