إضافة رائعة لمدونات بلوجر

إضافة رائعة لمدونات بلوجر


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

بما ستفيذك هذه الإضافة ؟ طبعا للإضافة عدة نتائج إيجابية على مدونتك, فمن خلال ضغط الزائر عليها وتظهر رسالة شكر له أو لمباركة مناسبة ما مثل مناسبة عيد أو غيرها فستترك لدى الزائر شيء من الانطباع والتقدير له , هذا سيجعل الزائر يتعلق بمدونتك لأنك باركت له تلك المناسبة , مما سيعود عليك بزوار مترددين بشكل دائم على مدونتك أي زوار دائمين , من هنا نستنتج أن الاضافة ستساعدك على كسب ثقة الزوار وهذا شيء جميل جدا .

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

لمعاينة الإضافة من الرابط التالي :

معاينة الإضافة

بعد معاينتك للإضافة نمر الى طريقة التركيب , أول شيء دائما أخد نسخة لقالب المدونة الخاص بك وذلك دائما لتفادي وقوع مشاكل , وبعدها الدخول الى لوحة تحكم بلوجر > القالب > تحرير HTML

الخطوة الأولى فوق الوسم </head> نقوم بوضع الميتا تاج التالي بعد تغيير رابط الصورة برابط صورتك .
<img alt="photo" class="profile-idul tada" height="50" onclick="openIdulfitri()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2WP9BC9lhIXtHsBd_DlCqfs1I2-yIyKD81oGietnbzoMpktZwi-MWikeyplByh88jYjXQ5Dsop255WItSdZ8vAuyV34aZuSeCYTATRBzCFXKGSRoPs19KDLAZv30vDirIfxPFJY3u5s/s1600/mh-yassin.jpg" title="photo" width="50" data-pin-nopin="true"/>

الخطوة الثانية ابحث عن ]]></b:skin> ثم قم بوضع الكود التالي فوقه مباشرة

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }
  @keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  100% {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
  }
  }

