×

كود ايقونات التواصل الاجتماعي لبلوجر

السلام عليكم و رحمة الله وبركاته, سوف نقوم الان بالتعرف على كيفية اضافة ازرار التواصل الاجتماعي لمقالات بلوجر ننتقل الان للخطوات: 1.قم بالذهاب الى لوحة
Like Tree1معجبون
  • 1 أضيفت بواسطة MR.MURTADA

قديمة 09 - 12 - 2016, 04:38
المشاركة 1
السلام عليكم و رحمة الله وبركاته,

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

ننتقل الان للخطوات:

1.قم بالذهاب الى لوحة تحكم بلوجر ثم قم بالضغط على قالب و منه تحرير HTML

2. اذا لم يكن لديك مكتبة fontawesome قم بالضغط ctrl + f و قم بلصق هذا الكود </head> ثم اضغط enter , الان قم بلصق هذا الكود فوق هذا الوسم مباشرة
رمز Code:
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
3. الان قم بالضغط ctrl + f و قم بلصق هذا الكود
رمز Code:
 <b:includable id='shareButtons' var='post'>
ثم اضغط enter

4. قم بتحديد الكود كله و الصق مكانه هذا الكود

رمز Code:
<b:includable id='shareButtons' var='post'>
            <a class='google-plus' expr:href='data:post.sharePostUrl + &quot;&amp;target=googleplus&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
              <i aria-hidden='true' class='fa fa-google-plus'/>
            </a>
            <a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
              <i aria-hidden='true' class='fa fa-facebook'/>
            </a>
            <a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
              <i aria-hidden='true' class='fa fa-twitter'/>
            </a>
            <a class='email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
              <i aria-hidden='true' class='fa fa-envelope'/>
            </a>
          </b:includable>

4. الان قم قم بالضغط ctrl + f و قم بلصق كود الCSS هذا
رمز Code:
 ]]></b:skin>
ثم اضغط enter ثم الصق هذا الكود فوقه مباشرة

رمز Code:
.post-share-icons a {
	display: inline-block;
    width: 170px;
	padding: 8px 0;
    text-align: center;
	color: #fff;
	font-size: 1em;
	transition: all .6s ease-in-out;
       cursor: pointer;
}
.post-share-icons i { vertical-align: middle };
.post-share-icons .google-plus { background-color: rgba(201,48,44,1) }
.post-share-icons .google-plus:hover { background-color: rgba(201,48,44,.7) }
.post-share-icons .facebook { background-color: rgba(48,113,170,1) }
.post-share-icons .facebook:hover { background-color: rgba(48,113,170,.7) }
.post-share-icons .twitter { background-color: rgba(49,176,213,1) }
.post-share-icons .twitter:hover { background-color: rgba(49,176,213,.7) }
.post-share-icons .email { background-color: rgba(186,146,116,1) }
.post-share-icons .email:hover { background-color: rgba(186,146,116,.7) }

تاثير 2 للازرار: قم باستبدال كود ال css بهذا الكود
رمز Code:
.post-share-icons a {
	display: inline-block;
    width: 170px;
	padding: 8px 0;
    text-align: center;
	color: #fff;
	font-size: 1em;
    background-color: #fff;
	transition: all .6s ease-in-out;
}

.post-share-icons i { vertical-align: middle }

.post-share-icons .google-plus { 
box-shadow: 0 0 0 1px rgba(201,48,44,1);
color: rgba(201,48,44,1)
}
.post-share-icons .google-plus:hover {
background-color: rgba(201,48,44,1);
color: #fff
}

