31 Januari 2014

Menghapus Kode Error HTML Pada Template

Menghapus Kode Error HTML Pada Template - Terkadang kita bisa juga kehabisan ide untuk menulis, sehingga ngeposting artikel yang baru bisa berjarak 1 minggu dari artikel sebelumnya, seperti yang saya alami saat ini, tidak tahu harus menuliskan apa untuk dibagikan, terlanjur buka blog, iseng-iseng langsung saja meluncur pada susunan kode HTML template blog saya, melihat apakah masih ada kode HTML yang error,kode yang tidak berfungsi, dan setelah saya periksa dari awal sampai akhir saya menemukan 1 kode tidak berfungsi dan 14 code dalam status error.
Kode HTML yang tidak berfungsi langsung saja saya hapus, takut menular pada kode yang lain, hehehe.. dan 14 kode HTML yang error, 2 diantaranya saya hapus dan 12 kode lagi saya perbaiki, sehingga lekukan pada kode HTML template lebih padat dan rapat.

Kode HTML Template

Buat anda yang mungkin mengalami hal yang sama seperti saya, bingung mau menuliskan apa, boleh memeriksa susunan perkodean HTML template anda, kali aja karena jarangnya anda melakukan pemeriksaan sudah menumpuk dan banyak kode yang error,tidak berfungsi,butuh perbaikan dan butuh perhatian anda mungkin.
Tetapi saya sarankan jangan NEKAD melakukan penghapusan kode ya, bisa-bisa salah hapus semua kode bisa error dan tampilan template akan berantakan.

Lalu bagaimana Menghapus Kode Error HTML Pada Template.? mudah saja, tentunya terlebih dahulu anda harus tahu kode mana yang error, di baris dan sampai kolom berapa kode tersebut berada di template anda, lalu bagaimna cara kita mengetahui bahwa kode tersebut error,tidak berfungsi,butuh perbaikan dan lain sebagainya.?
Nah hal inilah yang ditanyakan sahabat saya mas +Pri Enamsatutujuh melalui komentar, (Maaf ya mas, lama menunggu) beliau menanyakan poin ke-4 pada artikel saya tentang Tips Membuat Proses Loading Blog Semakin Cepat.
Langsung saja berikut cara Menghapus Kode Error HTML Pada Template :
  1. Login dahulu ke blog anda
  2. Lalu Edit template >> bentangkan semua kode HTML template anda
  3. Selanjutnya untuk melihat kode yang error silahkan masuk ke- http://validator.w3.org
  4. Isikan kolom ADDRESS dengan URL blog anda
  5. Agar langsung dapat mengarah pada baris dan kolom HTML pada template blog anda, beri pilihan centang pada opsi OPTION dibawah,
  6. Klik Revalidate
  7. Menghapus Kode Error HTML Pada Template
  8. Perhatikan kolom RESULT pada gambar diatas, disana akan menunjukkan jumlah kode error dan berapa jumlah kode waning (Peringatan) pada HTML template anda,
  9. Untuk Melihat letak kode tersebut berada dimana pada template anda, cukup lihat pada halaman bawah, lalu klik ANGKA yang menunjukkan baris tempat kode tersebut pada template anda,
  10. Dan langkah selanjutnya tinggal melakukan perbaikan,
Update-
Lakukan ini secara bertahap, karena template yang sering terjadi perubahan akan berpengaruh pada kualitas SEO itu sendiri, dan demikian akhir cara Menghapus Kode Error HTML Pada Template. Semoga dapat bermanfaat.

28 Januari 2014

Pemasangan Title Tag Dan Atribut Pada Link URL

Gambar Title Tag Dan Atribut Pada Link URL
Pemasangan Title Tag Dan Atribut Pada Link URL - Membangun Blog ibarat kata banyak orang membangun layaknya sebuah rumah, akan anda jadikan apa nantinya blog setelah anda membuatnya, memikirkan tujuannya, hingga memodifikasinya agar terlihat baik, baik dimata pengunjung maupun baik buat anda.
Seperti halnya dengan rumah, banyak yang harus disisipkan agar layak untuk dihuni, seperti pemasangan ini, itu dan lain sebagainya. Begitupun dengan blog, setelah saya ingatkan bahwa Pentingnya Atribut | Title Tag Untuk Optimasi SEO, dia artikel kali ini saya juga akan ingatkan kembali, hehehe.... agar web/blog kita semua bisa menembus angka presentase 100% SEO, tentunya dengan Pemasangan Title Tag Dan Atribut Pada Link URL yang sering kita lupakan karena menganggap cara ini merupakan hal yang tidak penting.

Buat anda yang tidak terlalu memikirkan tentang SEO, boleh abaikan tutorial ini, tetapi jika ingin belajar SEO buat blog anda, berikut cara Pemasangan Title Tag Dan Atribut Pada Link URL :

I. Pemasangan TITLE TAG Pada Link Url

Title berarti tanda/gelar untuk sebuah link url, yang memberitahukan bahwa tanda/gelar ini berasal dari link tertentu yang diberi title, yang menampilkan sebuah kalimat melayang sebelum link tersebut di tuju.
Contoh-
<a href="http://sahabatblogger77.blogspot.com" title="SAHABAT BLOGGER 77">Well Come To My Blog</a>

maka link yang tampil "Welcome To My Blog" dan kalimat yang muncul sebagai titlenya kata "SAHABAT BLOGGER 77"

II. Pemasangan ATRIBUT Pada Link Url Gambar

Karena kode ini hanya untuk link Url gambar, Atribut berarti identitas sebuah gambar yang ada pada sebuah tulisan, jadi pemasangan atribut dikhususkan pada link url gambar dengan kode ALT.
Contoh-
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81J2dt9QFAKYX2vCgnC_kQtzxW_d55sgNoX2aCO73ZHhACqFblqpL0ci-focZotDLOPBMs7iNDeg0QF8KOLHscmWPl-BhUkwdu6h6OlKzrCEfgAHUfJ39VLtf1W6d5Lzh6KVruKLaGCA/s1600/Title-image.png" alt="Gambar Logo Blogger"></img>

akan tetapi kata pada kode alt tidak akan tampil saat gambar dimuat, tetapi kata inilah sebagai identitas saat google tidak dapat mengindeks gambar, dan akan menampilkannya saat gambar gagal terbuka.

jika ingin menyisipkan link pada gambar, maka akan jadi seperti ini :
<div class="seperator" style="clear:both;text-align:center;">
<a href="http://sahabatblogger77.blogspot.com/2014/01/pemasangan-title-tag-dan-atribut-pada-link-url.html" title="Pemasangan Title Tag Dan Atribut Pada Link URL"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg81J2dt9QFAKYX2vCgnC_kQtzxW_d55sgNoX2aCO73ZHhACqFblqpL0ci-focZotDLOPBMs7iNDeg0QF8KOLHscmWPl-BhUkwdu6h6OlKzrCEfgAHUfJ39VLtf1W6d5Lzh6KVruKLaGCA/s1600/Title-image.png" alt="Gambar Logo Blogger"></img></a></div>

gambar akan mengarahkan kealamat link yang anda tentukan saat gambar tersebut di klik, dan title akan muncul saat mouse menyentuhnya.
Image Properties
Pada postingan penerapannya seperti berikut:
  1. Buka Entri baru >> Klik Icon Image >> Upload Gambar
  2. Setelah gambar terupload, klik gambar tersebut, Pilih link "Properties"
  3. Maka akan tampil screenshort melayang, Isikan TITLE dan ATRIBUT pilihan anda pada kolom masing-masing
  4. Klik OK. Selesai
Saatnya untuk melihat apakah title tag dan atribut berikut sudah terpasang dengan baik atau belum, Buka salah satu artikel anda, dan perhatikan link didalamnya, arahkan panah kursor mouse anda pada gambar atau link teks, sudahkah terpasang title tag dan atribut.?, jika belum segera lakukan perbaikan agar lebih SEO.

Warning..!!
Mungkin artikel anda sudah berjumlah banyak bahkan ratusan, dan ingin melakukan pemasangan title tag dan atribut pada artikel lama yang sebelumnya telah di indeks google, pastinya artikel anda akan mengalami perubahan, untuk itu ada baiknya memanggil kembali googlebot untuk melakukan indeks kembali pada artikel atau halaman anda yang telah mengalami perubahan struktur dengan Cara Memanggil Googlebot Untuk Melakukan Index Ulang.

Terimakasih Telah membaca akhir artikel ini tentang Pemasangan Title Tag Dan Atribut Pada Link URL, semoga bermanfaat.

27 Januari 2014

Pentingnya Atribut | Title Tag Untuk Optimasi SEO

SEO Optimation
Pentingnya Atribut | Title Tag Untuk Optimasi SEO - Artikel ke-2 yang berjarak 1 hari dari artikel pertama yang saya publikasikan pada tanggal 29 Nopember 2013 membahas tentang Belajar Mendesain Template Agar Lebih SEO Friendly. menunjukkan saya masih pemula dalam blogging, (newbie) hehehe.... Seperti judul artikel berikut ini tentang Pentingnya Atribut | Title Tag Untuk Optimasi SEO, sedikit penjelasan apa keterkaitan hubungan antara Atribut dan title tag untuk optimasi SEO.

Pemasangan meta tag pasti tidak akan pernah anda lewatkan, karena banyak para blogger yang membicarakan akan optimasi SEO yang satu ini, tetapi bagaimana dengan title tag dan atribut ( alt ), apakah kedua unsur ini sudah terpasang dengan baik di blog anda.?, saya rasa banyak yang melupakan akan pentingnya title tag dan atribut ini, padahal jika kita cek kualitas SEO untuk blog, yang paling banyak terjadi kesalahan yaitu tidak terpasangnya title tag dan atribut di halaman blog kita. buat anda yang sudah mencapai angka 100% SEO untuk blognya, saya ucapkan SELAMAT, tetapi yang belum mencapai angka gemilang tersebut silahkan cek SEO blog anda, maka akan ada screenshort yang menampilkan 75% kesalahan tidak terpasangnya kedua unsur diatas, sehingga presentase SEO hanya mendapat nilai A atau B (min), nah untuk itu segera lakukan perbaikan.

Cara melakukan perbaikan tidak begitu sulit, karena sudah ditampilkan saat anda melakukan cek kualitas SEO blog, hanya memerlukan waktu cukup lama karena kita dituntut untuk mencari halaman mana yang belum terpasang title tag dan atribut tersebut, untuk itu saya akan menjelaskan bagaimana cara cepat menemukan kesalahan tersebut, terlebih dahulu pahami apa itu title dan atribut.?

TITLE TAG
Merupakan kata yang di indeks oleh googlebot, dan kata ini biasanya muncul apabila mouse anda menyentuh salah satu link URL pada halaman, baik itu pada link URL gambar maupun pada link URL artikel, sebagai contoh sentuh gambar diatas, maka akan tampil kata melayang yang menampilkan title artikel ini, saat robot google tidak dapat meng-indeks Link URL halaman blog anda, maka googlebot akan mengindeks title tersebut sebagai gantinya, singkatnya agar semua link yang akan anda tampilkan memiliki tujuan, sehingga semua halaman dapat terindeks dengan mudah.

ATRIBUT
Penjelasannya mungkin hampir sama dengan title tag, bedanya hanya pemasangannya mengunakan kode ALT, yang berarti nama pada sebuah Link URL gambar, hampir semua postingan menyisipkan gambar didalamnya, akan jadi apa jika gambar tersebut tidak jelas, gambar apa itu.?, mungkin kita tahu persis itu gambar apa.? tetapi bagaimana dengan googlebot, apakah googlebot tahu anda menambahkan gambar apa, disinilah peran atribut (alt) akan berfungsi, dengan menambahkan kode alt pada link URL gambar akan memperjelas nama gambar tersebut.

Nah...!! masihkah anda mengabaikan Pentingnya Atribut | Title Tag Untuk Optimasi SEO pada halaman blog anda.?
Karena cara pemasangannya cukup panjang, jadi saya pisahkan di artikel saya berikutnya, anda boleh bookmark artikel selanjutnya tentang Pemasangan Title Tag Dan Atribut Pada Link URL.

26 Januari 2014

Tips Membuat Proses Loading Blog Semakin Cepat

Proses Loading Blog
Tips Membuat Proses Loading Blog Semakin Cepat - Halaman blog dengan desain gambar/kombinasi warna widget yang bervariasi memang terlihat elegant, terlebih jika merubah fitur slider pada blog default yang anda lakukan agar memiliki tampilan yang terlihat cantik, akan tetapi hal ini sering di abaikan banyak pengguna blog karena fitur slider yang di sisipi banyak gambar bervariasi jelas proses loading blog semakin bertambah jika terdapat beberapa link URL gambar pada fitur slider tersebut.

Lalu bagaimana yang telah merubahnya, apakah harus merubahnya kembali ketampilan semula agar proses loading blog Semakin Cepat.? Hal ini perlu di siasati dengan bijak agar proses loading blog dapat tampil secara maksimal. Mungkin sudah banyak kode CSS atau Script yang telah di sisipkan pada HTML template blog, yang saya sendiri juga bahkan sudah lupa baris dan kolom dimana tepatnya kode tersebut pernah ditambahkan.
Untuk itu saya akan share beberapa Tips Membuat Proses Loading Blog Semakin Cepat tanpa anda melakukan edit HTML Template

Beberapa tips berikut ini mungkin tips dasar yang telah anda abaikan atau lewatkan, Ok dech.. berikut Tips Membuat Proses Loading Blog Semakin Cepat :

1. BACKGROUND TEMPLATE

Gunakan background default template anda, jika anda ingin merubahnya disarankan untuk menghindari background dengan warna gelap dan warna padat karena presentase background yang gelap dan padat 74% lebih lama terbuka di banding warna lain.

2. GAMBAR

Bukan hanya gambar pada postingan blog, tetapi juga semua gambar yang terdapat pada halaman blog anda, baik itu gambar pada widget popular post, related post dan gambar pada footer.
Jangan mengabaikan ukuran size gambar saat upload, dan perhatikan dimana letak gambar tersebut akan anda tempatkan, karena waktu yang dibutuhkan untuk menunggu proses loading blog adalah saat memuat gambar.

Upload pictures file

Gunakan bantuan software Photoshop untuk mengatur kualitas gambar, namun pada saat akan menyimpan gambar jangan langsung klik file lalu Save atau Save As, gunakan pilihan “Save for Web & Devices”. Jika anda masih bingung akan hal ini, bisa mencoba dengan Memasang jQuery Untuk Mempercepat Loading Blog. Namun jika anda masih ragu juga akan jQuery ini, ada cara yang lebih baik lagi untuk mengupload URL gambar agar proses loading gambar bisa tampil secara cepat di blog, yaitu dengan mengupload gambar ke Picasa Web Album bisa menjadi solusi yang tepat untuk mengatasi proses load gambar.

3. BERANDA BLOG

Hampir semua template menampilkan gambar dan deskripsi singkat artikel pada halaman beranda, oleh karena itu tentukan jumlah artikel yang tampil, semakin banyak yang ditampilkan maka semakin berat proses loading pada halaman blog.
Klik SETELAN >> POS >> Tentukan jumlah posting yang tampil di laman utama

4. KODE HTML

EDIT TEMPLATE, maka anda akan dihadapkan dengan kode html template blog anda, perhatikan semua baris dan kolom kodenya, apakah ada kode yang error, tidak berfungsi, perlu perbaikan dan mungkin ada beberapa kode yang berstatus "PERINGATAN"
Segera hapus kode bila error, perbaiki jika tidak berfungsi dan potong/perpendek kode jika berstatus perbaiki, serta segera cari letak kesalahan kode jika berstatus Peringatan.

4 (empat) Tips Membuat Proses Loading Blog Semakin Cepat diatas hanyalah trik dasar yang sering terabaikan, tetapi sudah terbukti dapat membuat proses loading blog semakin cepat, segera percepat loading blog anda, agar saya dan sahabat lain yang akan berkunjung ke blog anda tidak harus menunggu berjam-jam untuk antri menuju halaman blog anda. TERIMA KASIH

24 Januari 2014

Bagaimana Cara Melawan Kesepian

