U3F1ZWV6ZTI4OTM3MTAzMjk2MDQ4X0ZyZWUxODI1NjAyNjk3NTMyOA==

اضافة ازرار المشاركة الاجتماعية لمدونات بلوجر

شارك مع اصدقائك:

3
يساعد اضافة ازرار المشاركة الاجتماعية لمدونات بلوجر في الحصول على المزيد من الزيارات من مواقع التواصل الاجتماعي مثل فيسبوك وتويتر و Pinterest و Stumbleupon و Linkedin و Digg وما إلى ذلك.

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

 اضافة خط Awesome

Font Awesome خط خاص بظهور الايقونات في الازرار، في الغالب قد يكون مضاف عندك في اكواد قالب مدونتك للتاكد من ذلك قم بالضغط من الكيبورد على 'CTRL + F' وقم بالبحث عن 'awesome' اذا كان هناك فمباشرة قم بتخطي هذه الخطوة.
لاضافة خط font awesome كل ماعليك الدخول الى قالب مدونتك (المظهر ← تحرير HTML) والبحث عن '/head' و ضع فوقها مباشرة الكود التالي.
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' integrity='sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN' rel='stylesheet'/>

 كود المشاركة في المواقع الاجتماعية

كود HTML
  1. ابحث عن <data:post.body/> في الغالب ستجد اكثر من وسم.
  2. كل ماعليك فعله و ضع تحت كل وسم  كلمة لتحدده مثلا الوسم الاول ضع اسفله test1 و الثاني test2 و الثالث test3 و هكذا.
  3. بعد ذلك قم بحفظ القالب ومعاينة احد مواضيع مدونتك وحدد مكان و ضع ازرار المشاركة على مواقع التوصل الاجتماعي على حسب ما وجدت.
  4. بعد ان تحدد المكان ترجع للقالب وتزيل تلك الكلمات التي ادخلتها مع الابقاء على الصحيحة منها فقط.
  5. اذا اردت ان تضيف ايقونات المشاركة الاجتماعية اعلى تدويناتك كل ما عليك اضافة الكود الاتي فوق <data:post.body/> الصحيح الذي وجدته، والعكس فاذا اردت ان تكون اسفل التدوينات فقط ضع الكود اسفله.
<p style='font-size: 20px;font-weight: bold;font-family: &quot;Droid Arabic Kufi&quot;, sans-serif;'>شارك مع اصدقائك: </p>
 <div class='share_button'>
    <a class='xosocial' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter fa_icon_share'/></a>

<a class='xosocial' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='share This'><i class='fa fa-facebook fa_icon_share'/></a>

    <a class='xosocial' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share This On Google'><i class='fa fa-google fa_icon_share'/></a>
    <a class='xosocial' expr:href='&quot;https://www.pinterest.com/pin/create/button/? url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Pin This On Pinterest'><i class='fa fa-pinterest fa_icon_share'/></a>
  <a class='xosocial' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Share This On Linkedin'><i class='fa fa-linkedin fa_icon_share'/></a>
   <a class='xosocial' expr:href='&quot;https://www.digg.com/submit?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Submit URL On Digg'><i class='fa fa-digg fa_icon_share'/></a>
   <a class='xosocial' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' target='_blank' title='Submit URL On Stumbleupon'><i class='fa fa-stumbleupon fa_icon_share'/></a>
  </div>

يمكنك ان تخصص الكود الذي بالاعلى بحذف كود الزر التي تريد ازالتها (كجوجل+ فلا فائدة منه مادامت الخدمة قد توقفت) وترك الذي تريد الابقاء عليه.

كود CSS
  1. قم بالبحث عن وسم ]]></b:skin>
  2. واضف الاكواد التالية فوقه مباشرة
.share_button{}
.share_button a{color:white}
.fa_icon {
  padding: 9px;
  font-size: 26px;
  width: 45px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.fa-skype {
  background: #00aff0;
  color: white;
}
.fa-android {
  background: #a4c639;
  color: white;
}
.fa-dribbble {
  background: #ea4c89;
  color: white;
}
.fa-vimeo {
  background: #45bbff;
  color: white;
}
.fa-tumblr {
  background: #2c4762;
  color: white;
}
.fa-vine {
  background: #00b489;
  color: white;
}
.fa-foursquare {
  background: #45bbff;
  color: white;
}
.fa-stumbleupon {
  background: #eb4924;
  color: white;
}
.fa-digg {
  background: black;
  color: white;
}
.fa-reddit {
  background: #ff5700;
  color: white;
}
.fa-rss {
  background: #ff6600;
  color: white;
}

 تخصيص تصميم ايقونات المشاركة الاجتماعية

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

1- شريط المشاركات الاجتماعية

اضف الكود التالي فوق ]]></b:skin>
.fa_icon_share {
  padding: .5%;
  font-size: 30px;
  width: 9%;
  text-align: center;
  text-decoration: none;
}

2- ازرار المشاركات الاجتماعية شكل مربعي

اضف الكود التالي فوق ]]></b:skin>
.fa_icon_share {
  padding: 1.5%;
  font-size: 25px;
  width: 5%;
  text-align: center;
  text-decoration: none;
}

3- ايقونات المشاركات الاجتماعية شكل دائري

اضف الكود التالي فوق ]]></b:skin>
.fa_icon_share {
  padding: 1.5%;
  font-size: 25px;
  width: 5%;
  text-align: center;
  text-decoration: none;
  border-radius: 25px;
}
إذا كنت تعتقد أنك بحاجة إلى مزيد من التخصيص، فيمكنك عمل ذلك من اكواد CSS.



تابعونا عبر مواقع التواصل الاجتماعي 
صفحتنا على الفيسبوك
الجروب الرسمي للقناة

رابط انستجرام 

رابط تيليجرم 

ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

الاسمبريد إلكترونيرسالة