.post-share-icons .facebook { 
box-shadow: 0 0 0 1px rgba(48,113,170,1);
color: rgba(48,113,170,1)
}
.post-share-icons .facebook:hover {
background-color: rgba(48,113,170,1);
color: #fff
}
.post-share-icons .twitter { 
box-shadow: 0 0 0 1px rgba(49,176,213,1);
color: rgba(49,176,213,1);
}
.post-share-icons .twitter:hover {
background-color: rgba(49,176,213,1);
color: #fff;
}
.post-share-icons .email { 
box-shadow: 0 0 0 1px rgba(186,146,116,.7);
color: rgba(186,146,116,.7);
}
.post-share-icons .email:hover {
background-color: rgba(186,146,116,.7);
color: #fff;
}
اذا كان لديك اي استفسار او مشكلة برجاء التعليق.
التعديل الأخير كان بواسطة Osama Essam; 09 - 12 - 2016 الساعة 04:41
المشاهدات 1532 | التعليقات 6
قديمة 09 - 12 - 2016, 17:01
المشاركة 2
صورة 'x_5' الرمزية
x_5
:: TRAIDNT ::
:: رفيق الدرب ::
تاريخ الإنضمام: 20 - 09 - 2004
رقم العضوية : 11
الدولة : :: UAE ::
المشاركات: 258,566
12
افتراضي رد : كود ايقونات التواصل الاجتماعي لبلوجر
شكرا علي الشرح
قديمة 09 - 12 - 2016, 21:48
المشاركة 3
Osama Essam
:: عضـــو::
تاريخ الإنضمام: 21 - 09 - 2016
رقم العضوية : 358551
المشاركات: 46
3
افتراضي رد : كود ايقونات التواصل الاجتماعي لبلوجر
الشكر لله, تسلم على الرد
قديمة 15 - 12 - 2016, 12:24
المشاركة 4
صورة 'MR.MURTADA' الرمزية
MR.MURTADA
:: عضو نشيط ::
تاريخ الإنضمام: 25 - 02 - 2012
رقم العضوية : 116303
الدولة : دعم فني + حماية
المشاركات: 3,323
83
Distinctive رد : كود ايقونات التواصل الاجتماعي لبلوجر
Thank You
Osama Essam معجب بهذا.
شركة MR.MURTADA للدعم الفني
:: الدعم الفني :: تنصيب المنتدى - الترقية - حماية المجلدات المهمة - تطوير - تركيب أستايل للمنتدى - تركيب الهاكات - دعم شامل للموقع بالكامل
:: للأتصال :: على حساب الفيس بوك الموجود ( أضغط هنا ) :: أو هنا بترايدنت ::
قديمة 27 - 12 - 2016, 08:15
المشاركة 5
Osama Essam
:: عضـــو::
تاريخ الإنضمام: 21 - 09 - 2016
رقم العضوية : 358551
المشاركات: 46
3
افتراضي رد : كود ايقونات التواصل الاجتماعي لبلوجر
قديمة 08 - 02 - 2017, 17:22
المشاركة 6
صورة 'iceprince_mido' الرمزية
iceprince_mido
:: عضـــو::
تاريخ الإنضمام: 27 - 02 - 2006
رقم العضوية : 21526
الدولة : EGY
المشاركات: 97
افتراضي رد : كود ايقونات التواصل الاجتماعي لبلوجر
شكرا علي الشرح الجميل لكن هل في صورة بتوضح الأشكال

أرفع رأسك عاليا يأخي فأنت مسلم
proud to be amuslim * proud to be EGYPTIAN
(( إن صلاتي ونسكي ومحياي ومماتي لله رب العالمين*لا شريك له وبذلك أمرت وأنا أول المسلمين ))


أجيليكا Ajilika<+> ميت غمر mit3'mr
Tel: +2 01008022681 - +2 01110177023
[email protected]
قديمة 09 - 02 - 2017, 00:15
المشاركة 7
Osama Essam
:: عضـــو::
تاريخ الإنضمام: 21 - 09 - 2016
رقم العضوية : 358551
المشاركات: 46
3
افتراضي رد : كود ايقونات التواصل الاجتماعي لبلوجر
شكرا علي الشرح الجميل لكن هل في صورة بتوضح الأشكال
العفو , برجاء استبدال كلاس post-share-buttons ب post-share-icons من خلال تحرير HTML

معاينة الاستايل الاول codepen

معاينة الاستايل الثاني codepen
 
اضافة رد
 

كود جميع ايقونات مواقع التواصل الاجتماعي بشكل متحرك ورائع [حصرياً] إنتقل بين المواضيع بشكل جديد ومميز خاص بترايدنت..

أدوات الموضوع ابحث في الموضوع
ابحث في الموضوع:

البحث المتقدم
طرق العرض


الساعة معتمدة بتوقيت جرينتش +3 . الساعة الآن : 13:35.
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسئولية نفسه إتجاه مايقوم به من بيع وشراء وإتفاق وأعطاء معلومات موقعه
التعليقات المنشورة لا تعبر عن رأي معهد ترايدنت ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر)

جميع الحقوق محفوظة Traidnt 2019
  • 00966138651070
  • 00966138648289
  • 2051033691
Powered by vBulletin® Version 3.8.11 .Copyright ©2000 - 2019, Jelsoft Enterprises Ltd
SEO by vBSEO ©2011, Crawlability, Inc.