[حصريا] إضافة قائمة عرب ويب الاحترافية لمدونات بلوجر

الكاتب بتاريخ عدد التعليقات : 8
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في درس جديد وخاص ببلوجر وبالتحديد اضافات بلوجر اليوم لدينا اضافة رائعة وهي قائمة لمدونات بلوجر وليست اي قائمة انها قائمة عرب ويب الاحترافية القائمة التي يقتل المدونين من اجلها ههههههه هذا تعبير زيادة عن اللزوم طبعا كما كنا دائما القائمة حصرية على المدونة فقط وليست موجودة في اي مدونة او موقع اخر حتى موقع عرب ويب اذا ندخل الى شرح اضافة القائمة بسرعة طبعا اذا كان لديك قائمة قديمة قم بحذف اكوادها الhtml والcss لكي لا تختلط الاكواد مع بعضها.
طريقة التركيب
ضع الكود التالي فوق ]]></b:skin>
/* CSS Menu Top TH3GEEKWEB3  */ #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="مع السلامة">&#215;</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://th3geekweb3.blogspot.com/p/blog-page_52.html' target='_blank'><i class='fa fa-sitemap'/>فهرس التدوينات </a></li>
  <li><a href='http://th3geekweb3.blogspot.com/p/blog-page_76.html' target='_blank'><i class='fa fa-cog'/>إتفاقية الإستخدام</a></li>
  <li><a href='http://th3geekweb3.blogspot.com/p/blog-page_9.html' target='_blank'><i class='fa fa-users'/>سجل الزوار </a></li>
  <li><a href='http://th3geekweb3.blogspot.com/p/blog-page_24.html' 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://th3geekweb3.blogspot.com/p/blog-page_27.html' target='_blank'>محــول الأكـــــواد </a></li>
  <li><a href='http://th3geekweb3.blogspot.com/2014/09/blog-post_94.html' target='_blank'>التبادل الإعلاني</a></li>
  <li><a href='http://th3geekweb3.blogspot.com/p/1-2-3-4-125-125-5-5-6-7-httpwww.html' target='_blank'>أعلـن بالمـدونـة </a></li>
</ul>
</li>
<li class='sorting-01 facebook'><a href='http://www.facebook.com/th3geekweb3' target='_blank'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
  <li class='sorting-02 twitter'><a href='twitter.com/almahmod2013'><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/117857319584578115964/posts' 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/user/aboyazanllm3lomat' traget='_blank'><i class='fa fa-youtube fa-lg'/><span class='inv'/>
</a></li>
<li class='buttonalert' onclick='Alert.render(&apos;. التدوينة القادمة سوف تكون قالب غير محدد&apos;)' text='كلمة الفريق'><i class='fa fa-info-circle fa-lg'/></li>
</ul>
</nav>

8 تعليقات على موضوع " [حصريا] إضافة قائمة عرب ويب الاحترافية لمدونات بلوجر "

السلام عليكم اخي الكود غير موجود

السلام عليكم ^^ ممكن تقترح عليا او تقولي اين يمكنني ان أضع كود HTML !!

وعليكم السلام يمكنك وضع القائمة فوق الهيدر header-wrapper او اعطيني رابط معاينة للقالب لكي اعطيك المكان بالتحديد او راسلني على الفيس fb.com/3mran.al7ariri :)

شكرا على الإضافة الرائعة أخي عمران ;) ;) ;) :-bd :-bd :-bd

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء