03-04-2014, 09:27 PM
#1
مدون نشيط
تاريخ التسجيل: Feb 2014
المشاركات: 124
اضافة تابعني بشكل افقي لمواقع التواصل الاجتماعي
السلام عليكم ورحمة الله وبركاته
نقدم اليوم اضافة تابعني للمواقع الاجتماعية بشكل افقي لمدونات بلوجر
الشرح :
اذهب الي صفحة التخطيط ثم اضافة اداة جديدة HTML واضف بها الكود التالي :
كود PHP:
< style > A : link { text - decoration : none ; color : }. Mbt - Social - metro { width : 960px ; float : right ; margin : 0 ; padding : 1em 0 ; } . Mbt - Social - metro ul { margin : 0 ; padding : 0 ;} . Mbt - Social - metro ul li { list- style : none ; list- style - type : none ; padding : 0 ; text - transform : none ; margin : 0 ; float : right ; display : inline - block ; width : 20 %; } . Mbt - Social - metro ul li a { font - size : 80 %; text - align : center ; color : #fff!important; display : block ; } . Mbt - Social - metro ul li a : hover { color : #000!important; background - color : #e5e5e5; text - decoration : none ; } idc - scoail ul li a , ul li a : hover { - moz - transition : all 0.3s ease - in - out ; transition : all 0.3s ease - in - out ; - webkit - transition : all 0.3s ease - in - out ; } . Mbt - Social - metro ul li . rss { background : url ( "http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png" ) no - repeat scroll 10px center #F87E12; background - size : 30px ; padding : 10px 50px ; } . Mbt - Social - metro ul li . twitter { background : url ( "http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png" ) no - repeat scroll 10px center #4CACEE; background - size : 30px ; padding : 10px 50px ;} . Mbt - Social - metro ul li . facebook { background : url ( "http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png" ) no - repeat scroll 10px center #3B5998; background - size : 30px ; padding : 10px 50px ; } . Mbt - Social - metro ul li . google { background : url ( "http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png" ) no - repeat scroll 10px center #D44937; background - size : 30px ; padding : 10px 50px ; } . Mbt - Social - metro ul li . linkedin { background : url ( "http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png" ) no - repeat scroll 10px center #3692C3; background - size : 30px ; padding : 10px 50px ; } /* width of 768px */ @ media only screen and ( min - width : 768px ) and ( max - width : 959px ) { . Mbt - Social - metro ul li { width : 50 %; } } /* width of 480px */ @ media only screen and ( min - width : 480px ) and ( max - width : 767px ) { . Mbt - Social - metro ul li { width : 50 %; } } /* width of 320px */ @ media only screen and ( max - width : 480px ) { . Mbt - Social - metro ul li { width : 100 %; } } </ style > < div class= 'Mbt-Social-metro' > < ul > < li >< a class= 'rss' href = 'رابط الخلاصة' > اشترك معنا عبر الخلاصات </ a ></ li > < li >< a class= 'twitter' href = 'رابط تويتر' > تابعتي على تويتر twitter </ a ></ li > < li >< a class= 'facebook' href = 'رابط الفيس' > تواصل معي عبر فيس بوك </ a ></ li > < li >< a class= 'google' href = 'جوجل بلس' > تابعني على جوجل بلس </ a ></ li > < li >< a class= 'linkedin' href = 'لينك ان' > LinkedIn تواصل مع على </ a ></ li > </ ul > </ div >
ضع روابط صفحاتك واحفظ العمل
__________________
من مواضيع Blog-Add