Slide Out Recommended Blog Post

Menjaga supaya pengunjung menjadi betah mengunjungi blog sobat dan hal ini merupakan trik jitu untuk meningkatkan trafik pengunjung blog. Slide Out Recommended Blog Post merupakan widget yang menampilkan link postingan artikel yang ada di blog sobat secara acak dan saling terkait dengan label postingan artikel yang sedang di baca pengunjung blog. Widget ini menggunakan animasi slide out untuk animasi tampilan dan akan tampil ketika pengunjung blog berada di akhir halaman blog.

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :

• Login ke blog sobat...


• Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.
  
  
  

  
  

  

  
  

  

  
  

  


• Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.

  <!-- Start Slide Out Recommended Post -->
  <div id="bpslidein" style="display:none;">
  <div class="bphelp">?</div>
  <div class="bpexpand">+</div>
  <div class="bpclose">X</div>
  <p>Recommended for you</p>
  <div id="bpslidein_image"></div>
  <div  id="bpslidein_title"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoLSMWHnK72scpU2iXMClsNSNfd64XUFdI8DpTAtHIrOArb0d1895Ki4MzAHh-qwlChFHpU-6NE98cO76f5xRQFulW5L4Cp78_oVbLzapuorPhGPTpZ2DVYy7j5EUenz5Snq6FJeP3vMm/s1600/MD-loading.gif" /></div>
  <div style="clear:both;"></div>
  <div id="shareRecommended"></div>
  </div>
  <style>
  #bpslidein{
  z-index:5;
  text-align:left;
  width:400px;
  height:130px;
  padding:10px;
  background:#F2F2F2;
  border-top:5px solid #1C3A75;
  border-right:5px solid #2853a8;
  position:fixed;
  left:-430px;
  bottom:0;
  -webkit-box-shadow:8px -6px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:8px -6px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:8px -6px 5px 0px rgba(50, 50, 50, 0.75);
  font-family:Arial, Helvetica, sans-serif;
  }
  #bpslidein p{
  font-size:12px;
  text-transform:uppercase;
  font-family:Arial,Helvetica,sans-serif;
  letter-spacing:1px;
  color:#555;
  margin-top:4px;
  }
  #bpslidein_title{
  color:#555;
  font-weight:700;
  font-size:16px;
  margin:10px 20px 10px 0;
  }
  #bpslidein a,#bpslidein a:hover,#bpslidein_title{
  text-decoration:none;color:#F9780E;
  }
  #bpslidein .close,#bpslidein .expand,#bpslidein .help{
  border:2px solid #EEE;
  cursor:pointer;
  color:#9A9AA1;
  width:13px;
  height:15px;
  padding:2px 0 0 5px;
  position:absolute;
  right:10px;font-size:17px;
  font-weight:700;font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  }
  #bpslidein .help{right:35px;
  }
  #bpslidein_title,#bpslidein_image{
  float:left;
  width:60px;
  }
  #bpslidein_image{
  border:1px #ccc solid;
  background-color:#fff;
  border-radius:2px;
  margin-right:10px;
  margin-bottom:10px;
  }
  #bpslidein_title{
  width:290px;
  }
  </style>
  <script>
      if (document.location.href.split("/").length == 6 && document.location.href.indexOf(".html") != -1) {
          if (typeof bp_onload_queue == 'undefined') var bp_onload_queue = [];
          if (typeof bp_dom_loaded == 'boolean') bp_dom_loaded = false;
          else var bp_dom_loaded = false;
          if (typeof bp_async_loader != 'function') {
              function bp_async_loader(src, callback, id) {
                  var script = document.createElement('script');
                  script.type = "text/javascript";
                  script.async = true;
                  script.src = src;
                  script.id = id;
                  var previous_script = document.getElementById(id);
                  if (previous_script)
                      if (previous_script.readyState == "loaded" || previous_script.readyState == "complete") {
                          callback();
                          return
                      } else {
                          script = previous_script
                      }
                  if (script.onload != null) previous_callback = script.onload;
                  script.onload = script.onreadystatechange = function() {
                      var newcallback;
                      if (previous_script && previous_callback) newcallback = function() {
                          previous_callback();
                          callback()
                      };
                      else newcallback = callback;
                      if (bp_dom_loaded) {
                          newcallback()
                      } else bp_onload_queue.push(newcallback);
                      script.onload = null;
                      script.onreadystatechange = null
                  };
                  var head = document.getElementsByTagName('head')[0];
                  if (!previous_script) head.appendChild(script)
              }
          }
          if (typeof bp_domLoaded != 'function')
          function bp_domLoaded(callback) {
              bp_dom_loaded = true;
              var len = bp_onload_queue.length;
              for (var i = 0; i < len; i++) {
                  bp_onload_queue[i]()
              }
          }
          bp_domLoaded();
    bp_async_loader("http://sites.google.com/site/monozcore/home/recommended_slideout_post.js", function() {}, "bp-out-slide")
      }
  </script>
  <!-- End Slide Out Recommended Post -->
  



• Klik "Save" dan lihat hasilnya...

Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.