اضافة ازرار المشاركة ومواضيع ذات صلة فى صندوق واحد بشكل جميل واحترافى لبلوجر

مقدمة :

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

شاهد المثال االتالى لتتعرف اكثر

مثال مباشر

طريقة التركيب

أولا :
بالطريقة المعتادة لتحرير القالب (نتوجه الى القالب ثم تحرير html)
ونبحث عن الوسم التالى :  *(بالضغط بداخل القالب على ctrl+f)

]]></b:skin>

والصق قبله (فوقه) الكود التالى :

/*-----الخط المستخدم---*/

@font-face {
font-family: 'bouyardane';
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot');
src: url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.eot?') format('embedded-opentype'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.woff') format('woff'),
url('https://dl.dropboxusercontent.com/u/83505058/ge-ss-med-webfont.ttf') format('truetype'); }

/*-----شارك---*/
#tips {
padding-right: 47px;
font: 16px bouyardane, ges, arial;
color: #ffffff;
}
.dhi_menu {
width: 100%;
height: 20px;
background: #4D5A67 url('https://dl.dropboxusercontent.com/s/zvx6mbrw93akgp0/share-icon.png') no-repeat 99% 50%;
color: #fff;
line-height: 22px;
min-height: 0px;
padding: 10px 0px 10px 0px;
text-align: right;
direction: rtl;
}
.dhi_menu ul {
float: left;
list-style: none;
margin: -10px 0px 0px 15px;
padding: 0 !important;
width: 237px;
height: 38px;
}
.dhi_menu ul li {
float: right;
margin: 0px 4px 0px 4px;
display: block;
}
.dhi_menu a.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDcShRAP4YBxLu5FLDiifQVbp_37C1z4dGv9WGoPX08qNRj4ZTtt4CdOuR6QY8RF9HGSDQ7ZbNIi_OeSaYKTUyfhEI3eyEuWfqjGTeQYWOvdkZLu5GYsDCe8Eq7lIU4X-dvqd5YIckg/s1600/tw.png) no-repeat 87%;
background-color: #0ba6f7;
transition: 1s;
}
.dhi_menu a.twitter:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDcShRAP4YBxLu5FLDiifQVbp_37C1z4dGv9WGoPX08qNRj4ZTtt4CdOuR6QY8RF9HGSDQ7ZbNIi_OeSaYKTUyfhEI3eyEuWfqjGTeQYWOvdkZLu5GYsDCe8Eq7lIU4X-dvqd5YIckg/s1600/tw.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;
transition: 1s;
}
.dhi_menu a.share {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_816CO8j6VwTLGkKobhXV6AQjI9tAxUKsCUqq3pKDcUS57WW4YFk9flLLWhD3lXQJSRu4-QQq6LzSKneOMurz0RqS3iO45r71X5CetYt43q8XejtqwyXlneyW70Vc1S7DryFI-ML4g/s1600/fb.png) no-repeat 87% center;
background-color: #003366;
transition: 1s;
}
.dhi_menu a.share:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg_816CO8j6VwTLGkKobhXV6AQjI9tAxUKsCUqq3pKDcUS57WW4YFk9flLLWhD3lXQJSRu4-QQq6LzSKneOMurz0RqS3iO45r71X5CetYt43q8XejtqwyXlneyW70Vc1S7DryFI-ML4g/s1600/fb.png) no-repeat 87% center;
background-color: #ddd;
cursor: pointer;
transition: 1s;
}
.dhi_menu a.plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyojWhWiNW6xhxR8C2Nw3ob5HB3bdCOUhQ_5MnmPgJ3HI63TLICWnqJNcbHgTkY_c9c9niL9bCa-Bm-fPaRW-y0JT7ym5rmpOXcZ0N-vB7AxAqAbHY465cWMB_kvxQkQZT6SR76csng/s1600/g.png) no-repeat 87%;
background-color: #dc311b;
transition: 1s;
}
.dhi_menu a.plus:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLyojWhWiNW6xhxR8C2Nw3ob5HB3bdCOUhQ_5MnmPgJ3HI63TLICWnqJNcbHgTkY_c9c9niL9bCa-Bm-fPaRW-y0JT7ym5rmpOXcZ0N-vB7AxAqAbHY465cWMB_kvxQkQZT6SR76csng/s1600/g.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;
transition: 1s;
}
.dhi_menu ul li a {
padding: 10px 30px 10px 10px;
border-radius: 3px;
font: normal 12px tahoma;
float: right;
display: block;
color: #FFF;
}

