Membuat Screenshot Link / Preview Halaman Popup

Cara Memasang Screenshot / Preview Halaman Web dari Sebuah Link

Bismillah - ini mungkin kali pertama Pelajaran Blog dalam posting tanpa basa-basi terlebih dahulu (menghemat waktu,keburu ujan pent-),

Langsung ke TKP ya sob,yup! kali ini kita cari tahu bagaimana membuat link atau memasang screenshot / preview halaman dalam jendela popup mini.
Tentu tak lepas dari bahsa javascript,namun sobat tak perlu risau,karena widget ini sudah dalam format wyswyg,alias instant :D

Contoh fisik (letakkan kursor diatas link berikut):

Gambar Al-Qur'an

I. Bagaimana langkah awal membuat screenshot halaman / preview mini popup?

Pertama,sobat kunjungi situs ini http://www.snap.com/,dan klik tombol Get Started.


Kemudian,isi form sesuai dengan ketentuan dan permintaan,pada bagian ini sobat bisa menentukan loggo,warna,background maupun attribut lain dan bahasa;setelah itu klik tombol Continue.


Selanjutnya,sobat akan dihadapkan sebuah halaman konfirmasi yakni permintaan untuk memasukkan id kita,mulai dari email,nama blog dan konfirmasi password,oya,jangan lupa untuk contreng 'term and conditions-nya ya,lalu klik tombol Continue.


Nah,pada bagian selanjutnya,akan tampil sebuah tombol bergambar dengan tulisan Istall Now,klik tombol tersebut dan sobat akan dihadapkan notif persetujuan,maka sobat klik Ok pada bagian ini.


Lalu,sobat klik Add Widget pada halaman selanjutnya.


