Posted: 19 Oct 2013 03:03 AM PDT

Kotak Pesan Menggantung Muncul Setelah Scroll - Di situs-situs berita populer seperti viva news dan detik kita sering menjumpai kotak rekomendasi artikel atau kotak artikel terkait yang menggantung di kanan, yang hanya muncul setelah pengunjung scroll halaman website kebawah. Banyak sekali sobat blogger yang menginginkan gadget semacam ini. Namun maaf baru sempet posting sekarang.

Untuk lebih mudahnya mari kita gunakan kode dari +Kang Ismet. Pada contoh kali ini kita akan membuat Gadget Artikel pada box tersebut.

Tambahkan kode CSS berikut ini di atas ]]></b:skin>

/* Related Post with Sliding CSS by Kang Ismet*/  #kislidingbox{background:#fff;border-top:1px solid #bbb;box-shadow: 0 4px 10px #666;transition:all 0.4s ease-out;width:355px;height:185px;position:fixed;overflow:hidden;border:none;right:-360px;z-index:9999;text-align:left!important;letter-spacing:0;}  .kislidingbox-title{background:none;border-top:1px solid #ddd;color:#00789d;display:block;height:40px;width:100%;font-size:14px;font-family:Arial, sans-serif;text-transform:capitalize;font-weight:bold;padding-right:25px}  .kislidingbox-title span a{float:right;height:40px;width:25px;}  a#kislidingbox-close, a#kislidingbox-close {margin-right:15px;}  .kislidingbox-title > span > h2{font-size:20px!important;font-weight:normal!important;}  .kislidingbox-title span a img{margin:16px;border:0 !important;box-shadow:0 !mportant;}  .kislidingbox-container{border:none;float:left;width:100%;height:auto;margin:3px}  .kislidingbox-container > div{border:none;height:40px;margin:3px;padding:10px;}  .kislidingbox-container > div > span {font-size:14px;}  .kislidingbox-container img{float:left;margin:3px 5px;width:25px;border:1px solid #ccc;}  .show{bottom:80px;}  .hide{bottom:-145px;}  .related-post {margin:2em auto 0;font:normal normal 11px/1.4 Arial,Sans-Serif;}  .related-post h4 {font-size:150%;margin:0 0 .5em;}  .related-post-style-2 {border-top:1px solid rgba(0,0,0, 0.2);margin-top:-20px;padding-top:15px;list-style:none;}  .related-post-style-2 li {margin-left:-10px;style:none;}  .related-post-style-2 li {padding:0 10px 10px 10px;overflow:hidden;}  .related-post-style-2 li:first-child {border-top:none}  .related-post-style-2 .related-post-item-thumbnail {width:45px;height:45px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 10px 0 0;border:1px solid #ccc;}  .related-post-style-2 .related-post-item-title {font-weight:bold;font-size:120%;text-transform:capitalize;}  a.related-post-item-title {color :#333 !important;}  a:hover.related-post-item-title {color :#0491ea !important;text-decoration:none;}  .related-post-style-2 .related-post-item-summary {display:block;overflow:hidden;}  .related-post-style-2 .related-post-item-more {}  /* End CCSS Related Post with Sliding */

Kemudian tambahkan javascript berikut ini di atas </head>

