Menambahkan Tombol Spoiler di Post di Blogger

Tombol Spoiler atau tombol show/hide di postingan bloger, digunakan untuk postingan artikel yang panjang sehingga menghemat tempat atau dengan kata lain Tombol Spoiler juga bisa digunakan jika Anda ingin memberikan pengguna pilihan untuk menampilkan atau menyembunyikan item, dapat berupa foto, teks, dll.

Langkah-langkah Menambahkan Tombol Spoiler di Post di Blogger

1. Login di Blogger
2. Pilih Entri Baru
3. Masukan Code dibawah ini.

<div style="margin-bottom: 2px;">
<div class="smallfont" 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 = 'Sembunyikan'; } 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: 65px;" type="button" value="Tampilkan" />
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukan content anda disini untuk menampilkan/menyembunyikan</div>
</div>
</div>

Sebagai contoh tekan tombol di bawah ini.

Ini contoh menampilkan/menyembunyikan content

Demikian tips blogger Menambahkan Tombol Spoiler di Post di Blogger semoga bermanfaat, terima kasih.

Read more »

Membuat Tombol Kembali ke Atas dan Bawah Untuk Blog

Kali ini saya akan membagikan artikel mengenai Membuat Tombol Kembali ke Atas dan Bawah Untuk Blog. Seringkali pengunjung blog kita enggan menekan tombol home untuk ke awal halaman atau menekan scrollbar untuk naik turun karena postingan kita panjang. Dengan adanya tombol atas dan bawah memudahkan pengunjung blog kita untuk bergerak ke atas halaman atau ke bawah halaman dengan sekali klik. Bagi rekan-rekan yang pingin mencobanya silakan ikuti tahaptahap berikut.

Tahap-tahap Membuat Tombol Kembali ke Atas dan Bawah Untuk Blog

1. Login di Bloger Anda.

2. Pilih Tata Letak.
3. Pilih Tambah Gadget.
4. Masukan kode berikut :

• Kode untuk tombol ke bawah halaman

<a rel="nofollow" style="display:scroll;position:fixed;top:10px;right:5px;" href="#footer" title="Ke Bawah Halaman"><img src="https://sites.google.com/site/kodegratis/down.ico"/></a>

Untuk tulisan berwarna merah sesuaikan dengan id footer anda dan tulisan berwarna biru anda bisa ganti dengan gambar yang diinginkan.

• Kode untuk  tombol ke awal halaman

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Ke Atas Halaman"><img src="https://sites.google.com/site/kodegratis/up.ico"/></a>

Untuk tulisan berwarna biru anda bisa ganti dengan gambar yang diinginkan.

Sebagai contoh kunjungi halaman ini pada pojok kanan dan bawah terdapat tombol navigasi naik turun. Demikian tips Membuat Tombol Kembali ke Atas dan Bawah Untuk Blog semoga bermanfaat. Terima Kasih

Read more »

Membuat Tombol Feedback Untuk Blog

Seringkali kita melihat website atau blog terdapat tombol umpan balik mengambang atau Tombol Feedback yang nampak dan mengambang walaupun kita telah scrooling page. Tentunya kita berpikir bagaimanakah membuat Tombol FeedBack tersebut? Membuat Tombol Feedback Untuk Blog sangat mudah sekali, kita hanya menyediakan link gambar feedback dan membuat form untuk saran dan pesan. Untuk membuat form anda tinggal memilih beberapa publiser penyedia seperti emailmeform. Tata cara pembuatan kontak form silakan anda kunjungi Membuat Email Form Atau Kontak Saya. Tombol feedback adalah merupakan tool untuk memberikan kesempatan bagi pengunjung untuk memberi saran kepada kita mengenai blog atau artikel yang kita sajikan.

Cara Menambahkan Tombol Umpan balik/Feedback ke Blogger

Langkah-langkah cara menambahkan tombol umpan balik sangat sederhana. Download ikon dan tombol upload umpan balik favorit Anda di Blogger. Setelah selesai, Anda kemudian dapat mengikuti beberapa langkah di bawah ini,

1. Login di Bloger Anda
2. Pilih Tambah Gadget.
3. Pilih HTML/Javascript
4. Masukan kode di bawah ini.

