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

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

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

إقرأ المزيـــد

ستة قوائم افقيه لمدونات بلوجر بتنقنية الجيكويري وبلغة CSS3

تقنية الجي كويري الاخف من اي صيغ أكواد اخرى كما انها الاكثر اناقة ..اليوم لدينا 6 قوائم افقية في 

قمة الاحترافية بتقنية الجيكويري بمختلف الالوان الملائمة لمدونتك او موقعك لاضافة صفحات المدونة 

او التصنيفات..

طريقة تركيب هذه الإضافة سهلة جدا لاضافة القائمة نمر بالمراحل الثلاث التالية :

1_ اضافة السكريبت

2_ اضافة تاثيرات css

3_ اضافة القائمة

1. اضافة السكريبت

من لوحة تحكم بلوجر اذهب لـ تصميم >> تحرير HTML ابحث عن :

</head>

بعد ايجاد الكود اعلاه ضع فوقه مباشرة الكود التالي : (ملحوظه ان كنت قد ركبت مسبقا كود

الجيكويري في مدونتك فانت لستبحاجه لوضع الكود ذو اللون الاحمر)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

2. اضافة تاثيرات css

ابحث عن : ]]></b:skin>

ثم نلصق الكود اسفله فوقه مباشرة :

/*LAVALAMP

 MENU BY http://www.helperblogger.com/ START*/  .lavalamp {     

position: relative;     border: 1px solid #d6d6d6;     background: #fff;

     padding: 15px;     -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);  

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);     border-radius : 10px;   

  -moz-border-radius : 10px;     -webkit-border-radius : 10px;     

background : -webkit-gradient(linear, left top, left bottom, 

from(rgb(240,240,240)), to(rgb(204,204,204)));     background : 

-moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), 

to(rgb(204,204,204)));  height: 18px;         font-family: calibri; }  

.magenta {  background : rgb(190,64,120);  background : 

-webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), 

to(rgb(177,24,91)));  background : -moz-gradient(linear, left top, left 

bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));  border: 1px solid 

#841144;   }  .cyan {  background : rgb(64,181,197);  background : 

-webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), 

to(rgb(7,165,187)));  background : -moz-gradient(linear, left top, left 

bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));  border: 1px solid 

#2f8893;   }  .yellow {  background : rgb(255,199,79);  background : 

-webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), 

to(rgb(255,188,43)));  background : -moz-gradient(linear, left top, left

 bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));  border: 1px solid

 #c08c1f;   }  .orange {  background : rgb(255,133,64);  background : 

-webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), 

to(rgb(255,107,24)));  background : -moz-gradient(linear, left top, left

 bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));  border: 1px solid

 #c04f11;   }  .dark {  background : rgb(89,89,89);  background : 

-webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), 

to(rgb(54,54,54)));  background : -moz-gradient(linear, left top, left 

bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));  border: 1px solid 

#272727;   }  .magenta li a , .cyan li a, .yellow li a , .orange li a, 

.dark li a{  color: #fff;  text-shadow: 0 -1px 0 rgba(0,0,0,.40);   }  

.lavalamp a {     text-decoration: none;     color: #262626;     

line-height: 20px; }  .lavalamp ul {     margin: 0;     padding: 0;     

z-index: 300;     position: absolute; }  .lavalamp ul li {     

list-style: none;     float:left;      text-align: center;     }  

.lavalamp ul li a {     padding: 0 20px;     text-align: center;     }  

.floatr {     position: absolute;     top: 10px;     z-index: 50;     

width: 70px;     height: 30px;     border-radius : 8px;     

-moz-border-radius : 8px;     -webkit-border-radius : 8px;     

background : rgba(0,0,0,.20);     -webkit-transition: all .4s 

ease-in-out;     -moz-transition: all .4s ease-in-out; }  /*LAVALAMP 

MENU BY http://www.helperblogger.com/ END*/

الآن إضغط على زر حفظ القالب 3. اضافة القائمة

من تصميم >> عناصر الصفحة

اضافة اداة (اسفل الهيدر)

اختر اداة  HTML/JavaScript

انسخ ثم الصق الكود اسفله

<div class="lavalamp dark">

 <ul>

  <li class="active"><a href=""> Home </a></li>

  <li><a href=" # ">About</a></li>

  <li><a href=" # ">Blog</a></li>

  <li><a href=" # ">Services</a></li>

  <li><a href=" # ">Portfolio</a></li>

  <li><a href=" # ">Contacts</a></li>

  <li><a href=" # ">Back to Article</a></li>

  <li><<a href=" # ">How it Works?</a></li>

 </ul>

 <div class="floatr"></div>

</div> 

والان لم يتبقى سوى تخصيص القائمة :
استبدل # بروابط صفحاتك
استبدل Home ,About, Services ...بصفحاتك الخاصة حسب رغبتك
اما لتغيير لون القائمة استبدل <div class="lavalamp dark"> باللون المناسب في القوائم اسفله :

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

  

والان نحفظ الاداة و مبروك عليك

إقرأ المزيـــد

إضافة مربع البحث المخصص لمدونتك مع أشكال جذابة

هنالك العديد من المدونات التي تستعمل مستطيل صيغر للبحث في المدونة ,لكنه شكل عادي لايجدب الأنضار اليه وخصوصا الزوار العديد من الزوار وحتى أنا عندما أتصفح بعض المواقع والمدوان لاأنتبه على المستطيل المخصص للبحث ,لدالك هده الصناديق المخصصة للبحث هي ملونة وبجميع الأدواق ,الاضافات أنيقة اختر اللون الدي يتماشى مع مدونتك ـو لون أخر خير متناسق لابرازه في المدونة للتسهيل على زوارك اجاده والبحث قي مدونتك

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

اذهب للوحة التحكم تخطيط او تصميم عناصر الصفحة اضف اداة

اختر Html/Javascript

الشكل الاول 

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGob_QhQeWpseT3IUjnLyXLDvO1BcHTF2OqVo5NYhk0C2g6R9Zq1wM3_ZTXoQNvZr_zT93JFK_3lvPKRP4FmyDWBZREb8uxjQSNnU4WjJm95kQHyQB5iI_-FB_AuoJdMEWPhMX3xhvdJpt/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

الشكل التاني

 <style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOFqTrRDPmekfnUSGiL9veiOhO88LhyWqWidmIb049CCfTIwX6kFgCiLAs2U2aBpnn2eZ6lhown0l1HH1xIm8S_8iKocKa_vELmnhFPdh3BfZ6cpM8-7G5JVfzNxBW5ek-w4YQmjOb4Uz/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

الشكل الثالت

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrVt4nHDXLkwNhyphenhyphenvnkVEEk281sqe-CFEg0ug8ZqYeKXAP75gT3KHiGleHiakec2kIyrMrhN-2TeCypftQRxCSVJiz_ArvbaHefykvxrXj33TCe4nRDiTI0D6hZn8jgJ25MbG_1VKnQIliJ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

الشكل الرايع

 <style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkI1TTXr7UWFwC4DgTH2k3XzhDwI_6p5FEfTEBWHuXB5G0-h5Bs2TF17VYCpH-l0Qgp8CdI90fLYRImdTg-ZoqxkeKXx_CbVMDvJw-ulPDe1peL-Oq2atEk11iKLeI-3Q5vj04QMg6d4d/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

الشكل الخامس

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3WVS6BK-cCla7WjUseWfPmsHGbAW9xKBcqbg-D1xNEMMKYSlWns4zSECfLSPGZz9ppRCbkOZPfPJd_uctTHMml8o-Bysk14f-e5aZvcaZEoqS1SmZE-9rmJlsnNUCpArvHvPOoPx6LHr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}

