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

9/04/2014

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

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


أولا إذهب إلى لوحة التحكم بلوجر ثم إختر قالب ثم تحرير 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(http://2.bp.blogspot.com/-Upn2CKa8jz4/UfWXo8SU2MI/AAAAAAAAAmU/_-ogegiJmkY/s1600/tw.png) no-repeat 87%;
background-color: #0ba6f7;}
.dhi_menu a.twitter:hover {
background: url(http://2.bp.blogspot.com/-Upn2CKa8jz4/UfWXo8SU2MI/AAAAAAAAAmU/_-ogegiJmkY/s1600/tw.png) no-repeat 87%;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.share {
background: url(http://1.bp.blogspot.com/-TAJGG5Ms9D4/UfWXogICbCI/AAAAAAAAAmQ/Upuhv9y0nnM/s1600/fb.png) no-repeat 87% center;
background-color: #003366;}
.dhi_menu a.share:hover {
background: url(http://1.bp.blogspot.com/-TAJGG5Ms9D4/UfWXogICbCI/AAAAAAAAAmQ/Upuhv9y0nnM/s1600/fb.png) no-repeat 87% center;
background-color: #ddd;
cursor: pointer;}
.dhi_menu a.plus {
background: url(http://2.bp.blogspot.com/-iZ2UMC49GFs/UfWXo_JR0UI/AAAAAAAAAmc/RQhjtJPCId8/s1600/g.png) no-repeat 87%;
background-color: #dc311b;}
.dhi_menu a.plus:hover {
background: url(http://2.bp.blogspot.com/-iZ2UMC49GFs/UfWXo_JR0UI/AAAAAAAAAmc/RQhjtJPCId8/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>
الأن قم بحفظ القالب ونتهي.

بنرحالي بوشعيب مغربي من مواليد 1992 مدون ومصمم جرافيكس مؤسس مدونة شوبيكسو للمعلوميات وموقع بنرحالي لتصاميم المجانية، أهتم بأخر أخبار التقنية والتكنولوجية أقضي كل فراغي أمامة شاشة حاسوبي.

مواضيع ذات صلة

التالي
« السابق
السابق
التالي »