<script type='text/javascript'>  $(window).scroll(function(){          if ($(this).scrollTop() &gt; 400) {              $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;0px&#39;});          } else {              $(&#39;#kislidingbox&#39;).css({&#39;right&#39;:&#39;-360px&#39;});          }      });       $(document).ready(function(){   var kislidingbox      = $(&#39;#kislidingbox&#39;);      var closed      = $(&#39;#kislidingbox-close&#39;);      var minimize    = $(&#39;#kislidingbox-minimize&#39;);      var maximize    = $(&#39;#kislidingbox-maximize&#39;);           maximize.hide();           closed.click(function(){          kislidingbox.css({&#39;right&#39;:&#39;-350px&#39;});          kislidingbox.fadeOut(&#39;slow&#39;);      })      minimize.click(function(){          kislidingbox.toggleClass(&#39;hide&#39;);          $(this).hide();          maximize.show();      })      maximize.click(function(){          kislidingbox.toggleClass(&#39;hide&#39;);          $(this).hide();          minimize.show();      })  });  </script>

Terakhir tambahkan HTML berikut ini di bawah <div class='post-footer'> yang kedua.

<!-- Related Post with Sliding by Kang Ismet -->  <b:if cond='data:blog.pageType == &quot;item&quot;'>  <div class='show' id='kislidingbox'>      <div class='kislidingbox-title kislidingbox-www'>        <span style='float: left;margin:14px 0 0 15px;'>Rekomendasi Untuk Anda</span>          <span><a href='javascript:void(0);' id='kislidingbox-close' title='close'><img alt='close button' class='a' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9gmuin__EN28l14rUBs9ih-yBw_JebYDSLe3fn9YTvtXhTizVQGklH3DxJvqMB38PDOMaug4FJ8VCESaXaRd7rADPvXGTspEESlX8izZStqqbClRKiDlnyQiBiUdvCBS73XnMJUQA/s1600/close.png' title='close'/></a></span>          <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVC_u7AZ2jyxXrU4wu7Ke4ZwGIEIS3NcYNJuPEgvyeECFTgEnyLF1IVdmv6if0UkvfPb4JX_w5w78IJKSoI3F6FLaUcKySG49V8JMGpLOOVzuDFF79n6ApeYJLh3XpaXS-Nggo6wp/s1600/minimize.png' title='minimize'/></a></span>          <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUzkZ3YuMeBhR-LChAdAzP0kcIWHkqIA5sIrlMB1LfASFPcwkEEbrRnmNT-KqMpaxSG99eRSD-ae9BOie9VE1l-lTpnNxTnivkrGBzFXng9_0RA_B8ccNtXoG0reZxvE2YD8HDi3x6/s1600/maximize.png' title='maximize'/></a></span>      </div>      <div class='kislidingbox-container'>    <div class='related-post' id='sliding-tab'/>    <script type='text/javascript'>    var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>            &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>        </b:loop></b:if>];    var relatedPostConfig = {        homePage: &quot;<data:blog.homepageUrl/>&quot;,        widgetTitle: &quot;&lt;h4&gt;&lt;/h4&gt;&quot;,        numPosts: 2,        summaryLength: 0,        titleLength: &quot;auto&quot;,        thumbnailSize: 45,        noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,        containerId: &quot;sliding-tab&quot;,        newTabLink: false,        moreText: &quot;&quot;,        widgetStyle: 2,        callBack: function() {}    };    </script>    <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>          </div>  </div>  </b:if>  <!-- Related Post Widget End -->

Jika sudah silahkan Simpan Template Anda. Gadget ini hanya muncul di halaman postingan. Silahkan buka salah satu postingan di blog Anda kemudian scroll ke bawah.

Anda bisa juga memanfaatkan box melayang ini untuk gadget-gadget yang lain. Jika ingin mengganti widget artikel rekomendasi dengan widget yang lain, silahkan ganti kode yang di stabilo hijau pada kode HTML (kode ketiga) dengan kode gadget Anda.

Referensi:
- Kang Ismet, Tutorial Blog
- Goblogination: Membuat Slide Box Rekomendasi

Item Info: Membuat Box Pesan Muncul Setelah Scroll

Cara Banned Komentator Nakal - Spam di Blogger

Posted: 19 Oct 2013 12:13 AM PDT

Mengatasi Komentar Spam di Blogger - Blogwalking siang menemukan artikel menarik lagi dari Master Tuts. Javascript yang menurut saya akan sangat berguna karena berfungsi untuk banned komentar sampah/spam/nakal yang masuk ke blog kita.

Demo: (Klik Result untuk lihat hasilnya)
Atau kunjungi alamat berikut ini: http://jsfiddle.net/mastertuts/TZfrq/1/

Instalasinya sangat mudah, tambahkan kode berikut in di atas </body>

<script type='text/javascript'>  //<![CDATA[   var spamlist=[   'http://www.blogger.com/profile/12345678', /* contoh URL komentator */   'http://namablog.blogspot.com/',   'Alamat URL komentator ke-3' /* URL yang terakhir tak perlu diberi koma */  ];  for(var v=0; v<spamlist.length; v=v+1){   $("a[href='"+spamlist[v]+"']").each(function(){   $(this).closest(".comment-block").find(".comment-content")   .replaceWith("<div class='comment-content' style='color:red'>Anda telah di banned! Silahkan tinggalkan blog ini!</div>"),       $(this).replaceWith("<span style='color:red'>BANNED USER!</span>");   })  }  //]]>  </script>

- Bagi yang tidak menggunakan sistem komentar default Blogger yang baru (pengguna sistem komentar lama dan threaded comments hack kodenya sedikit berbeda. Silahkan dilihat di artikel sumber: Banned Komentator Blogger dengan JQuery.
- Atau Anda bisa segera default kan komentar Anda mengikuti komentar baru ala Blogger dengan membaca artikel: Install Sistem Komentar Reply Baru di Blog.

- Sedikit catatan tambahan: Ketika Anda memasukkan URL homepage pada daftar banned, maka yang terkena dampak banned hanya URL homepage itu saja, URL postingan, laman, label atau yang lainnya tetap tidak ter banned. Kesimpulannya, yang ter-banned adalah pengomentar yang memakai link yang persis dengan daftar banned.
- Nah, bagi yang pengen lebih mantep lagi bisa dipelajari di sini: http://code.google.com/p/blogbanscript/

#Komentar #SpamComments #HackBlog
Banned Komentator Spam di Blogger

Tips Blog: Kendala Menulis Postingan

Posted: 18 Oct 2013 09:46 PM PDT

Kendala Menulis Postingan - Saya sedang dalam euforia kemenangan klub kesayangan AS Roma. Laga liga italia musim ini yang kedelapan dengan delapan kemenangan dan hanya kebobolan satu gol. Di samping itu, As Roma saya ini masih menjadi pencetak gol terbanyak di liga dan tentu saja dengan perolehan poin maksimal.

Kemenangan yang baik dan semangatnya menular mungkin seharian. Ya, saya jadi semangat menjalani berbagai aktivitas termasuk update blog ini.

Mood

Urusan menulis bagi saya berkaitan erat dengan banyak hal dan yang terpenting hati. Atau kita kenal dengan Mood. Seringkali ini menjadi penghalang utama saat kita menulis. Kita punya bahan yang bagus dan waktu yang luang, tapi entah kenapa kata per kata apalagi baris per baris tidak tersusun dengan baik sesuai harapan.

Disinilah saya jadi sadar bahwa ada baiknya kita tidak hanya memiliki satu hobi. Seperti apapun kita menyukai sesuatu pasti ada titik jenuhnya. Bahkan seorang wanita kadang jadi seakan 'kurang cantik' bukan setelah kita miliki? Entah kalau istri karena saya belum mengenal sensasinya :).

Selain ngeblog ini tentunya, saya juga mempunyai beberapa hobi yang lain seperti futsal dan membaca buku. Tapi jujur ngeblog ini yang paling sering membuat gila. Gagal menulis postingan. Postingan yang ternyata tidak bagus. Pengunjung yang sedikit? Aduh, hobi yang aneh karena membuat gila. Pada akhirnya hobi yang lain memegang peranan penting. Seharian kemarin saya membaca bukunya mbah Sudjiwo Tedjo berjudul Ngawur Karena Benar dan rasanya benar-benar repair hardisk otak saya.

Alhasil, kegiatan lain selain ngeblog juga penting untuk diperhatikan agar perasaan hati tetap terjaga dengan baik. Saat mood baik kita bisa menulis dengan 'hati'. Energi positif akan menularkan energi positif juga tentunya. Kita senang pembaca akan senang :).

Minder

Seorang blogger sering kali minder atau tidak percaya terhadap tulisannya sendiri. Apakah tulisan saya ini layak dibaca? Apakah pengunjung akan suka?. Itu semua harus ditepikan. Bahkan saya sendiri kadang juga minder melihat tutorial-tutorial super dari blog teman, misalnya dari dte nya mas +Taufik Nurrohman . Tutorialnya sungguh hebat dan komplit. Tapi saya sadar tidak semua orang akan pas dan cocok dengan tulisan Mas Taufik sama halnya banyak orang juga yang tidak merasa cocok membaca tutorial saya.

Bagi Blogger pemula misalnya, mungkin akan kesusahan mencermati dan mengaplikasikan tutorial-tutorial Mas Taufik yang komplit itu, yang disertai dengan sebab musabab dan penjelasan yang banyak. Mungkin blogger pemula lebih suka dengan tutorial singkat, meski tutorial itu hanya bersifat menyuruh-nyuruh ketimbang menjelaskan secara detail fungsi dan alasan penggunaan kode.

Adakan tutorial yang hanya bersifat menyuruh-nyuruh, misalkan, "Letakkan kode ini sebelum </head> bla bla bla bla... kemudian letakkan kode ini sebelum </body> bla bla bla... Kemudian simpan dan lihat hasilnya". Hehe, banyak sekali artikel saya yang bersifat seperti itu. Berbeda dengan artikel mas Taufik yang selalu menjelaskan kode-kodenya.

Tapi bagi saya itu semua tidak menjadi penghalang untuk menulis. Jangan minder meski secara kualitas artikel kita belum bagus karena ada patokan lain yaitu kemanfaatan. Toh, seperti saya sebutkan di awal, tidak semua orang akan cocok dengan tulisan mas Taufik meski komplit. Blogger pemula mungkin lebih senang 'disuruh-suruh' yang penting gadgetnya jadi :). Semua kan ada prosesnya. Percaya saja, seperti apapun kualitas tulisan kita pasti juga akan bisa memberikan kemanfaatan. Jadi, jangan minder. Ini bisa jadi penghalang tanpa kita sadari.

Waktu

Urusan waktu memang memprihatinkan kata saya. Apalagi dengan aktifitas seabreg di dunia nyata. Urusan sekolah, organisasi hingga pekerjaan sudah begitu menyita. Tapi saya seringkali mengakalinya saat jam makan siang, atau saat-saat sebelum tidur, kadang bahkan begadang. Mungkin ada yang punya pengalaman soal ini? Bagi beberapa blogger malah waktu bukan jadi masalah ya karena mereka sepanjang hari di depan monitor :).

Masih ada banyak hal lain yang bisa menjadi kendala untuk menulis. Biaya internetan mungkin. Tentu masing-masing punya pengalamannya sendiri. Istirahat cukup, membagi kegiatan ngeblog dengan kegiatan yang lain. Mood yang baik dan percaya diri untuk berbagi pengalaman dengan orang lain. Dengan semua itu pasti kita bisa menulis dengan 'hati'. :) Semangat blogger...

Eh, saya mengajak Anda untuk ikutan di TheMasDoyok Timeline, kita bisa ngobrol-ngobrol santai disana. urusan blog boleh, yang lain gak masalah :). Ayo Klik!

Item Description: Kendala Menulis