اضافة تسجيل الدخول والخروج بمدونة بلوجر

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

شرح طريقة تركيب الإضافة

1. توجه للقالب >> تحرير

2. ابحث بإستعمال Ctrl+F عن ]]></b:skin> 

3. ضع الكود التالي فوقه 

/* Css Admin Ar1web.com */
#adminblog{background: #F4836A;color: #fff!important;width:130px;border:none;font-size: 14px;font-family:ge_ss_threeregular;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 0;position:absolute;top:10px;right:10px;transition:all .4s ease-in-out;}
.fa-user:before {content: "\f007";margin-right: 5px;padding: 10px 10px;background: #5A4F4F;}
#layoutlogin{background:#000;opacity:.7;position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;display:none}
#login{position:absolute;width:222px;height:auto;top:30%;left:50%;margin-left:-111px;font-family:Arial;z-index:100000;display:none}
#loginbox{background:#fff;width:200px;padding:10px;display:none;position:absolute;top:62px;left:0;border:1px solid #ddd;border-radius: 2px;z-index:1;overflow:hidden;}
#loginbox .emaillogin input.email {color: #777;padding: 10px;font-size: 14px;font-family:ge_ss_threeregular;width:89%;border:1px solid #ddd;border-radius: 2px;}
#loginbox .emaillogin input:focus {outline: none;}
#loginbox .emaillogin input.signin-btn{background: #F4836A;color: #fff!important;border:none;outline: none;width:100%;font-size: 14px;font-family:ge_ss_threeregular;cursor:pointer;border-radius: 2px;margin-top: 10px;padding: 11px;}
#login1,#login2{color: #777;padding:5px 10px;font-size: 14px;font-family:ge_ss_threeregular;width:38%;display:none;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:38px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
#login2{border-bottom:none;z-index:2}
#Admin1,#Admin2{color: #777;padding:5px 0;font-size: 14px;font-family:ge_ss_threeregular;width:100%;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:0px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
.logout{background: #F4836A;color: #fff!important;width:38%;font-size: 14px;font-family:ge_ss_threeregular;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 10px;position:absolute;top:38px;right:-1px;transition:all .4s ease-in-out;}
a.logout{text-decoration:none}
#Admin1:hover,#login1:hover{background:#eee}
.logout:hover,#adminblog:hover{background:#d56148}
 

* المحدد باللون الأصفر لتغير الإتجاه إلى : left

4. ابحث عن <body/> نضع الكود التالي فوقه 

<div id='adminblog' onclick='document.getElementById(&apos;login&apos;).style.display=&apos;block&apos;;layoutlogin.style.display=&apos;block&apos;;adminblog.style.display=&apos;none&apos;;'>تسجيل الدخول<i class='fa fa-user'/></div>

<div id='login'>
<div id='Admin1' onclick='document.getElementById(&apos;login1&apos;).style.display=&apos;inline&apos;;logoutbox.style.display=&apos;inline&apos;;Admin1.style.display=&apos;none&apos;;Admin2.style.display=&apos;inline&apos;;'>الدخول</div>
<div id='Admin2' onclick='document.getElementById(&apos;login1&apos;).style.display=&apos;none&apos;;logoutbox.style.display=&apos;none&apos;;Admin1.style.display=&apos;inline&apos;;Admin2.style.display=&apos;none&apos;;' style='display:none'>الرجاء الإختيار</div>
<div id='login1' onclick='document.getElementById(&apos;loginbox&apos;).style.display=&apos;block&apos;;login1.style.display=&apos;none&apos;;login2.style.display=&apos;inline&apos;;logoutbox.style.display=&apos;none&apos;;'>تسجيل الدخول</div>
<div id='login2' onclick='document.getElementById(&apos;loginbox&apos;).style.display=&apos;none&apos;;login1.style.display=&apos;inline&apos;;login2.style.display=&apos;none&apos;;logoutbox.style.display=&apos;inline&apos;;' style='display:none'>تسجيل الدخول</div>
<div id='loginbox'>
<div class='emaillogin'>
<form action='https://accounts.google.com/ServiceLogin?service=blogger&amp;continue=https://www.blogger.com/home&amp;followup=https://www.blogger.com/home' method='post' onsubmit='onlogin()' target='_blank'>
    <input class='email' name='Email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;البريد الإلكتروني&quot;;}' onfocus='if (this.value == &quot;البريد الإلكتروني&quot;) {this.value = &quot;&quot;;}' type='text' value='البريد الإلكتروني'/>
      <input class='signin-btn' name='submit' onclick='document.getElementById(&apos;login&apos;).style.display=&apos;none&apos;;layoutlogin.style.display=&apos;none&apos;;adminblog.style.display=&apos;block&apos;;' type='submit' value='الولوج للحساب'/>
    </form>
   </div>
  </div>  
    <div id='logoutbox' style='display:none'>
<a class='logout' href='https://accounts.google.com/Logout?service=blogger' onclick='document.getElementById(&apos;login&apos;).style.display=&apos;none&apos;;layoutlogin.style.display=&apos;none&apos;;adminblog.style.display=&apos;block&apos;;' target='_blank'>تسجيل الخروج
   </a>
  </div>
    </div>
<div style='clear:both'/>
<div id='layoutlogin'/>
 

بإمكانك حفظ العمل لتصبح لديك فريدة وخفيفة ومفيدة للبعض أي إستفسار لا تتردد في طرحة