يمكنك اضافة آخر المواضيع في مدونتك لاطلاع زوارك على جديد مدونتك 

مميزات اضافة آخر المواضيع على شكل صور

* اضافة بالصور فقط.
* تحدث تلقائيا.
* يمكن وضعها في اي مكان تريد.
* التحكم في عدد المواضيع المراد ظهورها.
* التعديل على شكل الاضافة.

معاينة اضافة آخر المواضيع على شكل صور

مـــــــــــــــــــــــــــــــــن    هـــــــــــــنـــــــــــــــــــــا

 طريقة تركيب اضافة آخر المواضيع على شكل صور

1- من لوحة التحكم  >>>  تخطيط >>> اضافة أداة html/javascript .
2- ضع الكود التالي في الأداة :

<center> <style text-type="CSS">

img.label_thumb {float:center;padding:2px;background:#fff;border:1px solid #000;width:78px;height:78px;margin-right:10px;margin-top:5px;margin-bottom:5px; }

img.label_thumb:hover {opacity:0.8;filter:alpha(opacity=80);-moz-opacity:0.80;-khtml-opacity:0.8 }

</style>

<script type='text/javascript'>

//<![CDATA[

function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}

if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}

var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)

{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}

else thumburl='';}

document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');

if(i!=(numposts-1))

document.write('');}

document.write('</div>');}

//]]>

var numposts = 12;

</script>

<script type="text/javascript" src="http://rydnet.blogspot.com/feeds/posts/default?alt=json-in-script&callback=labelthumbs"></script>



<span style="float: right; font-size: 10px; font-weight: normal; line-height: 0px; margin-top: 15px;"></span></center>

4- احفظ الأداة.

 تعديل اضافة آخر المواضيع على شكل صور

1- قم بتغيير رابط مدونتي بالازرق http://rydnet.blogspot.com برابط مدونتك  .
2-رقم 12 بالاحمر هو عدد المواضيع المراد ظهورها في الاداة (يمكنك تغييره)
3- رقم 78 بالاخضر طول  وعرض الصورة (يمكنك تغييرها ) .

» تابع القراءة

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

شكل الشريط الجانبي للتواصل الاجتماعي بعد تركيبه

معيانة حية للشريط الجانبي للتواصل الاجتماعي
من هنا شريط جانبي للتواصل الاجتماعي

طريقة تركيب الشريط الجانبي للتواصل الاجتماعي

1- تسجبل الدخول الى بلوجر>>>تخطيط>>>اضافة اداة html/javascript

2-  نسخ الكود التالي في الأداة :

<style>

/*----------------http://rydnet.blogspot.com/ ~ Sidebar Social Widget-----------*/

#social-stats {

border-left: 1px solid #DDDDDD;

border-top: 1px solid #DDDDDD;

display: block;

float: left;

position: relative;

}

#social-stats ul {

overflow: hidden;

}

#social-stats ul li {

border-bottom: 1px solid #DDDDDD;

border-right: 1px solid #DDDDDD;

display: block;

float: left;

width: 33%;

}

#social-stats ul li a {

-moz-transition: all 0.6s ease-out 0s;

display: block;

float: left;

padding: 10px 0 3px;

text-decoration: none;

width: 100%;

}

#social-stats ul li a span, #social-stats ul li a large, #social-stats ul li a small {

display: block;

float: left;

margin: 0 auto;

text-align: center;

width: 100%;

}

#social-stats ul li a span {

background: url("http://4.bp.blogspot.com/-jN645A-bYkI/U0rQVit-liI/AAAAAAAADM0/zM2fqWp79kY/s1600/social_icon.png") no-repeat;

float: none;

height: 46px;

margin-bottom: 5px;

text-indent: -9999px;

width: 47px;

}

#social-stats ul li.ss-rss a:hover h5 {

background: #F18421;

}

#social-stats ul li h5 {

-webkit-transition: all 0.4s ease-out 0s;

-moz-transition: all 0.4s ease-out 0s;

transition: all 0.4s ease-out 0s;

background: #999999;

border-radius: 50% 50% 50% 50%;

margin: 0 auto;

width: 47px;

}

#social-stats ul li a span:before {

}

#social-stats ul li.ss-twitter a:hover h5 {

background: #45B0E3;

}

#social-stats ul li.ss-facebook a:hover h5 {

background: #3C5B9B;

}

#social-stats ul li.ss-google-plus a:hover h5 {

