إضافة خيالية و احترافية لقوالب البلوجر

إضافة زر منبثق يحوي قائمة احترافية

تركيب الأضافة

إذهب إلى التخطيط و قم 

بإضافة أداة جديدة javascript /html

 و أحفظها بدون أسم بعد وضع الكود بداخلها

<name="txt" rows="100" wrap="VIRTUAL" cols="55">
<b:if cond="data:blog.pageType == "item"">
<div id="mainMenu" class="mahir floating2">
<div class="navire floating3">
</div>
<div class="itemMenuBox contact">
<a href="#" class="itemMenu "><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
<div class="itemMenuBox bills">
<a href="#" class="itemMenu "><i class="fa fa-address-card" aria-hidden="true"></i></a></div>
<div class="itemMenuBox tarsheed">
<a href="#" class="itemMenu "><i class="fa fa-envelope" aria-hidden="true"></i></a></div>
<div class="itemMenuBox employees">
<a href="#" class="itemMenu "><i class="fa fa-rss" aria-hidden="true"></i></a></div>
<div class="itemMenuBox location">
<a href="#" class="itemMenu "><i class="fa fa-facebook-f" aria-hidden="true"></i></a></div>
<div class="itemMenuBox eservices">
<a href="#" class="itemMenu "><i class="fa fa-youtube" aria-hidden="true"></i></a></div>
<a href="javascript:void(0)" class="toggleMenu floating" ><i class="fa fa-bars" aria-hidden="true"></i></a>
</div>
<style type="text/css">
.navire{background:url(https://res.cloudinary.com/dioieuprs/image/upload/v1471359656/navire_n02z6s.png) no-repeat;background-size:100% auto;width:120px;height:100px;position:absolute;top:-50px;right:-130px;-webkit-transition:right 0.2s ease;transition:right 0.2s ease;}.mahir.open .navire{right:70%;-webkit-transition:right 28s ease 1s;transition:right 28s ease 1s;}.mahir{background-color:rgba(34,152,195,0.84);position:fixed;left:0;right:0;bottom:-420px;z-index:999;height:420px;box-shadow:0 0 15px -3px #03374A;border-radius:100% 100% 0 0 / 14% 14% 0 0;-webkit-transition:bottom 0.5s ease;transition:bottom 0.5s ease;}.mahir.open{bottom:0;}.mahir .toggleMenu{display:block;background-color:#65B5D0;border:1px solid #FFF;border-radius:80px;width:62px;height:62px;position:absolute;top:-12px;left:50%;margin:-31px 0 0 -31px;cursor:pointer;font-size:24px;color:#FFF;text-align:center;line-height:62px;box-shadow:0 0 0 10px rgba(255,255,255,0.2) inset,0 0 16px -4px #063343;-webkit-transition:box-shadow 0.5s ease,top 0.5s ease;transition:box-shadow 0.5s ease,top 0.5s ease;}.mahir .toggleMenu:hover,.mahir .toggleMenu:active{;}.mahir.open .toggleMenu{top:50%;background-color:#2298C3;}.mahir .itemMenuBox{background:url(https://res.cloudinary.com/dioieuprs/image/upload/v1466688705/floating-menu/go2.png) no-repeat center center;background-size:28px auto;position:absolute;top:50%;left:50%;margin:-31px 0 0 -31px;height:62px;width:142px;text-align:right;border-radius:40px;-webkit-transform-origin:31px 31px;-ms-transform-origin:31px 31px;transform-origin:31px 31px;-webkit-transition:all 1s ease 0.4s;transition:all 1s ease 0.4s;}.mahir.open .itemMenuBox{width:182px;-webkit-transition:all 1s ease 0s;transition:all 1s ease 0s;}.mahir .itemMenuBox.bills{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);}.mahir .itemMenuBox.tarsheed{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg);}.mahir .itemMenuBox.employees{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);}.mahir .itemMenuBox.location{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.mahir .itemMenuBox.eservices{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);}.mahir .itemMenuBox.contact{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg);}.mahir .itemMenuBox .itemMenu{display:inline-block;border:2px solid rgba(255,255,255,0.6);border-radius:40px;background-color:#1f97c2;background-repeat:no-repeat;background-position:center center;width:62px;height:62px;border-radius:40px;transition:all 0.8s ease;color:#FFF;font-size:28px;line-height:64px;text-align:center;}.mahir .itemMenuBox.bills .itemMenu{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}.mahir .itemMenuBox.tarsheed .itemMenu{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg);}.mahir .itemMenuBox.employees .itemMenu{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg);}.mahir .itemMenuBox.location .itemMenu{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);}.mahir .itemMenuBox.eservices .itemMenu{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg);}.mahir .itemMenuBox.contact .itemMenu{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg);}.mahir .itemMenuBox.bills .itemMenu:hover{-webkit-transform:rotate(450deg);-ms-transform:rotate(450deg);transform:rotate(450deg);}.mahir .itemMenuBox.tarsheed .itemMenu:hover{-webkit-transform:rotate(390deg);-ms-transform:rotate(390deg);transform:rotate(390deg);}.mahir .itemMenuBox.employees .itemMenu:hover{-webkit-transform:rotate(690deg);-ms-transform:rotate(690deg);transform:rotate(690deg);}.mahir .itemMenuBox.location .itemMenu:hover{-webkit-transform:rotate(630deg);-ms-transform:rotate(630deg);transform:rotate(630deg);}.mahir .itemMenuBox.eservices .itemMenu:hover{-webkit-transform:rotate(570deg);-ms-transform:rotate(570deg);transform:rotate(570deg);}.mahir .itemMenuBox.contact .itemMenu:hover{-webkit-transform:rotate(510deg);-ms-transform:rotate(510deg);transform:rotate(510deg);}.floating{-webkit-animation-name:Floatingx;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:Floating;-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:ease-in-out;}@-webkit-keyframes Floatingx{from{-webkit-transform:translate(0,0px);}65%{-webkit-transform:translate(0,5px);}to{-webkit-transform:translate(0,-0px);}}@-moz-keyframes Floating{from{-moz-transform:translate(0,0px);}65%{-moz-transform:translate(0,5px);}to{-moz-transform:translate(0,-0px);}}.floating2{-webkit-animation-name:Floatingx2;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:Floating2;-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:ease-in-out;}@-webkit-keyframes Floatingx2{from{-webkit-transform:translate(0,0px);}45%{-webkit-transform:translate(0,8px);}to{-webkit-transform:translate(0,-0px);}}@-moz-keyframes Floating2{from{-moz-transform:translate(0,0px);}45%{-moz-transform:translate(0,8px);}to{-moz-transform:translate(0,-0px);}}.floating3{-webkit-animation-name:Floatingx3;-webkit-animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:Floating3;-moz-animation-duration:3s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:ease-in-out;}@-webkit-keyframes Floatingx3{from{-webkit-transform:translate(0,0px);}50%{-webkit-transform:translate(2px,4px);}to{-webkit-transform:translate(0,-0px);}}@-moz-keyframes Floating3{from{-moz-transform:translate(0,0px);}50%{-moz-transform:translate(2px,4px);}to{-moz-transform:translate(0,-0px);}}.signatureBox{text-align:right;padding:4px;}.signatureBox.fixed{position:fixed;bottom:8px;right:8px;}.signature,.signature a{color:#484848;}.signature:before,.signature:after{display:inline-block;overflow:hidden;vertical-align:bottom;-webkit-transition:all 0.5s;-webkit-transition:all 0.5s;width:11px;}.signature:before{content:'Mahmoud';}.signature:after{content:'NBET';margin-left:0;width:10px;}.signature:hover{color:#484848;}.signature:hover:before{width:76px;}.signature:hover:after{width:34px;margin-left:3px;}
</style>
<script type='text/javascript'>
//<![CDATA[
$(".toggleMenu").on('click',function(){$("#mainMenu").toggleClass('open');});
//]]>
</script></b:if></name="txt">

التعديلات على الكود

داخل الكود يوجد علامة  #   قم بتغيرها بالروابط اللازمة إضافة روابط صفحة إتصل بنا و روابط السوشيال ميديا

و شكرا


المصدر مدون ماهر

وفي الختام !

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