ترقيم الصفحات لمدونات بلوجر

السلام عليكم إخواني الكرام في هذا الدرس سوف نتطرق إلى الطريقة الأسهل في إدراج ترقيم الصفحات لمدونات بلوجر بدون اي تعقيدات تذكر،عليكم سوى تتبع المراحل التالية:




AKGJG599E6TP

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :


<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #EF00BF; /* لون إطار الأرقام */
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #EFB700; /*لون إطار الأرقام عند لمسه بالماوس */
background-color:#00EFEF; /* لون مساحة الإطارعند لمسه بالماوس*/
}
.showpagePoint {
color::#EF2000; /* لون رقم الصفحة المفتوحة */
text-decoration:none;
border: 1px solid #FA2100; /* لون إطار رقم الصفحة المفتوحة */
background:#E9FA00; /*لون مساحة إطار رقم الصفحة المفتوحة */
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #A256C3; /* لون إطار "التالي, السابق" */
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#0AEA82; /*لون الأرقام */
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5; /* عدد المواضيع المراد عرضها في صفحة الواحدة*/
var displayPageNum=3; /* عدد الصفحات التي يتم إدراجها */
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Prevous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.monte-escalier-prix.org">www.monte-escalier-prix.org</a></div>


و اخيرا و ليس آخرا قم بإزاحة الأداة تحت "رسائل المدونة الالكترونية" كما هو موضح في الصورة اسفله
في الكود أعلاه يمكنك تغيير الأرقام الحمراءحسب رغبتكم.
1 : var pageCount = 5;
هذه القيمة تمثل عدد المواضيع المراد عرضها في صفحة الواحدة
2 : var displayPageNum = 3;
هذه القيمة تمثل عدد الصفحات التي يتم إدراجها.





















ثم قم بالحفظ

إضافة صندوق التعليقات لمدونات بلوجر بثلاثة ألوان مختلفة

السلام عليكم ورحمة الله تعالى وبركاته
التعليقات هي من أكثر الإضافات التي يبحث عنها المدونون حيث تتيح لنا التعليق على على موضوع معين و ابداء رأينا فيه وكدلك الرد على أسئلة و استفسارات الزوار
أما لاضافة التي أتيت بها اليوم فهي تختلف قليلا من حيث :

1 - شكل جميل
2 - الإضافة بثلاثة ألوان مختلفة 
3 - تحتوي على شريط في حافة صندوق التعليق للتمييز بين تعليقات الكاتب و بين الزوار.

رد على التعليق

أدعوكم لمشاهدة الإضافة  


 إدا أعجبتك أخي تفضل

 الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع قوالب عناصر واجهة المستخدم 

الخطوة الثانية

ابحث عن :

 ]]></b:skin>

 واضف هدا الكود قبلها:

1- صندوق تعليقات باللون أخضر 


