اضافة قائمة جانبيه رائعه لمدونات بلوجر #2 - عالم المدون

الثلاثاء، 11 يوليو، 2017

اضافة قائمة جانبيه رائعه لمدونات بلوجر #2

كما عرضنا لكم من قبل موضوعن اضافة قائمة جانبيه رائعه لمدونات بلوجر #1 اليوم اعرض لكم موضوع جديد عن اضافة قائمة جانبيه رائعه لمدونات بلوجر #2 اضافة اضافة أعجبت الكثيرون من متابعى المدونة لذلك اليوم أحببت أن أشارك معك تصميم جديد لهذه الأضافة سوف تعجبك الكثيرون أيضا ولكن لا أطيل عليكم يمكنك مشاهد مميزات الإضافة من الرابط فى الأسف وايضا تحميل الأكواد الخاص بها .




معاينة الإضافة وتحميل الأكواد


تحميل الأكواد لمن لايستطيع نسخ الأكواد ولأى شخص يفضل التحميل .


صورة من الإضافة



شرح التركيب



  • كما نقول لكم دائما عليك قبل عمل اى تعدلات على مدونتك ونجنب حدوث اى مشاكل فى التركيب عليك حفظ نسخة من قالب مدونتك .
  • قم بالبحث عن هذا الوسم]]></b:skin>فى مدونتك ثم قم بوضع الكود التالى فوقه .


.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:9999999999999999999;bottom:0;width:300px;right:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{right:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}


  • الأن الكود الثانى سوف تقوم بالبحث عن هذه الوسم/headثم تقوم بوضع هذا الكود فوقه


<script>
/* <![CDATA[ */    
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
$(function() {
    var ink, d, x, y;
    $(".ripple").click(function(e) {
        if ($(this).find(".ink").length === 0) {
            $(this).prepend("<span class='ink'></span>");
        }
        ink = $(this).find(".ink");
        ink.removeClass("animate");
        if (!ink.height() && !ink.width()) {
            d = Math.max($(this).outerWidth(), $(this).outerHeight());
            ink.css({
                height: d,
                width: d
            });
        }
        x = e.pageX - $(this).offset().left - ink.width() / 2;
        y = e.pageY - $(this).offset().top - ink.height() / 2;
        ink.css({
            top: y + 'px',
            left: x + 'px'
        }).addClass("animate");
    });
});
/* ]]> */
</script>


  • الأن أبحث عن هذا الوسم<bodyثم قم بوضع الكود التالى أسفله


<div class='darkshadow'/>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://2.bp.blogspot.com/-GsQfvTESyZA/Vz_pQX3IkmI/AAAAAAAAD7A/z4uqNAtlPmMZhho4wbUcyMOFfYckJUQ7ACLcB/s1600/noimage.png' title='Admin'/>
<h3>عالم المدون</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'/></a>
<p>أكتب الأيميل هنا </p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>جوجل بلس</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>فيسبوك</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>تويتر</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' expr:title='data:blog.title' href='/' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> الصفحة الرئيسية</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'/> عالم المدون</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>قوالب بلوجر</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>أضافات بلوجر</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>حصريات</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'/> اخبار</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'/> أعمال</span></a></li>
<h2>ملحقات التصميم</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'/> الأدوات</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'/> ملفات جاهزة</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'/> تحميل</span></a></li>
</ul>
</div>
</nav>


  • فى هذا الكود سوف تقوم بالتعديل على اللأقسام كما تريده بالشكل الذى تريده وايضا تعديل الروابط وتعديل كل شئ تكما تريد 
  • .الأن مع أخر كود فى الإضافة سوف يكون عليك وضعه فى المكان الذى تريده لأن هذا الكود هو الخاص بزر القائمة والمكان الذى سوف تضعه فية هذا الكود سوف يظهر به زر القائمة .


<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'/></a>


  • بعد ذلك سوف تقوم بحفظ القالب ومبروك عليك الإضافة الجديده ، اضافة قائمة جانبيه رائعه لمدونات بلوجر #2 .


هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

شارك الموضوع ليستفيد الجميع

مواضيع مهمه ايضا سوف تعجبك

10 تعليق على موضوع : اضافة قائمة جانبيه رائعه لمدونات بلوجر #2

السلام عليكم اخي
فى احد المواضيع طلب منك احد متابعي المدونة
فضلا وليس امرا ان تطرح قالبك فى موضوع للاعضاء
أنا ايظا اريد قالب مدونتك بهذا الشكل اظن انك
أضفت عليه بعض اللمسات الجميلة فكما نعلم لو كانت
لدي طريقة الدفع لما ترددة لحظة واحدة فى شرائه منك

وعليكم السلام ورحمة الله وبركاته
بأذن الله سوف أضعه قريبا
ولكن أنظر فقط العمل على نسخة جديد من القالب وسوف أضعه هذه النسخة

اخى اريد تركيب التأثير الموجود فى القائمة العلويه فى موقع خمسات ..
عند النزول والصعود

ههه لقد قمت بالفعل بكتابت الموضوع عن هذا الأمر :-d :-d :-d
سوف تجده غدا بأذن الله على المدونة :)

كما تعودنا عليك قيسي ويب او عالم مدون دئما تبهرنا بالجديد ولا تتبخل حتى بقالبك حتى الحالي
وامل ان لا تتيح تحميل قالب عالم مدون الا بعد تغيره او تحديثة لتكون الاميز
استمر عزيزي وللأمام دائما (h) (y)

ملاحضة المعاينة لاتوجد بها الاضافه

شكرا لك على التنبية تم تعديل الرابط

شكرا لك على دعم اخى الفاضل

ممكن التأثير الخاص بمدونتك وتاثير التكبير على الصور و تاثير اظهار قسم التدوينه

يسعدنا تفاعلكم بالتعليق ولكن نرجو منكم أن يكون خاص بالموضوع
الأبتساماتأخفاء الأبتسامات

جميع الحقوق محفوظة لـ عالم المدون | قوالب بلوجر,اضافات بلوجر, دروس وشروحات بلوجر