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

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

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

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

ادخل مدونتك .
التخطيط .
اختر اداة 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/AVvXsEgeutxpNnKrT6IrMq57cRJPPQ5bB1I-lsUJVyJVHjeACRdvgGPkp1v4wIdXe-YOEeVGVE4Tr6DuqeyKEGK-OnsvIDid5xfwgut6G4Hbhpilm6LvTnVWO9wKfT0TV7ETIbzQ74mrZ2hDrMc/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/AVvXsEi-pYOpkA-vqGSTud2bpIq1SZ0NR-gTRGCKk0oigvX876yGMdXqFUJ1HHWC16iZwAJv1RJkVKl9DQuZuCdLIN39WTvyGBHKI_Xti_lHCgXYfkWOlrevlP6MaJqhMhXisDpW8W2zd7GdnBQ/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/AVvXsEiuKTQDrJYX4h8y-RoPmNc5JCbEMjxiQtqPxEVYdllIiePzm3et4SdiNDjQvfUcnzpjD2cFvHb2VCZb3XyiLfg912ncR1GQJVQVSWD8k9G8AZP2XBR7riYV3HgbP70FiRZw2dexugz6TBc/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/AVvXsEgRNWgaVW2E6eeit0fgUDwontgtz1hgfM8HtZTe3A7sUYhIv9qp0-DT7K_2Q_g1PSuk5ihvj8Hjkpz0GDpFqkFi9oFfOoBPqQ9UgG6w5-2a6tqwZnbgM3cWe8fh1tSF_a6tQm5Gi0SUDbQ/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/AVvXsEirgr5pXcHsu6YAK2ECgilY2qJyvRO9pEuZz-gwYKdMBX2twn_mWBUOFdybDEmMFtdOqH2j4xNMWhU-KT7OKhwQiYlGV5lAUDKVgQtnV-6iIUo45j7NHQDonZ4K9g63W3gme0hXLLOJZ9Y/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 ) برابط قناتك على يوتيوب