إضافة زر الإعجاب وعدم الإعجاب أسفل الموضوع على مدونة بلوجر

----------------------------------------

Add the Like button the bottom of the matter and not to admire the blog Blogger

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم زوارنا ..... في هذا الدرس سأشرح لكم طريقة إضافة زر الإعجاب (like) و عدم الأعجاب (dislike) لتدويناتكم أسفل كل موضوع مما سيمكن الزوار من تقييم مواضيعكم ومعرفة أكثر المواضيع اعجابا للزوار وأيضا إمكانية نشر مواضيعكم في المواقع الإجتماعية …………….

وهذا مثال للأزرار

إذا كيف نضيف زر الإعجاب وعدم الإعجاب لمدونتنا؟

أولا علينا الذهاب إلى الموقع التالي

LikeBot.com

بعد ذلك ستجد كودين مختلفين حسب شكل الأزرار كما في الصورة التالية:

- ادخل الى القالب » تحرير html » من لوحة المفاتيح اضغط على Ctrl+F

اي انه بعد أختيارك للكود اذهب إلى لوحة التحكم ثم القالب ثم تحرير HTML

ابحث عن الكود التالي

<data:post.body/>

بعد ذلك أضف احدى الأكواد أسفله و احفظ القالب

هاذا هو الكود الاول : الكود الاول :

<a class="LikeBotButton">
  <script src="http://i.likebot.com/button.js" type="text/javascript"></script>
</a>

الكود الثاني هو :

<a class="LikeBotButton">
  <script type="text/javascript">
    likebot_bgcolor = '#FFFFFF';
    likebot_url = 'http://likebot.com/';
    likebot_type = 'badge';
  </script>
  <script src="http://i.likebot.com/button.js" type="text/javascript"></script>
</a>

-----------------------

الطريقة الثانية

- ادخل الى القالب » تحرير html » من لوحة المفاتيح اضغط على Ctrl+F

2- ابحث عن head

- اضف فوقه الكود التالي

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

ثم ابحث عن الكود التالى

<b:include data='post' name='post'/>

ثم اضف الكود التالى فوقه

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='bi-tip-rating-2546'/>
 </b:if>

ابحث عن الكود التالى

</body>

اضف هذ الكود التالى فوقه

ملاحظة : كل الاكواد موجودة في ملف اسفل التدوينة قم بتحميله هو ملف صغيرالحجم به الاكواد فقط ....
------------------------------------------------------------------------------------------

<style type="text/css">

#bi-tip-rating-2546 {

margin: 0.5em 0;

font-size: 12px!important;

}

#bi-tip-rating-2546 * {

line-height: 1.3em!important;

}

#bi-tip-rating-2546 .button {

float: left;

width: 95px;

overflow: hidden;

border: 1px solid #C6C6C6;

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff8f8f8,EndColorStr=#ffeeeeee);

background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#F8F8F8),color-stop(100%,#EEE));

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

border-radius: 2px;

margin: 0 0.5em 0 0;

padding: 2px 0;

filter: alpha(opacity=60);

opacity: 0.6;

}

#bi-tip-rating-2546 .button:hover {

filter: alpha(opacity=100);

opacity: 1;

}

#bi-tip-rating-2546 .button iframe {

height: 20px;

margin: 1px 0 0 0;

position: relative;

z-index: 9999;

}

#bi-tip-rating-2546 .like.button iframe {

margin-left: -104px;

}

#bi-tip-rating-2546 .dislike.button iframe {

margin-left: -92px;

}

#bi-tip-rating-2546 .button div.icon {

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKDw-pDghLSFUW5JNRmnB_I2I0Avsr9yyhUhNp6yEzUbSLnl0VykD4nxKtuAn63bXTEAyFnruP_dMTXKJnv5lpTxoZ9X3WpQp9Iy64rrsFM7pHBxvP09LD7ZPDLa31czuCHf0AtNFdZ1I/s1600/ui-icons.png);

background-repeat: no-repeat;

height: 20px;

width: 20px;

position: absolute;

z-index: 1;

}

#bi-tip-rating-2546 .like.button div.icon {

background-position: -252px -26px;

}

#bi-tip-rating-2546 .dislike.button div.icon {

