أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة

أزرار المشاركات أصبحت إضافة تضفي جمالا على المدونة وهي من أهم العوامل في زيادة شهرة المدونه لأنها تساعد في نشر مواضيع المدونه على شبكات التواصل الاجتماعي بشكل سريع

وإضافة اليوم جميلة وهي خاصة بأزرار المشاركات أسفل المواضيع في البلوجر وشكلها الجميل ومتوفرة بنوعين رائعين
الإضافة الأولى بهذا الشكل وفي الحقيقة تبدوا بالشكل الرمادي وعند مرور مؤشر الماوس عليها تبدوا بالشكل التالي

ولتركيبها إذهب إلى قالب ثم تحرير HTML
ثم إبحث عن الوسم التالي <data:post.body/>
ثم ضع الكود التالي أسفله

<b:if cond='data:blog.pageType == "item"'>
<style>
@import url(http://fonts.googleapis.com/css?family=Open +Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
width: 475px;
overflow: hidden;
margin: 20px auto -10px;
}

.social-sharing-title{
background: #E74C3C;
color: #ffffff;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 643px;
height: 40px;
display: block;
margin: 20px 0px -5px;
}

.button {
float: left;
margin-right: 10px;
width: 110px;
background:#E2E2E2;
border: 1px solid #cbcbcb;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 15px 5px 5px;
box-sizing: border-box;
}

.button i {
background: #353535;
color: #eaeaea;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 40px;
height: 40px;
display: block;
margin: 0 auto 10px;
border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

.social-container {
text-align: center;
text-transform: uppercase;
font-size: 18px;
color: #353535;
line-height: 54px;
font-family: GESSTwoMediumRegular;
background: #d8d8d8;
width: 100%;
height: 45px;
box-shadow: inset 0 -2px 4px #c7c7c7;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
position: relative;
overflow: hidden;
}

.slide, .button i {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
}

.slide {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
border-radius: 0 0 22px 22px;
-o-border-radius: 0 0 22px 22px;
-ms-border-radius: 0 0 22px 22px;
-moz-border-radius: 0 0 22px 22px;
-webkit-border-radius: 0 0 22px 22px;
/* top fix */
transition: all 0.2s ease-in-out;
position: absolute;
height: 45px;
width: 100%;
top: -35px;
}

.slide::after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 10px;
box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #eaeaea;
border: 1px solid #cbcbcb;
box-sizing: border-box;
bottom: 0;
}

.button:hover .slide {
top: 0;
border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
top: 1px;
position: relative;
}

.twitter iframe {
width: 79px !important;
}

.google #___plusone_0 {
width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
background: #305c99;
color: white;
}

.button.twitter:hover i, .twitter .slide {
background: #00cdff;
color: white;
}

.button.google:hover i, .google .slide {
background: #d24228;
color: white;
}

.button.linkedin:hover i, .linkedin .slide {
background: #007bb6;
color: white;
}

.button.linkedin {
margin-right: 0;
}

.credit {
display: none;
}

.credit a {
display: none;
}
</style>
<b:if cond='data:blog.pageType == "item"'>

<div class='social-sharing-title'>
الرجاء مشاركة الموضوع لتعم الفائده على الجميع</div>
<div id='buttons'>
<div class='facebook button'>
<i class='icon-facebook'/>
<div class='social-container fb'>
<div class='slide'>
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=85&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:21px; margin: 0px; }'/>
</div>
فيس بوك
</div>
</div>
<div class='twitter button'>
<i class='icon-twitter'/>
<div class='social-container tw'>
<div class='slide'>
<a class='twitter-share-button' data-hashtags='' data-via='iTh3Maestro' href='https://twitter.com/share '>
غرد </a>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
تويتر
</div>
</div>
<div class='google button'>
<i class='icon-google-plus'/>
<div class='social-container tw'>
<div class='slide'>

<div class='g-plusone' data-size='medium'>
</div>

<script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
}
)();
</script>
</div>
جوجل +
</div>
</div>
<div class='linkedin button'>
<i class='icon-linkedin'/>
<div class='social-container tw'>
<div class='slide'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<script type='IN/Share'/>
</div>
لينكدان
</div>
</div>
</div>
<div class='credit'>
<a href='http://goo.gl/vnNkHv ' target='_blank' title='Get'><span style='font-size: x-small;'>get</span></a></div>
</b:if></b:if>

الآن يمكنك إستبدال ماباللّون الأزرق بجملة تناسبك الرجاء مشاركة الموضوع لتعم الفائده على الجميع

******************************************

أما الإضافة الثانية فهي مثلها فقط بها بعض التغييرات كما في الصورة التالية
ولتركيبها قم بنفس العمل السابق