.idul_layout{text-align:center;position:fixed;top:0;right:0;bottom:0;left:0;background:#3498db;z-index:99999;display:none}
.idul_message{font-family:Lobster,ge_dinar_tworegular;width:50%;background:rgba(33, 149, 242, 0);font-size:16px;border-radius:5px;padding:20px;border:1px solid transparent;text-align:center;color:#fff;position:absolute;top:10%;right:50%;margin-right:-25%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.profile-idul,.profile-idul2{padding:4px}
.idul_message:before{content: "";
    height: 0;
    width: 0px;
    position: absolute;
    right: 283px;
    border: 20px solid #ffffff;
    border-color:rgba(32, 149, 243, 0) rgba(33, 150, 242, 0) #ffffff;
    bottom: -45px;
}
.profile-idul{    background: #085A2D;
    border: 1px solid transparent;
    border-radius: 100%;
    position: fixed;
    bottom: 10px;
    left: 10px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 9999;}
.profile-idul2{background:#fff;border:1px solid transparent;border-radius:100%;position:absolute;bottom:-240px;right:200px;width:200px;height:200px}
.close_idul{font-size:40px;color:#fff;position:absolute;top:-30px;left:-30px;cursor:pointer}
@media (max-width:800px){.idul_message{width:90%!important;margin-right:-45%!important;}
.profile-idul2{right:50%;margin-right:-105px;}
..idul_message:before{right:50%;margin-right:-20px;}
.close_idul{color:#555;top:-16px;left:0;}
}
.tada{-webkit-animation:tada 1s linear 1s infinite normal;animation:tada 1s linear 1s infinite normal}
@-webkit-keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
@keyframes tada{0%,100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}
30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}
40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}
}
الخطوة الأخيرة تقوم بوضع الكود التالي بعد أكواد جافا داخل القالب التي تتواجد دائما قبل </body>

<script type='text/javascript'>
//<![CDATA[
$(window).bind("load",function(){$("#loading").fadeOut(1e3)});
//]]></script>
<script type='text/javascript'>
var button=document.querySelector(&quot;#close_welcomeha1pc_bar&quot;);button.addEventListener(&quot;click&quot;,function(){var t=document.querySelector(button.getAttribute(&quot;data-target&quot;));t.style.display=&quot;none&quot;==t.style.display?&quot;block&quot;:&quot;none&quot;});</script>
<img alt='photo' class='profile-idul tada' data-pin-nopin='true' height='50' onclick='openIdulfitri()' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2WP9BC9lhIXtHsBd_DlCqfs1I2-yIyKD81oGietnbzoMpktZwi-MWikeyplByh88jYjXQ5Dsop255WItSdZ8vAuyV34aZuSeCYTATRBzCFXKGSRoPs19KDLAZv30vDirIfxPFJY3u5s/s1600/mh-yassin.jpg' title='photo' width='50'/>
<div class='idul_layout animated fadeInDown' id='tech5academy-blogspot-com' style='display: block;'>
<div class='idul_message'>
<h2>&quot;مرحبا يا رمضان&quot;</h2>
مرحبا بزوارنا الكرام بصفتي مشرف مدونة إحترف الويب ومشرف في موقع wikihow أقول لكم عيدكم مبارك سعيد وتقبل الله مني وإياكم صيامنا وصلاتنا 
والسلام عليكم ورحمة الله وبركاته 
<img alt='photo' class='profile-idul2' height='200' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo2WP9BC9lhIXtHsBd_DlCqfs1I2-yIyKD81oGietnbzoMpktZwi-MWikeyplByh88jYjXQ5Dsop255WItSdZ8vAuyV34aZuSeCYTATRBzCFXKGSRoPs19KDLAZv30vDirIfxPFJY3u5s/s1600/mh-yassin.jpg' title='photo' width='200'/>
<div class='close_idul' onclick='closeIdulfitri()'>&#215;</div>
</div>
</div>
<script>
//<![CDATA[
var _0xf212=["\x37\x20\x63\x28\x29\x7B\x35\x20\x30\x3D\x36\x2E\x61\x28\x22\x62\x2D\x38\x2D\x39\x22\x29\x3B\x22\x33\x22\x21\x3D\x3D\x30\x2E\x32\x2E\x31\x3F\x30\x2E\x32\x2E\x31\x3D\x22\x33\x22\x3A\x30\x2E\x32\x2E\x31\x3D\x22\x34\x22\x7D\x3B\x37\x20\x64\x28\x29\x7B\x35\x20\x30\x3D\x36\x2E\x61\x28\x22\x62\x2D\x38\x2D\x39\x22\x29\x3B\x22\x34\x22\x21\x3D\x3D\x30\x2E\x32\x2E\x31\x3F\x30\x2E\x32\x2E\x31\x3D\x22\x34\x22\x3A\x30\x2E\x32\x2E\x31\x3D\x22\x33\x22\x7D\x3B","\x7C","\x73\x70\x6C\x69\x74","\x65\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x73\x74\x79\x6C\x65\x7C\x62\x6C\x6F\x63\x6B\x7C\x6E\x6F\x6E\x65\x7C\x76\x61\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x62\x6C\x6F\x67\x73\x70\x6F\x74\x7C\x63\x6F\x6D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x74\x65\x63\x68\x35\x61\x63\x61\x64\x65\x6D\x79\x7C\x6F\x70\x65\x6E\x49\x64\x75\x6C\x66\x69\x74\x72\x69\x7C\x63\x6C\x6F\x73\x65\x49\x64\x75\x6C\x66\x69\x74\x72\x69","\x72\x65\x70\x6C\x61\x63\x65","","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0x953dx1,_0x953dx2,_0x953dx3,_0x953dx4,_0x953dx5,_0x953dx6){_0x953dx5= function(_0x953dx3){return _0x953dx3.toString(36)};if(!_0xf212[5][_0xf212[4]](/^/,String)){while(_0x953dx3--){_0x953dx6[_0x953dx3.toString(_0x953dx2)]= _0x953dx4[_0x953dx3]|| _0x953dx3.toString(_0x953dx2)};_0x953dx4= [function(_0x953dx5){return _0x953dx6[_0x953dx5]}];_0x953dx5= function(){return _0xf212[6]};_0x953dx3= 1};while(_0x953dx3--){if(_0x953dx4[_0x953dx3]){_0x953dx1= _0x953dx1[_0xf212[4]]( new RegExp(_0xf212[7]+ _0x953dx5(_0x953dx3)+ _0xf212[7],_0xf212[8]),_0x953dx4[_0x953dx3])}};return _0x953dx1}(_0xf212[0],14,14,_0xf212[3][_0xf212[2]](_0xf212[1]),0,{}))
//]]>
</script>

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

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

0تعليقات