اضافة أزرار مواقع التواصل الإجتماعي بشكل رائع الى مدونتك

السلام عليكم ورحمة الله وبركاته

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

طريقة التركيب :

ادخل مدونتك .
التخطيط .
اختر اداة html/javascript .
والصق هذا الكود بها مع التغير ما سادكر:




<style>#socialbdrssliding a{font-family: 'Open Sans', Helvetica, Arial, sans-serif;width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;}#socialbdrssliding a:hover{width: 100px;overflow: hidden;}#socialbdrssliding {float: right;position: relative;height: 40px;}#socialbdrssliding ul { margin: 0; }#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-thumb,#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;}#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;text-decoration: none;}#socialbdrssliding li .bdrs-thumb { float: left; }#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5TjBq-N10vPFJvr5ra47XKCAnucUmovDZZj-ywqLB_V5SKVlBTevMizGGPOEGmioU8y2ouliBfLlAOoiz4ufGOReRJww9-ATL5mKK3VJwaltfAQnOnCt-LgdUp8YOMTUlAyPcedimP5g/s1600/FACEBOOK.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmBYn9mfcjlYsm-XAsZPtbPIh6bWHWATdp2ZvrSFxBCQYdOS8-K1dL0YmclLfru3-h-eqjFjHa-WVw766r3h6SwCgqPC2llx0kge7WZG6S6-6S_t15dFV6DXm7NymhzTTLLv9msybhjGM/s1600/googleplus.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU_uKmER_YiFE1PulfCjfFbLMccQc0KbaBXbBa-QifdKOlibhMWiFJ4p3gi5ygzIQTxuhWwUss5L-ZFW_648MPZ0_5xZsQzx6yHqO5g_B-SXY2OjRwC8XOLsIoml4Znb7l51offnLS5SI/s1600/TWITTER.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRpDRNU6nZ4qNTA76TC7BNvn9XEOr2to_1odD0IIPP88VQn1Lhz7lUeBDeOD0MWFpuru-dOleURImZD4jR2NNcB-cshZopvXQdl9nC7sPv9hfDj64XR2VFUueFxiMfm2OkFT1fVN-S-3s/s1600/rssbd.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEAG3PwMLNlgilkO5dtGZQSKZ001PWJ3GxiOXVEs1qJYwjSW0rYCR-veOv5LFmhCkam3z3imuylXdMKIs-5eUIfYX7ta2THB2XCwiRzG8U_S9YOCE2cHinTow67_kXLGyDpGYtZsV-OA/s1600/youtube.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}</style><!-- www.sofaxe.blogspot.com -->


<div id="socialbdrssliding"><ul><li class="bdrs-gplus"><a href="https://plus.google.com/u/0/b/109611977350029470765/109611977350029470765/posts" target="_blank" rel="nofollow" title="جوجل بلس"><div class="bdrs-thumb"></div><div class="bdrs-title">جوجل بلس</div></a></li> <li class="bdrs-facebook"><a href="https://www.facebook.com/001sofaxe?ref=hl" target="_blank" rel="nofollow" title="فيس بوك"><div class="bdrs-thumb"></div><div class="bdrs-title">فيس بوك</div></a></li> <li class="bdrs-twitter"><a href="https://twitter.com/HAMZAKHARBAUCH" target="_blank" rel="nofollow" title="تويتر"><div class="bdrs-thumb"></div><div class="bdrs-title">تويتر</div></a></li> <li class="bdrs-rss"><a href="http://feeds.feedburner.com/blogspot/gBhet" target="_blank" rel="nofollow" title="rss feed"><div class="bdrs-thumb"></div><div class="bdrs-title">RSS</div></a></li>

<li class="bdrs-youtube"><a href="https://www.youtube.com/channel/UCOggFUX4WcJI0YwYhAxnNCQ" target="_blank" rel="nofollow" title="يوتيوب"><div class="bdrs-thumb"></div><div class="bdrs-title">يوتيوب</div></a></li></ul></div>

قم بتغير هذه عبارة (https://twitter.com/HAMZAKHARBAUCH ) برابط صفحتك على تويتر

قم بتغير هذه عبارة (http://feeds.feedburner.com/blogspot/gBhet ) برابط خلاصة مدونتك

قم بتغير هذه عبارة (https://www.facebook.com/001sofaxe?ref=hl ) برابط صفحتك على فيس بوك

قم بتغير هذه عبارة (https://plus.google.com/u/0/b/109611977350029470765/109611977350029470765/posts ) برابط صفحتك على جوجل بلس

قم بتغير هذه عبارة (https://www.youtube.com/channel/UCOggFUX4WcJI0YwYhAxnNCQ ) برابط قناتك على يوتيوب