form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

الشكل السادس والأخير

<style type="text/css">

#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKH9jHVjOqlqigNNVbyBPNlNhQ0V3_eKBTSdMlPsMy2DmtZRcULX2kTYSZd11Ll3h8lAGQzE0rfiSw2F2wxKju3_M76papEcwpNfMFaKCY-Eg2skkMZLDYTtYP0LlQ_dKeFg47Nw6AYpZh/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}

form#w2b-searchform{display: block;padding: 12px;margin:0;}

form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}

form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}

</style>

<div id="w2b-searchbox">

<form id="w2b-searchform" action="/search" method="get">

    <input type="text" id="s" name="q" value=""/>

    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />

</form>

</div>

إقرأ المزيـــد

إضافة زر الرد على التعليقات لمدونات بلوجر

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

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

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.

ثم قم بالبحث عن هذا الكود :

<data:commentPostedByMsg/>

ثم ضع مباشرة تحته هذا الكود :

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=11111111&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0 ,scrollbars=yes,width=450,height=450&quot;); return false;'>
<img src='http://hitskin.com/themes/14/77/83/i_reply.jpg'/></a></span><font size="0"><a href=" http://www.pergola-aluminium.org/ "></a></font>

مع إدراج رقم تعريف المدونة الذي حصلنا عليه في المرحلة الأولى مكان الرقم 11111111في الكود 

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

ولأي إستفسار المرجو ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل

إقرأ المزيـــد

تغيير أعمدة مدونة ذؤيب من اليمين الى اليسار والعكس

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

لكن بالرغم من تميز القالب الا ان هناك الكثير العوائق التي تحول دون استخدامه بارتياح لأنه لا يدعم بعض خصائص لوحة البلوجر الجديدة مثل "مصمم النماذج" الذي يسمح بتعديل قوالب بلوجر بشكل رائع وبدون تحرير جسم html للمدونة .

والتي من خلالها يمكننا ازاحة اعمدة المدونة من اليمين الى اليسار أو من اليسار الى اليمين وهو ما نحتاج اليه في تغيير اعمدة قالب مدونة ذؤيب.

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

من لوحة التحكم اختر قالب ثم اختر تحرير Html ثم متابعة ثم توسيع قوالب عناصر واجهة
المستخدم وقم بالبحث عـــن الكـــــــــــــــود التالـــــــــــــــــــــــــــــــــــــي : #sidebar {
ستجده على الشكل التالـــــــــــــــــــــــــــــي :

/* Sidebar*/

#sidebar {

width:320px;

float:right;

margin:0px 0px 0px 0px;

}

نقوم بتغيير كلمة right الى كلمة left 

ثم نقوم بالبحث عن الكـــــــــــــــــــــــود التــــــــــــــــــــــــــالـــــي : #headline {

الذي سنجده أيضا بهذا الشكـــــــــــــل :

/#headline {

width:590px;

float:left;

background:#fff;

padding:10px;

font-size:1.05em;

line-height:1.5em;

margin:0;

}

مرة أخرى نقوم بتغيير كلمة left الى كلمة right وبهذه الخطوة نكون قد انتهينا من ازاحة اعمدة

القالب من الجهة اليمنى الى الجهة اليسرى .

الأن نقوم بحفظ القالب ومعاينة الشكل الجديد للمدونة .

اذا أردنا القيام بالعملية العكسية أي ازاحة العمود من اليسار الى اليمين ما علينا سوى القيام

بنفس الخطوات لكن نقوم بتغيير الكلمات عكس ما فعلناه في المرحلة الأولى : أي من left الى

  right
و من right الى left .

/* Sidebar*/

#sidebar {

width:320px;

float:right;

margin:0px 0px 0px 0px;

}

إقرأ المزيـــد