background: #F83E29;

}

#social-stats ul li.ss-youtube a:hover h5 {

background: #CC181E;

}

#social-stats ul li.ss-linkedin a:hover h5 {

background: #1790CD;

}

#social-stats ul li.ss-rss a span {

background-position: 0 0;

}

#social-stats ul li.ss-twitter a span {

background-position: 0 -91px;

}

#social-stats ul li.ss-facebook a span {

background-position: 0 -47px;

}

#social-stats ul li.ss-google-plus a span {

background-position: 0 -135px;

}

#social-stats ul li.ss-youtube a span {

background-position: 0 -180px;

}

#social-stats ul li.ss-linkedin a span {

background-position: 0 -226px;

}

#social-stats ul li a large {

color: #333232;

font-size: 25px;

font-weight: 500;

}

#social-stats ul li a small {

color: #333232;

font-size: 10px;

}

</style>

<div id="social-stats">
<ul>
<li class="ss-rss"><a target="_blank" href="/feeds/posts/default" rel="nofollow external"><h5><span>Rss</span></h5><large>5000</large> <small>Subscribers</small></a></li>
<li class="ss-facebook"><a target="_blank" href="https://www.facebook.com/rydnet" rel="nofollow external"> <h5><span>Facebbok</span></h5><large>14,782</large> <small>Followers</small></a></li>
<li class="ss-twitter"> <a target="_blank" href="http://twitter.com/rydnet" rel="nofollow external"> <h5><span>Twitter</span></h5><large>63,207</large> <small>Followers</small> </a></li>
<li class="ss-google-plus"><a target="_blank" href="https://plus.google.com/+hamzaramzi111/posts" rel="nofollow external"> <h5><span>Google+</span></h5> <large>70,781</large> <small>Followers</small> </a></li>
<li class="ss-linkedin"><a target="_blank" href="http://bd.linkedin.com/in/rydnet" rel="nofollow external"> <h5><span>Linkedin</span></h5> <large>2,453</large> <small>Followers</small></a></li>
<li class="ss-youtube"><a target="_blank" href="http://www.youtube.com/channel/UCg_nBioB-uPQMdz0krGUlJQ" rel="nofollow external"> <h5><span>Youtube</span></h5> <large>6,237</large> <small>Subscribers</small> </a></li>
</ul>
</div>

3-  حفظ الأداة .

4-  تعديل الروابط باللون الازرق في الكود بروابط صفحاتك للتواصل الاجتماعي (تعديل رابط صفحة فيسبوك وتويتر وغيرهم.....) 

5- حذف بعض الصفحات اذا كانت لا توجد لديك(اذا اردت حذف احدى الصفحات فما عليك الا حذف كود الصفحة المراد حذفها)

كلمات دلالية

• تواصل اجتماعي
• اضافة أداة
• فيسبوك
• تويتر
• جوجل+
• يوتوب
• مشاركة
• متابعة
• زوار
• مشتركين

مع تحيات حمزة رمزي.......

اشكال اخرى من اضافات التواصل الاجتماعي:

اضافة صندوق المتابعة في google+

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

اضافة صندوق المشاركة لقناةYOUTUBEمع صور المشتركين

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

اضافة زر الارسال send + زر الاعجاب like لمدونات بلوجر من فيسبوك facebook

» تابع القراءة

انشاء فهرس المدونة بالمميزات التالية :

 * يحدد عدد موضوعات مدونتك .

 * فهرس يحدث تلقائيا .

 * تظهر الموضوعات حسب المواضيع الاحدث .

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

شكل الفهرس بعد تركيبه

معيانة حية للفهرس

من هنا :      فهرس مدونة رياض بلوجر

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

1- اضافة صفحة جديدة (صفحة وليس مشاركة)

2- اعطاء اسم للصفحة مثلا فهرس المدونة او مواضيع الموقع

3- اعتماد التحرير عبر html (وليس تأليف)

4- امسح الاكواد التي ستجدها هناك كاملا (بحيث تصبح الصفحة فارغة)

5- اضافة الكود التالي في الصفحة :

<div dir="rtl" style="text-align: right;" trbidi="on">

<style type="text/css">

#bp_toc {

  border: 0px solid #000000; 

  background: #EAEAE8;

  padding: 0px;

  width:200px;

  margin-top:0px;

}

