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

السلام عليكم ورحمة الله وبركاتة

اهلا بكم في بلوجر حياتي

في هذا الدرس سوف نتعلم كيفية اضافة صندوق منبثق لجوجل ، وعند مرور الموس علي الاضافة ينزلق الي اليسار والاضافة بتقني 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/AVvXsEic8rBwhj3pzXjgkicjeRwTj5lgbwH-IqSoZ6IM468ZXVkda8I7h1MIlheNa_En20O36JpfpaG2NLKXzJhPEN7TEsdYAFl6Pf9JR5Ig13JgueFOs6pIXPrrZ0GaPAZIQZL3KYH2A3GE1Uim/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/AVvXsEjF38PMZrYOsdBmRwLQ2H4-xULWbebf9za0tGMxwC8eHVORUY280hPStlK2Um0MslOjw6pMoODKg_JPqAVr0Pp58_VYD1IB34qym-0-T04UP0JRsqIXCFClRI-U3vOht35SNG2IO_YYGng_/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>