أداة breadcrumbs لتتبع مسار تصفحك للمدونة من تعريبي breadcrumb navigation for blogger

أداة breadcrumb navigation  لمعرفة وتتبع موقع القسم الذي تتصفحه بالمدونة

أداة breadcrumbs تبين لك  مسار تصفحك للمدونة من تعريبي بالكامل

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

مما يسهل للزائر تصفح مدونتك  بسهولة ووضوح واكثر احترافية

مشاهده حيـّه Live Demo

والآن نأتي لطريقة الإضافة:


*(ينصح بعمل نسخة إحتياطية أولاً من قالب المدونة في حال حدوث خطأ)


اولاً ندخل الى:

*قالب او Template >> تحرير شيفرة HTML >> متابعه أو Procced >> توسيع Expand



*إتبع الشرح المصور

1- نذهب لـ قالب

2- نضغط تحرير HTML

 3- نضع علامة صح لتوسيع القالب

4-  (لسهولة البحث إضغط CTRL+F من الكيبورد )

5- نبحث عن السطر التالي:

<b:include data='top' name='status-message'/>

ونقوم بنسخ السطر الملون بالاخضر بالاسفل فوقه مباشرة:

<b:include data='posts' name='breadcrumb'/>

6- نبحث عن السطر الآخر التالي :

<b:includable id='main' var='top'>

*تنبيه: إن وجدت هذا السطر مكرر مرتين بنتيجة البحث فقم بإختيار السطر الثاني منهما 
"المهم إختار سطر واحد فقط تنسخ تحته الكود"

7- ننسخ الكود التالي تحت السطر الذي بحثنا عنه بالنقطه (6)

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>

الرئيسية</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>

الرئيسية</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title'

rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>

الرئيسية</a></span> &#187; <span>غير مصنف</span> &#187;

<span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>الرئيسية</a></span> &#187; <span>الأرشيف لشهر

<data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>الرئيسية</a></span> &#187; <span>كل

المواضيع</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>الرئيسية</a></span> &#187; <span>مواضيع تحت أقسام

<data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

*ملاحظة قبل الانتقال للخطوة التالية :

الكود أعلاه يقوم بإظهار اخر كلمة من الوسوم او التصنيفات او الـ Labels التي حددتها لتصنيف تدوينتك

حتى لو كنت قد حددت اكثر من تصنيف لها

كما هو موجود بالصورة بالاسفل:

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

كما هو موضح بالصورة بالاسفل

فقم بحذف السطرين الملونين باللون الأزرق بالكود أعلاه

8- نبحث عن السطر التالي :

]]></b:skin>

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

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

9- نقم بحفظ القالب وهكذا قد إنتهينا




والآن أصبح بمدونتك أداة breadcrumb navigation لتحديد مسار تصفح زوارك بالمدونة

تهانينا ....!

إقرأ المزيد... >>

إضافة أزرار المشاركة بتأثيرات أنيقة Social buttons with effects

إضافة أزرار المشاركة بتأثيرات Social shares buttons with effects

إضافة أزرار مشاركة بتأثيرات رائعه وأنيقة تعطي رونق وأناقة لمدونتك

مشاهده حيـّه Live Demo

*ولطريقة إضافتها نتبع الخطوات التالية :

1- ندخل للتخطيط او الLayout

2- إضافة اداة او Add Gadget

3- نختار اداة HTML/Javascript

4- ننسخ بالصندوق الكود التالي :

<!-- Social Bookmarking Widget With Animated Tooltips  -->

<script type="text/javascript">

  var SHRCB_Settings = {"shr_classic":{"size":"32","link":"","service":"5,7,313,309,78,304,88","apikey":"2fc518bd8c0bb3cf45bdade11877971c1","shortener":"bitly","shortener_key":"","designer_toolTips":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};

  var SHRCB_Globals = {"perfoption":"1"};

  </script>

 <!-- End Shareaholic Classic Bookmarks settings -->

        <!-- Start Shareaholic Classic Bookmarks script -->

<script type="text/javascript">

       (function() {

            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;

            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-cb.min.js";

            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);

        })();

        </script>

<!-- End Shareaholic Classic Bookmarks script -->

        <script type='text/javascript'>

          if (typeof(SHR4P)=="undefined") SHR4P = {};

          SHR4P.blogger_addDiv = SHR4P.blogger_addDiv || function(divClass)

          {

                  var post = new RegExp('hentry');

                  var titleContainer = new RegExp('post-title');

                  var postContainer = new RegExp('post-footer');

                  var elements = document.getElementsByTagName('div');

                  for (var i = 0; i < elements.length; i++) 

                  {

                      var classes = elements[i].className;

                      if (post.test(classes)) 

                      {

                          var container = elements[i];

                          for (var j = 0; j < container.childNodes.length; j++)

                          {

                              var item = container.childNodes[j].className;

                              if (titleContainer.test(item))

                              {

                                  var link = container.childNodes[j].getElementsByTagName('a');

                                  if (typeof(link[0]) != "undefined")

                                  {

                                      var url = link[0].href;

                                      var title = link[0].innerHTML;

                                  }

                                  else

                                  {

                                      var url = document.url;

                                      var title =  container.childNodes[j].innerHTML;

                                  }

                                  if (typeof(url) == "undefined"|| url == 'undefined' ){

                                      url = window.location.href;

                                  }

                                  title=title.replace('"',"%22");

                              }

          

                              if (postContainer.test(item))

                              {

                                  var footer = container.childNodes[j];

                              }

                          }

                          var d = document.createElement('div');

                          var code = '<div style="clear:both"></div><div class="' + divClass + ' shareaholic-show-on-load" data-shr_href="' + encodeURI(url) + '" data-shr_title="' + title + '"></div><div style="clear:both"></div>';

  

                          d.innerHTML = code;

                          container.insertBefore(d , footer);

                    }

                }

                return true;

        };

        SHR4P.blogger_addDiv("shr_classic");</script>