Gambar Kesepian
Bagaimana Cara Melawan Kesepian - Kesepian itu milik semua orang, tentu saja kesepian itu hadir karena beberapa faktor penyebab, terlebih dalam hidup pernah terjadi sesuatu hal yang mengakibatkan rasa trauma yang berkepanjangan, sehingga rasa takut akan selalu menghantui bagaimana jika hal sebelumnya terulang kembali, sehingga memutuskan untuk sering menyendiri yang akhirnya kesepian akan menjadi sahabat hidup.

Orang bisa saja merasa kesepian, seperti kehilangan kekasih, teman, pekerjaan. Tetapi jika kita terlalu terlena dan tidak mau mencoba untuk melawan kesepian, bisa jadi kesepian itu dapat membunuh keceriaan anda, merenggut kebahagiaan anda dan menggantikannya dengan rasa takut akan keramaian.

Bagaimana Cara Melawan Kesepian.? Tentu saja hal ini harus segera diatasi, terkecuali anda memang merasa lebih tenang dan bahagia dengan kesepian anda.
Menonton TV sebagai alternatif melawan kesepian yang dikatakan banyak orang, tetapi orang yang kesepian menonton TV untuk selingan tidak dapat mengatasi perasaan terisolasi, karena begitu mematikan TV, interaksipun turut mati.

Menurut Prof. Dr. PHILLIP SHAVER (Psikologi University Of Denver. AS), 3 Tips Bagaimana Cara Melawan Kesepian

1. FOKUS

Kunci bagaimana cara melawan kesepaian adalah dengan memfokuskan diri terhadap perasaan orang lain, mencoba membuka diri dengan minat orang lain, serta kebutuhan orang lain sambil mencoba melupakan bahwa kesulitan masih bersarang pada diri anda.

2. INTERAKTIF

Disarankan agar orang yang kesepian untuk mengikuti kegiatan di sebuah kelompok, bisa itu dalam lingkungan masyarakat atau kegiatan pada sekolah.
Bangkitkan kembali perasaan anda yang sempat mati dengan bergabung pada kegiatan sebuah kelompok yang mempunyai kesamaan dengan kepribadian anda, entah itu di bidang politik, memasak, atau kegiatan keagamaan, dengan begitu anda bisa mengembangkan persahabatan yang kokoh.

Melawan Kesepian Demi Menggapai Kebersamaan

3. BERSOSIALISASI

Rasa sakit, perih, suka dan duka hanya anda yang mengetahui tentang semua rasa itu, untuk itu kenali diri anda, dan lihatlah dengan mata hati bahwa anda tidak sendiri, gunakan air mata anda untuk menetes hanya pada saat bahagia.
Kembangkan kemampuan bersosialisasi anda, CURHAT disarankan jika hal itu dapat membunuh rasa kepedihan hidup yang anda rasakan. Belajarlah untuk mengekspresikan masalah melalui kehidupan orang lain, karena tidak semua orang mampu tersenyum saat hatinya terluka.

Orang yang tahu cara mengisi kesendirian biasanya tidak terlalu merasa kesepian. Dan orang yang tahu Bagaimana Cara Melawan Kesepian biasanya tidak merasa sendiri.

22 Januari 2014

Menjadikan Website | Blog Layaknya Directory Dunia

Menjadikan Website | Blog Layaknya Directory Dunia
Menjadikan Website | Blog Layaknya Directory Dunia - Alangkah baiknya jika seandainya link website/blog kita terdapat pada sebuah directory, terutama directory peringkat dunia sudah pasti dengan submit URL ke directory akan dapat membantu terjadinya banyak lalu lintas di website/blog anda, dan home page blog akan cepat terkenal dan tersebar keseluruh dunia.

Melanjutkan postingan sebelumnya yang belum selesai tentang bagaimana Cara Agar Artikel Terlacak Disitus Luar Negeri, artikel kali ini saya akan lanjutkan bagaimana mengirim link blog anda untuk mendapatkan layanan Directory tersebut, sehingga anda dapat mengelola website/Blog anda layaknya sebuah Directory berperingkat Dunia. Sistim otomatis dengan pelacak baru dan lebih populer ini menggunakan fitur URL shortening, pelacakan dan layanan situs rotator yang dikombinasikan dengan statistik rinci terpadu dan umpan balik opsional untuk link website Anda.

Perhatikan beberapa fitur yang dapat anda kelola untuk Menjadikan Website | Blog Layaknya Directory Dunia
1. Promosikan situs web/blog Anda

Tidak seperti direktori lain, direktori ini menyediakan link langsung ke situs Anda. Anda tidak hanya akan mendapatkan lalu lintas untuk website anda dari situs ini, tetapi Anda juga akan menerima link timbal balik ke situs Anda. Ini akan membantu website/blog Anda mendapatkan peringkat tinggi di search engine, dan terbukti dapat dengan cepat merampingkan ALEXA RANK blog anda.

2. Langsung Melakukan kunjungan untuk situs Web/blog yang menarik

Di indeks secara manual dan terpantau, dan meninjau semua situs Web/blog yang akan dikirim ke Situs Directory ini. sehingga situs jahat atau situs di bawah konstruksi ditolak saat diajukan ke direktori ini.

3. Dapatkan statistik rinci, suara (vote), ulasan dan ketersediaan layanan monitoring situs untuk situs web Anda

Directory ini akan melacak kunjungan rinci dan tampilan halaman situs Web Anda dengan jam (untuk hari ini saja), kemarin, 1 minggu, 1 bulan, 3 bulan, 6 bulan, dan bahkan selama satu tahun. Anda dapat memonitoring statistik rinci halaman populer situs Web Anda, kata kunci pencarian, peta pengunjung interaktif, sistem operasi, pengunjung situs Anda dari perangkat mobile, peringkat website/blog anda dan banyak lagi. Selain itu, pengunjung blog Anda akan dapat memilih dan mengirimkan ulasan mereka untuk situs Anda dengan hanya satu kali klik. Selanjutnya, Anda dapat memutuskan apakah Anda ingin menerima umpan balik atau tidak.
Dan Yang terpenting, jika sistem pelacakan directory ini mendeteksi bahwa situs Anda sedang down, Anda akan menerima pemberitahuan ke alamat Email login akun anda

4. Dan yang pasti semua ini bisa anda kelola secara FREE (Gratis), di tambah anda bisa mendapatkan uang dari blog anda.

Mau bergabung dan Menjadikan Website|Blog Layaknya Directory Dunia.? Caranya cukup mendaftar dan ganti URL situs Directory ini menjadi URL situs blog anda.
  1. Klik link ini >> Directory.etrk.us Atau klik link Banner IKLAN diatas blog ini
  2. Klik "JOIN NOW" Isi form formulir pendaftaran blog anda dengan profil anda
  3. Kemudian Klik link konfirmasi yang dikirim ke email anda
  4. Login kembali dengan Username dan password yang telah anda dapatkan tadi
  5. SELESAI. Anda siap mengelola blog anda layaknya directory dunia
Keterangan -
Mulailah untuk mengirim URL beranda blog terlebih dahulu, agar dengan mudah terindeks, tahap selanjutnya anda bisa meng-ekspor banyak link pada blog anda, dan mengirimkannya ke situs directory ini untuk mendapatkan umpan balik dan peringkat.

Jika anda berhasil, dan URL situs anda diterima, maka sebagai contohnya anda bisa melihat tampilan situs blog anda seperti ini - sahabatblogger77.etrk.us/directory (Directory SAHABAT BLOGGER 77).

Sayang dan Cinta dengan Blog anda, mari Menjadikan Website | Blog Layaknya Directory Dunia.

20 Januari 2014

Memasang jQuery Untuk Mempercepat Loading Blog

Memasang jQuery Untuk Mempercepat Loading Blog
Memasang jQuery Untuk Mempercepat Loading Blog - Selain desain Template yang anda modifikasi sehingga terkesan menarik, hal utama yang disukai pengunjung atau pembaca adalah kecepatan loading halaman blog anda, bagaimana tidak sekalipun anda menyisipkan pernak-pernik di blog yang menurut anda pasti terlihat menarik bagi pengunjung, tetapi untuk melihat itu semua membutuhkan waktu yang cukup lama untuk membuka halaman blog anda. Lalu apakah pengunjung akan menunggu.?..hemm..jawab sendiri ya..!! hehehe...

