طريقة إضافة قائمة جانبية منبثقة على مدونات بلوجر بشكل إحترافية

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

طريقة التركيب :

أولا إبحث عن وسم ]]></b:skin> ثم ألصق قبله الكود التالي :

.toggleMenu{margin-left: -12px;color:#fff;padding:22px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}.dropdowns{;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}

بعدها قم بالبحث عن وسم <body> أو <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitmIZ0fl3fX9n-P3CugvVB7bmxPkLsLFTCJzXggMw7wautsctwmmRXDh-9KZZ7mGQk4CNNIcp3G6pLyFJ8d1hCSx7yKotfdNbfCEZ_lpto8JaEKww6gj0oC2ob0CGtGzfm3naRH6_5yVA/s1600/noimage.png' title='Admin'/><h3>اَمني8</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'/></a>
<p> support@amni8.com </p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'><a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'/></a><p> support@amni8.com </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'><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'><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'/>
</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'/>
<li class='sub-menu'><a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'/> اَمني8</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'><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'><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'><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'/>
</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'/>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'/> مشاريع</span></a></li>
<h2><h2>تواصل معي</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'/>
<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'/><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'/>
<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>
</ul></div></nav>

بعدها إبحث عن /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> و ستظهر النتيجة بإذن من الله سبحانه و تعالى .

اسمعني اون لاين

طريقة إضافة قائمة جانبية منبثقة على مدونات بلوجر بشكل إحترافية

طريقة التركيب :

أولا إبحث عن وسم ]]></b:skin> ثم ألصق قبله الكود التالي :

بعدها قم بالبحث عن وسم <body> أو <body ثم ضع الكود التالي أسفله 'بعده' :

بعدها إبحث عن /head و ضع الكود التالي قبله

Default

لتحسين جودة صورك على إنستغرام وتجنب تقليل دقتها تلقائيًا