0 اضافة شريط تسلسل الموضوع - اين انت تقرأ الان بلوجر

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

للحصول على هذه الاضافة اتبع التالي :-

 لوحة تحكم مدونتك من هنا >> قالب >> تحرير HTML >> متابعة >> توسيع القالب :

ابحث عن الوسم التالي :       ]]></b:skin>

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

.breadcrumbs{ 
padding:5px 0px 5px 5px; 
margin:0;font-size:95%; 
line-height:1.4em; 
border-bottom:4px double #cadaef; 
}

ثم ابحث عن الوسم التالي:  <div class='post hentry uncustomized-post-template'>

وانسخ الكود التالي بعدها مباشرة :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
انت تقرأ .. &#187; <a expr:href='data:blog.homepageUrl'>الرئيسية</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

احفظ القالب ومبروك عليك الاضافة

منقول: الموضوع الاصلي 

0 اضافة صندوق اشتراك عبر البريد الالكتروني بثلاث اشكال جميلة

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

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

للحصول على هذا الكود يجب عليك 

اولا : قم بالدخول الى لوحة التحكم لمدونتك مـــن هنـــا 
ثانيا:  ادخل على التخطيط ثـــــــم اضافة أداة  HTML/JavaScript

ثم قم بنسخ الكود التالي وضعه فيها واحفظها. 

 ولا تنسى تبديل اسم مدونتي aliraqia باسم مدونتك

الاضافة الاولى : الشكل الاول

<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZpHTKfyJa_S-6mvUZRo-_dyyzDz2Ye2aXVqu0EVnsFyCJH0FNPSfZE4Xhov1keXk07pS-a3Bur0dmwn30OXnpGtKqw9UaILi17ko6iaY_tqnXALz9WTEGmG_dBbgd2BVcxEZ1LIqBBan/s1600/latesthack.com-red.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aliraqia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="aliraqia" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

الاضافة الثانية: الشكل الثاني

<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXk9tbit-j-gqaX6EuCZvlvUQt1ULMdkBjchHpRQ9Fxqk5R-H3bPdb6nvhyphenhyphenk5ZElroggDusHYvlbcQ_uuCmooDMYxSpjDZbc7FapkFbGLIv-Vx2-uRhB1CcW2aiUASPhUBtpoOZplAJAMk/s1600/latesthack.com-silver.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aliraqia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="aliraqia" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

الاضافة الثالثة: الشكل الثالث

<style type="text/css">
#latesthack-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4CqZlkKle3JnoN5_7TbcU-pdKBw2ZiNXBPT-1M3PbTI2pRHM51Gy0pXdhlFk0CBCH8hQZ-uvm9t-OexYnXD7N1_zoDntq3wPgqUCXibho76djIfZpGwepSeuLTn6ewwOGgsrdmIa1nPew/s1600/latesthack.com-blue.png) no-repeat scroll center center transparent;width:368px;height:143px;disaply:block;}
form#latesthack-searchform{display: block;padding: 69px 0px 0px 45px;margin:0;}
form#latesthack-searchform #s{padding: 2px 6px 5px 2px;margin:0;width: 211px;font-size:14px;vertical-align: top;border:none;background:transparent;font-family:georgia;font-style:italic;}
form#latesthack-searchform #sbutton{margin:-7px 0px 0px 7px;padding:0;height:34px;width:72px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="latesthack-searchbox">
<form id="latesthack-searchform" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=aliraqia', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
 <input type="hidden" value="aliraqia" name="uri" /> <input type="hidden" name="loc" value="AR_ar" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" id="s" />
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

3 طريقة اضافة تعليقات الفيسبوك Facebook لمدونة بلوجر

بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاته

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

حيث سيكون شكل التعليقات كما في الصورة ادناه

أولا: انشاء تطبيق على الفيسبوك:-

اذهب الى موقع الفيسبوك لانشاء تطبيق اضغط هنا 
تابع الشرح بالصور اضغط عليها لتراها بحجم كبير ...

بعد الانتهاء من انشاء التطبيق ستظهر لك هذه الصورة فوق تعني انها تم الانشاء بصورة صحيحة

ثانيا: اضافة الاكواد :- لاتنسى اخذ نسخة احتياطية من القالب قبل عمل اي شئ 

ادخل الى لوحة تحكم مدونتك مــن هنــا
ثم الى قالب ثم تحرير html ولا تنسخ ان تضع علامة على توسيع القالب.
ابحث عن الكود التالي :

<html

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

xmlns:fb='http://www.facebook.com/2008/fbml'

 ملاحظة السهم بالاسفل هو يكون في البداية وليس كما بالكود السبب من المدونة يتجعله بالنهاية لكنه الان صحيح وجرب نسخه الى مفكرة في جهازك 
ليصبح بهذا الشكل
<html xmlns:fb='http://www.facebook.com/2008/fbml'

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

<body>

ملاحظة: بالنسبة للقوالب الجديدة يكون بهذا الشكل :-

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

ضع الكود التالي أسفل احد الكودين حسب ماموجود عندك :-

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;ضع رقم التطبيق هنا&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/ar_AR/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script> 

