Home Posts filed under tips dan trick blog
Tampilkan postingan dengan label tips dan trick blog. Tampilkan semua postingan
Tampilkan postingan dengan label tips dan trick blog. Tampilkan semua postingan

Senin, 16 April 2012

Cara Mecegah Copy Paste Pada Blog

✔ Aksara Tanpa makna Comment
Setelah sekian lama tidak posting dikarenakan masih banyak urusan yang harus saya selesaikan, dan kali ini saya hanya sedikit share dari postingan blog sahabat yaitu tentang cara mencegah copy paste pada blog, kalau menurut saya sih hal ini tidak terlalu penting, merupakan satu keuntungan tersendiri bila artikel kita di copas (copy paste), apa lagi bila sobat yang copas mau mencantumkan sumber dari artikel tersebut, bisa menambah back link kan, merupakan keuntungan tersendirikan.

Namun bagi sobat yang merasa bahwa artikel sobat sangat penting dan tidak rela untuk di copy paste, mungkin hal ini cukup berguna untuk dilakukan. akan tetapi cara tersebut tidak melindungi content blog sobat sepenuhnya, stidaknya cukup membuat orang yang berniat copas sedikit bingung apabila dia seorang newbie, karena sebenarnya ada jalan lain untuk bisa meng-copas artikel blog sekalipun sudah dilindungi dengan script anti copas.

Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan. Berikut tutorial cara mematikan klik kanan pada blogspot.

  • Login terlebih dahulu ke Blogger.com
  • Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
  • Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
  • Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian

<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>

Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.

Berikut penjelasan dari kode-kode diatas:

oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)

Jika sudah, Simpan Template blog Sobat.

Mohon maaf apabila tutorial sebelumnya tidak berhasil karena belum saya coba. untuk demonya silakan sobat lihat di sini DEMO.

Selamat mencoba dan semoga berhasil sobat.
Sumber: http://www.nova13.com

Rabu, 11 April 2012

Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah

✔ Aksara Tanpa makna Comment
Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:
  1. Seperti biasa sobat harus Login dulu di akun blog sobat
  2. Pilih Tata Letak
  3. Tambah Gadget HTML/Java Script
  4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

Klik show untuk melihat
<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCx6N8uV192uyCEASJzB75_C69_7RxvpJxTKDl8g_aWt4oIRytcwo-W-_e9hD1qe08IJHGYPQBjzdbqI_GbpmaujnLMJbXUvcs42w8AjzVNnOidOnAhrj-h0xqq924rsm8IQWQLO1sbiJG/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:
  1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
  2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
  3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
  4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).
Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

  1. Tetap login di akun blog sobat
  2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://lh4.ggpht.com/_1j80TgNqd_8/TS3MlHxaygI/AAAAAAAABVo/P36anu_ToeA/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 
  • Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
  • Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
  • Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.
Demikianlah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah. Semoga bermanfaat bagi sobat semua.

Sumber Script: Zuaz'Z Creator

Jumat, 06 April 2012

Cara Membuat Widget Menu TAB View Pada Blog

✔ Aksara Tanpa makna Comment
Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>



5. Letakkan kode dibawah ini diatas kode </head>



6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript



Setelah itu simpan dan lihat hasilnya.

Selasa, 20 Maret 2012

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog

✔ Aksara Tanpa makna Comment

Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob, maklumlah pemula,, heheheheee,,,,

Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,, ]

bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, ] silakan ikuti lankah-langkah berikut ini ya sobat:

1. Silahkan Login ke akun blogger sobat.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget

4. Kemudian cari kode berikut </body>
5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>


<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>
<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>


6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)

Keterangan:
  • Kode warna hijau: ganti dengan URL Feeds sobat
  • Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.

Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.

Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.  

1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.
2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:

http://petir-project.googlecode.com/files/fedkcl.png 

(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)

3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:

http://petir-project.googlecode.com/files/feed.png

4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.

Selamat mencoba ya sobat,,

Sumber Script: http://santaiselalu.blogspot.com
                        http://ardiyafardhanprayoga.blogspot.com

Sabtu, 17 Maret 2012

Cara Membuat Text Area Dengan Tombol Pilih Semua

✔ Aksara Tanpa makna Comment
Text area merupakan salah satu hal penting untuk meperingkas sebuah posting dalam blog, apalagi text kode yang begitu panjang apabila tidak dimuat dalam text area maka akan memanjang kebawah, dan pastinya membuat susah pengunjung blog untuk mecopy text tersebut.

