Tweet

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

1- تضم أزرار إدارة المدونة للمنصة الجيدة
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin)

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

]]></b:skin>

ثم قم بوضع الكود التالي قبله :

.bloggermenu {

  position: fixed;

  top: 200px;

  left: 10px;

  width: 24px;

  overflow: hidden;

  padding: 5px;

  background: #ffffff;

  border-width: 1px;

  border-style: solid;

  border-color: #ccc;

  -moz-box-shadow: 1px 1px 3px #666666;

  -webkit-box-shadow: 1px 1px 3px #666666;

  box-shadow: 1px 1px 3px #666666;

  border-radius: 2px;

  -webkit-border-radius: 2px;

  -moz-border-radius: 2px;

}

ملحوظة : لتركيب الإضافة في جهة اليمين ،قم بتغيير الكلمة Left بالكلمة Right.

2-الآن قم بالبحث عن الكود التالي :

<b:include name='feedLinks'/>

فإن لم تجده ،قم بالبحث عن هذا الكود  :

<b:include name='nextprev'/>

ثم قوم بوضع هذا الكود تحت أحد الأكواد السابقة :

<b:include name='ButtonsbloggerFix'/>

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

<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>

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

<b:includable id='ButtonsbloggerFix'>

<span class='item-control blog-admin'>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<div class='bloggermenu'>

<a class='layout' href='http://www.blogger.com/home' target='_blank' title='الرئيسية '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKP9i5hKav4p43f0O8a2U2Ud9c56I_lAkdsahTK_pR5EW-c3IEH0M9Y-xH_nUb2U2nJ4gR_dxbNiIWgN0wSLD5KT7G_2yV021m6nzAw37I1w1t50tNofoai1vSHkbLOzMQMnCyZ4id3Q/s1600/blogger.gif' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overview' target='_blank' title='نظرة عامة '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KozbNG4uu7E7XwHG5faOFZ9fZvEM9LKBfrVABHKisQ33pxGXDgnOwhDDFrLrhDoPX2d-q_DGhKXFc2rSQsCa1EBcfviz3UI8rg-GtugG7TwohyphenhyphenXmjDVo97Ijlr69on8rVCtwplzEH_8/s1600/general+orange.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#editor/src=sidebar' target='_blank' title='مشاركة جديدة'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVB2FkjXIQzCJCZ72f9AWVWTaPZcZvglbncDE7lSAJmMWm1GjHrTl0cGMQB6-xIR01imdPjjZdyjQdPTruztrJpgtQViXnEjtPd_BZFDso0sVndKWXWjq0UHQv1n34v2ypqapOwpRvP04/s1600/new+message.png' title=''/>

