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

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

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

الشرح :

اذهب الي صفحة التخطيط واضافة اداة جديدة HTML واضف بها الكود التالي :


<style> .socialv3 {width:220px; } .socialv3 li { list-style-type:none; margin:2px 0 0 2px; width:50px; height:50px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; line-height:50px; overflow:hidden; text-decoration:none; text-indent:70px; font-family: segoe ui, verdana, arial, sans-serif; } .socialv3 li a { text-decoration:none; color:#fff; font-size:20px; font-weight:bold; } .socialv3 li:hover { width:200px; border-radius:0px; } #fbv3 { background:#3B5998 url('https://lh3.googleusercontent.com/-9IvUBEkhoOw/USo4EECi7gI/AAAAAAAAAy0/ulz5SUV5Ag0/s509/Facebook-F-Metro.PNG') no-repeat; background-size:50px; } #gplusv3 { background:#D64136 url('https://lh3.googleusercontent.com/-qeccth90Mt8/USo4MC9P82I/AAAAAAAAA1Y/NpxDl9-ZNGg/s509/Google%2B-Alt-Metro.PNG') no-repeat; background-size:50px; } #bloggerv3 { background:#F3923C url('https://lh5.googleusercontent.com/-ZRFwzkMbrwA/USo4MSRfuMI/AAAAAAAAA1k/7ZTSe1G54cU/s509/Google-Blogger-Metro.PNG') no-repeat; background-size:50px; } #linkedinv3 { background:#006699 url('https://lh5.googleusercontent.com/-1Ag2aROYmmI/USo4Zw67C_I/AAAAAAAAA7Y/0BXhnUP1tR0/s509/Linked-In-Alt-Metro.PNG') no-repeat; background-size:50px; } #myspacev3 { background:#003298 url('https://lh3.googleusercontent.com/-URchh-56o3U/USo4he1FPZI/AAAAAAAAA-E/UyhfhqLZhPg/s509/Myspace-Logo-Metro.PNG') no-repeat; background-size:50px; } #pandorav3 { background:#336699 url('https://lh3.googleusercontent.com/-TkNYJcMwI4I/USo4mODiuvI/AAAAAAAAA_4/CFId7zS1VhM/s509/Pandora-Alt-Metro.PNG') no-repeat; background-size:50px; } #rssv3 { background:#FD9F13 url('https://lh6.googleusercontent.com/-d3UlbXq8Ab8/USo4tmwPiwI/AAAAAAAABCY/HSLBi3lp3KI/s509/Rss-Feed-Metro.PNG') no-repeat; background-size:50px; } #tumblrv3 { background:#304E6C url('https://lh6.googleusercontent.com/-_ESw8OCHca8/USo41Op9RkI/AAAAAAAABEs/pw8nQuDBSmU/s509/Tumblr-T-Metro.PNG') no-repeat; background-size:50px; } #twitterv3 { background:#19BFE5 url('https://lh6.googleusercontent.com/-muAYdH7kvnQ/USo426vqBhI/AAAAAAAABFM/b1M3XVKYIso/s509/Twitter-Bird-Metro.PNG') no-repeat; background-size:50px; } #vimeov3 { background:#86C9EF url('https://lh6.googleusercontent.com/-6Sq9enq26Gw/USo48IRlApI/AAAAAAAABG4/xJQsoDMo2jU/s509/Vimeo-Metro.PNG') no-repeat; background-size:50px; } #stumblev3 { background:#0572A5 url('https://lh4.googleusercontent.com/-OfI4dWYDud4/USo4ybGCB-I/AAAAAAAABDw/-6ZNtkNOl6w/s509/Stumbleupon-Blue-Metro.PNG') no-repeat; background-size:50px; } #wordpressv3 { background:#454442 url('https://lh5.googleusercontent.com/-JPa81Nmry04/USo5Bd2nTvI/AAAAAAAABIc/ZWfsfNrJUKk/s509/Wordpress-Logo-Metro.PNG') no-repeat; background-size:50px; } </style> <div class="socialv3"> <li id="fbv3" title="FB"><a href="blog-add"blue"]Facebook_PAGE_URL[/COLOR]">facebook</a></li><li id="gplusv3" title="Google+"><a href="blog-add"blue"]Google_PLUS_URL[/COLOR]">Google+</a></li><li id="bloggerv3" title="blogger"><a href="blog-add"blue"]Blogger_Blog_URL[/COLOR]">Blogger</a></li><li id="linkedinv3" title="Linkedin"><a href="blog-add"blue"]Linkedin_Account_URL[/COLOR]">Linkedin</a></li><li id="pandorav3" title="Pandora"><a href="blog-add"blue"]pandora_Account_URL[/COLOR]">Pandora</a></li><li id="rssv3" title="RSS"><a href="rss_Account_URL">RSS</a></li><li id="myspacev3" title="Myspace"><a href="blog-add"blue"]myspace_Account_URL[/COLOR]">Myspace</a></li><li id="tumblrv3" title="Tumblr"><a href="blog-add"blue"]Tumblr_Account_URL[/COLOR]">Tumblr</a></li><li id="twitterv3" title="twitter"><a href="blog-add"blue"]twitter_Account_URL[/COLOR]">Twitter</a></li><li id="vimeov3" title="vimeo"><a href="blog-add"blue"]vimeo_Account_UR[/COLOR]L">Vimeo</a></li><li id="stumblev3" title="Stumbleupon"><a href="blog-add"blue"]Stumbleupon_Account_URL[/COLOR]">stumbleupon</a></li><li id="wordpressv3" title="Wordpress"><a href="blog-add"blue"]Wordpress_Account_URL[/COLOR]">wordpress</a></li></div><script language='Javascript'> </script>

وغير جملة blog-add الي روابط صفحاتك واحفظ العمل