Cara Membuat Show/Hide Posting Blogspot

Cara Membuat Show Hide Posting Blogspot- Cara ini sudah banyak digunakan oleh para blogger, sebenarnya tidak sulit untuk membuat show hide pada posting blog. Show Hide ini banyak sekali gunanya, di antaranya jika postingan kita terlalu puanjang dan di situ ada konten atau gambar yang sekiranya perlu kita hidden dulu biar tidak terlihat panjang.

Langkahnya sebelum poting kata para blogger, isi dulu judulnya (katanya salah satu trik SEO, hehe). Kemudian ketik aja postinganmu, sedangkan konten atau gambar yang ingin disembunyikan. Copy aja skrip di bawah ini, langsung di postingmu pada posisi "Edit HTML"

Sebelum meng-copy skrip di bawah ini dan jika belum yakin silahkan lihat demonya di sini

<div><div style="margin-bottom: 2px;">

<input 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'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

Copy Konten atau gambar yang ingin dihidden

</div>

</div>

</div>

Copy skrip untuk Cara Membuat Show Hide Posting Blogspot berwarna merah di atas pada postingmu

Sumber : ajangsoftware

Read More

Cara membuat efek petir pada templete blog

Cara membuat Efek Animasi petir pada template Blog, sebenarnya in hal yang sangat mudah karna hanya menggunakan kode CSS sederhana, mungkin sobat blogger sudah sering liat blog yang memiliki efek petir pada templatenya, nah sekarang sobat juga bisa membuat tampilan blog sobat dengan efek Animasi Petir,

untuk demonya bisa anda lihat seperti blog ini

 Oke sob kita langsung ajah ke TKP ni saya kasih tutorialnya

1. masuk blogger

2..klik rancangan/ design

3. elemen laman

4. add gadget

5. pilih HTML/java script

masukan script di bawah ini

<style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style>

6. kemudian save,
7. dan lihat hasilnya

Sumber : ahmadbjblogs

Read More

Cara Membuat Komentar Admin Berbeda Pada Threaded Comment

Di postingan sebelumnya saya menulis tengtang Cara Mengaktifkan Threaded Comment pada Costum Template Blogger, dalam postingan ini saya masih menulis artikel yang berkaitan dengan Threded Comment yaitu Membuat Komentar Admin Berbeda Pada Threded Comment.
Dikarenakan Blogger mengeluarkan fitur baru yaitu Threaded Comment, rasanya ingin coba juga fitur tersebut, akhirnya saya langsung cari tutornya untuk mengaktifkan Threaded Comment tersebut dan berhasil. Namun ada masalah, yaitu jika sebelum saya mengaktifkan Threaded Comment, kolom komentar pada Admin di blog saya berbeda dengan komentar pengunjung, namun setelah saya mengaktifkan fitur tersebut, CSS yang membuat Komentar Admin berbeda tidak berpengaruh lagi, tapi walau bagaimanapun selalu ada cara untuk mengatasinya,!! ok langsung saja, silahkan simak langkah-langkahMembuat Komentar Admin Berbedah pada Threaded Comment di bawah ini:

1. Login ke blog Anda dan langsung menuju ke Edit HTML
2. Cari kode </body>
3. Copy dan pastekan kode dibawah ini sebelum kode </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
<!--admin comment -->
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', '1px solid #e1e1e1')
.css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkqY1NMCVCHwe-c8m6a86cQQwYsncmtC8ea4MuqikNnoy2-FcuswBy7gQoLB0c1L6b7H9mV6Gt7CAHiv5dGBEvmlfK2MOfDBddtU0N9d1TZJaHZaIoH33VxqBsa1rSPjw6grdziaKzyA/s1600/admin2.png") no-repeat bottom right')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<!-- admin comment end-->

4. Save dan lihat hasilnya,,


Keterangan :

• Untuk mengubah border silahkan edit pada bagian code ini 1px solid #e1e1e1
• Untuk mengganti warna Background, ganti kode ini #f1f1f1 dengan kode warna HTML yang Anda inginkan. Untuk melihat kode warna silahkan klik Di sini.
• Untuk mengganti atau mengahapus tulisan Admin, sliahkan ganti URL gambar inihttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOkqY1NMCVCHwe-c8m6a86cQQwYsncmtC8ea4MuqikNnoy2-FcuswBy7gQoLB0c1L6b7H9mV6Gt7CAHiv5dGBEvmlfK2MOfDBddtU0N9d1TZJaHZaIoH33VxqBsa1rSPjw6grdziaKzyA/s1600/admin2.png

Sumber : tobadak.com

Read More