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

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

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

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

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

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

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

اذا  ؟؟؟

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




صورة للاضافة

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

وبعد

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

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

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

3 اضافة اداة

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

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


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

شرح اضافة كود JavaScript للمدونة

هذا هوة الكود

__________________

<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>

__________________

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

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

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

دمتم بود

تابع كل جديد