</a>

 <a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#allposts' target='_blank' title='المشاركات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1pn6blB14xktO4bz_7_2S3bnO0tllFCCBXJ9m1FSL9F9cDD0Vmztn2LL3mPHQDkWDrgK3Eq6yx-53ij0d1jgyv8jAKJTF3cmjo6xkCs30x3P6-M_x2DvSe7T16jncjlo8FVz7ik-0f9E/s1600/MOCHARAKAT.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pages' target='_blank' title='الصفحات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6TcOSEDZQ5Yeq-9QUIWQffbxkeiBOiBZUMnPCyJn9DpurrKalWVvCD-ymqBrEU6ynhj4YmR4F5ye7r2ywsXrcxt292FIm78WS84ufXcR88K9HqPzf9T7pSQTHoLCxwqwNziOMYxGQvg/s1600/PAGES.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#publishedcomments' target='_blank' title='التعليقات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pll5ZkyBxzdsYjF2ZICveWz7Leyhmes0tf8iHnPyS1c_IZFoxz4Q4bSwUndTPIbmNo3jZ2F6mqGq9PT08sbp2XgOcwdCUnA1BIvsz27q_5xZt2GHQP5AarcRTsTIkLjkOtTXrP8134Y/s1600/COMMENTS.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#googleplus' target='_blank' title='Google +'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLimtOKsT8FBDbPLid9WbFqiSi1NkggC39Tn8BLe_n5ERXKjpff1LpzRrZ5Ys3MmgZazrhSiAYPuM1WlRd3MUhyCyK0jGHXoo5XiSwKQCRGNYbHQt5LB-oI0Bw9wgL_gymzXA4B3DG_Q/s1600/google+plus.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overviewstats' target='_blank' title='الإحصائيات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYx8nbf_RP1xQpKrf5Et2jWgd0dBjnDxq03hqqiAFwQ13Ib6nLqk5ZmtN9IUxsViu15Ad1Ku-55CD2GlFtrMJfp-uOT2Dv0JOR2eJloxKqe9tNTgjHKjkIH-Yu2xajkM2Zey5bR9zzNs/s1600/STATISTIC.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#adsensesummary' target='_blank' title='الأرباح'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFU4lybO935LHicmNZOKV_gukIV1M7yY4GgvVawd0UvO-T-TH9gCgAfpXwFFgwpkbXig367qH3MChZTenRwtNx9wPZikQJpc-bdRW6BkX4JoR5yv-jbcXI0qaCuZAKpUhjLo2T9y1Lys/s1600/adsense.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pageelements' target='_blank' title='تخطيط'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aLCqvMuv53uW452VtyXTMonOaIJ_qlKa__VgwsPkU5kSXnF-e4GYkcEA0fQx6nl_goj1cJtu7iKXvxw_4xpF7LsA2bilY0ZRaEYdXgnm2Br59PuyB83PkNBUAaupTqFFg0Axv6qEUkg/s1600/TAKHTIT.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#template' target='_blank' title='قالب'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJsKj2y2wtv6jq9vNvI_f-R7SGOFYU4cMRu0nVARsFgfXpuKNasTS7RqkIyuTaIE7JnM60UXw_60EenF1qg6a1WZngG5iEqVRCW_Eb_O3_5x9lJf6m_SUlBuZerLPP9wjq0n2QBVtadc/s1600/TASMIM.png' title=''/>

</a>

<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings' target='_blank' title='إعدادات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_clfOyfWY-pdFzIWa9Nh157hp1m7_pif-C5v_byNSh-dLVovtSJlHCdt4SDypUfp-KalzJmy-IN4fNx786mWnRUAVwTrE4OIEIBMQVNhGwvjfFyBq5vKL6aUsS3ea3aak0VZcblQVFxY/s1600/PARAMETRE.png' title=''/>

</a>

</div>

</b:if>

</span>

</b:includable>

تعديل : 
1-قم بإستبدال xxxxxxxxxxx برقم تعريف مدونتك،وللحصول على هذا الرقم  . إضغط على إسم مدونتك من قائمة مدوناتك ثم قم بنسخ كود التعريف كما هو موضح في الصورة أسفله


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

أتمنى أن تروقكم هذه الميزة الجديدة في إنتظار آرائكم وإستفساراتكم

Résuméabuiyad

Tweet

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

قم بالبحث عن الكود التالي :

<div class='blog-pager' id='blog-pager'>

ثم قم بلصق هذا الكود بعده مباشرة :

 <span id='blog-pager-top-link'>

      <a class='blog-pager-top-link' href='#' title='إلى الأعلى'>إلى الأعلى</a>

      </span>

      <span id='blog-pager-bottom-link'>

      <a class='blog-pager-bottom-link' href='#bottom' title='إلى الأسفل'>إلى الأسفل</a>

      </span><font size="0"><a href="http://www.monte-escalier-prix.org"></a></font>

الآن إبحث عن الوسم :

</body>

ثم قم بلضق هذا الكود قبله :

<a name='bottom'/>

وأخيرا قم بالبحث عن الوسم :

]]></b:skin>

وضع الكود التالي قبله :