background-position: -320px -138px;

}

#bi-tip-rating-2546 .like.button {

width: 85px;

}

#bi-tip-rating-2546 .share.button {

width: 50px;

text-align: center;

padding: 8px;

color: black;

font-weight: bold;

font-size: 12px;

line-height: 12px!important;

}

#bi-tip-rating-2546 .button div.label {

position: absolute;

margin: 4px 0 0 22px;

color: black;

font-size: 12px;

z-index:1;

}

#bi-tip-rating-2546 .button:active {

border-color: #C6C6C6;

background-color: #E9E9E9;

-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.20);

-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .20);

}

#bi-tip-rating-2546 .share-box {

margin: 0.5em 0;

display: none;

}

#bi-tip-rating-2546 input.share-url {

display:block;

-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

-ms-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .1);

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

border: 1px solid #ccc;

padding: 5px;

width: 50%;

}

#bi-tip-rating-2546 input.share-url:hover {

-moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);

-ms-box-shadow: inset 0px 1px 2px rgba(0,0,0,.15);

-webkit-box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);

box-shadow: inset 0px 1px 2px rgba(0, 0, 0, .15);

}

#bi-tip-rating-2546 .bi-share-button:hover {

filter: alpha(opacity=90);

opacity: 0.9;

}

#bi-tip-rating-2546 .bi-share-button {

display: block;

float: left;

width: 32px;

height: 32px;

margin: 1% 3% 0 0;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp3AfB4kFCfRr6TFV7uApz0mER6D6DIq2miRvNQLm9RY08iAp4EajE5W4I0yLUSbaNDCZw_GnHGnNbYcb9dkeGUweiRBsC14EGVZjA6OvGJUlB6S3WCjEYUd0A5UnNuT9GjSsZijdjbU4/s1600/social-icons.png);

background-repeat: no-repeat;

}

#bi-tip-rating-2546 .bi-share-facebook {background-position: 0 -652px;}

#bi-tip-rating-2546 .bi-share-twitter {background-position: 0 -1104px;}

#bi-tip-rating-2546 .bi-share-gplus {background-position: 0 -488px;}

#bi-tip-rating-2546 .bi-share-tumblr {background-position: 0 -380px;}

#bi-tip-rating-2546 .bi-share-pinterest {background-position: 0 0;}

#bi-tip-rating-2546 .bi-share-blogger {background-position: 0 -688px;}

#bi-tip-rating-2546 a.copyright-button:hover {

text-decoration: underline;

}

#bi-tip-rating-2546 a.copyright-button {

display: block;

float: left;

width: 1em;

height: 1em;

background: red;

color: white;

text-align: center;

color: white;

padding: 0.2em;

font-size: 10px;

font-weight: bold;

margin: 3% 0 0 0;

}

</style>

//<![CDATA[

/* ############################################

Like / Dislike rating system plugin for Blogger

Author: Tien Nguyen

############################################### */

//bi-tip-2546-easy-guide-02

var default_share_description = 'Love it';//default share description when your site has no one

var default_share_title = 'This is it';//default title share when your site has no one

var text_likes = 'Likes';//text use in "like" button

var text_dislikes = 'Dislikes';//text use in dislike button

//]]>

</script>

------------------------------------------------------------

و نقول لك مبروك عليك هذه الاظافة

حمل كتاب حول موضوع إضافة زر الإعجاب وعدم الإعجاب أسفل الموضوع على مدونة بلوجر من هنــــــــا

حمل من هنـــــــــــــــــــــــــــــــــــــــــــا ملف الاكواد

الشرح بالفيديو ....

إلى هنا انتهى الدرس أتمنى أن أكون قد أفذتكم إلى اللقاء

اذا واجهتك أي مشكل او تسائل ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....

ان اعجبك الموضوع لا تنسى بمتابعتنا بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في موقع تعلم توظف ...

يمكنكم متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....

زورو المواقع التالية

http://satelet.blogspot.com/	http://ecomedfot.blogspot.com/
http://net-progg.blogspot.com/	http://wordshear.blogspot.com/
http://bac-bem-univ.blogspot.com/	http://programe-explique.blogspot.com

الخميس، 25 أغسطس 2016