Banyak cara yang perlu kita ketahui untuk mempercepat loading suatu halaman di blog, salah satunya hindari penggunaan background gelap pada template, dan masih banyak lagi yang pastinya dilain waktu akan saya bahas di artikel selanjutnya.
Untuk lebih memaksimalkan loading blog anda bisa menerapkan dengan Memasang jQuery Untuk Mempercepat Loading Blog, kode script yang kita gunakan jQuery Lazy Load, dengan jQuery ini anda bisa manfaatkan agar proses loading gambar tampil lebih cepat dan maksimal dari sebelumnya, karena waktu yang dibutuhkan untuk menunggu proses loading halaman adalah proses dalam memuat gambar.

Memasang jQuery Untuk Mempercepat Loading Blog akan dapat meminilisir untuk mempercepat proses loading gambar akan tampil lebih awal, sedangkan untuk loading gambar lain pada halaman blog akan terlihat saat halaman tersebut kita scroll. Detailnya jQuery Lazy Load memiliki fungsi untuk menampilkan gambar pada halaman blog terlebih dahulu terbuka dengan cepat.
Sebelum anda memasang jQuery ini, ada baiknya cek kecepatan loading halaman blog anda terlebih dahulu di SAHABAT BLOGGER 77-GOOGLE INSIGHTS, lalu bandingkan setelah anda memasangnya untuk mengetahui apakah jQuery Lazy Load dapat bekerja maksimal pada blog anda.

Gambar Speed Loading Page

Berikut Tutorial Memasang jQuery Untuk Mempercepat Loading Blog
  1. Login ke- Blogger
  2. Copy kode jQuery berikut, dan Pastekan pada Template blog anda
  3. Diatas atau sebelum kode penutup </head>
<script type='text/javascript'>//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUp0V3G7wUj1g6vmNfOuq2kEYBK7vC6KkOzXkmZbgAxWnfZmeRuswaqOG5FPP3IIDHb4Res_dL8eZHMtcXsHtytBL8iU8bSPWkFmFnEY-4q7CBEK-eTHhbqHbLlnfAxlFC4KmWOrfhnVc/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

Update -
Cek kembali kecepatan loading halaman blog anda, jika angka speed load berubah, maka saya ucapkan anda berhasil Memasang jQuery Untuk Mempercepat Loading Blog.
Semoga bermanfaat dan Happy blogging to All

19 Januari 2014

Membuat Navigasi Menu Fixed Full RotateX

Membuat Navigasi Menu Fixed Full RotateX

Membuat Navigasi Menu Fixed Full RotateX - Seperti yang terlihat pada umumnya di blog, Membuat Menu Navigasi akan dapat merangkum beberapa file atau tulisan anda yang tersusun dengan rapi dalam satu paket yaitu Menu Navigasi. Melanjutkan pembahasan sebelumnya tentang Membuat Menu Wrapper Melayang Di Atas Blog, saya menambahkan beberapa menu yang terletak diatas header dengan menggunakan Fixed Full RotateX seperti yang terlihat diatas header blog ini.

Kode Fixed bertujuan bilamana fungsi scroll mouse digeser menu tesebut akan tetap berada di posisi semestinya karena tidak akan ikut bergeser mengikuti arah scroll, sehingga walau pengunjung berada atau diposisi kolom komentar masih dapat melihat menu tersebut, sedangkan Full RotateX merupakan gaya untuk memanggil drop down menu apabila salah satu menu terlintas oleh scroll mouse.

Apabila ingin Membuat Navigasi Menu Fixed Full RotateX di blog, berikut kode CSS dan HTML yang dapat anda copy untuk keindahan blog anda :



#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {
   border-bottom:2px solid #cecece;
   margin:0 auto;
   text-align:center;
   position:relative;
   height:40px;
   z-index:999;
   background:#0091d6;
   -moz-perspective: 100px;
   -webkit-perspective: 100px;
   -o-perspective: 100px;
   perspective: 100px;}

.menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {
   padding:0;margin:0;
   list-style:none;
   display:inline-block;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;}

.text-logo { 
   text-align:center;position:absolute;
   position: fixed;left: 52px;z-index: 999;
   overflow: hidden;color:white;
   font-weight:bold;margin-top:-34px;
   border-bottom:3px solid red;}

.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}

.menu3Dflip ul.nav li:hover a.top-a {
   background:red;
   border-radius:8px 8px 0 0;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);}

.menu3Dflip ul.nav div {
   position:absolute;
   top:40px; left:4px;
   background:#09c;
   padding:5px 0 10px 0;
   border-radius:0 0 15px 15px;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;

   -moz-transform-origin: 0px 0px;
   -moz-transform: rotateX(-90deg);
   -webkit-transform-origin: 0px 0px;
   -webkit-transform: rotateX(-90deg);
   -o-transform-origin: 0px 0px;
   -o-transform: rotateX(-90deg);
   transform-origin: 0px 0px;
   transform: rotateX(-90deg);
   -moz-backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;}

.menu3Dflip ul.nav div.left {left:auto; right:4px;}
.menu3Dflip ul.nav div ul {
   padding:10px 0; list-style:none;
   width:140px; margin:10px 5px 0 5px;
   float:left; display:inline;
   text-align:left; background:#fff;
   border-radius:6px;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);}

.menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}

.menu3Dflip ul.nav div ul li a {
   display:block; width:105px;
   text-decoration:none;
   font:13px/16px arial, sans-serif;
   color:#069; margin:0;
   padding:4px 0 4px 15px;
   background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbPQJFTn4PjkxDR0jjZZSnMQnRM_5aqyBxGlGKQH91LR-6yWsO28nobIMLqDclFLf75g4XKycHa2oUwGpsQ77EOTc-HGv7oiVdVxutbVhQjVbMJiMyj4D6rESuwb-CQNf28aohQJE0eQ/h120/arrow.gif) no-repeat left center;}

.menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqbPQJFTn4PjkxDR0jjZZSnMQnRM_5aqyBxGlGKQH91LR-6yWsO28nobIMLqDclFLf75g4XKycHa2oUwGpsQ77EOTc-HGv7oiVdVxutbVhQjVbMJiMyj4D6rESuwb-CQNf28aohQJE0eQ/h120/arrow.gif) no-repeat 1px center;}

.menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div {
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg);

.logo {
   text-align:left;position:absolute;
   position: fixed;top: 0;left: 5px;
   z-index: 999;overflow: hidden;}


<div id='menufixed'>
  <div class='menu3Dflip'>
    <ul class='nav'>
      <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 1</a>
<div class='col3'>
    <ul class='colLeft'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 2</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
  <ul class='col'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
  </ul>
    <ul class='colRight'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 10</a></li>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 11</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 2</a>
<div class='col2'>
    <ul class='colLeft'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 2</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
      <ul class='colRight'>
        <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
        <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 2</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 3</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 4</a>
<div class='col2 left'>
    <ul class='colLeft'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
    <ul class='colRight'>
      <li><a href='http://sahabatblogger77.blogspot.com'>Sub Menu 1</a></li>
      //dan seterusnya.....
      <li>....</li>
      <li>....</li>
    </ul>
</div>
      </li>
      <li><a class='top-a' href='http://sahabatblogger77.blogspot.com'>Menu 5</a>
    </ul>

<div class='logo'>
<img alt='Logo Blog' height='40' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-5K1zWK6PMfQ8Lg1TfsSs8WTlKIzhN_xsmjnzLKSTyL-PAFlx2YX9R7avmOfs_nl4vva5feoiwyVJ6MqKrQu-nmPkHWA6TctmQcwBbXDa5L98WW54BSeUuSRmwKNHGvrrYOw6GAVUIM/s200/unduhan+(3).jpg' width='40'></div>

<div class='text-logo'>
SAHABAT BLOGGER 77
</div>
  </div><!!..ending to class='menu3Dflip'..!!>
</div><!!..ending to id='menufixed'..!!>


Keterangan -
  1. Untuk CSS letakkan diatas atau sebelum kode ]]></b:skin>
  2. Copy Kode HTML, lalu Paste dibawah kode pembuka <body>
  3. Pratinjau Template, jika terlihat Ok, lalu Simpan Template dan lihat hasilnya
  4. Jika ada posisi blog yang tertutupi, cari kode #header{...} lalu sesuaikan margin topnya dengan menambahkan kode ( ;margin-top:30px; ), simpan kembali template Anda, maka hasilnya akan seperti ini:



DEMO SHOW




