مرحبا بكم متابعينا
مدونة عالم التكنولوجيا الكرام, نجاح المدونة مازال يؤكد علينا كل يوم أن المحتوى هو رقم واحد فيجب عليك الاهتمام أكثر وأكثر بمحتوى فريد متناسق مُفيد مُجدى لفئة أو لمجتمع أو لمجال, ولكن يجب علينا نشر ما يتم كتابته فى مدوناتنا الى العديد من الأشخاص الذين يفضلون منصة عن الأخرى فمن حقهم أن يعرفوا ما تكتب عنه ومن واجبك نشر المعرفة ومن واجبهم دعمك وتقييمك ولذلك وجب علينا نشر الأداة الرائعة فى هذا الموضوع وهى خاصة بمواقع النشر كالفيسبوك وتويتر وجوجل بلس وتدعم أزرار تقييم الموضوع متضمنة مواقع نشر عديدة وكذلك تجدون على اليسار إمكانية طباعة المقال أو الاحتفاظ به لقراءته فيما بعد. أنت بتلك الطريقة تتيح للزائر عدة طرق بشكل أنيق لتقديم طبختك التى تعبت لإعدادها ليلتهم ما بها من فائدة. والأن يمكنكم المعاينة من
هنا فاذا أعجبتكم قوموا بمتابعتنا لتطبيقها على مدوناتكم.
أولا قم بأخذ نسخة إحتياطية من قالب مدونتكم ونحن ننصح بتطبيق أى إضافة على مدونة تجريبية ثم التطبيق على مدونتكم.
ثانيا كود CSS ويتم وضعه فوق ]]></b:skin>
/* CSS Social Share */
h9 {
color: #fff;
font-family: ge_dinar_tworegular;
margin-right: 140px;
}
.share-box{background-color:#2e3138;font-size:14px;padding:10px 0 11px;position:relative;margin-top:10px;color:#666;border-bottom: 1px solid #353942;}
/* Slide Share */
#button-count-share {
margin-left:45px;
overflow: hidden;
background: transparent;
padding: 3px;
}
#button-count-share span {
float: left;
position: relative;
font-size: 13px;
color: #fff;
margin: 12px 5px 12px 5px;
}
.button-share {
background: #dce0e0;
position: relative;
display: block;
float: left;
height: 40px;
overflow: hidden;
width: 140px;
margin: 4px;
border-radius: 3px;
}
.ikons {
display: block;
float: left;
position: relative;
z-index: 1;
height: 100%;
vertical-align: top;
width: 38px;
text-align: center;
}
.ikons i {
color: #fff;
line-height: 33px;
}
.slide-share {
z-index: 2;
display: block;
height: 100%;
left: 38px;
position: absolute;
width: 108px;
margin: 0;
}
.slide-share p {
font-family: ge_dinar_tworegular;
font-weight: 400;
border-left: 1px solid rgba(255,255,255,0.35);
color: #fff;
font-size: 14px;
left: 0;
position: absolute;
text-align: center;
top: 10px;
width: 100%;
margin: 0;
}
.button-share .slide-share {
transition: all 0.4s ease-in-out;
}
.facebook .fb_iframe_widget {
display: block;
position: absolute;
right: 5px;
top: 0;
z-index: 1;
}
.twitter iframe {
left: 50px;
top: 10px;
z-index: 1;
display: block;
position: absolute;
}
.google #___plusone_0 {
width: 15px!important;
top: 10px;
right: 5px;
position: absolute;
display: block;
z-index: 1;
}
.facebook .ikons,.facebook .slide-share {
background: #4f79bc;
}
.twitter .ikons,.twitter .slide-share {
background: #63cef2;
}
.google .ikons,.google .slide-share {
background: #f36261;
}
.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {
left: 180px;
opacity: 0.6;
}
/* CSS Print */
.printfriendly{float:left;left:10px;background:transparent;color:#666;text-decoration:none;padding:3px 0 3px 5px;font-family:'Open Sans';font-size:20px;font-weight:400;}
.printfriendly span.print{opacity:0.7;background:url(http://3.bp.blogspot.com/-lk5nzkiNUx8/U8aAFYhsEZI/AAAAAAAAEZI/aH7XVyZ0K3M/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-right:20px;transition:all 0.5s ease-in-out;}
.printfriendly span.print:hover{opacity:1;background:url(http://3.bp.blogspot.com/-lk5nzkiNUx8/U8aAFYhsEZI/AAAAAAAAEZI/aH7XVyZ0K3M/s1600/print.png) no-repeat;border:none;box-shadow:none;margin:3px 6px -3px;padding-right:20px}
.printfriendly span.pdf{opacity:0.7;background:url(http://1.bp.blogspot.com/-I0-5NsWqte0/U8Z_1fuHXlI/AAAAAAAAEYA/Wk_SRupt4j4/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-right:20px;transition:all 0.5s ease-in-out;}
.printfriendly span.pdf:hover{opacity:1;background:url(http://1.bp.blogspot.com/-I0-5NsWqte0/U8Z_1fuHXlI/AAAAAAAAEYA/Wk_SRupt4j4/s1600/PDF.png) no-repeat;border:none;box-shadow:none;margin:3px 0 -3px;padding-right:20px;}
ثالثا قم بالبحث عن </head> وضع فوقها أو قبلها الكود التالى
<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='https://ar1web-com.googlecode.com/svn/trunk/font-ge_dinar.css' rel='stylesheet'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
رابعا قم بالبحث عن الكود التالى
<b:if cond='data:blog.pageType == "item"'>
وقم بوضع الكود التالي بعده أو أسفل منه
<div class='share-box'>
<span class='likebtn-wrapper' data-show_like_label='false' data-style='padded'/>
<script async='async' src='//w.likebtn.com/js/w/widget.js' type='text/javascript'/>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<a class='printfriendly' href='http://www.printfriendly.com' onclick='window.print();return false;' title='طباعة التدوينة'><span class='print'/> <span class='pdf'/></a>
<h9>اذا أعجبك الموضوع قم بمشاركته فى المواقع الإجتماعية</h9>
<div>
<div class='clear'/>
<div id='button-count-share'>
<div class='facebook button-share'><i class='ikons'><i class='icon-share icon-large'/></i>
<div class='slide-share'>
<p>نشر</p>
</div>
<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='"http://www.facebook.com/sharer.php?u=" + data:blog.url' type='button_count'/>
</div>
<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>
<div class='slide-share'>
<p>إعجاب</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>
<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>
<div class='slide-share'>
<p>جوجل +</p>
</div>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>
<script type='text/javascript'>
window.___gcfg = {
lang: 'en-US'
};
(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='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>
<div class='slide-share'>
<p>تويتر</p>
</div>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>غرد</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div class='clear'/>
</div>
<div class='clear'/>
</div>
</div>
قم بحفظ القالب. يمكنك بكل سهولة التعديل على الألوان أو الكلمات التى تظهر بالإضافة كلمة نشر أو إعجاب أو تويتر بما تحب ان تراه مناسبا لك. أتمنى أن أكون قد أفدتكم.
ليست هناك تعليقات:
إرسال تعليق