.toc-header-col1, .toc-header-col2, .toc-header-col3 {

 text-align: center;

 background:#EAEAE8;

-webkit-border-radius: 20px;

border-radius: 20px;

-webkit-box-shadow: inset 2px 2px 5px 5px #000000;

       

        box-shadow: inset 2px 2px 5px 5px #000000;

  color: #000000;

  padding-left: 0px;

  width:100px;

}

.toc-header-col2 {

  width:75px;

}

.toc-header-col3 {

  width:80px;

}

.toc-header-col1  a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link,  .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3  a:visited {

  font-size:80%;

  text-decoration:none;

}

.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {

  font-size:70%;

  text-decoration:underline;

}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {

  padding-left: 5px;

  font-size:70%;

border: 2px solid white !important;

-webkit-border-radius: 10px;

border-radius: 10px;

 background: #EAEAE8;

 white-space:nowrap;

}

</style>

<div id="bp_toc">

..إنتظر قليلا لتحميل الفهرس..</div>

<script src="http://conda3ianllkhir.googlecode.com/files/blogtoc_orig%282%29.js" type="text/javascript"></script>

<script src="http://rydnet.blogspot.com//feeds/posts/summary?alt=json-in-script&amp;max-results=500&amp;callback=loadtoc"  type="text/javascript"></script>

<a  href="http://rydnet.blogspot.com/2014/03/table-of-content-blogger-with-label.html" rel="nofollow" target="_blank"><span  style="color: #999999;"><span style="font-size: xx-small;">get  this widget</span></span></a>&nbsp;

</div>

<div dir="rtl" style="text-align: right;" trbidi="on">

</div>

6- قم بتغيير رابط مدونتي بالأحمر برابط مدونتك (ضروري تغيير الرابط والا فالفهرس لن يشتغل)
7- بامكانك تغيير مظهر الفهرس ليتناسب مع شكل مدونتك وذلك بتعديل خصائص css .
مع تحيات حمزة رمزي.......

» تابع القراءة

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

 مميزات هذا الفهرس

 * فهرس يحدث تلقائيا .

 * يظهر الصورة بجانب العنوان

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

شكل الفهرس بعد تركيبه

معيانة حية للفهرس

من هنا :      فهرس مدونة رياض بلوجر

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

1- اضافة صفحة جديدة (صفحة وليس مشاركة)

2- اعطاء اسم للصفحة مثلا فهرس المدونة او مواضيع الموقع

3- اعتماد التحرير عبر html (وليس تأليف)

4- امسح الاكواد التي ستجدها هناك كاملا (بحيث تصبح الصفحة فارغة)

5- اضافة الكود التالي في الصفحة :

<div dir="rtl" style="text-align: right;" trbidi="on">

<div dir="rtl" style="text-align: right;" trbidi="on">

<script src="https://googledrive.com/host/0B3ntuTCXGn6nQUlYNVdPQ0puakk"> </script> <script> var numposts = 999; var showpostthumbnails = true; var displayseparator = true; </script> <script src="http://rydnet.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=recent&amp;max-results=999"></script> <style type="text/css"> .sitemap-container {width: 100%; height: 100px; border-top: 2px solid #eee;} .sitemap-container:hover {background-color:#fafafa;} .thumbnail {width: 60px; height: 90px; float: right; top:0px;} .posttitle {height: 90px; float: left; line-height: 70px; margin-left:25px; display:block; width:80%; white-space:nowrap;} #postimg {margin-top: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 10px; width: 60px; border: 2px solid #eee;} #list{list-style-type: none; padding-right: 0px; margin-left: 0px;} </style></div>

<a href="http://rydnet.blogspot.com/2014/03/table-of-content-image-blogger.html" target="_blank"><span style="font-size: xx-small;"><span style="color: #cccccc;">احصل على فهرس لمدونتك</span></span></a> </div>

6- قم بتغيير رابط مدونتي بالأحمر برابط مدونتك (ضروري تغيير الرابط والا فالفهرس لن يشتغل)

7- بامكانك تغيير مظهر الفهرس ليتناسب مع شكل مدونتك وذلك بتعديل خصائص css .

مع تحيات حمزة رمزي.......

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

كيف تنشئ فهرس لمدونتك-1   - جديد !

كيف تنشئ فهرس لمدونتك-2   - جديد !

كلمات دلالية

• فهرس
• المدونة
• مواضيع 
• قسم
• اقسام
• فهرسة
• فهرس بلوجر
• مواضيع بلوجر
• جدول مواضيع
• فهرست

» تابع القراءة