الإصدار الأول : إضافة المشاركات الإجتماعية بعداد
من مميزاتها أن جد خفيفة وبها خطوط الأيقونات Font Awesome وأيضا يمكن إخفائها كما أنها متجاوبة، لكن التجاوب على الهواتف تم إخفائه نظرا للمقاس الصغير لكن يمكن حذفه عبر كود ستايل صغير سنتطرق لطريقة في نهاية الموضوع... ولكي تحظى برؤية أكبر أدعوك لمعاينتها مباشرة عبر قالب رسالتي وتجربتها بنفسك
2. ابحث عن </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>
3. أضف الكود الآتي فوق : <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>
* غير @Hmar1web بإسم حسابك بتويتر
* إذا لم تظهر لك الأيقونات الخاصة بالحسابات الإجتماعية أضف الكود التالي فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>