الآن يمكنك إستبدال ماباللّون الأزرق بجملة تناسبك الرجاء مشاركة الموضوع لتعم الفائده على الجميع

الكود :

<b:if cond='data:blog.pageType == "item"'>

<style>

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";

#buttons {

width: 475px;

overflow: hidden;

margin: 20px auto -10px;

}

.social-sharing-title{

background: #E74C3C;

color: #ffffff;

text-align: center;

line-height: 40px;

font-size: 18px;

width: 600px;

height: 40px;

display: block;

margin: 20px 0px -5px;

}

.button {

float: left;

margin-right: 10px;

width: 110px;

background:#DE14E1;

border: 1px solid #cbcbcb;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

padding: 10px 5px 5px;

box-sizing: border-box;

}

.button i {

background: #353535;

color: #eaeaea;

text-align: center;

line-height: 40px;

font-size: 18px;

width: 70px;

height: 40px;

display: block;

margin: 0 auto 10px;

border-radius: 50%;

-o-border-radius: 50%;

-ms-border-radius: 50%;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

}

.social-container {

text-align: center;

text-transform: uppercase;

font-size: 18px;

color: #353535;

line-height: 100px;

font-family: GESSTwoMediumRegular;

background: #d8d8d8;

width: 100%;

height: 65px;

box-shadow: inset 0 -2px 4px #c7c7c7;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

position: relative;

overflow: hidden;

}

.slide, .button i {

-webkit-transition: all 0.2s ease-in-out;

-moz-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

}

.slide {

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

border-radius: 0 0 22px 22px;

-o-border-radius: 0 0 22px 22px;

-ms-border-radius: 0 0 22px 22px;

-moz-border-radius: 0 0 22px 22px;

-webkit-border-radius: 0 0 22px 22px;

/* top fix */

transition: all 0.2s ease-in-out;

position: absolute;

height: 65px;

width: 100%;

top: -35px;

}

.slide::after {

content: "";

display: block;

position: absolute;

width: 100%;

height: 10px;

box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;

border-radius: 3px;

-o-border-radius: 3px;

-ms-border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

background: #eaeaea;

border: 1px solid #cbcbcb;

box-sizing: border-box;

bottom: 0;

}

.button:hover .slide {

top: 0;

border-radius: 3px;

}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {

top: 1px;

position: relative;

}

.twitter iframe {

width: 79px !important;

}

.google #___plusone_0 {

width: 60px !important;

}

.button.facebook:hover i, .facebook .slide {

background: #305c99;

color: white;

}

.button.twitter:hover i, .twitter .slide {

background: #00cdff;

color: white;

}

.button.google:hover i, .google .slide {

background: #d24228;

color: white;

}

.button.linkedin:hover i, .linkedin .slide {

background: #007bb6;

color: white;

}

.button.linkedin {

margin-right: 0;

}

.credit {

display: none;

}

.credit a {

display: none;

}

</style>

<b:if cond='data:blog.pageType == "item"'>

<div class='social-sharing-title'>
الرجاء مشاركة الموضوع لتعم الفائده على الجميع</div>
<div id='buttons'>

</div>
فيس بوك

</div>
</div>
<div class='twitter button'>

غرد </a>

!function(d,s,id){

var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';

if(!d.getElementById(id)){

js=d.createElement(s);

js.id=id;

js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

</script>

</div>
تويتر

</div>
</div>
<div class='google button'>

</div>

(function() {

var po = document.createElement('script');

po.type = 'text/javascript';

po.async = true;

po.src = 'https://apis.google.com/js/plusone.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(po, s);

}

)();

</script>

</div>
جوجل +

</div>
</div>
<div class='linkedin button'>

lang: en_US

</script>

</div>
لينكدان

</div>
</div>
</div>
<div class='credit'>

عاجل

كمبيوتر وأنترنت

إعلان

أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة

إبحــث هنــا

إنظـم إلينـا عبـر المــواقــع الإجتمــاعيــة

المشـاركـات الشـائعـة

التسميات

إجمالي مرات مشاهدة الصفحة

تصنيفات

المشــاهــدات

الشائعة آخر 30 يومًا

عاجل

كمبيوتر وأنترنت

إعلان

أزرار رائعة خاصة بالمشاركات أسفل مواضيع المدونة

إشترك للحصول على احدث الأخبار

إبحــث هنــا

إنظـم إلينـا عبـر المــواقــع الإجتمــاعيــة

المشـاركـات الشـائعـة

التسميات

إجمالي مرات مشاهدة الصفحة

تصنيفات

المشــاهــدات

الشائعة آخر 30 يومًا