<a style="display:scroll;position:fixed;bottom:50%;left:0px;" href="http://www.emailmeform.com/builder/form/5J7eKt10d8QC0" title="Feedback Please, Can't go further without your help" target="_blank"><img src="https://sites.google.com/site/kodegratis/feedback1.jpg" /></a>

• Secara default tombol akan muncul di sebelah kiri tetapi jika Anda ingin beralih ke kanan rubahlah tulisan yang berwarna kuning.
• Ganti URL halaman kontak dengan link alamat kontak anda pada tulisan berwarna biru.
• Ganti dengan judul anda pada tulisan berwarna pars.
• Pada tulisan berwarna merah merupakan gambar feedback anda. bisa di ganti dengan gambar lain sesuai keinginan anda.

Anda juga bisa mencoba kode berikut.

<a style="display:scroll;position:fixed;bottom:5px;left:0px;" href=" http://www.emailmeform.com/builder/form/5J7eKt10d8QC0" title=" Feedback Please, Can't go further without your help" target="_blank"><img onmouseover="this.src='https://sites.google.com/site/kodegratis/largefeedbackbutton%5B1%5D.jpg'" src="https://sites.google.com/site/kodegratis/smallfeedbackbutton%5B1%5D.jpg" onmouseout="this.src='https://sites.google.com/site/kodegratis/smallfeedbackbutton%5B1%5D.jpg'"/></a>

• Untuk tulisan berwarna merah adalah gambar feedback besar saat mouse mengarah ke fokus link feedback.
• Untuk tulisan berwarna hijau adalah gambar feedback kecil saat mouse meninggalkan fokus link feedback.

Perbedaan dari kedua kode diatas yaitu pada kode pertama gambar feedback tidak berubah seiring dengan mouse menuju pada fokus link sedangkan kode kedua berubah seiiring dengan mouse menuju dan meninggalkan fokus link. Tergantung anda memilih yang mana?.

Demikian tips belajar Membuat Tombol Feedback Untuk Blog semoga bermanfaat. Terima Kasih.

Read more »

Membuat Email Form Atau Kontak Saya

Membuat Email Form Atau Kontak Saya pada blog adalah memberikan kesempatan pada pengunjung blog untuk memberikan saran atau menghubungi anda. Email Form merupakan tool untuk memperdalam hubungan antara pengunjung dan pemilik blog untuk saling menukar pengetahuan.

Cara Mendaftar Di Email Form atat Membuat Kontak Saya

• Masuk ke halaman website emailform disini

• Pilih Free Signup kemudian isi from yang ada.

• Pilih Create Account. Anda akan mendapat email konfirmasi.
• Masuk pada account email dan pilih tautan yang diberikan.
• Login kembali di emailform dan akan nampak seperti gambar berikut.

• Pilih AddForm dan anda akan diberikan 2 pilihan, yang pertama menggunakan form yang telah disediakan dan kedua membuat form sendiri. Untuk lebih sederhana pilih yang pertama.

• Pilih Costomize untuk mengisi kelengkapan data yang di perlukan pada sidebar kiri.

• Pilih Save Form. dan anda kembali ke halaman My Form.
• Pada halaman my form sorot mouse anda pada kontak form yang telah di buat dan pilih Tag Code.

• Nah... pada tahap ini anda diberikan pilihan untuk code yang dibutuhkan. sebagai implementasi pilih pada urutan kedua dan tag kode pertama. Implementasinya klik Membuat Tombol Feedback Untuk Blog.

Demikian tips Membuat Email Form atau Kontak Saya semoga bermanfaat. Terima Kasih

Read more »

Cara Menambah Reply Komentar Blogger

Reply komentar blogger yaitu cara kita membalas komentar yang ada. Fitur ini saya terinspirasi dari blog-blog yang ada, Mengapa di blog saya ngak muncul?. Setelah saya membaca di blog teman-teman yang sudah ahli ternyata apabila template hasil dari coustum, fitur ini ada yang muncul dan ada yang tidak muncul terkecuali template standar yang telah di sediakan oleh blogger.Jadi dasar inilah saya berusaha untuk mencari solusinya. Dan akhirnya saya menemukan tips Cara Menambah Reply Komentar Blogger.

Tahap-Tahap Cara Menambah Reply Komentar Blogger Sbb:

1. Sign in di blog anda.
2. Pilih Template.
3. Pilih Edit HTML
4. Download Template Lengkap untuk menghindari kesalahan.
5. Centang Expand template widget
6. Cari kode <data:commentPostedByMsg/> atau <data:comment.timestamp/>
7. Copy kode berikut ini lalu tempatkan di bawah kode di atas

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=NOMOR-BLOG-ID-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Balas Komentar</a></span>

Keterangan:
Tulisan berwarna biru diganti dengan nomor blog id anda.


Contoh di adressbar tertera :
http://www.blogger.com/blogger.g?blogID=157642238713766667#template/src=dashboard
Tulisan berwarna merah adalah no blog id anda. 

8. Klick Simpan Template unutk menyimpan perubahan
9. Klick Lihat atau Pratinjau untuk melihat hasilnya.

Perbedaan hasil dari dua pilihan di atas adalah apabila menempatkan kode Reply di bawah kode <data:commentPostedByMsg/> teks "Balas Komentar" akan berada sejajar dengan komentar pengunjung. Sedangkan apabila ditempatkan di bawah <data:comment.timestamp/> teks "Balas Komentar" akan berada di bawah komentar.

Demikian tips yang bisa saya share kepada anda jika masih ada kekurangan mohon di maafkan. Terimah Kasih.

Read more »

Mengganti Tulisan Older Post, Newer Post, Home

Tulisan older post, newer post, dan home merupakan navigasi yang muncul di bawah postingan untuk beranjak ke postingan yang baru, lama, dan kembali ke homepage blog. Nha, apa pernah terpikir oleh anda untuk menggantinya dengan sebuah gambar? Saya rasa anda harus melalukannya supaya blog terlihat lebih sempurna dan berbeda dengan blog lainnya. Mau tau cara?

Berikut Cara Mengganti Navigasi Blog Dengan Gambar:

1. Login ke Account Blogger anda.
2. Plih Template.
3. Polih Edit HTML.
4. Centang Expand Widget Template.
5. Cari kode berikut:

<data:newerPageTitle/> ganti dengan <img src="url-gambar-next" border="0" /> <data:olderPageTitle/> ganti dengan <img src=" url-gambar-previous" border="0" /> <data:homeMsg/> ganti dengan <img src=" url-gambar-home" border="0" />

6. Terakhir, klik Save Template.

Sebagai contoh penerapannya kunjungi blogku Free Source Code Visual Basic.

Demikian tips saya mengenai Cara Mengganti Navigasi Blog Dengan Gambar semoga bermanfaat dan terimah kasih.

Read more »

Membuat Menu Tab View Widget Di Blogger

Pada postingan pertama Membuat Menu Tab View Di Blogger dengan mengedit HTML. Sekedar memperdalam ilmu sebaiknya anda membacanya terlebih dahulu karena pada postingan kali ini saya akan memberikan tutorial Membuat Menu Tab View Widget yang sedikit lebih mudah. Mengapa? karena kita tidak perlu lagi mengedit HTML..

Berikut Langkah-langka Membuat Menu Tab View Widget:

1. Login ke Blogger Anda.
2. Pilih Tata Letak.
3. Posisikan dimana anda akan meletatkannya, sebaiknya pada sidebar. Kemudian pilih Add Gadget. dan masukan kode di bawah ini.

<style type="text/css">
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">
<div class="Page">
<div class="Pad">
konten 1</div>
</div>
<div class="Page">
<div class="Pad">
konten 2</div>
</div>
<div class="Page">
<div class="Pad">
konten 3</div>
</div>
</div></div></form>
<script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

4. Simpan.

Keterangan

• Untuk tulisan berwarna merah di isi dengan judul dari Tab View.
• Untuk tulisan berwarna biru di isi dengan konten anda.

Apabilila anda belum mengerti mengenai konten, berikut contohnya :

<div class="Page">
<div class="Pad">
<script style=text/javascript src=http://frangky-s.googlecode.com/files/recent-comments.js></script><script style=text/javascript>var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://frangkys.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments></script> <style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} </style>
</div>
</div>
<div class="Page">
<div class="Pad">
<script style="text/javascript" src="http://frangky-s.googlecode.com/files/recentposthumb.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 150;
</script>
<script src="http://frangkys.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
</div>
</div>

Demikian Tutorial Membuat Menu Tab View Dengan Widget semoga dapat bermanfaat bagi teman-teman.

~God Luck~

Read more »