19‏/09‏/2014

مجددا ومع الحصريات من إضافات الويب من ضمنها قوالب بلوجر أتيح لكم إضافة فريدة لإستخدام الدخول لحسابك بجوجل وذلك عن طريق الأداة بالضغط عليها وكتابة بريدك الإلكتروني سيوجهك لدخول لحسابك وأيضا زر خاص بالخروج من الحساب أي 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'/>
مجددا ومع الحصريات من إضافات الويب من ضمنها قوالب بلوجر أتيح لكم إضافة فريدة لإستخدام الدخول لحسابك بجوجل وذلك عن طريق الأداة بالضغط عليها وكتابة بريدك الإلكتروني سيوجهك لدخول لحسابك وأيضا زر خاص بالخروج من الحساب أي 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'/>
16 Blogger تعليقات
Disqus
16 التعليقات
المشرف
avatar
المشرف
avatar

ممكن رابط الصورة اللى تحت اللوجو اللى حضرتك كنت حططها قبل العجله بتاعت السحاب

المشرف
avatar

تفضل : http://goo.gl/uzpVuE

المشرف
avatar

متشكر جدا :)

المشرف
avatar

مشكور اخي على الاضافه الرائعه بس اكو مشكله الخلفيه السوداء تظهر عندي نص في الاعلى موجوده وفي الاسفل غير موجوده ممكن حل لهذه المشكه =(

المشرف
avatar

يمكنك زيادة طول الخلفية ولفعل ذلك إبحث عن : #layoutlogin

تحتها مباشرة أضف : height: 1000px;

يمكنك زيادة طولها بتغيير 1000 إلى 1500 .. وهكذا بمقاس مدونتك

المشرف
avatar

ما قصرت أبدآ

المشرف
avatar

يأأخي الاضافة رائعة ولاكن حجمها صغير و وحجم كلمة تسجيل الخروج وكلمة تسجيل الدخول صغير جدً وغير ملائمها ارجوك اجد لي حلاً
رابط المدونة
http://www.drabdel3zim.ga
:lv

المشرف
avatar

عليك بتكبير الخط ابحث عن #adminblog
وستجد الأكواد أسفلها بالضبط : font-size: 14px;
غير الرقم بالذي يرضيك

المشرف
avatar

:lv
انتا أحسن واحد قبلتو في حياتي انتا رجل تستحق كل الاحترام والتقدير وانا شخصيأ بحترمك:-bd
|o|
(ممكن تقولي علي كيفية يمكن تغير شكل صندوق التعليقات)

المشرف
avatar

اخي تظهر لدي مشكلة ممكن المساعدة :) تظهر لي كتابة في اعلى الصفحة واسفل الصفحة http://cayberspece.blogspot.com/2014/08/teenage-mutant-ninja-turtles-2014-hd.html

المشرف
avatar

الكواد الذي وضعتها فوق </body> جرب وضعها فوق اكثر بالضبط فوق هذا الكود
<script type='text/javascript'>
//<![CDATA[
$('#cssmenu ul ul li:odd').addClass('odd');

فوق <script type='text/javascript'>

المشرف
avatar
hosam1850 2/06/2015
delete

مشكورررررررررر يا رائع
http://basmat-nja7.blogspot.com

المشرف
avatar

أخي اريد تنزيله لتحت
http://i.imgur.com/lFYC74S.png

المشرف
avatar

ابحث عن هذا الكود #adminblog ستجد بسطره : top: 10px; غير 10 بـ 100 مثلا أو على حسب الحد الذي تريد كلما صعدت في الرقم نزلت الإضافة

المشرف
avatar

كيف يمكن تعديل اللون حتى يتناسق مع لون قالب المدونة

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة