تعلم كيف أضيف أيقونات التواصل الاجتماعي على مدونات بلوجر   

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

1.نذهب الى المدونة تم تسجيل الدخول

2.نذهب الى التخطيط تم اضافة اداة

3.نختار من القائمة اضافة اداة html

4.نضع الكود تم نحفظ الاداة

<center> <ul id="abt-social-icons"> <li class="rss-icon"><a href="http://feeds.feedburner.com/FEEDID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSUC-9Q4qV3sFd3WiVeoDtHUczlsNsvic8CIuFMDrE6oQo4GjlbMuTpUwIq5r9VRKefRMVLLRtmj0lQn4eTG509g00TgspCxo2UWTvL_7olNmIYJt2beryTDB4t-Th_Da6Seh2-K0sSmY/s1600/rss.png" width="147" /></a></li> <li class="twitter-icon"><a href="http://www.twitter.com/TWITTERHANDLE" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEK6WG1eeIZ8e91uNErk6tGIB49ZeeLccWP6dXQ6K26Kx5WXDQFh-Ydljmtb5oMDEBnypUX_e130JYjfQTm2sAuQLo-Zmiu1PHmorF5qtmelp7n8CdJpc83i0zC-pbBQYzgs3PDYnsuds/s1600/twitter.png" width="147" /></a></li> <li class="facebook-icon"><a href="http://www.facebook.com/PAGEID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYoVLQREExKdcCDJi7ZBrwIFwAI3PaNqpRa_vLihknf8d4aJmnFs27Px_4Ei_jlznbbmjmYoB0p9__OcBp41Wy0f2kh2hOTS1nq9bo9ewpAqI4woMAV2eHvyzXWKkDto2Fd_7E29Skbs/s1600/facebook.png" width="147" /></a></li> <li class="google-icon"><a href="https://plus.google.com/YOURID" target="_blank"><img height="147" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDJZD81XD_MECKOy8cpNFfMaTNPZtpznzOlqLxC1KFnN-f8WB5RNDJ3xOQ7fNrFnFSZhIb_QGpb0FD4gvsF148RLPD4NrhXWTNnJjJWbPKK32Z9g5BnlPG4B5GRrGYSBF_1D7apZ-ovrQ/s1600/google.png" width="147" /></a></li> </ul> </center> <style> #abt-social-icons li { float: left; width: 147px; height: 147px; margin: 0 6px 6px 0; padding: 0 0 0 0; border-bottom: none; list-style: none; } #abt-social-icons li a { line-height: 1px; display: block; } #abt-social-icons li a:hover img { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; }

#abt-social-icons li a span { display: none !important; } </style>

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

شاهد الفيديو التعليمي

تصنيف : دروس بلوجر