فيسبوك
يوتوب
جوجل
تويتر
بلوجر
ووردبريس
مسابقات
محول الأكواد
التسميات:
مرحبا بكم اصدقائي متابعين مدونة مدهش ويب في درس جديد وخاص ببلوجر وبالتحديد اضافات بلوجر اليوم لدينا اضافة رائعة وهي قائمة لمدونات بلوجر وليست اي قائمة انها قائمة عرب ويب الاحترافية القائمة طبعا كما كنا دائما القائمة حصرية على المدونة فقط وليست موجودة في اي مدونة او موقع اخر حتى موقع عرب ويب اذا ندخل الى شرح اضافة القائمة بسرعة طبعا اذا كان لديك قائمة قديمة قم بحذف اكوادها الhtml والcss لكي لا تختلط الاكواد مع بعضها.
طريقة التركيب
ضع الكود التالي فوق ]]></b:skin>
/* CSS Menu Top modhich-web */ #menutop{margin-top: 0px;width:100%;max-width: 1010px;margin:-60px 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:#2980B9;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:#3b5998;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;}#menutop li.buttonalert {font-size:16px;color:#2980B9;padding:0 30px;cursor:pointer;margin-top: 12px;} .fa-lightbulb-o:before {content: "\f113";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: #2980B9;border-bottom-right-radius: 3px; }.fa-lightbulb-o:hover{color: #DD4637;}#dialogoverlay{display:none;opacity:.5;position:fixed;top:0px;left:0px;background:#000;width:100%;z-index:10;}#dialogbox{top:-300px;position:fixed;background:#222;width:350px;z-index:10;transition:all 400ms ease-in-out;}#dialogbox > div{background:#fff;margin:8px;text-align:center}#dialogbox > div > #dialogboxhead{position:relative;background:#2980B9;font-size:18px;font-weight:400;padding:10px;color:#fff;font-family:Electrolize,ge_ss_threeregular;text-transform:uppercase;}#dialogboxhead:before {top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(0,0,0,0);border-top-color:#2980B9;border-width:10px;margin-left:-10px;}#dialogbox > div > #dialogboxbody{background:#111;padding:20px;color:#e9e9e9;font-size:14px;font-weight:400;line-height:20px;font-family: Electrolize,ge_dinar_oneregular;}#dialogbox > div > #dialogboxfoot{background:#222;padding:0px;text-align:right;}#dialogbox > div > #dialogboxfoot button{position:absolute;top:-10px;right:-10px;background:#222;border:none;height:30px;width:30px;outline:none;color:#fff;line-height:25px;font:bold 16px Arial;text-align:center;cursor:pointer;border-radius:50%;}
قم بوضع الكود التالي فوق </body>
<script type='text/javascript'>//<![CDATA[function CustomAlert(){ this.render = function(dialog){ var winW = window.innerWidth; var winH = window.innerHeight; var dialogoverlay = document.getElementById('dialogoverlay'); var dialogbox = document.getElementById('dialogbox'); dialogoverlay.style.display = "block"; dialogoverlay.style.height = winH+"px"; dialogbox.style.left = (winW/2) - (350 * .5)+"px"; dialogbox.style.top = "150px"; dialogbox.style.display = "block"; document.getElementById('dialogboxhead').innerHTML = "التدوينة القادمة ؟"; document.getElementById('dialogboxbody').innerHTML = dialog; document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()" title="مع السلامة">×</button>'; } this.ok = function(){ document.getElementById('dialogbox').style.top = "-300px"; document.getElementById('dialogoverlay').style.display = "none"; }}var Alert = new CustomAlert();//]]></script>
قم بوضع كود html هذا في المكان الذي تريد وضع القائمة فيه
<div id='dialogoverlay'/>
<div id='dialogbox'>
<div>
<div id='dialogboxhead'/>
<div id='dialogboxbody'/>
<div id='dialogboxfoot'/>
</div>
</div>
<div class='clear'/>
<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a class='active' href='http://thgeekweb3.blogspot.com/' title='الرئيسية'><i class='fa fa-lightbulb-o'/></a></li>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'><i class='fa fa-sitemap'/>فهرس التدوينات </a></li>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'><i class='fa fa-cog'/>إتفاقية الإستخدام</a></li>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'><i class='fa fa-users'/>سجل الزوار </a></li>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'><i class='fa fa-laptop'/>ننصحكم</a></li>
<li><a class='dutt' href='/'><i class='fa fa-link'/>روابط قد تهمك</a>
<ul class='menux'>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'>محــول الأكـــــواد </a></li>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'>التبادل الإعلاني</a></li>
<li><a href='http://modhich-web.blogspot.com/' target='_blank'>أعلـن بالمـدونـة </a></li>
</ul>
</li>
<li class='sorting-01 facebook'><a href='http://www.facebook.com/modhhichweb' target='_blank'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='twitter.com/'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='https://plus.google.com/u/0/me?tab=jX' traget='_blank'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='https://www.youtube.com/' traget='_blank'><i class='fa fa-youtube fa-lg'/><span class='inv'/>
</a></li>
<li class='buttonalert' onclick='Alert.render('. التدوينة القادمة سوف تكون قالب غير محدد')' text='كلمة الفريق'><i class='fa fa-info-circle fa-lg'/></li>
</ul>
</nav>
مرسلة بواسطة
