| عماد عادل |
07-27-2012 10:21 PM |
حصريا قائمة ماشابل المنسدلة للبلوجر
السلام عليكم ورحمة الله وبركاته ... صح شريبتكم ومرحبا بكم في هذا الموضوع الحصري في النت العربي في هذا الموضوع أقدم لكم أداة يبحث عنها الجميع عربا وعجما إنها القائمة المنسدلة الموجود في موقع Mashable المشهور هذه الاضافة لن تجدها مجانا على النت لكن عندنا فقط مجانا وللبلوجر خصيصا ... هذه الاضافة هي نسخة انجليزية للاسف لكن بعد ايام سوف نصدر منها نسخة عربية تحمل كامل حقوق المعهد وكل مرة مع اصدار جديد نضيف اليها ميزات عديدة حتى تصبح افضل من النسخة الاصلية
للمعاينة : http://tutorials9x.blogspot.com
مميزات الاضافة :- القائمة المنسدلة مصنوعة من الcss وال html فقط :showoff:
- القائمة المنسدلة متوفرة ب6 الوان :strongly:
- لا توجد جافا ولا صور :ok:
- الاضافة متوافقة مع كل المتصفحات :clap:
كيفية تركيب القائمة المنسدلة :
اول شئ ندخل الى لوحة التحكم ومن ثم القالب ومن ثم تعديل او تحرير html ونبحث عن ]]></b:skin> ونضيف قبلها مباشرة كود الcss التالي :
كود بلغة HTML:
/* MBL Mashable Blue Menu Ends*/
div.mashmenu {
/* colors */
background: none repeat scroll 0 0 #F3F6F9; /* color of the nav */
border-bottom: 1px solid #DCE5EE; /* border bottom : no hover color */
border-top: 1px solid white;
color:black;
}
div.mashmenu div.fnav {
/* colors */
border:2px solid #F3F6F9; /* border top,left,right : no hover color */
border-bottom:none;
}
div.mashmenu div.fnav:hover{
/* colors */
border:2px solid #0054a2; /* border top,left,right : hover color */
border-bottom:none;
background:white;
}
div.mashmenu div.fnav a.flink {
/* colors */
color:#0054a2;
}
div.mashmenu div.fnav div.allContent {
/* colors */
background: none repeat scroll 0 0 #F3F6F9; /* color of the nav */
border:2px solid #0054a2; /* border bottom,left,right : hover color */
border-top:none;
color:black;
}
div.mashmenu div.fnav div.allContent a.slink {
/* colors */
color:#0054a2;
}
div.mashmenu div.fnav div.allContent a.slink:hover {
/* colors */
background-color: #5E88B4;
color:white;
}
div.mashmenu div.fnav div.snav:hover div.insideContent{
/* colors */
background: white;
border-left:1px solid white;
}
div.mashmenu div.fnav div.insideContent a {
/* colors */
color:#0054a2;
border-bottom:1px solid #5E88B4; /* border bottom : hover color */
}
div.mashmenu div.fnav div.insideContent a span:hover{
/* colors */
background-color: #5E88B4;
color:white;
}
div.mashmenu div.feat a.flink {
/* colors */
color:#0054a2;
}
div.mashmenu div.feat a.flink:hover{
/* colors */
background-color: #5E88B4;
color:white;
border:none;
}
/* ===== MBL Mashable Blue Menu Ends======= */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
/* ====================*/
div.mashmenu a { text-decoration:none; }
div.mashmenu img { border:2px solid white; }
div.mashmenu div.fnav div.allContent{ display:none; }
div.mashmenu div.fnav div.allContent div.insideContent{ display:none; }
div.mashmenu {
font-family: "Arial", "Verdana", sans-serif;
font-size:13px;
width: 100%;
position: relative;
padding: 3px 0 0;
}
div.mashmenu div.fnav {
margin:0px 0px 0px 3px;
display:inline-block;
position:relative;
/* css3 */
-moz-border-radius:4px 4px 0px 0px;
-webkit-border-radius:4px 4px 0px 0px;
border-radius:4px 4px 0px 0px;
}
div.mashmenu div.fnav a.flink {
padding:10px;
display:block;
}
div.mashmenu div.fnav div.allContent {
position:absolute;
top:33px;
left:-2px;
max-width:550px;
max-height:250px;
overflow:hidden;
/* css3 */
-moz-border-radius:0px 0px 4px 4px;
-webkit-border-radius:0px 0px 4px 4px;
border-radius:0px 0px 4px 4px;
}
div.mashmenu div.fnav div.allContent:hover{
width:550px;
height:246px;
}
div.mashmenu div.fnav:hover div.allContent {
display:block;
}
div.mashmenu div.fnav div.allContent a.slink { margin:1px 0px 1px 1px;
padding:10px;
display:block;
width:140px;
}
div.mashmenu div.fnav div.snav:hover div.insideContent{
display:block;
position:absolute;
top:0px;
left:165px;
width:410px;
height:100%;
padding-left:10px;
}
div.mashmenu div.fnav div.insideContent span.featured ,
div.mashmenu div.fnav div.insideContent a {
width:365px;
float:left;
overflow:hidden;
padding:5px 0px;
position:relative;
}
div.mashmenu div.fnav div.insideContent a img {
float:left;
width:100px;
height:60px;
padding-right:10px;
}
div.mashmenu div.fnav div.insideContent a span {
position:absolute;
top:20px;
left:120px;
padding:3px 3px ;
}
div.mashmenu div.feat {
float:right;
border:none;
margin-right:10px;
margin-top:5px;
}
div.mashmenu div.feat:hover{
border:none;
}
div.mashmenu div.feat a{
float:left;
font-size:12px;
border:none;
padding:5px 5px;
}
div.mashmenu div.feat a:hover{
/* css3 */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
/* =================== */
والان تبحثون عن <div id='header-wrapper'> or <header> :
http://2.bp.blogspot.com/-3hGKb2rLR5...5U/s1600/1.gif
والان نبحث عن </b:section> </div> ونضيف قبلها الكود التالي :
http://3.bp.blogspot.com/-9nTdBU-D4H...fA/s1600/1.gif
كود بلغة HTML:
<div class="mashmenu">
<div class="fnav">
<a href="#" class="flink" >Social Media + </a>
<div class="allContent">
<div class="snav" >
<a href="#" class="slink" >All Social Media</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Facebook</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Google+</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Twitter</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Youtube</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
</div><!-- end allContent -->
</div><!-- end fnav1 -->
<div class="fnav">
<a href="#" class="flink" >Videos </a>
</div><!-- end fnav -->
<div class="feat">
<a>Featured : </a>
<a href="Your-FB" class="flink" >Facebook </a>
<a href="Your-G+" class="flink" >Google+ </a>
<a href="Your-RSS" class="flink" >RSS</a>
</div><!-- end fnav feat -->
</div><!--end mashmenu -->
ولاتنس القيام بالتغييرات التالية :
غير Write-Title-Of-Featured-Post-Here بعنوان الموضوع الذي تريده الظهور في القائمة المنسدلة
غير Your-Image بالصورة الرئيسية في الموضوع
غير Your-Post-URL برابط الموضوع / التدوينة
غير Your-FB, Your-G+ and Your-RSS بروابط حسباتاك في مواقع التواصل الاجتماعي ورابط الار اس اس الخ
وإذا رغبت في إضافة قائمة منسدلة أخرة وهذا ضروري أضف هذا الكود بعد <!-- end fnav1 -->
كود بلغة HTML:
<div class="fnav">
<a href="#" class="flink" >Social Media + </a>
<div class="allContent">
<div class="snav" >
<a href="#" class="slink" >All Social Media</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Facebook</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Google+</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Twitter</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
<div class="snav" >
<a href="#" class="slink" >Youtube</a>
<div class="insideContent">
<span class="featured" >Featured in Social Media</span>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
<a href="Your-Post-URL" >
<img src="Your-Image" alt="" />
<span>Write-Title-Of-Featured-Post-Here</span>
</a>
</div><!-- end insideContent -->
</div><!-- end snav -->
</div><!-- end allContent -->
</div><!-- end fnav1 -->
وأخيرا قم بحفظ قالبك
هذا الموضوع إهداء إلى غير مسجل .. كل الشكر إلى http://www.mybloggerlab.com على مشاركتهم لنا هذه الاضافة
:bloggerexp: :showoff: |
