السلام عليكم ورحمة الله تعالى وبركاته
لإضافة أزرار المواقع الإجتماعية الجديدة على شكل ميترو METRO
إتّبع مايلي :
إضغط على التخطيط ثم إضافة أداة وإبحث عن HTML/java script وضع داخلها الكود التالي :
يمكن سحب هذه الأداة فوق رسائل المدونة أو أسفلها ويمكنك التغيير في الحجم ليتناسب مع مدونتك وهذه الأزرار خاصة بمواقع :
FACEBOOK - TWITER - FEEDBURNER - GOOGLE+ - LINKEDIN
الكود :
"<style>
A:link {text-decoration: none; color: }.Mbt-Social-metro {
width: 960px;
float: right;
margin: 0;
padding: 1em 0; }
.Mbt-Social-metro ul {
margin: 0; padding: 0;}
.Mbt-Social-metro ul li {
list-style:none;
list-style-type: none;
padding: 0; text-transform: none;
margin:0;
float: right;
display: inline-block; width: 20%; }
.Mbt-Social-metro ul li a {
font-size:80%;
text-align : center;
color: #fff!important;
display:block; }
.Mbt-Social-metro ul li a:hover {
color: #000!important;
background-color: #e5e5e5;
text-decoration: none; }
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE;
background-size: 30px; padding: 10px 50px;}
.Mbt-Social-metro ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
background-size: 30px; padding: 10px 50px; }
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.Mbt-Social-metro ul li { width: 100%; }
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/kinas29'>اشترك معنا عبر الخلاصات</a></li>
<li><a class='twitter' href='https://twitter.com/kinas29'>تابعتي على تويتر twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/kinas29'>تواصل معي عبر الفيس بوك</a></li>
<li><a class='google' href=' https://plus.google.com/u/0/108510761823631656796/posts '>تابعني على جوجل بلس</a></li><li><a class='linkedin' href='http://in.linkedin.com/in/kinas29'>LinkedIn تواصل معي على </a></li>
</ul>
</div>"
A:link {text-decoration: none; color: }.Mbt-Social-metro {
width: 960px;
float: right;
margin: 0;
padding: 1em 0; }
.Mbt-Social-metro ul {
margin: 0; padding: 0;}
.Mbt-Social-metro ul li {
list-style:none;
list-style-type: none;
padding: 0; text-transform: none;
margin:0;
float: right;
display: inline-block; width: 20%; }
.Mbt-Social-metro ul li a {
font-size:80%;
text-align : center;
color: #fff!important;
display:block; }
.Mbt-Social-metro ul li a:hover {
color: #000!important;
background-color: #e5e5e5;
text-decoration: none; }
idc-scoail ul li a, ul li a:hover {
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.Mbt-Social-metro ul li .rss {
background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE;
background-size: 30px; padding: 10px 50px;}
.Mbt-Social-metro ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937;
background-size: 30px; padding: 10px 50px; }
.Mbt-Social-metro ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3;
background-size: 30px; padding: 10px 50px; }
/* width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.Mbt-Social-metro ul li { width: 50%; }
}
/* width of 320px */
@media only screen and (max-width: 480px) {
.Mbt-Social-metro ul li { width: 100%; }
}
</style>
<div class='Mbt-Social-metro'>
<ul>
<li><a class='rss' href='http://feeds.feedburner.com/kinas29'>اشترك معنا عبر الخلاصات</a></li>
<li><a class='twitter' href='https://twitter.com/kinas29'>تابعتي على تويتر twitter</a></li>
<li><a class='facebook' href='https://www.facebook.com/kinas29'>تواصل معي عبر الفيس بوك</a></li>
<li><a class='google' href=' https://plus.google.com/u/0/108510761823631656796/posts '>تابعني على جوجل بلس</a></li><li><a class='linkedin' href='http://in.linkedin.com/in/kinas29'>LinkedIn تواصل معي على </a></li>
</ul>
</div>"
لتغيير عرض الإضافة لتناسب مدونتك غيّر الرقم الملوّن بالأزرق 960px
غيّر ماباللّون الأخضر حسب مواقعك الإجتماعية
غيّر ماباللّون الأحمر حسب رغبتك
بالتـــــــــوفيــــــــــــــق
0 التعليقات:
إرسال تعليق