أزرار مواقع التواصل الاجتماعي هي ضرورية في اي مدونة لانها تمكن زوار مدونتك من العثور عليك في مواقع التواصل الاجتماعي ومتابعة جديدك لذالك اتيت لكم بإضافة جميلة و بأسلوب احترافي يمكنك من إضافة صفحات موقعك فيها.
صورة الاضافة:
طريقة إضافة الاداة:
أذهب إلى لوحة التحكم في مدونتك >>> تخطيط >>> إضافة أداة >>> ثم أختر HTML/javascripte ثم أضف الكود التالي :
<style>
.button {
background: #DCE0E0;
position: relative;
display: block;
float: left;
height: 40px;
margin: 4px;
overflow: hidden;
width: 156px;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.icon {
display: block;
float: left;
position: relative;
z-index: 3;
height: 100%;
vertical-align: top;
width: 38px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-radius: 3px 0px 0px 3px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.icon i {
color: #fff;
line-height: 42px;
}
.slide {
z-index: 2;
display: block;
margin: 0;
height: 100%;
left: 38px;
position: absolute;
width: 118px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 3px 3px 0px;
border-radius: 0px 3px 3px 0px;
}
.slide p {
font-family: Open Sans;
font-weight: 400;
border-left: 1px solid #fff;
border-left: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 16px;
left: 0;
margin: 0;
position: absolute;
text-align: center;
top: 10px;
width: 100%;
}
.button .slide {
-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;
transition: all 0.2s ease-in-out;
}
.facebook iframe {
display: block;
position: absolute;
right: 23px;
top: 10px;
z-index: 1;
}
.twitter iframe {
width: 90px !important;
right: 5px;
top: 10px;
z-index: 1;
display: block;
position: absolute;
}
.google #___follow_0 {
width: 70px !important;
top: 10px;
right: 45px;
position: absolute;
display: block;
z-index: 1;
}
.youtube #___ytsubscribe_0 {
top: 10px;
right: 1px;
position: absolute;
display: block;
z-index: 1;
}
.facebook:hover .slide {
left: 180px;
}
.twitter:hover .slide {
top: -40px;
}
.google:hover .slide {
bottom: -40px;
}
.youtube:hover .slide {
left: -150px;
}
.facebook .icon, .facebook .slide {
background: #305c99;
}
.twitter .icon, .twitter .slide {
background: #00cdff;
}
.google .icon, .google .slide {
background: #d24228;
}
.youtube .icon, .youtube .slide {
background: #b31217;
}
</style>
<div class="facebook button">
<i class="icon">
<i class="fa fa-facebook"></i>
</i>
<div class="slide">
<p>
Facebook
</p>
</div>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/th3professional&like&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" allowtransparency="true">
</iframe>
</div>
<div class="google button">
<i class="icon">
<i class="fa fa-google-plus"></i>
</i>
<div class="slide">
<p>
Google+
</p>
</div>
<div class="g-follow" data-annotation="bubble" data-href="//plus.google.com/+th3professional" data-rel="publisher"></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/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="youtube button">
<i class="icon">
<i class="fa fa-youtube"></i>
</i>
<div class="slide">
<p>
YouTube
</p>
</div>
<div class="g-ytsubscribe" data-channel="th3professional" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
function onYtEvent(payload) {
if (payload.eventType == 'subscribe') {
// Add code to handle subscribe event.
} else if (payload.eventType == 'unsubscribe') {
// Add code to handle unsubscribe event.
}
if (window.console) { // for debugging only
window.console.log('YT event: ', payload);
}
}
</script>
</div>
<div class="twitter button">
<i class="icon">
<i class="fa fa-twitter"></i>
</i>
<div class="slide">
<p>
Twitter
</p>
</div>
<a href="https://twitter.com/th3professional" class="twitter-follow-button" data-show-count="false" data-via="mariuCSS">
Tweet
</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>
وبعدها غير:th3professional الى اسم صفحتك على الفيس بوك
th3professional الى اسم ملفك الشخصي على جوجل+
th3professional الى رابط قناتك على اليوتوب
th3professional الى اسم حسابك على التويتر
اي استفسار المرجو وضعه في التعليق