Namun apabila anda mengalami kesulitan dalam meng-Edit Template, hapus semua kode tadi yang sebelumnya sudah terpasang, dan simpan Kode CSS dan HTML pada widget HTML/Javascript. Caranya satukan kode CSS dan HTML diatas lalu tambahkan tag pembungkus elemen seperti ini:
<style type="text/css">..Kode CSS..</style>..Kode HTML..

Contoh -

<style type="text/css">
#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {border-bottom:2px solid #cecece;..................;}
</style>

 <div id='menufixed'>
<div class='menu3Dflip'>
    <ul class='nav'>
        <li><a class='top-a' href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Home</b></a>
        <li><a class='top-a' href='http://sahabatblogger77.blogspot.com' target='_blank'><b>Menu 1</b></a>
        <div class='col3'>
            <ul class='colLeft'>


Terakhir simpan perubahan.
Demikian akhir Membuat Navigasi Menu Fixed Full RotateX, semoga bermanfaat.




Telah diperbaharui dan di Desain Ulang
Oleh: Devy Indriyani at "21 September 2014"

16 Januari 2014

Membuat Efek Lensa Flip 3D Pada Gambar

Efek Lensa Flip 3D
Membuat Efek Lensa Flip 3D Pada Gambar - Membuat Gambar pada artikel blog sudah hal yang biasa, karena dengan adanya gambar pada tulisan dapat memudahkan pengunjung untuk memahami tujuan dari isi tulisan pada blog, tetapi merubah gambar tersebut agar terkesan unik dan menarik di mata pengunjung tidak banyak yang melakukannya.

Seperti Efek Remote Link Pada Gambar sebelumnya, di artikel kali ini saya akan mencoba mengubah efeknya menjadi sebuah LENSA PEMBESAR saat mouse anda menyentuh gambar. Detailnya kursor panah mouse anda seolah-olah akan bertindak sebagai lensa untuk melihat ukuran gambar menjadi 3 Dimensi saat anda menyorot obyek. Membutuhkan waktu yang cukup lama saat menggabungkan antara kode script dengan CSS Code, dan memodifnya sedikit sehingga akan memberikan titik fokus pada obyek yang kita tentukan dan menghasilkan Efek Lensa Flip 3D Pada Gambar Seperti berikut :


Web Page


Buat sahabat-sahabat Tercinta SAHABAT BLOGGER 77  yang mau mencoba, pintu hatiku selalu terbuka untukmu...Hufft..!! jadi kayak maaf-maafan neh, hehehe...
OK deh..Berikut kode Membuat Efek Lensa Flip 3D Pada Gambar, Silahkan COPY lalu PASTE pada mode HTML halaman postingan anda
<center>
<style>
#iphone{
width:550px;
height:293px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHZFBdQVJ4LoGpXEGaxAFqcPgOMPEEdzWpCURZrGRUQ8CIHImMtVNHdOiZWnyG_XYq49aUvodMr7zdWSTt-xktZFXtROTBPiZkkk_dAuuQVmjoVONYW6JMsrDf2WRjxAn3TdKgClKaFEk/s1600/garden_beautiful.jpg') no-repeat center center;
position:relative;
}
#webpage{
width:365px;
height:207px;
position:absolute;
top:63%;
left:62%;
margin:-141px 0 0 -249px;
}
#retina{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW3EpS3iWDV9OxOPPAFUna5kdeaytC6VRtgRhfA-xijiFmTMRMd-_ucmJ0z0ufgDgnxtPksGIqrrYnhGH78e60KzkHb3TdhMD8Yc-r5KyI2WmgYPhgxb24W0wnGZIC35PtYQRjEUj3WQs/s1600/pictures-sahabatBLOGGER+77.jpg%3C/span>') no-repeat center center white;
border:2px solid white;
position:absolute;
height:180px;
width:180px;
display:none;
-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-webkit-box-shadow:0 0 5px #777;
box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
-moz-border-radius:90px;
-webkit-border-radius:90px;
border-radius:90px;
}
</style>

<div id="iphone">
<div id="webpage">
<img alt="Web Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW3EpS3iWDV9OxOPPAFUna5kdeaytC6VRtgRhfA-xijiFmTMRMd-_ucmJ0z0ufgDgnxtPksGIqrrYnhGH78e60KzkHb3TdhMD8Yc-r5KyI2WmgYPhgxb24W0wnGZIC35PtYQRjEUj3WQs/s1600/pictures-sahabatBLOGGER+77.jpg%3C/span>" height="207" width="365" />
<div id="retina">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://faceblog-evolutions.googlecode.com/files/script.js" type="text/javascript"></script></center>

Keterangan -

  1. Teks Biru adalah Gambar 1 (Gambar Lensa Flip)
  2. Teks Merah adalah Gambar 2 (Gambar Utama)
  3. Silahkan Ganti dengan URL gambar anda dengan URL gambar yang sama
  4. Selamat Mencoba Membuat Efek Lensa Flip 3D Pada Gambar, semoga bermanfaat
  5. Terima Kasih

15 Januari 2014

Gambar Otomatis Berubah Saat Tersentuh Mouse

Gambar Otomatis Berubah Saat Tersentuh Mouse
Seperti judul Artikel berikut Gambar Otomatis Berubah Saat Tersentuh Mouse, maka saat gambar pada postingan anda yang dilewati atau tersentuh mouse, secara otomatis gambar default pada postingan anda akan berubah tampilan dengan gambar lain. Seperti Membuat Tampilan Gambar Berputar Di Blog maka gambar tersebut akan berputar saat tersentuh mouse, tidak jauh berbeda dengan cara Membuat Gambar Otomatis Berubah Saat Tersentuh Mouse kali ini, hanya sedikit modifikasi dengan menggunakan CSS3 Keyframe Animasi, sehingga menghasilkan 2 gambar berbeda, yang mana gambar 1 tampil sebagai dafault dan gambar 2 akan tersembunyi, Gambar 2 akan tampil untuk menggantikan gambar 1 saat mouse menyentuh gambar 1.

Jika anda tertarik ingin mencoba dan menerapkannya pada postingan blog anda, jangan pindah channel blog anda. Ambil cemilan kebelakang sebentar, kembali lagi disini, duduk manis dan berikut kode Membuat Gambar Otomatis Berubah Saat Tersentuh Mouse. ( Hehehehe.......!!! )

Kode I - CSS3 Keyframe Animasi

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;

  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;

  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;

  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;

  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}

Kode II - Pulloutimage{...}

<div class="pulloutimage" style="height:250px">
<a href="http://sahabatblogger77.blogspot.com" target="_blank"><img class="original" height="250" src="https://1.bp.blogspot.com/-UChM8bWWvSM/Utars3sYSII/AAAAAAAAAh8/CQVnyS0CI9o/s200/Devy-Indriyani.jpg%3C/span>" width="320" /></a>
</div>


Menerapkan Ke- Blog
  1. Login keblogger
  2. Pilih Template >> SESUAIKAN >> Pilih Menu "Tingkat Lanjut"
  3. Di sebelah kanan Copy KODE I pada tab halaman Tambahkan CSS
  4. Terapkan ke Blog
  5. Selanjutnya, pada postingan baru Copy KODE II pada mode HTML
Keterangan -
  1. Ganti teks yang berwarna Merah pada KODE II dengan URL blog anda
  2. Jika ingin Menggunakan gambar sendiri, ganti teks Biru dengan URL gambar anda
  3. Sesuaikan lebar dan tinggi gambar anda pada kode "Width" dan "Height"
SELAMAT MENCOBA, Demikian cara membuat Gambar Otomatis Berubah Saat Tersentuh Mouse

14 Januari 2014

Membuat Menu Wrapper Melayang Di Atas Blog

Membuat Menu Wrapper Melayang Di Atas Blog
Membuat Menu Wrapper Melayang Di Atas Blog - Mungkin anda ingin menampilkan sesuatu Menu atau sekedar kalimat dapat melayang diatas halaman blog, Membuat Menu Wrapper Melayang Di Atas Blog hampir sama penerapannya dengan membuat beberapa widget melayang disamping kanan, kiri atau berada ditengah saat halaman blog di buka, dan cara ini hampir sebagian besar pengguna blog mengerti cara membuatnya, tetapi karena pertanyaan Mas +Guntur Tampubolon kepada saya tentang bagaimana membuat menu dapat melayang diatas blog, karenanya tutorial ini saya persembahkan buat sahabat kita yang mungkin membutuhkan tutor ini, buat sahabat pecinta SAHABAT BLOGGER 77 yang juga ingin mencoba Membuat Menu Wrapper Melayang Di Atas Blog dipersilahkan untuk meng-Copy kodenya, Hehehe...