Kali ini saya sedikit memberikan tips untuk sobat blogger yang ingin membuat text area yang keren,, heheheheeeee,,,

Tips ini saya dapat dari illtorro.blogspot.com. Kronologinya, pada saat lagi jalan-jalan di blog para master yang sudah ber PR tinggi saya melihat text area yang saya anggap keren, saya cari-cari akhirbya ketemu juga nih kode HTML untuk membuat text area dengan tombol pilih semua / Select all, 

Nah bagi sobat yang berminat untuk membuat text area dengan tombol pilih semua / Select all silakan copy paste code dibawah ini:



<code><span ><div><form name="copy"><div align="center"><input value="Pilih Semua" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> </div><div align="center"></div><p align="center"><textarea rows="3" cols="20" style="border: 8px inset rgb(104, 104, 204); padding: 0pt 1px; background: rgb(100, 100, 200) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 255, 255); line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL">

Masukan text / kode sobat di sini

</textarea></form></div></span></code>

Keterangan:
  1. Text warna hijau: bisa sobat ganti dengan select all / block all / tandai semua dan lain-lain sesuai selera sobat.
  2. Text warna kuning: adalah ketinggian text area tersebut, silakan sobat sesuaikan sendiri.
  3. Text warna biru: adalah panjang kolom text area tersebut, silakan sobat sesuaikan sendiri.
  4. text warna merah: merupakan tempat untuk kode yang inggin sobat taruh di dalam text area tersebut.
Berikut ini saya berikan contoh text area pilih semua / select all:





Selamat mencoba dan semoga bermanfaat ya sob,,!!

Sumber: http://illtorro.blogspot.com

Jumat, 16 Maret 2012

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

✔ Aksara Tanpa makna Comment
Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam pada salah satu blog saya yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari hackerzpro.blogspot.com nah silakan anda ikuti cara-cara berikut ini,,

Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:


<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan tulisanmu di sini
</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:


Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.


Klik show untuk melihat
Masukkan tulisanmu di sini


Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.


Sumber : http://www.thecyber.co.cc

Minggu, 11 Maret 2012

Kumpulan Efek - Efek Blog: Dari Yang Ringan Hingga Yang Berat

✔ Aksara Tanpa makna Comment


Share kumpulan efek blog yang telah di posting oleh sobat CHRISTIAN TATELU  kumpulan efek-efek blog baik dari yang ringan hingga yang berat, untuk diterapka pada blog sobat sekalian, singkat cerita saja silakan simak keterangan berikut.
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.

A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan


2. Efek hati bertaburan


3. Efek bintang bertaburan


4. Efek kembang api



5. Efek Gelembung



Cara pemasangan :
  1. Klik rancangan --> Edit html
  2. Letakkan script efek di atas kode </body>
  3. Klik Save

B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh




2. Banjir




3. Bunga Mekar




4. Bom Atom




5. Ufo




6. Graffity




7. Shaver




8. Gun




9.Bloody gun




10. Paint ball




11. Chainsaw




12. Dinosaur




13. Lebah




14. Lalat




15. Semut




16. Siput




17. Cacing




18. Mold




19. Bayi merangkak




20. Telur mata sapi




21. Kopi tumpah




22. Terbakar




23. Tomat




24. Creampie




25. Murka




26. Sapi Jorok




27. Anjing Jorok




28. Kencing Sembarangan



Cara pemasangan :
  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan script efek di dalam kotak yang di sediakan
  3. Klik save dan lihat hasilnya.

Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam..

Sumber: http://christiantatelu.blogspot.com

Jumat, 09 Maret 2012

Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun

✔ Aksara Tanpa makna Comment
Kali ini saya sedikit share Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun yang lengkap dengan tombol kembali ke beranda / home dan muat ulang / reload yang saya dapat dari salah satu blog / website dengan alamat url www.ozanhacker.com.

Tips dan trick ini sudah saya peragakan di blog saya. singkat cerita mari kita simak saja Cara Memasang Tombol Kembali Ke Atas Dan Kembali Turun berikut ini.

Cara Memasang Tombol Back to Top

