اضافة شريط المتابعه عبرالمواقع الاجتماعيه بشكل انيق وجذاب
بسم الله الصلاة والسلام على رسول الله , السلام عليكم اخواني اخواتي متابعي مدونة جلال البعداني , كثير من المدونين يعتقدون أن مدونات بلوجر تفتقر الى الاضافات الجيده والمنسقه بشكل انيق , التي يمكن أن تضاف إلى منصات أخرى مثل ووردبريس وجوملا،ولكن هذا الاعتقاد خاطئ.فهناك كثير من الاضافات الاحترافيه التي تمكنك من تخصيص مدونتك وتطويرها لتظهر بشكل جذاب واحترافي ,واليوم باذن الله سوف نكسر هذا المعتقد بهذه الاضافه الاحترافيه والتي هي عباره عن شريط جانبي على شكل قائمه عموديه تتضمن خمس من اشهر مواقع التواصل الاجتماعي (twitter ,Facebook ,Google+, feedburner, tumblr )والتي تتميز بشكلها الرائع والانسيابي والذي بدوره يزيد من جمالية المدونه واحترافيتها
مثال حي للاضافه
كيفية اضافة هذه القطعه الى مدوناتكم
1- انتقل إلى لوحة تحكم مدونتك
2- إختر "تخطيط" ثم إضافة أداة ثم اخترHTML/Javascript
3- والآن الصق داخل المستطيل الكود التالي
<div id='social-sidebar'>
<ul><li>
<a class='entypo-twitter' href='https://twitter.com/albaadani1' target='_blank'>
<span>Twitter</span>
</a></li><li>
<a class='entypo-gplus' href='https://plus.google.com/u/0/b/115387305017738790650' target='_blank'>
<span>google+</span>
</a></li><li>
<a class='entypo-tumblr' href='http://www.tumblr.net/albaadani' target='_blank'>
<span>tumblr</span>
</a></li><li>
<a class='entypo-facebook' href='http://www.facebook.net/alb33dani' target='_blank'>
<span>facebook</span>
</a></li><li>
<a class='entypo-rss' href='http://feeds.feedburner.com/albaadani' target='_blank'>
<span>feedburner</span>
</a></li></ul></div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : /---------- */
@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>
تخصيص الاضافه
1- استبدال ماباللونalbaadani باسم حسابك في فيدبرنر2- استبدال ماباللونalbaadani1 باسم حسابك في تويتر
3- استبدال ماباللونalb33dani باسم صفحتك في فيس بوك
4- استبدال ماباللون115387305017738790650 باسم حسابك جوجل بلس
5- استبدال ماباللونalbaadani باسم حسابك في تمبلر
وبالاخير قم بحفظ القطعه ومبروك عليك الاضافه ولا تنسى ان تشاركنا ارائك بتعليق
مشكووور
ردحذفالعفو اخي شكرا لمرورك العطر تشرفت بزيارتك لمدونتي $-)
حذفeeeeeeeeeeeeeeeeee :-b
ردحذف;( ;(( ;(( ;(( ( ;((
حذفشكرا لك ,, لكن كيف اغيير مكان الاضافه ؟؟
ردحذفالعفو اخي ,, اذا اردت تغيير مكان الاضافه فقم بتغيير كلمة left الموجوده في كود الاضافه الى right علما بان كلمة left مكرره لاكثر من خمس مرات قم بتغييرها بالكامل
حذفشكرا ^_^ (h)
ردحذفالعفو اخي نورت المدونه
حذفمشكور على الموضوع الرئع ده بس عايز أسألك إزي أقدر أبدل ( الحساب في فيدبرنر ) بحساب اليوتيوب .
ردحذفمشكور مرة تانية :-)
قم بالبحث عن الرابط التالي
حذفhttp://feeds.feedburner.com/albaadani
واستبدله برابط قناتك على اليوتيوب
وايضا قم بالبحث عن الكود التالي
<span>feedburner</span>
وقم باستبدال كلمة feedburner بكلمة يوتيوب حسب رغبتك
في حال اريد ان اضيف يوتيوب ... (لقد ضفتها بالفعل) لكن لا يوجد ايقونة :/
ردحذفكيف يمكنني ان اضيف ايقونة ؟؟؟
جزيل الشكر لك :)
مشكور، أخي الكريم :)
ردحذفالعفو ,, شكرا لمرورك العطر اخي
حذفالسلام عليكم أخي
ردحذفسؤالي أنه فجأة احتفت الأيقونات عندي
ليش ؟
فجأة قمت بالإختفاء يا جلال ما السبب أتمنى أن تكون بخير و تعود للتدوين و الإبداع من جديد
ردحذفبعض الانشغالات اخي ولكن ان شاء الله ساعود قريبا
حذفابداع اخوي يسلموا على المواضيع المفيدة منتظرين الجديد تحية من عدن (h)
ردحذفاهلا بك اخي محمد , الابداع يكمن بمرورع العطر ,,, نورت المدونه (f)
حذفاخ جلال كيف يمكنني تغيير لونها الاسود
ردحذفهي اصلا باللون الاسود اخي
حذفالله يرضى عليكي اختي (f) (f) (f) (f) شكرا طيب كلامك ,,اسعدني كلامك ومرورك العطر
ردحذفأنت ملك الإنترنيت شكرا لك مجهود رائع أخي جلال الكريم
ردحذفشكرا لك اخي اسعدني جدا كلامي
حذفنتمنى منك المزيد ومشكوووووووووووووور اخي جلال
ردحذفان شاء الله في القريب العاجل
حذفila kont baghi nhaid hadik lktba achno ghadin dir
ردحذفما شاء الله مدونتك في غاية السحر والترتيب الجميل
ردحذفكل التوفيق لك ياصديقي
انا قمت بعملة الاضافة وهي جميلة وتبعت شرحك ممتاز وخرجت من مدونتك كمرور الكرام بدون تعليق . نسيت ان اقول كلمة وبعدها تذكرتك دكرك الله بالشهادة
ردحذفاشكرك جزيل الشكر بارك الله فيك واصل وتميز
اخي كيف اضيف معهم زر لليوتيوب
ردحذف