5- ثم حفظ وهكذا إنتهيت



والآن أصبح بمدونتك أزرار مشاركة بتأثيرات أنيقة ..تهانينا...!

إقرأ المزيد... >>

شرح إضافة صفحة بمدونة بلوجر بالصور Add Page in blogger

شرح إضافة صفحة بمدونة بلوجر بالصور Add Page in blogger

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

نتبع الشرح الموضح بالصور والمرقم بالتتابع:

1- نذهب لخيار الصفحات او Pages

2- نختار نوع الصفحة من القائمة المنسدلة

3- هذا الإختيار لعمل صفحة لها موضوع مستقل وتضمينها فيديو او صور او معلومات

4- هذا الإختيار لعمل صفحة توجه لرابط مباشر او عنوان موقع بشكل مباشر

كالمثال الموضح مثل بالصورة  بالاسفل :

*بعد أن اعددنا الصفحة الجديدة نحدد إختيار مكان عرضها كما هو موضح بالصورة بالاسفل:

1- نحدد عرض الصفحات

2- لوضعها بالجزء الأعلى

3- لوضعها بالعمود الجانبي او الـ Sidebar

4- لإختيار عدم عرض الصفحات بالواجهة والتوجيه لها بكتابة عنوان الرابط بأيّ موضوع



وأخيراً بعد الانتهاء من تحديد مكان عرض الصفحة نختار حفظ الترتيب:

وهكذا قد أتممت اعداد صفحتك الجديدة ...تهانينا...!

إقرأ المزيد... >>

إضافة صندوق تويتر العائم بمدونة بلوجر floating twitter tweets box

إضافة صندوق تغريدات تويتر العائم بمدونة بلوجر floating twitter box


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

مشاهده حيـّه Live Demo

ولإضافته نتبع الآتي:

1- ندخل للتخطيط او الLayout

2- إضافة اداة او Add Gadget

3- نختار اداة HTML/Javascript

4- ننسخ بالصندوق الكود التالي :

 <style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}

#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}

#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}
#kakinetwork_left{z-index:10003;border:2px solid #303030;background-
color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}

</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on"><div id="twitter_right" style="top: 20%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZZAU2p_nqN6o0-JnurK85d7VgWnqfP4p0hokC_RIpFUs9JRO-5PZyeFpJ36jS2vzrX837ojTLvSHf8rArBJxyG0ojFlKxXhlcXUfr_xDlCisVlyq6jd5DMJb9OkCcgnar60Bo25sLkdw/s320/allbloggingtips.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 260,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('blog2noob').start();</script></div></div></div>

5- قم بإستبدال الموجود باللون الأحمر blog2noob  بعنوان حسابك بتويتر 

6- ثم حفظ وهكذا إنتهيت 

والآن أصبح بمدونتك صندوق تغريدات تويتر العائم ... تهانينا..!

إقرأ المزيد... >>

إضافة ازرار المشاركة بمدونة لوجر العائمة Floating share buttons

أداة إضافة ازرار المشاركة الرائعة لمدونتك ببلوجر  Floating share buttons bar

ولإضافة تلك الأداة نقوم بعمل الآتي

1- نذهب لقالب او Template 

   *هنا خطوة إختيارية لمن يريد أخذ نسخة إحتياطية للقالب في حال حدوث خطأ

 

*ثم نختار تنزيل النموذج بالكامل أو Full download 

  

2- إختيار  Edit أو تحرير شيفرة HTML 

3- نضغط على متابعة أو proceed

 4-ثم نضغط على توسيع القالب او Expand

 ومن لوحة المفاتيح نضغط CTRL+F للبحث بالكود بشكل اسهل عن السطرالتالي:

<body>

و نقوم بنسخ هذا الكود أسفل السطر  :

 <!-- AddThis Button BEGIN (blog2noob.blogspot.com) -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left: 50px; top: 50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count" href="http://www.blogger.com/blogger.g?blogID=7085736832521121017"></a>
<a class="addthis_button_tweet" href="http://www.blogger.com/blogger.g?blogID=7085736832521121017" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall" href="http://www.blogger.com/blogger.g?blogID=7085736832521121017"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50a7a8c60990b1f8" type="text/javascript"></script>
<!-- AddThis Button END -->

ثم نضغط حفظ (ويفضل قبلها معاينة لنتأكد من ان الخطوات سليمة)

والآن اصبح بمدونتك ازرار مشاركة العائمة ...تهانينا!

إقرأ المزيد... >>