02-26-2014, 10:23 PM
#1
مدون نشيط
تاريخ التسجيل: Feb 2014
المشاركات: 124
اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر
السلام عليكم ورحمة الله وبركاته
اقدم لكم اضافة ازرار مواقع التواصل الاجتماعي بشكل انيق لمدونة بلوجر
الشرح :
اذهب الي صفحة التخطيط واضافة اداة جديدة 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 الي روابط صفحاتك واحفظ العمل
__________________
من مواضيع Blog-Add