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

مرحبا بكم في حلقة جديدة على مدونة Informatique Max

أول مرة سنضع موضوع بخصوص البلوجر في هذا الدرس سأتطرق لكيفية إضافة أزرار المشاركة مثل اللتي توجد بالصورة.

إذن حلقات قادمة سأضع شروحات أخرى حول البلوجر لذا الآن لنمر إلى الشرح :

بالإشارة فذه الأزرار تساعد متابعيك على نشر ومشاركة مواضيع المدونة بحيث أنهم يضغطون فقط و يتم العملية.

الأكواد أسفل الموضوع.

والآن الشرح بالفيديو:

الأكواد:

إبحث عن هذا: <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: #38C;
color: #ffffff;
text-align: center;
line-height: 40px;
font-size: 18px;
width: 688px;
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='InformatiqueMax' data-via='InformatiqueMax' 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='ضع رابط موقعك هنا' target='_blank' title='Get'><span style='font-size: x-small;'>get</span></a></div>
</b:if></b:if>
 <br/>

ولتحميل الكود:

تحميل

إذن نأمل أن لا تبخل علينا بلايك و مشاركة للموضوع

Home Top Ad

الأحد، 22 فبراير 2015

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

ليست هناك تعليقات:

إرسال تعليق

معلومات الكاتب

الفيسبوك

جديد

الشائعة

التعليقات

اعلان

أندرويد

عن المدونة

Informatique Max

التصنيفات

جديد الأخبار

راسلنا

راسلنا

أرشيف

Home Top Ad

الأحد، 22 فبراير 2015

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

ليست هناك تعليقات:

إرسال تعليق

معلومات الكاتب

صفحاتنا

الفيسبوك

جديد

الشائعة

التعليقات

اعلان

أندرويد

عن المدونة

Informatique Max

التصنيفات

جديد الأخبار

راسلنا

راسلنا

أرشيف