/*-----مسافة---*/
#space1 {
width: 9px;
height: 23px;
background: #4d5a63;
margin: 0 150px 0px 0px;
float: right;
}
#space2 {
width: 9px;
height: 23px;
background: #4d5a63;
margin: 0 0px 0px 150px;
float: left;
}

/*-----مواضيع---*/
#related-posts2 {
margin-top: 0;
font-weight: normal;
background: #4D5A67 url('https://dl.dropboxusercontent.com/s/6kksqaryqhwuwik/Backgroud_rel.png') no-repeat;
background-size: cover;
border: solid 4px #4D5A67;
}
#related-posts2 ul {
margin: 8px 8px 8px 0;
padding: 0;
overflow: hidden;
}
#related-posts2 .heading-border {
padding: 7px 47px 7px 0px;
font: 16px bouyardane, ges, arial;
color: #fff;
margin: 0 0 15px;
background: #4D5A67 url('https://dl.dropboxusercontent.com/s/warkd0zkm6376qf/related-posts.png') no-repeat 99% 50%;
}
#related-posts2 ul li {
float: right;
height: 100%;
margin: 0 0 0 6px;
padding: 0;
width: 24%;
font-size: 14px;
font-weight: normal;
}
#related-posts2 ul li a{
line-height: 1.5em;
font: normal 12px bouyardane;
color: #FFF;
}
#related-posts2 ul li a:hover {
color: #F8B02F;
}
.pthumb {
padding: 0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
margin: 0 0 10px;
overflow: hidden;
}
.pthumb img {
height: 130px;
width: 130px;
border-radius: 190px;
border: solid 6px #FFF;
transition: 1s;
}
#related-posts2 img:hover{opacity:0.6;transition: 1s;}
#related-posts2 ul li:nth-child(4n+4){margin-right:0;}
#recent-posts li {
margin: 0 !important;
}
#recent-posts img {
margin-right: 10px;
float: left;
width: 50px;
height: 50px;
border: 3px solid #444;
}
#recent-posts li {margin: 15px 0 0;}
#recent-posts span {
color: #888;
font-weight: normal;
}

/*-----تعليق---*/
#comments_box_title {
padding: 7px 47px 7px 0px;
font: 16px bouyardane, ges, arial;
color: #fff;
background: #4D5A67 url('https://dl.dropboxusercontent.com/s/yrmlvgwg1n1qug5/comment.png') no-repeat 99% 50%;
}
/*-----By Hi-Tech-eg.blogspot.com---*/

ثانيا :
الكود التالى هو كود html ويوضع فى نهاية الموضوع ولكن بعض القوالب تختلف عن بعضها, فان لم تنجح معك الطريقة التالية فضع رابط مدونتك فى تعليق لكى اوضح لك مكان وضع الكود.

ابحث عن :

<div class='post-footer'>

(اذا وجدته مرتين فالثانى هو المقصود)

وضع بعده مباشرة (تحته) الكود التالى :

<div class='dhi_menu'>
<ul>
<li>
<a class='twitter' data-via='course4design' expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Twitter'>غرد</a>
</li>
<li>
<a class='share' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;, &apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank' title='Share on Facebook'>مشاركة</a>
</li>
<li>
<a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' rel='nofollow' target='_blank' title='Share on Google Plus'>إضافة</a>
</li>
</ul>
<div id='tips'>
شارك الموضوع لتعم الفائدة</div></div>

<div clacc='space' style='width: 100%; height: 23px;'>
<div id='space1'/><div id='space2'/></div>

<div id='related-posts2'>
<script type='text/javascript'>
//<![CDATA[
var ry='<h3 class="heading-border"><span>مواضيع ذات صلة قد تهمك</span></h3>';
//]]></script>
<script src='https://dl.dropboxusercontent.com/s/fh4rw1aaj7exd5i/relatedposts.js' type='text/javascript'/>
<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=related_results_labels&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=4;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>

<div clacc='space' style='width: 100%; height: 23px;'>
<div id='space1'/><div id='space2'/></div>

<div id='comments_box_title'>شاركنا رأيك</div>

اتمنى منك عدم نقل الموضوع بدون ذكر المصدر

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