Membuat Box Pesan Muncul Setelah Scroll

With: 39 comments
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='http://2.bp.blogspot.com/-IuwrMRddJPA/Uj0EKnY22II/AAAAAAAAFhM/V6cKdl07Bxc/s1600/close.png' title='close'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-minimize' title='minimize'><img alt='minimize button' src='http://4.bp.blogspot.com/-QMHVEsX6RI0/Uj0EKiuxajI/AAAAAAAAFhQ/7bebcoyuHKw/s1600/minimize.png' title='minimize'/></a></span>
        <span><a href='javascript:void(0);' id='kislidingbox-maximize' title='maximize'><img alt='maximize button' src='http://1.bp.blogspot.com/-spQvK4i4SNk/Uj0EKjKvMpI/AAAAAAAAFhc/CBa6r6ArUHA/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.

Item Info: Membuat Box Pesan Muncul Setelah Scroll
- More...

Cara Banned Komentator Nakal - Spam di Blogger

With: 15 comments
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
- More...

Tips Blog: Kendala Menulis Postingan

With: 8 comments
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
- More...

Forum Embeddable Untuk Blogspot dari Moot It

With: 9 comments
Forum Embed Blogger - Nemu satu lagi forum embed yang mudah pemasangan dan gratis. Sebelumnya ada nabble yang menurut saya paling luar biasa walau akhirnya punya saya dianggap mengandung konten dewasa sehingga tidak lagi free. Nabble masih menjadi yang terbaik karena ada banyak sekali pilihan (baca: Membuat Forum di Blogspot dengan Nabble). Kemudian ada alternatif lain yakni talky yang sangat ramah karena memungkinkan login dengan berbagai akun (baca: Membuat Forum di Blogger dengan Tal Ki). Dan yang saya pakai sebelum ini adalah google Group yang memiliki penyimpanan data tak terbatas, sayangnya loadingnya cukup repot (baca: Forum Embeddable dengan Google Group). Kali ini? saya beralih ke moot it.

Tutorial Membuat Moot It

Untuk membuatnya, berikut tutorialnya:
1. Pergi ke https://moot.it/setup/
2. Tentukan usernamenya, kemudian klik Setup Now.
3. Tentukan topik-topik untuk forum Anda, bisa diubah kemudian. Klik Create
4. Cobalah posting pertama Anda. Klik Post
5. Selamat Forum Anda sudah jadi, klik embed untuk meletakkannya di blog Anda.
6. Copy semua Kode, kemudian paste ke postingan atau laman dalam mode HTML.

NB: Jangan lupa cek email Anda untuk verifikasi akun

Mari Bergabung di TheMasDoyok Timeline!

Mari bergabung di TheMasDoyok Timeline, ngobrol puas tentang blog dan yang lainnya. Cukup login di alamat http://www.themasdoyok.com/p/timeline.html.
 
Selalu login dan dapatkan pemberitahuan jika ada pembaharuan.

Deskripsi:  Membuat Forum Untuk Blogspot
- More...

Cara Memberi Kritik atau Saran (Send Feedback) Ke Blogger

With: 12 comments
Memberikan Masukan Ke Blogger - Blogger mungkin menjadi mesin dengan pengguna terbanyak. Apakah karena fasilitasnya? Mungkin iya, tapi mungkin juga tidak. Alasan paling utama adalah nama besar Google dan blogger yang dapat digunakan secara gratis.

Sebenarnya Blogger masih memiliki banyak sekali kekurangan menurut saya. Ada beberapa fasilitas yang terkesan nanggung sehingga tidak familiar dan tidak banyak digunakan. Sebut saja soal multiple author atau penulis ganda. Tidak ada sistem moderasi membuat admin kesulitan. (Soal isu ini lebih jauh di: Berbahayanya Mempunyai Banyak Penulis di Blogspot).

Belum lagi, di dashboard Blogger tidak dilengkapi pengelompokan atau filter list artikel berdasar author. Sehingga kalau-kalau penulis lain  nakal membuat tulisan yang jelek (baik dengan menanam link atau memang menggunakan kata-kata yang kurang baik) kita akan segera tahu. Dan lebih baik lagi jika pada dashboard, terkhusus bagian list post ada informasi last modified, atau bahkan kita bisa sorting atau mengurutkan berdasarkan author, last modified, terbanyak komentar, terbanyak view. Wah, saya sangat menunggu ini.

Fitur lain yang sebenarnya tak kalah bagus adalah Static Page. Tapi saya memiliki ide seharusnya blogger bisa memberikan URL yang lebih pendek sehingga mudah diingat. Bagi pengguna awam, link static page yang panjang belum memberikan kesan bahwa artikel itu artikel khusus atau mandiri yang biasanya berisi informasi utama nan penting.

Soal Komentar. Komentar default blogger mungkin akan lebih baik jika di tambah dengan tombol +1 atau jempol. Dan ide lain adalah admin  bisa membalas komentar pengunjung langsung dari dashboard. Ini akan sangat memudahkan!

Dan... masih banyak lagi. Tentu Anda mempunyai ide-ide lain yang tak kalah menarik dan bisa sangat bermanfaat.

Loh, inti artikel ini? Ya, berawal dari hal di atas akhirnya saya berfikir kita semua perlu memberikan kritik dan saran agar Blogger kita tercinta ini lebih berkembang dan yahuud lagi. Jadi, jangan sungkan untuk memberikan masukan ke Blogger. Mungkin lebih banyak Blogger yang memberikan masukan, maka akan semakin di pertimbangkan.

Untuk memberikan masukan, Anda bisa ke Dashboard (Login Blogger). Ada tombol gerigi untuk setting. Klik Kirim Masukan.


Atau Anda bisa posting dalam bentuk pertanyaan di Blogger Forum (sesuai rekomendasi buzz.blogger.com / official blog blogger ). Ada banyak pengembang blogger yang aktif disana. Alamatnya: http://productforums.google.com/forum/#!forum/blogger

Info: Memberi Saran atau Kritik ke Blogger
- More...