ضع رقم التطبيق الذي انشأناه سابقا بدل عبارة (ضع رقم التطبيق هنا) .

 الان ابحث عن </head>                 وضع الكود التالي فوقه مباشرة 

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='مدونة الكوفي العراقية' property='og:site_name'/>
<meta content='رابط  صورة  اللوغو الخاص بالمدونة' property='og:image'/>
<meta content='رقم التطبيق' property='fb:app_id'/>
<meta content='http://www.facebook.com/amir.al3raQi' property='fb:admins'/>
<meta content='article' property='og:type'/>

1- غير (مدونة الكوفي العراقية)  باسم مدونتك
2- غير  رابط اللوغو الخاص بمدونتك  بحيث ستضهر هذه الصورة بجانب عنوان موضوعك

     على بروفيلات الزوار ويفضل أن تكون بحجم 40px * 40 px .
3- بدل  رقم التطبيق برقم التطبيق الدي أنشأناه بالبداية
4- غير اسمي amir.al3raQi برابط بوفيلك وليس صفحتك

ثالثاً: الخطوة الاخيرة :-
ابحث عن الكود التالي :-

<b:includable id='comment-form' var='post'>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
</div>
</b:if>

يمكنك تغير مايلي حسب شكل ولون مدونتك .

1- اللغة  ar_AR   تجعل  الاداة باللغة العربية  ويمكن ارجاعها بالانجليزية  بوضع en_US .-
2- اللون light  تعني لون الصندوق الطبيعي وهي الأبيض  ويمكنك ارجاعه أسود وضع مكانها DARK .
3- القياس 520  تعني عرض الصندوق ويمكنك التعديل عليه  الى مايناسبك بتغيير الرقم .

احفظ القالب ومبرروك عليك الاضافة 

0 وضع صورة او نص فوق صندوق التعليقات لمدونة بلوجر

بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

سنتعرف في هذه التدوينة ان شاء الله على طريقة مهمة وهي لتنبيه الزائر بشئ لا ترغبه او لتنبيهه بشئ او ميزة موجود في التعليقات وهو لم يعلمها وهي ميزة مهمة لمن يرغب بها وهذا نموذج من الشكل لصندوق التعليقات بعد التعديل ..

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

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

بعدها ابحث عن الوسم التالي ومباشرة ضع الاكواد التي سأدرجا بعده :-

<p><data:blogCommentMessage/></p>

ضع كود الصورة مع رابلكي يكون بهذا الشكل:-

<p><data:blogCommentMessage/></p>
<img src="رابط الصورة" border="0" />

اذا كانت لديك صورة معينة خير على خير واذا تملك فيمكنك استخدام هذه الصورة.

وهذا رابط الصورة يمكنك استخدامه.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDk6debnr99s_VLb0LMxMkRp1lhx-M_cb4V0P9tCeDDDKiphP0U-dNLlUlciyzqaqn7pIB3-ZxkCauNzMHfVPwaV-oeayDYwhknaSl-SnLC_op_3loN0KPv4zVuy4lZqYVhBE6cxxmOB6/s1600/warnning.png

واما اذا كنت تريد ان تضع جملة معينة فيمكنك ان تضع الكود التالي تحت الوسم الذي ذكرناه سابقاً :-

الرجاء تجنب استعمال التعليقات الزائفة والتي فيها روابط اعلانية للمواقع.
يمكنك استخدام اكود الهتمل ألخ.

<div class="warning" style="background: #F3F9FB url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTAYki-daSYnYdqcNJeWLeoeFKu4NYkHcGa2o0Ea-YLLK5mw4J7Mv5TR27ce2zFK3i5x__WC-L9YiLnnEYu2b5tf3ChWrblwD5LSFR8eyhY2x_RxBzyrU0b2r3upP6X2jL81GbKP4MQaB/s1600/comment_user_warning.png) 8px 6px no-repeat; border: #A8D1E6 1px solid; padding: 5px 5px 5px 40px;">
الرجاء تجنب استعمال التعليقات الزائفة والتي فيها روابط اعلانية للمواقع.
يمكنك استخدام اكود الهتمل ألخ</div>

0 تغيير شكل التعليقات إلى شكل جميل وجذاب للبلوجر

بسم الله الرحمن الرحيم 

السلام عليكم ورحمة الله وبركاته 

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

لنبدأ على بركة الله

المرحلة الأولى : ضبط إعدادت التعليقات المترابطة من لوحة التحكم

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

5 - بعد حفظ الإعدادت توجه إلى مشاركات وتعليقات 
6 - الأن موقع التعليقات إجعلها مضمن 

المرحلة الثانية: إضافة الكود إلى القالب 

1-في لوحة التحكم الخاصة بمدونتك توجه إلى قالب بعدها تحرير HTML ثم أنقر على متابعة

2- ثم إعمل علامة على توسيع قوالب عناصر واجهة المستخدم.

3- الأن قم بالبحث عن :
<b:include data='post' name='comments'/>

قم باستبداله بـهذا الكود

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/></b:if>

 ملاحظة : إذا وجدت كودين أو فقم كذلك بإستبدالهم .

4-الأن قم بالبحث مرة أخرى عن :
]]></b:skin>

وقم بإضافة الكود قبله :

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 14px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:right;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 6px -4px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 12px;
float: left;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: right;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-right: 48px;
  position: relative;
padding: 20px 15px 20px 15px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

الموضوع منقول المصدر: انقر هنا

==============================