إضافة المشاركة عبر الشبكات الإجتماعية متجاوبة

السبت, مايو 14, 2016
إضافة المشاركة عبر الشبكات الإجتماعية متجاوبة


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

# إفتح قالب مدونتك وابحث عن ]]></b:skin>  أو </style> وضع الكود التالي فوقه
/* Share this button
---------------------------------------------- */
#share-this{
  text-align:center;
  float:center;
  overflow:hidden;
  margin:30px 0 0 0;
  padding:15px;
  line-height:1.4em;
  background:#f5f5f5;
}
#share-this a{
  float:center;
  display:inline-block;
  color:#fff;
  padding:10px 14px;
  text-align:center;
  margin:0 3px 3px;
  font-size:12px
}
#share-this a.this-fb{background:#395796;}
#share-this a.this-tw{background:#4cb0ea;}
#share-this a.this-gp{background:#de3425;}
#share-this a.this-fb:hover,
#share-this a.this-tw:hover,
#share-this a.this-gp:hover {opacity:.5}
#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{
  background:url(https://lh3.googleusercontent.com/-3feUQV1fYJw/Vo6SSrMNHWI/AAAAAAAABN4/97odFI5E6LA/s226-Ic42/social%252520share%252520hafidnotes.blogspot.co.id.png) no-repeat;
  width:22px;
  height:18px;
  display:inline-block;
  vertical-align:text-top;
  margin-top:-6px;
  text-align:center
}
.this-fb i{background-position:0 -100px;margin-top:-4px}
.this-tw i{background-position:0 -150px}
.this-gp i{background-position:0 -200px}
@media screen and (max-width:414px){
#share-this{margin:10px 15px}
#share-this a{width:100%;
  padding:0;
  text-align:center !important;
  height:45px;
  line-height:45px;
  margin:0 auto 3px !important;
}
#share-this a.this-gp i,
#share-this i{display:none}
#share-this a.this-gp{height:auto;margin:0 auto;padding:0}
}
بعد ان تضيف الكود فوق إبحث عن <data:post.body/> إختيار الخيار الثاني لأنك ستجد 2 من الأكواد المتشابهة ،اضف الكود التالي تحته مباشرة 
<!--Share This button Start -->
<div id='share-this'>
<center style='margin-top:10px;margin-bottom:30px;font-weight:700;font-size:28px;'>SHARE THIS</center>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a>
<a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a>
<a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/>Plus on Google+</a></div>
<!--Share This Button End -->
الأن انتهينا احفض القالب وزر مدونتك لمعاينة الإضافة ، يمكنكم طرح إستفساراتكم عبر التعليقات تحت شكرا .


أظهر التعليقات