Berikut kode Membuat Menu Wrapper Melayang Di Atas Blog


#top-menuwrapper {
  background: #FFFFFF;
  height: 60px;
  width:100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index:999;
  overflow:hidden;
  border-bottom:3px solid red;
  border-bottom: 2px double green;
}

#top-menuwrap, #top-menuwrap2 {
  width:100%;
  margin: 0 auto;
  padding-left: 1%;
  padding-right: 1%;
}
#top-menu {width: 100%;}
.logo {
  padding:18px;
  float:left;
  font-family:'Montserrat', Oswald;font-size:160%;
  text-transform: uppercase;
  font-weight: 300;
}

.logo a {
  color: #000;
  text-decoration: none;
  margin-top: -5px;
}

.logo img {margin-top: 13px;}
.element {position: relative;}

<div id='top-menuwrapper'><div style='position:absolute;padding-top:5px;'><img alt="" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl-5K1zWK6PMfQ8Lg1TfsSs8WTlKIzhN_xsmjnzLKSTyL-PAFlx2YX9R7avmOfs_nl4vva5feoiwyVJ6MqKrQu-nmPkHWA6TctmQcwBbXDa5L98WW54BSeUuSRmwKNHGvrrYOw6GAVUIM/s200/unduhan+(3).jpg" width="50"/></div><a expr:href='data:blog.homepageUrl' target='_blank' title='Nama Anda'><span style='color:blue;padding-top:-4;padding-left:70px;padding-bottom:10px;margin:5px;position:absolute;font-family:Cosmic san MS;font-weight:bold;font-size:24px'>Title Blog Anda</span></a><br/><span style='color:#222;padding-top:5px;padding-left:65px;padding-bottom:10px;margin:10px;position:absolute'>Deskripsi Singkat Blog Anda</span></div>

Tahap Pengaturan Lay-out (Tata Letak Menu Navigasi Fixed)
Pada tahap ini, silahkan sesuaikan tinggi header blog Anda, karena kode berikut tidak mutlak - jika Anda menggunakan height:50px pada menunya, maka sesuaikan dengan pengaturan margin-top header blog Anda.

;margin-top:25px;margin-left:auto;margin-right:auto;

Cara Membuat Menu Wrapper Melayang Di Atas Blog
  1. Login Ke- Blogger
  2. Template >> Edit (Backup Template untuk menghidari kesalahan)
  3. Cari kode #wrapper{....} yang terletak diantara kode <b:skin>...</b:skin>
  4. Copy Kode CSS Tepat diatasnya
  5. Selanjutnya Cari kode <body> pembuka
  6. Copy Kode HTML setelah atau dibawahnya
  7. SIMPAN Template, dan lihat hasilnya
Halaman blog anda mungkin akan terlihat sedikit berantakan, selanjutnya tambahkan Kode Pengaturan lay-out pada kode #wrapper{....}, sehingga akan menjadi #wrapper{.....;margin-top:25px;margin-left:auto;margin-right:auto;}, angka 25px silahkan anda sesuaikan dengan tinggi margin pada HEADER blog anda. Lihat kembali hasilnya, maka akan terlihat Rapi dan mengagumkan. hehehe...

Keterangan -
  1. Ganti teks yang berwara Merah sesuai Nice blog anda
  2. Jika ingin mengganti logo, ganti teks yang berwarna Biru dengan URL gambar Anda
  3. SELESAI
Terimakasih sudah berkunjung di artikel saya tentang Membuat Menu Wrapper Melayang Di Atas Blog, semoga dapat bermanfat.

= SELAMAT MENCOBA =
Perbaikan tanggal 29 Maret 2014, Sabtu

13 Januari 2014

Membuat Gambar Dengan Efek Zoom Hover CSS3

Membuat Gambar Dengan Efek Zoom Hover CSS3
Membuat Gambar Dengan Efek Zoom Hover CSS3 - Lagi-lagi tentang mendesain gambar gallery foto, jika sebelumnya telah dibahas tentang Cara Membuat Efek Remote Link Pada Gambar, dengan belajar CSS3 anda bisa menghemat ruang postingan blog anda dengan Membuat Gambar Dengan Efek Zoom Hover CSS3.

Cara Membuat Gambar Dengan Efek Zoom Hover CSS3 berikut pantas buat anda pemilik blog yang sebagian besar postingannya tentang share foto/gambar, karena pada gallery ini default layout gambar hanya akan berbentuk thumbnail yang tampil didalam posting blog anda, sehingga tidak akan memanjang kebawah jika gambar yang anda posting cukup banyak, namun nampak akan membesar jika pada gambar tersebut tersentuh oleh mouse.

Buat anda yang gemar mendesain gallery gambar agar terlihat unik seperti Cara Membuat Tampilan Gambar Berputar Di Blog, berikut cara efisien dan minimalis dan terlihat elegant dengan Membuat Gambar Dengan Efek Zoom Hover CSS3.

I. Copy kode berikut saat anda menulis postingan di mode HTML


<style>
#sb77-gallery { overflow: visible; }
#sb77-gallery ul li { list-style:none; display:inline-table; padding:5px; }
#sb77-gallery ul li .pic {
   -webkit-transition: all 0.6s ease-in-out;
   -moz-transition: all 0.6s ease-in-out;
   -o-transition: all 0.6s ease-in-out;
   opacity:0;visibility:hidden;
   position:absolute;
   border:1px solid #52e052;
   -webkit-box-shadow:#272229 2px 2px 10px;
   -moz-box-shadow:#272229 2px 2px 10px;
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
   box-shadow:#272229 2px 2px 10px;}

#sb77-gallery ul li .mini:hover { cursor:pointer; }
#sb77-gallery ul li:hover .pic {
   width:550px;
   height:350px;
   opacity:1;
   visibility:visible;
   float:right;}
</style>

<div id="sb77-gallery">
      <ul>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini"  width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li><URL GAMBAR ANDA.jpg" class="mini" width="100" height="100"/>
               <URL GAMBAR ANDA.jpg" class="pic"/></li>
         <li>.......dan seterusnya..</li>
//tambahkan jika memuat gambar lebih banyak lagi..
...
    </ul>
</div>


II. Ganti URL gambar dengan URL gambar anda
III. Sentuh gambar dengan mouse pada tombol DEMO SHOW dibawah ini:





DEMO SHOW



SHOW GALLERY EFFECT

Membuat Koleksi Gambar Hover Efek Zoom Right
Perpindahan Slide Gambar Tanpa Lompatan
Kumpulan Ragam Efek Pada Gambar

HAPPY BLOGGING

11 Januari 2014

Daftar Domain Situs Penyedia Backlink Berkualitas | SEO

Daftar Domain Situs Penyedia Backlink Berkualitas | SEO
Daftar Domain Situs Penyedia Backlink Berkualitas | SEO
Berbicara tentang Backlink, SEO, dan Optimasi Blog akan selalu terus continue dan tidak akan pernah ending jika memang menginginkan sukses dalam bidang blogging. Blog haruslah ter-Optimasi, optimasi blog dengan Template SEO friendly dan blog harus memiliki Backlink yang Berkualitas. (sumber - Pakar SEO).
Sangat sulit belajar SEO, terlebih seperti saya yang masih pemula di blog, hanya dihadapkan dengan 3(tiga) hal tahapan diatas saja sudah buat bingung, dibutuhkan kesabaran extra untuk memecahkan peringkat blog yang masih berbentuk bulat, hehehe...!!!

Ok..!! dech sebelum kita bahas ke-tiga tahapan diatas, saya akan share salah satu tahapan berikut tentang Backlink Berkualitas, karena Backlink sangatlah penting untuk optimasi blog. Banyak cara untuk mendapatkan/mencari Backlink berkualitas, salah satunya seperti artikel saya sebelumnya tentang Cara Cepat Mendapatkan Backlink Berkualitas, atau dengan cara lain yang sering kita lakukan untuk Mencari Backlink Melalui Kolom Komentar.