Memasang tombol kembali ke atas atau memasang tombol back to top ini mungkin bagi blog saya ini sangat diperlukan, karena untuk menyikapi blog yang terlalu memanjang kebawah, mungkin masalah ini tidak akan ditemui jika kita memasang template yang sudah menyertakan widget ini, tetapi jika belum ada kita bisa memasangnya sendiri, karena jika tidak ada tombol back to top akan membosankan pembaca blog kita, apalagi jika menggunakan mouse yang kebetulan keadaannya sudah letoy (hehe…) atau lebih parahnya lagi sudah tidak ada scroll nya lagi, itu akan membuat mereka capek untuk mengakses blog kita, maka alternatifnya adalah membuat tombol back to top atau tombol kembali ke atas.

Ada dua cara pembuatan tombol back to top ini, berikut penjelasannya:
(Sebelum memasuki penjelasan, download terlebih dahulu template anda, sebagai asuransi tamplate anda...hehe...)

Cara Pertama:
Untuk cara pertama ini sangat simple, karena tampilannya sederhana, anda hanya perlu menambahkan kode berikut sebelum kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSoGB9NAPjc4B-jmN5skOtRrUbIVmy_sllZeQGM1kjRSo6WkLV-7uHLkSZir-gi7_mZVPsBhAxBuTuSjZKajasL9A8liqVqHe4ochdQnrC2cZ_zHaqCsXmpKr7XprcNJsHv0hZcsmmrQcu/s1600/Untitled-2.png'/></a>



Untuk penjelasannya, anda login dulu ke blogger anda lalu Ikuti tahap-tahap berikut ini:

1.      Pilih Rancangan
2.      EDIT HTML ( Centang Expand Template Widget )
3.      Cari Kode </body> ( Untuk lebih cepat mencari gunakan Ctrl+F )
4.      Simpan kode berikut sebelum atau di atas kode </body>

<!-- Bact to top By Ozan Hacker -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSoGB9NAPjc4B-jmN5skOtRrUbIVmy_sllZeQGM1kjRSo6WkLV-7uHLkSZir-gi7_mZVPsBhAxBuTuSjZKajasL9A8liqVqHe4ochdQnrC2cZ_zHaqCsXmpKr7XprcNJsHv0hZcsmmrQcu/s1600/Untitled-2.png'/></a>



5.      Lalu simpan tamplate, SELESAI dan lihat hasilnya…

Keterangan:
  • Kode warna kuning adalah posisi tombol berada
  • Kode warna merah adalah URL gambar tombol (silahkan anda ganti dengan URL gambar anda bila ingin menyesuaikan  gambarnya dengan selera anda)


Cara Kedua:
Tombol back to top pada cara pertama hanya tombol back to top biasa, jika anda ingin yang lebih komplit, anda bisa memekai cara kedua ini:

Tahap-tahapnya sama dengan yang diatas, cuma sekarang anda harus menambahkan kode CSS sebelum kode ]]></b:skin>, berikut penjelasannya:

1.      Cari kode ]]></b:skin> lalu sisipkan CSS berikut sebelum atau diatasnya.

    #Enjoy{display:scroll;position:fixed;bottom:1px;right:1px;z-index:99}
    #Enjoy a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #Enjoy img{border:0}
    #Enjoy a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}



2.      Kemudian sisipkan kode berikut ini setelah atau dibawah kode </body>

    <div id='Enjoy'>
    <a href='#' onClick='window.location.reload()' title='Reload page'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/refresh.png'/></a>
    <a expr:href='data:blog.homepageUrl'><img src='http://i580.photobucket.com/albums/ss248/z33s/house.png'/></a>
    <a href='#' title='Ke Atas Halaman'><img src='http://i580.photobucket.com/albums/ss248/z33s/topopg.png'/></a>
    <a href='#footbar' title='Ke bawah halaman'>
    <img src='http://i580.photobucket.com/albums/ss248/z33s/down.png'/></a>
    </div>



3.      Lalu simpan tamplate anda, dan lihat hasilnya…

Keterangan:
=> Warna merah adalah gambar untuk tombol-tombolnya
=> Warna kuning adalah posisi tombol

apabila tombol down / ke bawah tidak berfungsi silakan ganti kode yang berwana hijau seperti ketyerangan di bawah:

=> Untuk kode #footbar anda ganti dengan #footer atau #copyright sesuaikan dengan HTML template anda.

