طريقة اضافة صندوق جوجل بلس الى مدونتك

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

السلام عليكم ورحمة الله تعالى وبركاته، اهلا وسهلا من جديد يزوار مدونة محترفي الويب.

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

تتميز هذه الاضافة بشكل جداب وانيق تجعل من الزائر  يشترك في هذه الاضافة، وتتميز هذه الاضافة بتقنية CSS.

لن اطيل عليكم نذهب الى الشرح.

الشرح:

اولا قم بالتوجه الى لوحة تحكم مدونتك ثم بعذ ذلك اختر التخطيط كما هو مبين في الصورة.

بعد ذلك قم باختيار اضافة اداة جديدة كما في الصورة.

بعدها قم باختيار HTML/JavaScript كما في الصورة.

قم بالصاق هذا الكود داخل المربع

<style> .post-body{padding:8px 0 10px} </style>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 390;
img_thumb_height = 120;
img_thumb_width = 180;
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>


<script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
<style type="text/css">
#gpplikebox{
background-color:#F90101;
display:block;
padding:0;
z-index:99999;
position:fixed;
}
.gpplbadge{
background-color:#F90101;
display: block;
height:150px;
top:50%;
margin-top:-75px;
position:absolute;
left:-47px;
width:47px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFQdWsDh5J03G39F2IWwK5GXw7IysSfcINq863N4fd38_MJfYq38H21yozOhT_I9MIjnDzTnrtUXxU_HtnRNS1s3n1gL8DB97zYdiCABU9Ivu6XjSqd7zfuZKo8Elo3vtHKcPTjA_MHTvw/s1600/gplus-right.png");
background-repeat:
no-repeat;
overflow:hidden;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomleft:8px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
</style>
<script type="text/javascript">
(function(md){
md(document).ready(function(){
var $dur = "medium";
// Duration of Animation

md("#gpplikebox").css({right: -250, "top" : 100 })
md("#gpplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -250
}, $dur);
});
md("#gpplikebox").show();
});
})(jQuery);
</script>
<div id="gpplikebox" style="display:none;">
<div class="gpplbadge"></div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUDijjdcyiuKoLZAkIFec3HfzH-MG6UQLkmGbCDfxvDmYDgEbboTgyyC2xi6JoINIMy_SwwdRULfYRwFG8vfXSmrcHS5lfjLVOoH-pABsOIVd4rohWJ4dIHSGi6r3mI59Fo6-5G2204pC6/s128/bloggers-hero.blogspot.com.png'/>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/116331828356166283363" data-source="blogger:blog:followers" data-width="245">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>

بعد الصاق هذا الكود انقر على حفظ.

ومبروك على الاضافة.

انتهى درس اليوم الى اللقاء الى درس اخر وشكرا.

في انتضار رضكم حول الموضوع.