Rekomendasi Slide Out Untuk Blogger

Rekomendasi Slide

Saya sering melihat Rekomendasi Slide Out di wordpress, banyak juga meraka para fans blog wordpress yang mengunakan plugin ini. Selain para pengujung dapat dengan mudanya menjangkau post blog anda dengan fitur Rekomendasi Post Slide ini. Widget ini juga akan otomatis keluar pada saat anda mengulir kebawah post anda. Saya juga telah membuat beberapa modifikasi potongan sehingga akan dimuat asynchronous tanpa mempengaruhi beban halaman. Pada keluar Slide akan menampilkan posting secara acak dari Blog Anda dan tulisan acak yang akan diambil dari Feed Blog Anda dengan menggunakan Ajax.Demo

1. Untuk menambahkan widget ke blog Anda, Anda dapat menggunakan installer dibawah ini dengan satu klik.
   
   <div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Direkomendasikan untuk Anda</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <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://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://donor-ilmu.googlecode.com/files/rekomendasi-slide.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://donorilmu.blogspot.com/2012/01/rekomendasi-slide-out-untuk-blogger.html" target="_blank"><img src="https://lh4.googleusercontent.com/-3ZeBFGQpJLA/Tu3juLKG8EI/AAAAAAAACTs/9CxWgQBV9G8/I/bloggerplugins.png" alt="Rekomendasi Slide Out Untuk Blogger" /></a>
2. Menyesuaikan Slide Fitur keluar
   End Of Post marker - Slide keluar ketika gulungan pengguna ke sebuah titik tertentu di Blog Anda (bagian bawah halaman secara default) Untuk menandai titik ini, Anda dapat menambahkan elemen HTML di sana. Elemen harus memiliki id bpslidein_place_holder
   
   misalnya: <div id='bpslidein_place_holder'></div> elemen yang akan melakukan pekerjaan. Tempat terbaik untuk menambahkan penanda ini akan berada di akhir posting. Jika Anda ingin melakukannya dengan mudah, Anda dapat menambahkan ini ke template Blogger Anda.
   
   Dalam template Anda Cari kode di bawah ini, (expand the Widget Templates)
   

   <div class='post-footer-line post-footer-line-1'>

   atau
   

   <data:post.body/>

   Masukan kode dibawah ini letakan di bawah kode yang anda temukan dari kode di atas
   

   <b:if cond='data:blog.pageType == "item"'>
   <div style='display:none' id='bpslidein_place_holder'></div>
   </b:if>

   Klik Simpan Template
3. Menyesuaikan tampilan dan nuansa dari out Slide
   Jelas bisa gaya Slide Fitur Anda pada saat keluar. Tapi sebelum Anda melakukannya, Anda harus menambahkan definisi variabel ke template Anda
   

   <script>var bpslidein_custom_css=true;</script>

   Ini harus ditambahkan di suatu tempat di atas kode </head>.
   Setelah variabel ini diatur dengan benar, Anda dapat menambahkan definisi CSS sendiri. Anda dapat menambahkan CSS Anda di Perancang Template > Tingkat Lanjut > Tambah CSS
   
   Dan ini adalah Kode set standar definisi Gaya yang diterapkan pada Widget tersebut. Anda dapat memodifikasi mereka dan menggunakannya.
   #bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;} #bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;} #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:#1616F5;} #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:80px;} #bpslidein_title{width:290px;}
    
4. Klik Terapkan ke Blog 
5. SELAMAT MENCOBA n Terimakasih kepada om-Donor  

✖

Share this Posts

• Share To Facebook Share To Twitter Share To Pinterest Share To Whatsapp Share To Linkedin Share To Tumblr Share To Telegram Share To Reddit Share To Gmail

Subscribe Our Newsletter