Masuk
Tampilkan postingan dengan label tooltip. Tampilkan semua postingan
Tampilkan postingan dengan label tooltip. Tampilkan semua postingan

Minggu, 10 Juni 2012

Form berlangganan melayang di blog

Form berlanggan..kayaknya form ini sungguh wajib bagi para blogger mania dan banyak model-model form yang telah ada sekarang saya akan menshare cara membuat form subscriber melayang atau pop-up..Banyak blogger mengatakan bahwa berlangganan sebuah pop-up dengan jquery sangat membantu dalam meningkatkan jumlah subscriber. .

sebelum memulai, disarankan baiknya anda BackUp dulu template anda.
  1. Login Blogger.com, Klik Template > Edit HTML
  2. Tekan Ctrl+F cari kode ]]></b:skin> copy kode berikut letakan tepata di atas kode ]]></b:skin>
  3. Selanjutnya cari </body> letakan kode berikut tepata di atas kode </body>
    <div id='popupContact'>
    <a id='popupContactClose'><img alt='Close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDU9EP-j7Kg4XBtHIjHdgS9GQKxzVuZ9WkPlewb1QQaPMpAEBVXRYoQFnwrKlxyNT7hYYdbsXCvQNe0vlT5GXjptPPrcODAzfr9g0fXZkviI3BvAr6R8Z8cERe5BsJrc8AU0LHOjFdr0/s1600/SexyClose.png'/></a>
    <div id='cont'>
    <h1>CEPETAN BURUAN !!!!!!!! DAN DAPATKAN GRATIS UPDATE HARIAN</h1>
    <h2>(Jangan lewatkan posting harian kami dari E-mail Anda)</h2>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=p4nt3k&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=520&apos;);return true' target='popupwindow'>
    <h3>Ambil Berita Terbaru</h3>
    <input class='txt-news' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter alamat email anda&apos;;}' onfocus='if (this.value == &apos;Enter alamat email anda&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter alamat email anda'/>
    <input name='uri' type='hidden' value='pant3k'/>

    <input name='loc' type='hidden' value='en_US'/>
    <input class='btn-news' type='submit' value='Kirim'/>
    <div style='clear: both;'/>
    </form>
    <p>(Jangan khawatir Layanan didukung oleh Google, kita mengambil privasi dengan sangat serius, Email Anda tidak akan dibagi. Dan Anda dapat berhenti berlangganan setiap saat)</p>
    <h2>Periksa update bulanan kami dan <a expr:href='data:blog.homepageUrl'>Penawaran Gratis</a></h2>
    <p>(Hosting review, domain gratis, gratis SEO pelatihan, setup Free Website)</p>
    <div id='fb-root'/>
    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
    <div class='fb-like' data-send='true' data-show-faces='false' data-width='400' expr:data-href='data:blog.homepageUrl'/>

    </div>
    </div>
    <div id='backgroundPopup'/>
    Ganti teks yang berwarna biru dengan link subscription yang didapat dari feedburner misalnya link subscription punya saya "http://feedburner.google.com/fb/a/mailverify?uri=p4nt3k" cukup anda ganti link ID belakannya saja. Sedangkan uraiannya anda ganti dengan selera anda
  4. Terakhir cari </head> masukan kode berikut tepat diatas kode </head>

    Script yang bertulisan { expires: 7 } menujukan jumlah nilai hari, dengan mengatur nilai 7 menjadi nilai lain misalnya 6 maka Pop-up akan mucul lagi pada hari ke 6.
  5. Langkah terakhir Klik Save Template

                                                                                                        sumber donorilmuDotCom
READ MORE - Form berlangganan melayang di blog
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Merubah tampilan form Komentar Blogger

Komentar Fantastis
Form Komentar yang akan dibuat kali ini cukup menarik, untuk blog Karena form komentar ini sudah diedit dengan baik dan sempurna, dengan berbagai fitur seperti. dibawah ini
  • Style Elegan dan Simpel
  • Image Avatar
  • Tombol Reply
  • Styel Reply WP
  • Highlight Blog Owners
  • Pesan Ucapan "Terimakasi"
  • Emoticon Onion (Kucing)
blog ini juga memakai form Komentar ini?
  1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
  2. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode berikut di atas ]]></b:skin>

    Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry
  3. Berikutnya cari </body>, Masukan kode berikut di atas kode </body>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script src='http://donor-ilmu.googlecode.com/files/comment.js' type='text/javascript'/>
    <script src='http://donor-ilmu.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
    </b:if>
  4. Selanjutnya cari kode
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    Kalau suda ketemu letakan kode berikut tepat dibawah kode yang anda temukan.
  5. Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang berada diantara dua kode dari pembuka <b:includable ...> sampai penutup </b:includable>
    <b:includable id='comments' var='post'>

    Kode yang harus di ganti

    </b:includable>
    Ganti kode dia antara b:includable dengan kode di bawah ini

    Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.
  6. Langkah terakhir simpan template, Klik Save Template.                                                                                                              sumber  donorilmuDotCom
READ MORE - Merubah tampilan form Komentar Blogger
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Rabu, 16 Mei 2012

Membuat ZigZagLap Tooltip part II

Tooltip zigzaglap asli punya om gubhugreyot dan bagi yang belum-belum bisa menggunakanya
berikut cara praktis...

<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://gubhugreyot-javascript.googlecode.com
/files/GRzigzaglaptooltip.js" type="text/javascript">
</script>

<script type="text/javascript">
$(".GRzigzag a[title]").myGRzigzagtips({effect: 'bouncy'});
$(".GRzigzag img[title]").myGRzigzagtips({effect: 'bouncy'});
</script>

Cara Membuat ZigZagLap Tooltip
  1. Login ke blogger.
  2. Halaman Dasbor (Dasboard).
  3. Klik Rancangan (Design).
  4. Klik Edit HTML.
  5. Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
  6. Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
  7. Copy dan pastekan Javascript-1 di bawah kode <head>.
  8. Cari kode </body>.
  9. Copy dan pastekan Javascript-2 di atas kode </body>.
  10. Klik Simpan Template (Save Template).
Catatan :
Jika anda sudah menggunakan jQuery yang sama dalam blog, silahkan gunakan javascriptnya saja. Dalam satu blog hanya perlu satu jQuery saja!
Cara Menggunakan Kode tooltip
Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:
Dalam tag a (link berbentuk teks dan gambar):


Contoh penggunaan kode tooltip-1 :
<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a>
</div>
<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!">
<img src="http://3.bp.blogspot.com
/_7qeJ6kE1dEI/SoR5FBa4SPI/AAAAAAAAAAs/9V01v0UuNqE/S220/36_2_34.gif" width="100" height="90" /></a>
</div>
sumber gubhugreyot
READ MORE - Membuat ZigZagLap Tooltip part II
Diposting oleh di Tidak ada komentar:
Label: ,
Langganan: Postingan (Atom)