Sedikit tambahan lagi untu menentukan tempat tombol berada di sebelah kanan atau kiri blog silakan ganti kode yang berwarna orange left (untuk sebelah kiri) right (untuk sebelah kanan blog anda).

Jangan lupa komentarnya… Untuk artikel ini jika ada yang mau menambahkan cara yang lainnya aku tunggu…

Sumber: http://www.ozanhacker.com 

Kamis, 08 Maret 2012

Mengatasi Tombol Balas/Reply Komentar Pada Blog Yang Tidak Berfungsi

✔ Aksara Tanpa makna Comment
Kali ini saya sedikit share sebuah tips dan trik blog tentang cara mengatasi tombol balas / reply komentar yang tidak berfungsi pada blog, postingan ini saya ambil dari salah satu blog / websait dengan alamat blog.kangismet.net. berikut ini adalah keterangan tutorialnya, silakan disimak,,

Mengatasi Error Pada Tombol Reply Komentar yang Tidak Bisa di Klik
Beberapa hari ini banyak komentar atau pertanyaan rekan-rekan blogger yang sudah menggunakan Threaded Comment (baca: Cara Membuat Threaded Comment di Blogger), ada masalah dengan tombol Reply / Balas.

Setelah saya cek, ternyata tombol reply / balas tidak berfungsi atau  form komentar tidak keluar. Hal ini disebabkan ada perubahan pada JavaScript threaded comment.

replyerror

Untuk mengatasi hal ini, ikuti langkah-langkah di bawah ini :

   1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
   2. Menjaga kegagalan, backup dulu template anda ---> Download Template Lengkap
   3. Centang Expand Template Widget
   4. Cari kode dibawah ini :

Klik show untuk melihat
<b:includable id='threaded_comment_js' var='post'>
  <script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = &#39;<data:post.id/>&#39;;
      var feed = &#39;<data:post.commentFeed/>&#39;;
      var authorName = &#39;<data:post.author/>&#39;;
      var authorUrl = &#39;<data:post.authorUrl/>&#39;;
      var blogId = &#39;<data:top.id/>&#39;;
      var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

      // Configure commenting API:
      var configJso = {
        'maxDepth': 2
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>


5. Ganti semuanya dengan kode dibawah ini :

Klik show untuk melihat
<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

   6. Save Template dan silakan lihat hasilnya,,
Sumber: http://blog.kangismet.net

Rabu, 07 Maret 2012

123 Page Number Navigation for Blogger

✔ Aksara Tanpa makna Comment
Baru beberapa hari lalu saya menemukan artikel yang benar-benar saya cari. Adalah bagaimana cara membuat halaman berurut 123 /page 123 navigation untuk blog di blogger/blogspot.

Kode membuat halaman 123 di blogspot ini,saya dapat dari hasil karya besar Bp.Wijaya di ariawijaya.com
Anda bisa mengunjungi website dan tutorial 123 page navigation ini di situsnya langsung dalam tutorialnya 'Membuat Navigasi Page Number Blogspot', atau anda bisa langsung klik disini.

Untuk hasilnya akan seperti gambar di bawah ini:


Sedangkan contoh hasil kode navigasi berurut ini, anda bisa lihat di sini.
Bagaimana? Ingin membuatnya?

Biar pelajaran blog menjabarkan kembali cara membuat halaman 123 berurut ini.

Langkah Cara Membuat Page Navigasi Angka / Number 123dst pada Blog.

Pertama, pergilah ke dashboard blogger anda, selanjutnya, pilih tata letak, dan pilih Edit HTML.
Seperti biasa, contreng option Expand widget templates, selanjutnya cari kode berikut:

]]></b:skin>

Setelah ketemu,letakkan persis di atasnya kode css di bawah ini:





Lalu,cari lagi kode seperti ini: </body> Jika sudah ketemu, tepat di atasnya letakkan script di bawah ini:





Langkah terakhir, carilah kode berikut (copi semua dengan tanda petik):

'data:label.url'

Jika sudah ketemu, hapus kode tersebut dan gantilah kode berikut (copi semua dengan tanda petik):

'data:label.url + &quot;?&amp;max-results=5&quot;'

Sekarang, simpan templates anda, dan anda bisa lihat hasilnya sekarang

Sumber: http://www.abu-farhan.com 
Langganan: Postingan (Atom)
Diberdayakan oleh Blogger.