Kembali pada jendela sebelumnya (dibawah tombol bergamabar Install Now'),copy kode javascript,


II. Setelah mendapatkan kode-nya,apa yang selanjutnya dilakukan?

Setelah sobat dapatkan kodenya,kini kita kembali pada halaman Dashboard,maka sobat pilih Tata Letak selanjutnya pilih Edit Html dan contreng 'Expand Widget Templates'.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Templates kemudian klik Edit Html selanjutnya klik Proceed baru kemudian sobat contreng 'Expand Widget Templates',lihat gambar:



Templates



Edit Html


Proceed



Contreng Expand Widget Templates

Setelah itu,sobat cari kode berikut:

</body>

Kemudian tepat diATASnya letakkan script yang berhasil kita salin seperti tersebut diatas.
Lalu simpan.

III. Bagaimana menerapkannya pada sebuah link?

Caranya sangat mudah,sobat bisa meletakkannya di postingan maupun dalam widget html/javascript (tahu khan? #@%^#$^).

Saya contohkan jika saya menerapkannya pada HTML/Javascript.
sobat pergilah ke Dashboard lalu pilih Tata Letak selanjutnya pilih Add New Gadget.
Atau untuk tampilan baru blogger,sobat pilih Dashboard lalu pilih Layout kemudian klik Add a Gadget,lalu pilih HTML/Javascript dalam mode html,lihat gambar:


Layout / Tata Letak


Add A Gadget


Html/Javascript


Pilih mode HTMLDan letakkan kode berikut,lalu simpan.

<a class="snap_shots" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvhYwOH9Q7bBp3EN4CmtuZl_oSKfzuhqfhQThg3HS7sq1YUkxIaTLeKQkE5bqlXMNmTmSSHfOeVH1toXGG12fx_HhJxeiQa5sEg_Cuzf4Nyeqkmwznzmr1OnPtWYxcwQjJnX5J2CGHq4/s1600-r/ahlussunnah+wa+al+jamaah.jpeg">Gambar Al-Qur'an</a>

Mudah khan gan,met mencoba ya :D

Read more > Membuat Screenshot Link / Preview Halaman Popup

Cara Membuat Link Anchor Satu Halaman / Navigasi Halaman Back to Top

Membuat Link ke Atas,Menuju Tengah,ke Bawah Dalam satu Halaman

Emang susah ya sob njelasin dari judul postingan kali ini,intinya,kali ini saya ingin sekali membagikan inpo masalah membuat link anchor satu halaman.
Seperti apa sih bentuk fisiknya,sobat bisa lihat di salah satu posting blog sahabat saya mas Arya di Ramadhan Bersama Prambors.

Tampilan atas:



Saat sobat klik anchor link 'testimonial' maka langsung tertuju seperti pada gambar berikut:

Dan saat sobat klik anchor link 'help' maka langsung tertuju seperti pada gambar berikut:

Jika sobat perhatikan,dari screenshot gambar diatas,jika postingan blog sahabat saya tersebut dibuka / dibaca menggunakan browser Mozilla misalnya,maka setiap kita mengklik salah satu link anchor tertuju,misal 'testimonial','about' atau 'help' (dalam gambar diatas) maka akan denga sendirinya menentukan link yang dituju.
Lebih jelasnya ya,sobat lihat di sini (coba gunakan browser mozilla ya).

Nah,gimana sob dah jelas ya tutorial apa yang ingin saya sampaikan malam hari ini :D

Langkah dan Cara Membuat Link Anchor Satu Halaman / Link Tombol Kembali ke Atas

Pertama,baca bismillah ya..
Selanjutnya,buatlah posting seperti berikt ini,untuk mengetahui triknya,sobat bisa copy paste aja dari beberapa barisan artikel berikut,da modifikasi sendiri ya :D

Pergilah ke posting dan pilihlah type edit htmlnya,lihat gambar dibawah ini:



Kemudian buatlah posting seperti ini (hanya contoh saja ya,INGAT,penulisan huruf kecil dan besar pada link anchornya sangat sensitiv ya gan pent-)

Mulai posting dari sini..
<a href="#about">About</a> | <a href="#help">Help</a> | <a href="#testimonial">Testimonial</a>
<a name="about"></a>
<h4>About</h4>

Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

<a name="testimonial"></a>
<h4><strong>Testimonial</strong></h4>

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

<a name="help"></a>
<h4><strong>Help</strong></h4>

Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Akhir posting disini.

Nah,kemudian publikasikan.Selesai.

Hasilnya,kurang lebih akan seperti ini gan:

About | Help | Testimonial

About

Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Testimonial

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Help

Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Semoga berhasil ya sob,dan tunggu artikel selanjutnya yang tak kalah Hot!!
See you guys..

Read more > Cara Membuat Link Anchor Satu Halaman / Navigasi Halaman Back to Top

Link Animasi / Animation Link

Membuat Link berupa Gambar Animasi: "

Jika anda harus bersusah payah memasukkan object flash kedalam blog karena harus menambahkan beberapa kode,lebih prakstis memakai animasi gambar (*.gif). Gambar ini nantinya akan menjadi sebuah link,yang mempunyai tooltips / keterangan link. Untuk contohnya lihat seperti di bawah ini: Nah!Untuk kodenya copy di bawah ini: <a href="http://geliat-bisnis.blogspot.com/'target='_self' title='Cari duit"> <img style="width: 152px; height: 66px;" src="http://www.amayesnbuys.com/mymoney.gif"/></a> Untukhttp://geliat-bisnis.blogspot.com/ gantilah nama URL tujuan. Untuk http://www.amayesnbuys.com/mymoney.gif gantilah alamat URL Gambar animasi yang ingin anda tampilkan. Untuk Cari duit adalah keterangan / tooltips / keterangan yang muncul ketika mouse berada di atas area. Selamat mencoba ya..:) Baca Juga Yang Ini.. Meletakkan Video ke Dalam Blog Membuat Label/Kategori Membuat Meta y_key

Read more > Link Animasi / Animation Link

Horizontal Form Button Link

Membuat Link Form Button Berjejer / Horizontal: "
Jika sebelumnya saya pernah memposting tentang membuat form button,sekarang kita akan membahas tentang membuat form button berjejer.
Untuk sebuah form,jika di sejajarkan akan mengalami sedikit kesulitan.
Disini kita akan mengakalinya dengan menambahkan tabel,untuk meletakkan form-form yang akan kita publikasikan.

<p align="center"><table border="0" cellspacing="1"
width="104"><tr>

<td width="72"><form method="get"
action='http://www.google.com/'target='_blank"><p><input type="submit"
value='Google'
name="1"></form></td>

<td width="69"><form method="get"
action='http://www.yahoo.com/'target='_blank"><p><input type="submit" value="Yahoo'
name="2"></form></td>

<td width="69"><form method="get"
action='http://www.youtube.com/' target='_blank"><p><input type="submit" value="Youtube'
name="3"></form></td>

<td width="69"><form method="get"
action='http://www.Friendster.com/' target='_blank"><p><input type="submit" value="Friendster'
name="4"></form></td>

</tr></table>

---

Untuk tulisan warna hijau,rubah sesuai atribut blog anda,jika anda ingin memposisikan form-form diatas,ke kiri,tinggal merubah baris kode yang berwarna merah.
Untuk posisi tengah='center', kiri='left' sedangkan untuk kanan='right',namun masalah posisi,biasanya browsre IE yang berfungsi dengan baik.
Untuk hasil eksekusi diatas,jika anda menginginkan link akan terbuka,pada window yang sama,gantilah kode _blank gantilah dengan _self.

Gimana? minat mau mencoba?

---

Baca Juga Yang Ini..

• Membuat Link berupa Gambar Animasi
• Membuat Link berupa Form
• Membuat Daftar Isi pada Blog

Read more > Horizontal Form Button Link

Form Button Link

Membuat Link berupa Form Button: "

Membuat Link berupa tombol atau form button sebenarnya,disamping menambah kecantikan namun sekaligus merangsang pengunjung untuk mengklik form tersebut. Kodenya,anda bisa copy di bawah ini: <form method="get" action="http://pelajaran-blog.blogspot.com/' target="_blank"> <input type="submit" value="Contoh saja!" name="q"> </form> Untuk tulisan http://pelajaran-blog.blogspot.com/ anda rubah sesuai nama blog anda. Untuk tulisan Contoh saja!,rubah sesuai keinginan anda. Sedangkan untuk tulisan _blank gantilah dengan _self jika anda menginginkan halaman,akan terbuka pada halaman itu sendiri,bukan pada jendela baru. Gimana siap mencoba? Baca Juga Yang Ini.. Membuat Link Berupa Form Berjejer /Horizontal Membuat Daftar Isi pada Blog Meletakkan Video kedalam Blog

Read more > Form Button Link

Menghilangkan Garis Link

Menghilangkan Garis bawah pada Link: "

Kadang kita jembek ya ! alias buenci alias suebel klo bikin suatu alamat web,underline secara otomatis(emang dah diformat gitu..:o) Untuk anda yang ingin membuat Link tanpa garis bawah,gampang kok..sebenarnya cuman nambahin kode sedikit. Pinginnya kaya di bawah ini khan? http://pelajaran-blog.blogspot.com Jika anda biasanya menuliskan seperti ini untuk link: <a href="http://www.situs_tujuan.com">Link Biasa</a> Anda selipkan kode yang berwarna merah di bawah ini,sehingga menjadi : <a href="http://www.situs_tujuan.com" style='text-decoration: none'>Link tanpa Underline</a> Have nice day !! dan selamat mencoba !! Baca Juga Yang Ini.. Menghilangkan Navbar Blog Menghilangkan Sebagian Fitur Komentar Menghilangkan Fitur Komentar

Read more > Menghilangkan Garis Link