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

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

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

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

ادخل مدونتك .
التخطيط .
اختر اداة 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/AVvXsEhyejT1gWxnMC66CDs0_PkJUmR9B_fJGCcYWkgjqpmL4lNPRz76KhE5wjQpL0HGVKO87YxVx5EB3C6XSKL_3B6ijiPhqs_lo2qjtlHPmBr7FLyOcuduqswCxsJVEdwtkG27qsBHvup_QQc/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/AVvXsEiKkejYztmh8dA-zxz70e1-H-CjfrT4tuNhvH7QgdiDOB8sG8cM7NnWk289z8ccO9dTZFD2qCHzBe1H4aav9c3mucRT2p-B1FAycUV9Of-BaMXPIgdy8-54U7iZtPHqkju7IJ_N5QdgTRU/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/AVvXsEgn62BYewV87UxFkHXVOEI7OKGCsaWOR3mmjAiNeOMh14_3M9dgyO1ETP997ypqkFOF-YHDgfIZpuVF4zcpyg0UwKOUO8zh_K_tjbz6PNo8UbPBuVHNVdtdmUq9msD9fOhZsXShoT-Q5iE/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/AVvXsEh0i7aa-oekChF4hyphenhyphen8n5TK7Bjx448imj35p1MMtkWGVvXwyyc9heeHrxsYw7AFXemz3uzZiDhC2Drdny6fZYsfmsY4U28WJqJHBrmPUvd6roPt-6g6la_Wz4OrMw8t5sB1LToLh9zsr2wU/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/AVvXsEh8yf5JAZcZ5L76zIiApoI2Sf1QNpbp7i6XQpziiKTAAjM5L6T8K6IPT0AQ2okjlgCD6-31H01MFz1sKdpvX2HqGpBWVvwIH7H7ryqt4aEoND7E4e8l0iWFrThBktxJuhOQWiy0cOK3gsg/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 ) برابط قناتك على يوتيوب