#blog-pager {

  position: fixed;

  bottom: 10px;

  right: 50px;

  width: 120px;

  height: 120px;

  display: block;

  overflow: hidden;

  background: #fff;

  border: 1px solid #ccc;

  -moz-box-shadow: 1px 1px 3px #666666;

  -webkit-box-shadow: 1px 1px 3px #666666;

  box-shadow: 1px 1px 3px #666666;

  border-radius: 60px;

  -webkit-border-radius: 60px;

  -moz-border-radius: 60px;

  z-index: 9;

}

#blog-pager  a {

  display: block;

  width: 30px;

  height: 30px;

  overflow: hidden;

  text-indent: -99999px;

  position: absolute;

  padding: 5px;

}

a.blog-pager-top-link {

  background: url(https://lh5.googleusercontent.com/-hSHWhg9kGg0/T2MugFnRreI/AAAAAAAAHw8/Htfa78EMsoQ/s30/arrow_up2.png) no-repeat center center;

  top: 0px;

  left: 40px;

}

a.blog-pager-bottom-link {

  background: url(https://lh6.googleusercontent.com/-YBE6uU6Hs9A/T2Muc7lPfII/AAAAAAAAHw8/MEwsNC6GORY/s30/arrow_down2.png) no-repeat center center;

  top: 80px;

  left: 40px;

}

a.blog-pager-newer-link {

  background: url(https://lh3.googleusercontent.com/-x2iM_Ehd97o/T2Muc2KIN9I/AAAAAAAAHw8/NsKA5zQvepo/s30/arrow_left2.png) no-repeat center center;

  top: 40px;

  left: 0px;

}

a.blog-pager-older-link {  

  background: url(https://lh4.googleusercontent.com/-yHMoNLjW5Eg/T2MudH-o1FI/AAAAAAAAHw8/kmXGiY_ztZI/s30/arrow_right2.png) no-repeat center center;

  top: 40px;

  left: 80px;

}

a.home-link {

  background: url(https://lh4.googleusercontent.com/-Ud-NZ0D_WgI/T2MvUcqLnXI/AAAAAAAAHw8/5aeH4DguMgc/s30/home.png) no-repeat center center;

  top: 40px;

  left: 40px;

}

.blog-mobile-link {

  display: none;

}

ثم قم بحفظ القالب

Résuméabuiyad

Tweet

- كما نلاحظ أن هذه الإضافة لا تأخذ مكان كبيرة في المدونة وهي ذات شكل جميل ومفيدة ايضا.


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

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  </head>

لتركيب الإضافة على الجهة اليسرى نقوم بإلصاق هذا الكود قبل الوسم </head> .

<link href=' https://abuiyad.googlecode.com/svn/navigation-Ayoub-Etmaiti.css ' rel='stylesheet'/>

ولتركيب الإضافة على الجهة اليمنى نقوم بإلصاق هذا الكود قبل الوسم </head> .

<link href='https://abuiyad.googlecode.com/svn/navigation-right-Ayoub-Etmaiti.css' rel='stylesheet'/>

وبعد هذا سنقوم بالبحث على <b:includable id='main' var='top'> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي بعده :

<div id='float-menu'> 

<ul>

<li id='menu-right'>

<b:if cond='data:olderPageUrl'>

<b:if cond='data:olderPageUrl != data:blog.url'>

<a expr:href='data:olderPageUrl' rel='prev' expr:title='data:olderPageTitle'></a>

</b:if>

</b:if>

</li>

<li id='menu-left'>

<b:if cond='data:newerPageUrl'>

<b:if cond='data:newerPageUrl != data:blog.url'>

<a expr:href='data:newerPageUrl' rel='next' expr:title='data:newerPageTitle'></a>

</b:if>

</b:if>

</li>

<li id='menu-random'>

<script type='text/javaScript'>//<![CDATA[

var rdp_current=0;total_posts=0;function totalposts(json){total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){rdp_current=1+Math.round(Math.random()*(total_posts-1))};

//]]></script>

<script type='text/javaScript'>//<![CDATA[

function rdp(json){var dw='';entry=json.feed.entry[0];for(var i=0;i<entry.link.length;i++){if(entry.link[i].rel=='alternate'){rdp_posturl=entry.link[i].href}};dw+='<a href="'+rdp_posturl+'" title="مقالة عشوائية" rel="nofollow"></a>';document.getElementById('menu-random').innerHTML=dw;};getvalue();document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current+'&max-results=1&callback=rdp\"><\/script>');

//]]></script>

</li>

<li id='menu-home'>

<a expr:href='data:blog.homepageUrl' title='الرئيسية'/>

</li>

<li id='menu-top'>

<a href='#' title='إلى الأعلى' rel="nofollow"/>

</li>

</ul>

</div>

Résuméabuiyad

Tweet

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

- ونلاحظ من الصورة عمل الإضافة عند المرور بمؤشر الفأرة على احد الأيقونات، لاحظ ايقونة اليوتوب كيف هي مختلفة بحدود مربعة عن باقي الأيقونات. 



الأن حان وقت عرض الاكواد لوضع هذه الإضافة الرائعة في مدونتنا.
الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  ]]></b:skin>

ثم نضيف الكود التالي قبله .

/*sus code by Ayoub-Etmaiti */
 .Azrar-Ayoub-Etmaiti {
border-radius: 50%; /* الحدود الدائرية  */
box-shadow: 0px 0px 15px #000; /* الظل*/
padding:0;
border:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.Azrar-Ayoub-Etmaiti:hover {
box-shadow: 0; /* لحذف الحدود الدائرية عند مرور المأشر */
border-radius: 0; /*لحذف الظل عند مرور المأشر */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.Ayoub-Etmaiti-center {
        text-align: center /*لتوسيط الأزرار  */
}
 /*sus code by Ayoub-Etmaiti */

قم بحفظ القالب 


انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascript
ولآن الصق الكود التالي :

<div class="Ayoub-Etmaiti-center">
<a href="رابط الفيسبوك هنا" target="_blank" title="¡فيسبوك!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlOjZ4J-Jq0vTwCIzwib94JVYBRoML5-XGchUYl2SiJ5UWC4v5zV81Y-kx8FBcxSqgaxo6wb1IrVV25GOp-GCRLCPP4E37A0q0G1dvn6BX3c_CZkGgwCrkLE2Wo-yBywCjkF0fNJ-T10ed/s1600/sus-Ayoub-Etmaiti-facebook.png" /></a>
<a href="رابط تويتر هنا" target="_blank" title="¡تويتر!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlSg6NEyj3TVWEBWW8MzBYVQnAYhqelw6F9zQfkp3uoRzTWHKc1-6vhnjK1ycZs76do6VBbi77-m953-MjckIKHIOUGae1FSHw083eJHJxIP_H1bCB2JA8cxRkG7mu1Cg8HkEVe_MVgQP/s1600/sus-Ayoub-Etmaiti-twitter.png" /></a>
<a href="رابط يوتوب هنا" target="_blank" title="¡يوتوب!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-u8b-yyI9Uu6BPbfC5fUAQgYqvNQ4oJLKHtcDvt0YGEeV1kj7KYZxPh9NWH7YudtWIZvbQ2Q7OaRV61MUV6M5UnEV1n5fEgBxBCwvkzu4gZhCs4siBQViEJDdgeFv1YUH1lVFN_q3DOR/s1600/sus-Ayoub-Etmaiti-youtube.png" /></a>
<a href="رابط الخلاصة هنا" target="_blank" title="¡الخلاصة!"><img class="Azrar-Ayoub-Etmaiti" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzR5gV5lEy4o3RL2ImMOay-Xd2hBoMKJG5faBqh67GEIVJCys_W7BuppIGFJ3KCFwO1fiMvYzKvr0R5yexxNN6xKfId9gJ6BxWG2B8KpIo4SoJt15lMQlO0BiCef6PtYPOwnBSJgSmN7eA/s1600/sus-Ayoub-Etmaiti-rss.png" /></a>
</div>

وأخيرا قم بحفظ الأداة

Résuméabuiyad