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

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>
الأن قم بحفظ القالب ونتهي.

من فضلك إشترك بالقناة لتتوصل بأخر فيديوهاتنا

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

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