هناك العديد والعديد من الاضافات الخاصه بالبوجر منها منثق الشكل ومنها المفيد ومنها الغير مفيد ولاكن كنصيحه كثره الاضافات فى موقعك او مدونتك تعمل على بطى تحميل الموقع وهنا يخرج الزائر من الموقع هذه كانصيحه
ولاكن موضوع اليوم ساتكلم فيه عن اضافه بلوجر مهمه لكل مدونه وهى اضافه ازرار المشاركات الاجتماعيه بجانب القالب فى الجهه اليمنى وايضا بعداد ماذا اقصد بعداد يعنى انها تعرض لك عدد المشاركات فى جميع المواقع وهذه الصوره توضيح على شكل الاضافه
طريقه التركيب أزرار المشاركات الإجتماعية
اولا سوف تذهب الى تحرير القالب بعدها تبحث عن الوسم </head> وتضع الكود التالى فوقه مباشره
<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.ar1web_SocialBar {
position: fixed;
bottom: 30%;
padding: 0;
right:0;
background: none;
text-align: center;
margin: 0 auto;
z-index: 99999999;
}
.ar1web_SocialBar label:hover {
cursor: pointer;
opacity:1;
}
.ar1web_SocialBar label {
text-align: center;
opacity: 0.4;
width: 50px;
background: #3A3939;
color: #FFF;
border: 0;
font-family: FontAwesome;
display: block;
font-size: 12px;
padding: 0px 0px;
border-radius: 0;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
position: absolute;
line-height: 1.5em;
margin-top: 346px;
}
input.ShowHide_Button:checked + label {
-webkit-transform-origin: 50% 0%!important;
opacity: 1;
transform: translateX(0px) rotateY(-180deg);
transition-delay: 0.2s;
border: 1px solid #3A3939;
border-radius: 0 50px 50px 0;
width: 30px;
max-width: 30px;
}
input.ShowHide_Button ~ .ShowHideMe {
-webkit-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-moz-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-ms-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
-o-transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620);
}
input.ShowHide_Button:checked ~ .ShowHideMe {
margin-right: -75px !important;
}
input.ShowHide_Button {
display: none;
}
.ar1web_SocialBar .social_menu {
display: inline-block;
float: right;
list-style:none;
max-width:50px;
margin: 0;
padding: 0;
}
.ar1web_SocialBar .social_menu .button_facebook {
background: #3a579a;
}
.ar1web_SocialBar .social_menu .button_facebook:hover {
background: #314a83;
}
.ar1web_SocialBar .social_menu .button_twitter {
background: #00abf0;
}
.ar1web_SocialBar .social_menu .button_twitter:hover {
background: #0092cc;
}
.ar1web_SocialBar .social_menu .button_googleplus {
background: #df4a32;
}
.ar1web_SocialBar .social_menu .button_googleplus:hover {
background: #be3f2b;
}
.ar1web_SocialBar .social_menu .button_pinterest {
background: #cd1c1f;
}
.ar1web_SocialBar .social_menu .button_pinterest:hover {
background: #ae181a;
}
.ar1web_SocialBar .social_menu .button_stumbleupon {
background: #ea4b24;
}
.ar1web_SocialBar .social_menu .button_stumbleupon:hover {
background: #c7401f;
}
.ar1web_SocialBar .social_menu .button_linkedin {
background: #2554BF;
}
.ar1web_SocialBar .social_menu .button_linkedin:hover {
background: #224EB4;
}
.ar1web_SocialBar .social_menu .button_facebook .count,
.ar1web_SocialBar .social_menu .button_twitter .count,
.ar1web_SocialBar .social_menu .button_googleplus .count,
.ar1web_SocialBar .social_menu .button_pinterest .count,
.ar1web_SocialBar .social_menu .button_stumbleupon .count,
.ar1web_SocialBar .social_menu .button_linkedin .count {
color: #fff!important;
padding-top: 4px;
font-size: 13px !important;
line-height: 1.2em;
font-family: sans-serif;
font-weight: bold;
}
.ar1web_SocialBar .social_menu > ul {
margin: 0;
padding: 0;
list-style: none;
}
.ar1web_SocialBar .social_menu .share {
background: #FFF;
color: #807F7F;
font-size: 11px;
height: 45px !important;
}
.ar1web_SocialBar .social_menu .share .count.h4 {
font-size: 18px;
font-family: sans-serif;
color: #424242;
height: 25px !important;
line-height: 1.5em;
font-weight: bold;
margin: 0px !important;
}
.ar1web_SocialBar .social_menu .share .h6 {
padding-bottom: 3px;
font-family: 'Droid Arabic Naskh',sans-serif;font-weight: bold;
margin: 0px !important;
line-height: 1.5em;
font-size: 11px;
}
.ar1web_SocialBar .social_menu > ul > li {
margin: 0px 0px 0px 0px;
position: relative;
text-align: center;
list-style: none;
list-style-type: none;
padding: 0px;
border: 0px;
border-left: 0 solid rgba( 0,0,0,.4);
height: 50px;
width: 50px;
overflow: hidden;
display: block;
box-sizing: border-box;
background: none;
box-sizing: content-box;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ar1web_SocialBar .social_menu > ul > li a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px 0px;
cursor: pointer;
text-decoration: none;
}
.ar1web_SocialBar .social_menu > ul > li:hover {
border-right: 5px solid rgba( 0,0,0,.3);
width: 40px;
}
.ar1web_SocialBar .social_menu > ul > li i {
color: #fff !important;
font-family: FontAwesome;
font-size: 20px;
font-style: normal;
font-weight: normal;
line-height: 1em;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ar1web_SocialBar .social_menu > ul > li:hover i {
opacity: 0.9;
}
@media only screen and (min-width:768px) and (max-width:979px) {
.ar1web_SocialBar {
bottom: 20% !important;
}
}
@media only screen and (min-width:480px) and (max-width:767px) {
.ar1web_SocialBar {
bottom: 15% !important;
}
}
@media only screen and (max-width:479px) {
.ar1web_SocialBar {
bottom: 10% !important;
display: none !important; /*---أحذف هذا السطر بكامله ليظهر على الهاتف--*/
}
}
</style>
</b:if>
بعدها نبحث عن الوسم <data:post.body/> وتضع الكود التى تحته مباشره
وغير مايلزمك من مواقع التواصل فى هذا الكود
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='ar1web_SocialBar'>
<input class='ShowHide_Button' id='twiSter' type='checkbox'/>
<label for='twiSter'><i class='fa fa-arrow-right'/></label>
<div class='ShowHideMe'>
<div class='social_menu'>
<div class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='h6'>المشاركات</div>
</div></div>
<ul>
<li class='button_facebook'>
<a expr:href='" http://www.facebook.com/share.php?v=4& src=bm& u=" + data:post.url + " & t=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-facebook'/>
<div class='share-btn' data-service='facebook'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_twitter'>
<a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @Hmar1web - "' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
<div class='share-btn' data-service='twitter'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_googleplus'>
<a expr:href='" https://plus.google.com/share?url=" + data:post.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
<div class='share-btn' data-service='google'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_pinterest'>
<a data-pin-config='beside' expr:href='" http://pinterest.com/pin/create/button/?url=" + data:post.url + " &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-pinterest'/>
<div class='share-btn' data-service='pinterest'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_stumbleupon'>
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + " & title=" + data:post.title' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-stumbleupon-circle'/>
<div class='share-btn' data-service='stumbleupon'>
<div class='count'/></div></strong>
</a>
</li>
<li class='button_linkedin'>
<a expr:href='" http://www.linkedin.com/shareArticle?mini=true& url=" + data:post.url + " & title=" + data:post.title + " & summary=& source=" ' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
<div class='share-btn' data-service='linkedin'>
<div class='count'/></div></strong>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
var shareUrl = $("link[rel=canonical]").attr("href");
$.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
shares = data.shares;
$(".count").each(function (index, el) {
service = $(el).parents(".share-btn").attr("data-service");
count = shares[service];
if (count > 1000) {
count = (count / 1000).toFixed(1);
if (count > 1000) count = (count / 1000).toFixed(1) + "M";
else count = count + "k";
}
$(el).html(count);
});
});
});
//]]></script>
</b:if>
</b:if>
