كيف تربح عن طريق موقع اختصار الروابط adf.ly
‏إظهار الرسائل ذات التسميات مشاكل و حلول. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات مشاكل و حلول. إظهار كافة الرسائل
اضافة أداة شريط جانبي للتواصل الاجتماعي يضم (فيسبوك-تويتر-جوجل+ يويوب وغيرهم.....)
[18:30 | 13 التعليقات ]

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

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

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

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 {
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- حذف بعض الصفحات اذا كانت لا توجد لديك(اذا اردت حذف احدى الصفحات فما عليك الا حذف كود الصفحة المراد حذفها)
كلمات دلالية
» تابع القراءة

كيف تنشئ فهرس لمدونتك حسب الاقسام وتاريخ النشر
[12:58 | 4 التعليقات ]

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

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

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

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 .
مع تحيات حمزة رمزي.......
» تابع القراءة

اضافة تعليقات فيسبوك الى بلوجربحيث تظهرتعليقات بلوجر وفيسبوك معا
[21:43 | 11 التعليقات ]

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

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

1- من لوحة التحكم  >>>  قالب >>> تحرير html .
2- ابحث بواسطة  ctrl+f على :











   <span class='item-action'>



    <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>



 <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>



  </a></span></b:if><div></div>
3- استبدله بالكود التالي :











 <span class='item-action'>



                              <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>



                                <img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>



                              </a>



                            </span>



                          </b:if>



                    <div>



                      <script src='http://connect.facebook.net/ar_AR/all.js#xfbml=1'/>



                      <fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' migrated='1' width='594'/>



                    </div>
كما تلاحظ قمنا باضافة سكريبت تعليقات فيسبوك  باللون الأحمرداخل الكود السابق فقط .
4- احفظ القالب

تعديل تعليقات فيسبوك لتتناسب مع ندونتك

width='594' : قم بتغيير الرقم594 بما يتوافق مع عرض مدونتك

تنبيه : الكود المقدم في الشرح يظهر تعليقات فيسبوك وبلوجر في آن واحد  دون الضغط على تعليقات فيسبوك أو تعليقات بلوجر.
اذا أردت ظهور تعليقات فيسبوك فقط بالضغط على أيقونة تعليقات فيسبوك وتعليقات بلوجر فقط بالضغط على تعليقات بلوجر  اقرأالشرح التالي:
كلمات مفتاحية
  • تعليقات فيسبوك
  • تعليقات بلوجر
  • فيسبوك
  • facebook
مع تحيات حمزة رمزي.............................
» تابع القراءة

اضافة مواضيع ذات الصلة مع ملخص للمواضيع و صورة مصغرة لكل موضوع
[21:20 | 0 التعليقات ]

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

شكل اضافة مواضيع ذات الصلة

اضافة مواضيع ذات الصلة مع ملخص للمواضيع و صورة مصغرة لكل موضوع

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

1- من لوحة التحكم   >>>  قالب   >>>   تحرير html
2- باستعمال  ctrl+f  ابحث عن :
]]></b:skin>
3- انسخ الكود التالي بعده مباشرة :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related_posts h4 {
font-weight: bold; font-size: 22px; line-height: 250%;&quot; face=&quot;Sorts Mill Goudy&quot; size=&quot;4&quot;;
}
#related_posts {
padding: 10px 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
font-family: &#39;Droid Sans&#39;, Arial, Verdana, sans-serif;
}
#related_posts h4, #comments .komhead h4 {
font-family: &#39;Oswald&#39;, sans-serif;
}
ul#relpost_img_sum {
    margin: 0;
    padding: 0;
}
ul#relpost_img_sum li {
    border-bottom: 1px dashed #DDDDDD;
    float: left;
    height: 82px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 10px 10px 10px 0;
    width:98%;
    height: auto;
}
ul#relpost_img_sum li a {
    display: block;
}
ul#relpost_img_sum li img {
    float: left;
    width: 60px;
    height: 60px;
    margin-right: 5px;
    padding: 2px;
    background-color: white;
    border: 1px solid #DDD;
}
ul#relpost_img_sum li a.relinkjdulx {
    background-image: none;
    color: #359BED;
    display: block;
    font-family: sans-serif;
    font-weight: bold;
    overflow: hidden;
}
</style>
<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary v1.0 (May 01, 2013)
copyright (c) 2013 http://rydnet.blogspot.com/*/
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 180;var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
//]]>
</script>
</b:if>

4- احفظ الأداة .
5- الآن  ابحث عن أحد الوسمين التاليين :
<div class='post-footer'>   أو   <div class = 'post-footer-line post-footer-line-3'>
6- انسخ الكود التالي بعده مباشرة :
  <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related_posts'> <div class='relhead'> <h4>مواضيع ذات الصلة:</h4><div class='stripe-line'/> </div> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/> </b:loop> <ul id='relpost_img_sum'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </b:if>
7- احفظ الأداة .

طريقة تعديل مواضيع ذات الصلة لتتناسب مع مدونتك

1- 5 العدد الأقصى للمواضيع التي تريدها أن تظهر أسفل الموضوع الأصلي.
2- 180 عدد الحروف القصوى التي ستكون في ملخص كل موضوع من المواضيع ذات الصلة.
3- يمكنك أن تشاهد أيضا  : يمكنك بأي عبارة أخرى من اختيارك (مثلا مواضيع ذات الصلة)
4- الرابط بالأزرق : هو رابط الصورة التي ستظهر مع الموضوع الذي لا يحتوي على أية صورة (يمكنك تغييرها برابط صورة من اختيارك)
انتهينا من تركيب الاضافة......
مع تحيات حمزة رمزي...........
» تابع القراءة