[Blog-Add]

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

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

الشرح :

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

كود PHP:

<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 الي روابط صفحاتك واحفظ العمل