/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:17px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;right:10px;border-top:10px solid #56d805;border-left:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyXzBX3kNY1WXKHtRxVq8NGAAuAzc0zIqBGJxcbfM6-y6NtTjd-oeB6NYM8aWtyRpVLCzbJQrFbLriL3W2ZRCjxTBZseG3d6-qU2BNNljVYsZsnZmk4h64CxiTXlDTMMDZ7xzJ3fRNHY/s1600/picresized_1338990142_comment-author-blue.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 20px 0 0}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-right:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;right:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-right:48px}
.comments .comment-thread.inline-thread .user a{font-size:14px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

2- صندوق تعليقات باللون أزرق 


اضافة رد تعليقات بلوجر




/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:17px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;right:10px;border-top:10px solid #1e05d8;border-left:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjyXzBX3kNY1WXKHtRxVq8NGAAuAzc0zIqBGJxcbfM6-y6NtTjd-oeB6NYM8aWtyRpVLCzbJQrFbLriL3W2ZRCjxTBZseG3d6-qU2BNNljVYsZsnZmk4h64CxiTXlDTMMDZ7xzJ3fRNHY/s1600/picresized_1338990142_comment-author-blue.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 20px 0 0}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-right:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;right:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-right:48px}
.comments .comment-thread.inline-thread .user a{font-size:14px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

3- صندوق تعليقات باللون وردي

اضافة رد لتعليقات بلوجر

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:17px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;right:10px;border-top:10px solid #d80556;border-left:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-right:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;left:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjowZ2ziYQq5Afi822ODsaYBUOg_SNwQz00ymLSNnRgMHDngwvoOovxpRynJNC_CBVrtur6MelVTuvnylB6LGxIJlxY3xiH8sfYxo2FVnECNgR4d3puZqjXpa-ZBA8MrA5LB02v0lR-rU/s1600/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 20px 0 0}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-right:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;right:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-right:48px}
.comments .comment-thread.inline-thread .user a{font-size:14px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/


احرص على نقل الكود كاملا ثم احفظ القالب ومبروك عليك الاضافة .
إذا كان لديك أي مشكلة في هذه الاضافة،اترك التعليق أدناه.

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

اضافة طائر تويتر بشكل جديد و جميل

بسم الله الرحمن الرحيم 

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

اضافة تويتر
أدعوكم لمشاهدة الإضافة  


 إدا أعجبتك أخي تفضل
 
 
1 - ادخل الى لوحة التحكم
2 - تخطيط
3 - عناصر الصفحة
4- اضافة اداة html/java


ثم اتسخ الكود التالي : 

---------------------------------------------------------------------------------------------------------
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJhhvUWVxgOK4_DU-xuhy36ycKdbF2fgYZh-XEIqduq3_dWyyGB7puG7hKlgppNr2yCNUU_nvsrph7_gadAboi5VlEnj0CYtFLB59mNshx-oJcLctghHpknTe0UbYiGONULmJ31_wvdtf/s1600/best+blogger+tips.png'/></a><div style='position: fixed; bottom: 20%; right: 0%;'/><a href="http://www.twitter.com/paulcrowepro" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NfGEC8ZcEZ9ouCMzWQH-DCvpWvHxcs_oGX5L8o8pAvmbVZ2Dktv6Nibnb9st4WDZ6vlI6Voqv6FZ6cv6Qs57OkToOG8UHJdBQ4XMafKejBEliJr1wf96MOuLxnBfKQCMspkp7kK-mcpa/s1600/follow+on+twitter+float.png" /></a></div><a href="http://www.spiceupyourblog.com" target="_blank">Fixed Twitter Gadget</a>
----------------------------------------------------------------------------------------------------------

مع تغيير ما لون بالأحمر بإسم صفحتك على تويتر

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

أزرار مشاركة متحركة عل شكل بيضة


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


أزرار مشاركة
   
أدعوكم لمشاهدة الإضافة  


 إدا أعجبتك أخي تفضل

 

الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع قوالب عناصر واجهة المستخدم 

الخطوة الثانية

ابحث عن :

 </head>

 واضف هدا الكود قبلها

--------------------------------------------------------------------------------------------------------
<!-- Start Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://www.spiceupyourblog.com/ -->
--------------------------------------------------------------------------------------------------------

الخطوة الثالثة

ابحث عن :

 </body>

  واضف هدا الكود قبلها

------------------------------------------------------------------------------------------------------------
 <!-- Start Heart Share Code From http://www.spiceupyourblog.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://9walib.blogspot.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://www.spiceupyourblog.com/ -->
-------------------------------------------------------------------------------------------------------------

نلاحط أن زر المشاركة متواجد في اسفل الجهة اليسرى و يمكن بسهولة تغيير مكانه بتغير مالون بالأصفر


bottom: 2% : لتغيير الإرتفاع


left: 2% : لتغيير الإتجاه من اليسار إلى اليمين.

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

زر الارسال send + زر الاعجاب like لمدونات بلوجر من فيسبوك

قبل حوالي اكثر من عام اطلق فيسبوك زر الاعجاب الشهير لينتشر بشكل هائل جدا بين المواقع والمدونات والمنتديات ، زر اعجبني من فيسبوك - وفي هذه التدوينة نعود مرة اخرى الى خدمات فيسبوك للمواقع والمدونات لنقدم لكم زر الارسال send لتتمكن اخى المدون من اتاحة المجال لزوارك لارسال رسالة خاصة بالموضوع الى احد اصدقائهم مباشرة في فيسبوك - لنبدأ على بركة الله بشرح طريقة الاضافة :



اضافة زر ilike بلوجر


الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم


الخطوة الثانية

ابحث عن :

<div class='post-header-line-1'/>


واضف الكود بعدها



واذا لم تجدها ابحث عن :(قد تجد اثنتين فالثانية المقصودة)


<data:post.body/>


واضف الكود التالي بعدها ليظهر في اخر التدوينة ، او قبلها ليظهر اول التدوينة



1- كود اضافة زر الارسال فقط

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <!--Facebook Send button Start sma-b.blospot.com -->

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='tahoma'/>

    <!--Facebook Send button End sma-b.blospot.com  --></b:if>
  

2- كود اضافة زر الاسال + زر الاعجاب  
  <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Facebook Like+Send button Start sma-b.blogspot.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button End sma-b.blogspot.com -->

</b:if>
 تخصيص الزر بما يناسبك


1- احذف ما تم تعليمه بالبرتقالي اذا كنت تريد ان يظهر الزر في جسم التدوينة وفي الصفحة الرئيسية لمدونتك


tahoma : نوع الخط وتستطيع تغييره بخطوط اخرى مثل arial

light : يعني خفيف ، ويمكن تغييرها الى معتم dark


أيضا يمكنك متابعة الشرح في هذا الموضوع http://sma-b.blogspot.com/2010/09/like-button-to-blogger.html


الان احفظ القالب ومبروك عليك الاضافة .
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. DZ-Templates - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger