skip to main |
skip to sidebar
اضافة شريط او قائمة مدونة عرب ويب الا فضل لكم
قائمة مدونة عرب ويب الاحترافية لبلوجر |BLOGGER ADDITIONS|
القائمة احترافية تنفع للمدونات الاحترافية والتقنية لان
القائمة انيقة وبتقنية CSS
اتمنى ان تعجبكم الاداة اترككم مع المعاينة لتلاحظوها اكثر
- اذهب الى لوحة التحكم
- ثم القالب
- ثم تحرير HTML
- ثم اضف الكود التالي تحت (بعده) <head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700|Electrolize' rel='stylesheet' type='text/css'/>
<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>
<style>
/* Header */
.topwrapper {width:998px;margin:50px auto 0;padding:0px;box-shadow:0 0 3px 0px #BBB;}
#header {
position: relative;
top: 60px;
padding: 5px 10px;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 1%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255, 255, 255, 0)), color-stop(1%,rgba(255, 255, 255, 0.01)), color-stop(50%,rgba(255, 255, 255, 0.5)), color-stop(100%,rgba(255, 255, 255, 0)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.01) 1%,rgba(255, 255, 255, 0.5) 50%,rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );}
#header-wrap{background:#FFF url(http://im58.gulfup.com/zioUaG.jpg) no-repeat 0;background-size:cover;padding:10px;margin:auto 0;height:280px;position:relative;}
.innerhm {min-height: 297.9px ;position: relative;width: 995px;margin-right: -10px;margin-top: -54px;background:rgba(0,0,0,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMt-PTFLoIeVLfRgmaclj_XCgLIIUEzM8GAxkFVLS4pECmj8EKjIqx54wUqXdShH-c6Qkgd1DROzqyYi4N5FRiVTVZkfSN88vY-nNeLTCSS-e8n-kdOI-VN6Azt1tLH49zo40Zc3_X5nk/s1600/pattren.png) repeat;}
#header-wrap h1{color:#ECF0F1;text-shadow:0px 3px 1px #BDC3C7;font-size:45px;text-align:center;text-transform:uppercase;line-height:20px;}
#header-wrap h1 a{color:#ECF0F1;text-shadow:0px 3px 1px #BDC3C7;}
#header h1 a:hover{text-shadow:0px 2px 1px #AEB4B8;}
#header h1 a:active{text-shadow:0px 0px 1px #AEB4B8;}
#header-wrap .description{margin:0;padding:0;font-size:12px;color:#FFF;text-align:center;text-transform:uppercase;text-shadow:0 0 1px #FFF;}
#header-wrap img{margin:0;padding:0;}
/* Outer Wrapper */
#outer-wrapper{width:990px;margin:10px auto;padding:4px;background:#FFF;border: 1px solid #ddd;}
#main-wrap{width:670px;float:right;}
#sidebar-wrap {width:320px;float:left;}
/* Headings */
h1, h2, h3, h4, h5{font-weight:700;}
h1{font-size:16px;}
h2{font-size:14px;}
h3{font-size:12px;}
h4{font-size:11px;}
.infiniteCarousel ul li a img {
-webkit-transition: 0.5s ease-out;
-moz-transition: 0.5s ease-out;
-o-transition: 0.5s ease-out;
transition: all .5s ease-out;
}
.infiniteCarousel ul li a img:hover {
opacity: 0.8;}
.plus-menu{float:left;position:absolute;font-size:24px;color:#eee;width:50px;text-align:center;top:0;left:0;padding:5.3px 0 ;cursor:pointer;}
.plus-menu:hover {color:#CBE951;background: #444;transition: all 0.3s linear;}
#search,.box-plusmenu {background: #F5F5F5;text-align:center}
#search-form {color:gray;width:50%;padding:6px 10px 6px 70px;font:14px Electrolize,ge_dinar_oneregular;transition: all 0.2s linear 0s;margin:0 0 10px;border:1px solid #ccc;border-radius:2px}
.search-button,.search-button:hover{background-color:#E74C3C;width:60px;padding:2px 1px;margin:7px -63px 0 0;top:4px;font-size:13px;cursor:pointer;border:none;position:relative;}
#search-form:hover{border:1px solid #aaa}
#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}
#box,#box2{display:none;position:relative}
.close,.close2{float:left;position:absolute;font-size:18px;color:red;width:45px;text-align:center;top:0;left:0;padding:13px 0 10px;cursor:pointer}
.search-icon{background:rgba(207, 55, 39, 0.84);float:right;text-decoration:none;font-size:15px;font-weight:700;line-height: 100%;vertical-align: middle;text-align: center;position:absolute;top:0px;left:50px;cursor:pointer;color:#fff;padding: 16px;}
.search-icon:hover {color:#DDDBDA;background: #444;transition: all 0.3s linear;}
.content-box2{color:#555;font:14px Electrolize,ge_dinar_oneregular;margin:0 auto;text-align:right;width:100%;overflow:hidden;padding:10px}
#menu-wrapper{height:47px;width:100%;position:relative}
#nav_header{background:#E74C3C;margin:9px auto 10px;position:relative;-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);box-shadow:0 0 2px rgba(0, 0, 0, 0.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin-top: -10px;}
#nav_header ul{margin:0;padding:0;}
#nav_header > ul > li{float:right;margin:0 0;list-style:none;position:relative;right:203px;font-family: Electrolize,ge_dinar_oneregular;}
#nav_header > ul > li > a{color:#fff;padding:14px 24px;display:block;position:relative;border-left:1px solid #D64839;}
#nav_header > ul > li > .selected:after{content:"";border-bottom:3px solid #483353;position:absolute;bottom:0px;z-index:100;width:100%;right:0;}
#nav_header > ul > li > a:hover{color:#F3F0F0;background: #D64839;transition: all 0.3s linear;}
#nav_header > ul > li > .selected{background:#6f5499;color:#ffffff;}
#nav_header li span{position:relative;top:2px;padding-left:5px;}
#nav_header li:hover ul.dropdown{display:block;}
ul.dropdown{position:absolute;top:48px;background:#fff;width:130px;z-index:10;border:1px solid #ddd;padding:6px 0!important;display:none;}
ul.dropdown li{margin:0 0;list-style:none;}
ul.dropdown a{border:0;padding:7px;margin:5px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;transition: all 0.21s;}
ul.dropdown a:hover{background:#D64839;color:#EEEDED;}
ul.dropdown:before{content:"";position:absolute;top:-14px;right:0px;width:100%;height:18px;}
ul.dropdown:after{position:absolute;top:-13px;right:3px;content:"";border:7px solid #fff;border-right-color:transparent;border-top-color:transparent;border-left-color:transparent;}
.fa-lightbulb-o:before {content: "\f0eb";position: absolute;bottom: 0;right: -1px;font-size: 25px;line-height: 1.4em;padding-left: 10px;padding-bottom: 4px;padding-right: 10px;padding-top: 5px;color:#fff;background:#E74C3C;border-bottom-right-radius: 3px;}
.fa-lightbulb-o:hover{color: #DD4637;}
/* CSS Menu Top */
#menutop{width:100%;max-width: 998px;margin:-82px auto 0;background:rgba(255, 255, 255, 1);position: fixed;z-index: 92;opacity: 0.98;margin-right: -0px;border-bottom-right-radius: 3px;box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16),inset 0 -1px 0 #E7E7E7;border-bottom-left-radius: 3px;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:right;display:inline;position:relative;font-family:Electrolize,ge_ss_threeregular;font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 16px;text-decoration:none;color:#6b6c71;}
#menutop ul li:hover a{color:#7C7777;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;right:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#666}
#menutop ul li ul li a{color:#666;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#444;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:65px;transition:all 0.2s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 14px 0 27px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;left:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;left:10px;}
#menutop ul li ul li a:hover{background:rgba(231, 76, 60, 0.93);color:#fff;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{text-align:center;color:#666;float:left;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#fff;}
#menutop li .facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#666;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover{background:#3976F8;color:#fff;}
#menutop li.twitter:hover{background:#57b5e2;color:#fff;}
#menutop li.youtube:hover{background:#e74c3c;color:#fff;}
#menutop li.googleplus:hover{background:#FA6B5C;color:#fff;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#fff;}
#menutop a ul li a:hover, #menutop a ul li.active a{color: #FF4444;
}
#photo-cover{
background: rgba(41, 49, 65, 0.78);
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .07);
border: solid 4px #FFFFFF;
display: block;
right: 4px;
bottom:-40px;
position: absolute; height: 169px;
width:161px;
overflow:hidden;
z-index:2;
padding-left: 20px;
padding-right: 10px;
padding-bottom: 10px;
}
.mygallery{
position:relative;
height: 100%;
width:100%;
margin-right: -57px;
}
.mygallery img{
margin-bottom:5px;
padding: 0px;
border: 0px;
outline: 0px;
height: 188px;
width:280px;
}
</style>
- ثم اضف الكود التالي تحت (بعد) <body>
<div class='topwrapper'>
<nav id='menutop'>
<input type='checkbox'/>
<label></label>
<ul>
<li><a class='active' href='/' title='الرئيسية'><i class='fa fa-lightbulb-o'></i></a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'><i class='fa fa-sitemap'></i>فهرس التدوينات </a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'><i class='fa fa-cog'></i>إتفاقية الإستخدام</a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'><i class='fa fa-users'></i>سجل الزوار </a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'><i class='fa fa-laptop'></i>ننصحكم</a></li>
<li><a class='dutt' href='#'><i class='fa fa-link'></i>روابط قد تهمك</a>
<ul class='menux'>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'>محــول الأكـــــواد </a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'>ألــــوان فــــلات </a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'>التبادل الإعلاني</a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'>أعلـن بالمـدونـة </a></li>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'>حماية الحقوق</a></li>
</ul>
</li>
<li><a class='dutt' href='#'><i class='fa fa-inbox'></i>إخترناها لكم</a>
<ul class='menux'>
<li><a href='http://mlokweb.blogspot.com/' target='_blank'>هدايا عديدة</a></li>
<
'
li><a href='http://mlokweb.blogspot.com/'>كورسات متنوعة</a></li>
<li><a href='http://www.ar1web.com/search/label/%D8%A7%D8%AE%D8%A8%D8%A7%D8%B1%20%D9%85%D9%84%D9%87%D9%85%D8%A9'>اخبار ملهمة</a></li>
<li><a href='http://www.ar1web.com/search/label/%D9%85%D8%B9%D9%84%D9%88%D9%85%D8%A7%D8%AA%20%D9%85%D9%84%D9%87%D9%85%D8%A9'>معلومات ملهمة</a></li>
</ul>
</li>
<li class='sorting-01 facebook'><a href='http://www.facebook.com/arabe1web' target='_blank'><i class='fa fa-facebook fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/u/0/+iHussam' traget='_blank'><i class='fa fa-google-plus fa-lg'></i><span class='inv'></span></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/channel/UCB_Ua7MEI5J6dUNedObHukA' traget='_blank'><i class='fa fa-youtube fa-lg'></i><span class='inv'></span></a></li>
</ul>
</nav>
</div>
- اخيرا قم بتغيير الروابط والاسماء
- اي مشكلة في الاداة قم بطرحها في التعليقات وسيتم حل المشكلة
- اذا كنت تتقن لغة HTML/JAVASCRIPT يمكنك التعديل عليها بحرية
اعلن هنا