Show Comments: OR
100 100 100

اضافة ازرار المشاركة بشكل جذاب وانيق

مرحباً بكم زواري الكرام 


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

وفريدة ايضاً لانها من تطويري وتعريبي 



الكثير منكم يبحث عن الجمال والاناقة نعم عزيزي انت ككل مدون عربي 

تبحث عن شيئ فريد وانيق 

ماذا لو قلت لك ان هذه الاداة بتاريخ اليوم من تطويري وتعريبي 

اذا  ؟؟؟

سارع انت ايضاُ




صورة للاضافة



قبل تقريب الماوس 








وبعد







الان شرح التركيب

1- الدخول الى لوحة تحكم المدونة 

2- انقر فوق تخطيط

3 اضافة اداة

4- اختار 
HTML/JavaScript إضافة

5- ضع الكود التالي في المحتوى اما العنوان ضع ايشيئ


وهذا شرح مصور لكيفية وضع الاضافة





هذا هوة الكود


__________________



<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#bloggertrix-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#bloggertrix-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#bloggertrix-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#bloggertrix-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#bloggertrix-SexySocialButtons li:after{
position:fixed;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#ffffff;
content:attr(data-alt);
line-height:32px;
}
#bloggertrix-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#bloggertrix-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#bloggertrix-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#bloggertrix-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#bloggertrix-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#bloggertrix-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#bloggertrix-SexySocialButtons li:hover .icon,
.touch #bloggertrix-SexySocialButtons li .icon{
width:210px;
}
.touch #bloggertrix-SexySocialButtons li .facebook, #bloggertrix-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #bloggertrix-SexySocialButtons li .twitter, #bloggertrix-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #bloggertrix-SexySocialButtons li .googleplus, #bloggertrix-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #bloggertrix-SexySocialButtons li .YouTube, #bloggertrix-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #bloggertrix-SexySocialButtons li .rss, #bloggertrix-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="bloggertrixSocialButtonsBorder">
<ul id="bloggertrix-SexySocialButtons">
<li data-alt="تابعنا على الفيس بوك"><a class="icon facebook" href="https://www.facebook.com/additions.blogger">تابعنا على الفيس بوك</a></li>
<li data-alt="تابعنا على تويتر"><a class="icon twitter" href="https://twitter.com/add_blogger">تابعنا على تويتر</a></li>
<li data-alt="تابعنا على كوكل"><a class="icon googleplus" href="https://plus.google.com/108902431338077770336">تابعنا على كوكل</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="https://youtube.com/Username">تابعنا على يوتيوب</a></li>
<li data-alt="اشترك في خلاصتنا"><a class="icon rss" href="http://feeds.feedburner.com/add-b">اشترك في خلاصاتنا</a></li></ul></div>


__________________




غير ما يلزم تغييرة هوة باللون الاحمر



عزيزي القارئ ان كان الشرح ناقص او انني اقوم بنشر محتوى سيئ

يرجى اخباري لانني اصرف الكثير من الجهود ولا يوجد ردود للتشجيع

دمتم بود


تابع كل جديد
معلومات عن التدوينة الكاتب : rimon nizar بتاريخ : الخميس، 4 يوليو، 2013
المشاهدات :
للإبلاغ عن رابط معطوب اضغط هنا
قالب خيال ..إبداع ويب .