Oleh karena sifatnya yang sangat di butuhkan, berikut Trik SEO untuk mendapatkan backlink tersebut melaui Daftar Domain Situs Penyedia Backlink Berkualitas | SEO di bawah ini :

Backlink Berkualitas | SEO

I. DOMAIN .GOV
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDUQFjAB&url=http%3A%2F%2Fwww.newportbeachca.gov%2Fredirect.aspx%3Furl%3Dhttp&ei=gInRUqmsE8GXrge3oYGIAQ&usg=AFQjCNHjnt6KQP3u3Oem5Y-GDSTSzjbL8w&sig2=n45aV5Gp7Jo5L9QVbkEnBw&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&ved=0CD0QFjAC&url=http%3A%2F%2Fwww.maplevalleywa.gov%2Fredirect.aspx%3Furl%3Dhttp&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNFkWjX98-FBnBky3RNiPt5ZqoqGSA&sig2=9HPsxdU70BxYiRNvHY93DQ&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&ved=0CE8QFjAE&url=http%3A%2F%2Fwww.wdm.iowa.gov%2Fredirect.aspx%3Furl%3Dhttp&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNHdAznqiBg0YiZjiz5HSb3O2pXg2Q&sig2=zmM6YPHRUETvE8oUicG7AA&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=10&cad=rja&ved=0CH0QFjAJ&url=http%3A%2F%2Fwww.cathedralcity.gov%2Fredirect.aspx%3Furl%3Dhttp&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNEHTer0DQTHu6UJmRSTphB1K8wjuQ&sig2=7b5SzsQpodAxnqTnW9O39w&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=15&cad=rja&ved=0CEwQFjAEOAo&url=http%3A%2F%2Fwww.lexingtonky.gov%2Fredirect.aspx%3Furl%3Dhttp&ei=hYzRUuC7DYqBrgeVyYGgCQ&usg=AFQjCNF4ELHpiig41tubpVSgi1sjp-lhMQ&sig2=DTV0pAxfKXgFz_5UIB53LQ&bvm=bv.59026428,d.bmk

II. DOMAIN .EDU
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&ved=0CDQQFjAB&url=http%3A%2F%2Fwww.cancer.ucla.edu%2Fredirect.aspx%3Furl%3Dhttp%3A&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNG6mRWMtDvXosn0KIAbHYpBRuDXvA&sig2=8tyYQm93f3TzbJl9SzlsYw&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=27&cad=rja&ved=0CF4QFjAGOBQ&url=http%3A%2F%2Fwww.reedleycollege.edu%2Fredirect.aspx%3Furl%3Dhttp&ei=jo3RUoKVGsWLrQfEnIDIAw&usg=AFQjCNEh9vgtoOuQmcSb02DJrCjvh0amBA&sig2=HCF121rJZ_uylrILmaPj5Q&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=45&cad=rja&ved=0CE8QFjAEOCg&url=http%3A%2F%2Fwww.uav.edu%2Fredirect.aspx%3Furl%3Dhttp&ei=6o3RUuX5BMiUrAeq9oHgBg&usg=AFQjCNGARsYPItPEVHQbQNONjfOQRACzvQ&sig2=O-yjXCvqP64UGf07g_Ba2Q&bvm=bv.59026428,d.bmk

III. DOMAIN .ORG
https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=9&cad=rja&ved=0CHQQFjAI&url=http%3A%2F%2Fwww.parkcity.org%2Fredirect.aspx%3Furl%3Dhttp&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNGIGPGR57iyQ5Rynxjl0xvuLrh6Jg&sig2=G1-1L3PnGYAKA1RQqo4Ohw&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cad=rja&ved=0CEYQFjAD&url=http%3A%2F%2Fwww.applevalley.org%2Fredirect.aspx%3Furl%3Dhttp%3A&ei=w4rRUpe4OsymrQe0g4GAAg&usg=AFQjCNFPLxGKTJKr9KPekIhOTHqxi3a-OA&sig2=OnK2ylNoRQhnDv9Ci7yOEw&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=11&cad=rja&ved=0CCcQFjAAOAo&url=http%3A%2F%2Fwww.hamilton-city.org%2Fredirect.aspx%3Furl%3Dhttp&ei=hYzRUuC7DYqBrgeVyYGgCQ&usg=AFQjCNHnQTkMSvtuATGn-01QDEiILRyX-g&sig2=7UQbHkc3xaEDm6pRAv29Og&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=7&cad=rja&ved=0CGIQFjAG&url=http%3A%2F%2Fwww.gardencityga.org%2Fredirect.aspx%3Furl%3Dhttp&ei=OI_RUtiYFomRrAfX5ICgAg&usg=AFQjCNHLQBSeLjFLwbv-W9nYJU7De4WLvw&sig2=Or5N4iwd23vRwXyAvs2FJQ&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=14&cad=rja&ved=0CEMQFjADOAo&url=http%3A%2F%2Fwww.portolavalley.net%2Fredirect.aspx%3Furl%3Dhttp&ei=vY_RUsboDsj_rAfAjYC4AQ&usg=AFQjCNEfXTYZhdXbU31SKXK6PryqX_QfvQ&sig2=oYQdZC4oqRafXd22OFtsTw&bvm=bv.59026428,d.bmk

https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=webhp&cd=20&cad=rja&ved=0CHsQFjAJOAo&url=http%3A%2F%2Fwww.dorchestercounty.net%2Fredirect.aspx%3Furl%3Dhttp%3A&ei=vY_RUsboDsj_rAfAjYC4AQ&usg=AFQjCNG_6F8_kqSNw_Y98FcVr0OOVzSX2Q&sig2=fyEa1eRZKkJzaZYn5C4vMQ&bvm=bv.59026428,d.bmk

Berikut Tutorial Cara mendapatkan backlink dari situs EDU, GOV dan ORG
  1. Silahkan pilih salah satu daftar Domain situs sesuai keinginan anda
  2. Copy URL situs, Lalu Paste pada TAB baru browser anda
  3. Kemudian masukkan URL blog anda pada URL domain situs - Tekan ENTER
    Contoh : Domain situs - http://www.newportbeachca.gov/redirect.aspx?url=http + Url Blog sahabatblogger77.blogspot.com, maka akan menjadi
    http://www.newportbeachca.gov/redirect.aspx?url=http://sahabatblogger77.blogspot.com
  4. Kemudian Klik link URL blog anda atau Klik External Link - Lihat gambar
  5. SELESAI
Dan semoga Daftar Domain Situs Penyedia Backlink Berkualitas | SEO ini dapat memberikan Backlink berkualitas untuk optimasi blog anda, sebagai tambahan, jangan terlalu sering melakukan hal diatas, sebaiknya lakukan maksimal 3 URL blog anda setiap 3hari sekali, dan jangan tempatkan backlink tersebut hanya pada Beranda.

SELAMAT MENCOBA
- Terima Kasih -

10 Januari 2014

Mengajak Pengunjung Agar Tertarik Untuk Berkomentar

Mengajak Pengunjung Agar Tertarik Untuk Berkomentar - " PENASARAN " mungkin kata ini yang tepat untuk menggambarkan makna judul artikel tentang bagaimana Mengajak Pengunjung Agar Tertarik Untuk Berkomentar Di Blog, Karena anda sendiri sebagai pemilik blog tidak pernah tahu jumlah pengunjung yang berlalu lintas di blog anda setiap harinya, tetapi dengan adanya seseorang yang berkomentar di blog, sudah dipastikan ada tamu yang berkunjung di salah satu artikel blog anda.

Mengajak Pengunjung Agar Tertarik Untuk Berkomentar

Apakah pengunjung yang berkomentar di blog itu penting.?  sederhana saja, misalnya saja anda saat ini sedang rapat untuk membahas satu topik dan anda sebagai moderatornya, dengan berbicara, berceramah semua sudah anda sampaikan dalam rapat dan kata penutup anda berbicara bertanya.." APAKAH ADA PERTANYAAN DARI REKAN-REKAN SEKALIAN.? " tetapi yang terjadi tidak satupun anggota rapat yang memberikan komentar, Bagaimana perasaan anda.? sudah pasti topik yang anda bahas tidak akan menemukan jalan terang bukan.?
Begitupun dengan blog, dengan adanya komentar kita bisa sharing, memberi sedikit tambahan pengetahuan jika tulisan artikelnya kurang lengkap dan sebagai tempat berkenalan sesama blogger pastinya.

