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

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

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

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

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

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

قالب بلوجر معرب باسم Facebook

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

ولكن له خلفية وقائمة تشبه موقع الفيس بوك

يمكن التعديل على القالب بكل سهولة

(اذا واجهتك مشكلة في التعديلاكتب مشكلتك في التعليق وسنساعدك)

لون القالب :ازرق

لتحميل القالب

من هنا

كلمات دلالية

• قالب
• بلوجر
• مدونة
• انشاء موقع
• قالب بلوجر
• مجاني
• احترافي

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

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

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

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

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- الرابط بالأزرق : هو رابط الصورة التي ستظهر مع الموضوع الذي لا يحتوي على أية صورة (يمكنك تغييرها برابط صورة من اختيارك)
انتهينا من تركيب الاضافة......
مع تحيات حمزة رمزي...........

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

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

                            معاينة شكل اضافة تسجيل الدخول الى بلوجر 

طريقة إضافة  تسجيل الدخول بالمدونة بحساب البلوجر

1- من لوحة التسجيل   >>>   تخطيط   >>>   اضافة أداة html/javascript .

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

تسجيل الدخول بمدونات بلوجر <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div>

<label for="Email">اسم المستخدم: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div>

<label for="Passwd"> كلمة السر: (<a target="_top" title="هل نسيت الرقم السرى" href="https://www.blogger.com/forgot.g">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/>

<input id="signin-btn-ns" tabindex="0" value="سجل الأن" class="ubtn ubtn-block" name="submit" type="submit"/></form>

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

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

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

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

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

طريقة اضافة أداة البحث لمدونة بلوجر

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

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

<style>

#MBBOldSearch {

display: block;

clear: both;

margin: 10px 0;

}

#MBBOldSearch #MBBSinput {

background: url("http://2.bp.blogspot.com/-Q-Ejkmx-Ki4/Teem3RZlpqI/AAAAAAAAA40/_p6u9Xpgs7c/s20/Search-icon.png") no-repeat scroll 8px center transparent !important;

padding: 7px 15px 7px 35px !important;

color: #444;

font-weight: bold;

text-decoration: none;

border: 1px solid #D3D3D3 !important;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 1px 1px 2px #CCC inset;

-moz-box-shadow: 1px 1px 2px #CCC inset;

box-shadow: 1px 1px 2px #CCC inset;

اwidth: 52%;

}

#MBBOldSearch #MBBSsubmit {

color: #444;

font-weight: bold;

text-decoration: none;

padding: 6px 15px;

border: 1px solid #D3D3D3;

cursor: pointer;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

background: #fbfbfb;

background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));

background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );

background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);

}

</style>

<div id="MBBOldSearch">

    <form action="/search">

        <input name="q" id="MBBSinput" type="text" />

        <input value="Search" id="MBBSsubmit" type="submit" />

    </form>

</div>

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

                طريقة تعديل أداة البحث لمدونة بلوجر لتتناسب مع مدونتك

- اللون الأزرق رابط الصورة الخلفية لأداة البحث يمكنك حذفها نهائيا أو تغييرها برابط صورة أخرى من اختيارك.

- اللون الأحمر عرض مربع البحث يمكنك تغييره ليتناسب مع عرض القائمة الجانبية لمدونتك .

- اللون الأخضر لضبط طول و عرض مربع'' بحث '' يمكنك تغيير القيم لتكبير أو تصغير المربع .

- اللون الأزرق الفاتح خصائص مربع ''بحث''(color لون الخط, font-weight نمط الخط ) يمكنك تغيير كود اللون ونمط الخط .
-اللون البرتقالي خصائص كلمة البحث التي يكتبها الزائر في مربع البحث (color لون الخط, font-weight نمط الخط ) يمكنك تغيير كود اللون ونمط الخط .
انتهينا من تركيب الاضافة وتعديلها ...
مع تحيات حمزة رمزي.........

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