الاثنين، 17 ديسمبر، 2012

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






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

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

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

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

breadcrumb navigation for blogger


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


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


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


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

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



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

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

breadcrumb navigation for blogger

2- نضغط تحرير HTML
breadcrumb navigation for blogger
 3- نضع علامة صح لتوسيع القالب
breadcrumb navigation for blogger


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

breadcrumb navigation for blogger

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 التي حددتها لتصنيف تدوينتك

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

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

breadcrumb navigation for blogger


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

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



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





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 لتحديد مسار تصفح زوارك بالمدونة

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

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

السبت، 15 ديسمبر، 2012

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

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

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


Social shares buttons with effects


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



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

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


Social shares buttons with effects




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


Social shares buttons with effects


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



Social shares buttons with effects


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



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

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



Add Page in blogger

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

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

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

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

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

Add Page in blogger
















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



Add Page in blogger

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

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

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

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



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


Add Page in blogger




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





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

الأربعاء، 12 ديسمبر، 2012

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


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


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


floating twitter tweets 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="http://2.bp.blogspot.com/-fcEMbjMcVhI/UDzNfUCWxcI/AAAAAAAAAt4/p0lew_c7Sxw/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- ثم حفظ وهكذا إنتهيت 

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




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

السبت، 8 ديسمبر، 2012

إضافة ازرار المشاركة بمدونة لوجر العائمة 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 -->



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

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








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