Jika anda sama seperti saya, yang sangat senang jika ada pengunjung yang berkomentar di blog anda, berikut Tips sederhana bagaimana Mengajak Pengunjung Agar Tertarik Untuk Berkomentar Di Blog.

Gambar Diskusi Untuk Berkomentar

I. ARTIKEL

Kolom komentar berada dibawah Artikel/Tulisan atau Postingan Blog, bukan ada dibawah Home Page, benar tidak guys..? hehe... Jadi pastikan artikel anda asli (Original). Dan buatlah se unik mungkin, maksudnya disini pastikan konten tulisan anda yang seakan-akan mengajak pengunjung/pembaca ikut serta untuk melengkapi tulisan artikel anda. Dengan begitu pengunjung/pembaca akan merasa seolah-olah ikut menulis dengan anda, dan yang pasti pengunjung akan melengkapi dengan memberi komentar.

II. TEMPLATE

Hal ini di fokuskan pada penampilan Template di blog anda, kalau masalah Penampilan Template mungkin anda sudah lebih paham dibanding saya. karena pada dasarnya berat-ringannya loading suatu blog itu sangat berpengaruh dengan Template yang anda gunakan pada blog. Maksudnya - misalnya anda ingin berkunjung kesalah satu artikel saya, tetapi saat anda browsing blog tidak kunjung terbuka karena loading yang berat, apakah anda akan menunggu.? tentu tidak..! Justru anda akan di off blog saya bukan.?
Dengan hal ini bagaimana pengunjung mau berkomentar, sedangkan untuk menuju halaman blog saja harus menunggu lama.

III. PERMUDAH BERKOMENTAR

Sesuai dengan topik diatas bagaimana cara Mengajak Pengunjung Agar Tertarik Untuk Berkomentar dengan mempermudah cara berkomentar, sedikit banyaknya dapat membantu pengunjung untuk berbagi di blog anda, karena pengunjung akan segera melihat isi komentarnya setelah dipublikasikan di blog anda, dengan begitu pengunjung akan merasa yakin jika komentarnya akan anda lihat.

Bagaimana jika komentar itu termasuk SPAM.? sedikit tambahan, kita hanyalah pengguna dan GOOGLE pemiliknya, kita sudah berusaha untuk memuat konten artikel yang berstandar menurut google, tetapi dikotori dengan komentar-komentar SPAM, maka google akan mem-BANNED blog komentar spam bukan blog penerima komentar spam. Namun jika anda masih khawatir akan hal ini, anda boleh moderasi komentar blog anda.

Dan usahakan untuk membalas semua komentar yang masuk secepat mungkin, karena tidak menutup kemungkinan mereka akan datang kembali ke blog anda untuk melihat apakah hal yang ditanyakan di komentar dapat respon dari anda.

Cukup sekian bagaimana cara Mengajak Pengunjung Agar Tertarik Untuk Berkomentar di Blog dari saya, jika anda sudah menerapkan ketiga hal diatas, dan menunggu komentar dari pengunjung, namun tidak ada juga yang berkomentar. ITU BERARTI ANDA BELUM BERKOMENTAR DI BLOG INI.
Bagaimana saya akan berkomentar di blog anda, sedangkan anda saja tidak tertarik untuk berkomentar di blog saya..? Beri Komentar yuuuukkk.. Hehe..!!!

8 Januari 2014

Cara Tepat Untuk Menghadapi Intimidasi

Cara Tepat Untuk Menghadapi Intimidasi - Intimidasi (Bullying) adalah penggunaan kekerasan atau paksaan yang dilakukan orang tertentu untuk menyalahgunakan atau meng-intimidasi orang lain. Tepatnya kebebasan hidup bersosial telah dirampas oleh orang lain yang meng-intimidasi, baik itu secara fisik ataupun perkataan, seperti pelcehan lisan atau dapat berupa ancaman yang diarahkan berulang kali kepada orang tertentu, mungkin atas dasar RAS, AGAMA, GENDER, SEKSUALITAS atau KEMAMPUAN.

Cara Tepat Untuk Menghadapi Intimidasi

Masalah Bullying/Intimidasi perlu diperhatikan karena tidak ada alasan seseorang harus menggangu kehidupan atau kebebasan orang lain, dan perbuatan yang tercela ini tidak baik untuk ditiru.
Karena untuk Belajar bagaimana untuk menghadapi intimidasi akan memerlukan banyak waktu terlebih jika kata-kata yang dilontarkan si pelaku intimidasi kepada kita begitu menyakitkan. Jika anda sedang melihat seseorang sedang melakukan intimidasi ataupun Anda yang sedang mengalami prilaku intimidasi tidak boleh membiarkan hal ini dengan tenang.

Cara Tepat Untuk Menghadapi Intimidasi berikut ini, mudah-mudahan dapat memberikan atau membantu anda sebanyak mungkin untuk menghadapi Intimidasi (Bullying) sehingga kejadian ini tidak akan terulang lagi, baik itu tehadap diri kita maupun lingkungan kehidupan kita.

1. Berkomunikasi Dengan Orang Lain
Ketika mengalami Intimidasi, bicaralah kepada orang terdekat Anda atau yang berwenang. Dan cobalah untuk berdiskusi kepada mereka atas apa yang anda alami atau anda saksikan.

2. Pastikan Anda Di Dengar
Terkadang apa yang kita bicarakan tentang hal ini mereka tidak mau menanggapi, karena banyak orang yang juga mengetahui hal ini lebih memilih untuk diam dan tidak melakukan apa-apa, Mereka tidak berpikir serius atau tidak tahu bagaimana menghadapinya.
Cobalah untuk memberitahukan kepada lebih dari satu orang, karena semakin banyak orang yang Anda beritahu, maka semakin dekat pula peluang anda untuk di dengar.

3. Hindari Situasi Tersebut
Hal ini Memang cukup sulit untuk dilakukan, karena mungkin kita berada ditengah-tengah situasi tersebut, Tetapi pada dasarnya anda tidak ingin mengalami hal ini bukan.? Berusahalah untuk menghindar karena salah satu cara yang paling efektif untuk Menghadapi Intimidasi adalah dengan membawa diri keluar dari situasi tersebut.

Cara Tepat Untuk Menghadapi Intimidasi

4. Berani
Menunjukkan bahwa anda TIDAK TAKUT juga merupakan cara efektif untuk Menghadapi Intimidasi, karena dengan membiarkan anda di intimidasi dengan alibi SABAR, maka pelaku intimidasi akan semakin semena-mena terhadap anda, sebab kesabaran anda dianggap sebuah KELEMAHAN.

5. Tidak Membalas Dengan Hal Yang Sama
Membalas dengan hal yang sama bukanlah perbuatan yang terpuji, Kebencian tidak harus ditanggapi dengan kebencian, karena permasalahan tidak akan ada habisnya, yang ada malah memperburuk keadaan dan tercipta siklus yang berkelanjutan.

6. Jangan Terlihat Lemah
Jangan menghabiskan terlalu banyak waktu bersama si pelaku, karena itu akan memberikan ruang kepada si pelaku untuk mencari titik lemah anda, Jangan terlibat dalam kasus kekerasan atau anda terpancing emosi. Dan yang terpenting adalah jangan biarkan sipelaku Intimidasi melihat anda menangis.

Cara Tepat Untuk Menghadapi Intimidasi

7. Cari Perlindungan/Dukungan
Jika tidak bisa menghadapi sendiri, carilah bantuan dan dukungan. Adanya kelompok atau sebuah organisasi masyarakat pendukung (Anti Intimidasi) akan banyak dapat membantu Anda memberikan dukungan MORIL terutama pada kasus Intimidasi(Bullying) yang ekstrim.
Hal yang paling penting untuk di ingat adalah bahwa Anda tidak sendirian, Orang lain juga bisa mengalami hal yang sama, dan anda akan lebih kuat jika bersama-sama daripada anda menghadapinya sendirian.

Terima Kasih. Semoga dengan kita bersatu, Bersama kita bisa menghadapi dan hentikan Intimidasi. Demikian Cara Tepat Untuk Menghadapi Intimidasi, semoga bermanfaat.

Devy Indriyani