أعلن هنا
قائمة مدونة عرب ويب الاحترافية لبلوجر
قائمة مدونة عرب ويب الاحترافية لبلوجر
القائمة احترافية تنفع للمدونات الاحترافية والتقنية لان
القائمة انيقة وبتقنية 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'/>
- ثم اضف الكود التالي فوق </head>
<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/AVvXsEgqci1mIjlhUPwymAyqVb-V205HEAL5zsfdxyVItfG3mxtAK8IvsU7XsXIJywW4V2gikukPxO3HLJNvtFgZhL6TiXYHMEBwEbbdS_P0l65vsA9l66m66ngnXLfKarPo1haQTzLw_qlyGZY/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://www.dev1team.com/p/sitemap.html' target='_blank'><i class='fa fa-sitemap'></i>فهرس التدوينات </a></li><li><a href='http://www.dev1team.com/p/terms.html' target='_blank'><i class='fa fa-cog'></i>إتفاقية الإستخدام</a></li><li><a href='http://www.dev1team.com/p/blog-page_7.html' target='_blank'><i class='fa fa-users'></i>سجل الزوار </a></li><li><a href='http://www.dev1team.com/p/blog-page_81.html' 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://www.dev1team.com/p/convert-codes-google-adsense.html' target='_blank'>محــول الأكـــــواد </a></li><li><a href='http://www.dev1team.com/p/colorflat.html' target='_blank'>ألــــوان فــــلات </a></li><li><a href='http://www.dev1team.com/p/blog-page_13.html' target='_blank'>التبادل الإعلاني</a></li><li><a href='http://ads.dev1team.com/' target='_blank'>أعلـن بالمـدونـة </a></li><li><a href='http://copyright.dev1team.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://www.ar1web.com/p/blog-page_16.html' target='_blank'>هدايا عديدة</a></li><li><a href='http://www.dev1team.com/search/label/%D9%83%D9%88%D8%B1%D8%B3%D8%A7%D8%AA'>كورسات متنوعة</a></li><li><a href='http://www.dev1team.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.dev1team.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/dev9team' 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/' 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/' traget='_blank'><i class='fa fa-youtube fa-lg'></i><span class='inv'></span></a></li></ul></nav></div>
- اخيرا قم بتغيير الروابط والاسماء
- اي مشكلة في الاداة قم بطرحها في التعليقات وسيتم حل المشكلة
- اذا كنت تتقن لغة HTML/JAVASCRIPT يمكنك التعديل عليها بحرية
- اخيرا علق ولو بكلمة واحدة للتحفيز
بضغطة زر تشارك الفائدة وتدعم المــدونـــة
انضم الينا في الفيسبوك
تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
الكاتب
الكاتب : معاذ بولهدود
معاذ بولهدود 16 سنة ، مغربي مهووس بجديد الأنترنيت و كدلك تكنولوجيا المعلوميات و كذلك مصمم قوالب حر .
ليست هناك تعليقات:
إرسال تعليق