كيفية إضافة أزرار المشاركة في المواقع الإجتماعية أنيقة لـ (لمدونات البلوجر)؟

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

إعلان: يوفر لك موقع خمسات المتخصص في تقديم الخدمات المصغرة مجموعة من خدمات مدونات بلوجر متنوعة مع دعم فني للقوالب و تشفير وفك تشفير قوالب بلوجر بالإضافة إلى تعديل وإصلاح قوالب بلوجر، مع متخصصين محترفين في مدونات بلوجر.

    إليكم طريقة إضافة أزرار المشاركة على المواقع الإجتماعية، أزرار المشاركة التالية هي جوجل بلس توتر وبالطبيعة الحال فيس بوك.

أولا إذهب إلى لوحة التحكم بلوجر ثم إختر قالب ثم تحرير HTML.

قم بالبحث على الكود التالي :

 ]]></b:skin>

بعد أن تجده أضف قبله الكود التالي:

.dhi_menu {
float: left;
margin: 0 0 0 8px;
padding: 0;
position: relative;
z-index: 9999;
margin-top: 26px;}
.dhi_menu ul {
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;}
.dhi_menu ul li {
float: right;
margin: 3px;
display: block;
padding: 0;
margin-top: 8px;}
.dhi_menu a.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DOt19N-l2jW7sdE7A9Rrwzirmt2mH9g_6DdKCzjPhQlJwXCR99fGmSfLmS4drvtxglU0m6ErVRF2zjPTAnd4fxPMkdmM0xt3tXUNFnEG7XEm2ErZaHUhQgkwWhk4Nl_Z8F_6B7HdsUo/s1600/tw.png) no-repeat 87%;
background-color: #0ba6f7;}
.dhi_menu a.twitter:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-DOt19N-l2jW7sdE7A9Rrwzirmt2mH9g_6DdKCzjPhQlJwXCR99fGmSfLmS4drvtxglU0m6ErVRF2zjPTAnd4fxPMkdmM0xt3tXUNFnEG7XEm2ErZaHUhQgkwWhk4Nl_Z8F_6B7HdsUo/s1600/tw.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.share {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfI3FEMGjwmZTLjOpcxFVTqiqnl1OQPXebqa9glH9HbNnaz3LygAtzAxSFtvcDMVNWXTPemY3imYwdxUevN9SEJa0xEalGcF3DfOrWF1cQZ2WhcDWvz7ltTsHyuARcpsUB1LkohhvdvA/s1600/fb.png) no-repeat 87% center;
background-color: #003366;}
.dhi_menu a.share:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPfI3FEMGjwmZTLjOpcxFVTqiqnl1OQPXebqa9glH9HbNnaz3LygAtzAxSFtvcDMVNWXTPemY3imYwdxUevN9SEJa0xEalGcF3DfOrWF1cQZ2WhcDWvz7ltTsHyuARcpsUB1LkohhvdvA/s1600/fb.png) no-repeat 87% center;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.plus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrKR3Qo49_cjyR2xABNH4Kqn0xZLWZylDdpJ17HRV16-RzB52Eku3_wyXcbfYyfRhfQf2och2H1BYNr97Qqq6KNXC7JFto4kgADQ-qYEuIW2WdDOiy47yfFpwe1G1hwgEuiJx1Tg-YprI/s1600/g.png) no-repeat 87%;
background-color: #dc311b;}
.dhi_menu a.plus:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrKR3Qo49_cjyR2xABNH4Kqn0xZLWZylDdpJ17HRV16-RzB52Eku3_wyXcbfYyfRhfQf2och2H1BYNr97Qqq6KNXC7JFto4kgADQ-qYEuIW2WdDOiy47yfFpwe1G1hwgEuiJx1Tg-YprI/s1600/g.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu ul li a {
padding: 10px 30px 10px 10px;
border-radius: 3px;
font: normal 12px tahoma;
float: right;
display: block;
color: #FFF;}

الأن إبحث عنالكود التالي:

<div class='post-footer-line post-footer-line-1'>

وأضف قبله الكود التالي مباشرة الكود التالي:

<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=600,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>

الأن قم بحفظ القالب وانتهي.

بوشعيب بنرحالي
بواسطة : بوشعيب بنرحالي
مدون ومصمم جرافيك وموشن جرافيك، مؤسس موقع Chobixo Tech، كنت أعمل كـ مدير ويب في أحد الجرائد الإلكترونية، أعمل حاليا كـ مترجم تقني لدى شركة EaseUS العالمية المتخصصة في إنتاج أدوات الإدارة الحوسبية - للتواصل معي : Benrahhali00[at]Gmail.com