معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر (https://www.bloggerexp.com/showthread.php?t=12178)

Blog-Add 02-26-2014 10:23 PM
اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر
 
السلام عليكم ورحمة الله وبركاته

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

الشرح :

اذهب الي صفحة التخطيط واضافة اداة جديدة 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 الي روابط صفحاتك واحفظ العمل

قرمتي للطباعة 02-27-2014 01:21 AM
رد: اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر
 
حاولت ياخي اركبهم ولا قدرت
وياليت لو تقدر تساعدني وتركبهم
والله باتسوي خير يالغالي
هذا رابط مندونتي
http://qurmty.blogspot.com/
وهذا رابط حسابي على الفيس بوك
https://www.facebook.com/profile.php...ref=ts&fref=ts
ياليت تضيفني والله يجزاك الف خير

Blog-Add 02-27-2014 03:38 PM
رد: اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر
 
الرابط هذا خاص بالعضوية حقتك وليس صفحتك فيرجي اعطائي الرابط وبعطيك الكود جاهز بأذن الله

قرمتي للطباعة 02-27-2014 05:01 PM
رد: اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر
 
هذا رابط صفحتي على الفيس بوك
https://www.facebook.com/Qurmty?ref=hl
وجزاك الله خير اخوي

Blog-Add 03-01-2014 03:38 PM
رد: اضافة ايقونات التواصل الاجتماعي بشكل جانبي - بلوجر
 
اتفضل يا اخي هذا الكود جاهز وبه رابط صفحتك علي الفيس لو ارد الباقي فيرجي ذكر الروابط الخاصه بهم

كود 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"]https://www.facebook.com/Qurmty[/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> 
تمنياتي بالتوفيق


الساعة الآن 11:02 PM

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012