إضافة لتسجيل الدخول والخروج بحسابك بجوجل

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

معاينة

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

1. داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

/* 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}

2. إبحث عن </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'/>

shabab 25 jun

بحث هذه المدونة الإلكترونية

الصفحات

السبت، 12 سبتمبر 2015