tag:blogger.com,1999:blog-8150421698068818692023-02-23T18:42:18.628+08:00 Jurnal Blog - Artikel Seputar Tips Blogging, SEO, Widget, MonetasiTempatnya Berbagi Informasi Menarik Seputar Pengembangan Blog dan Internet MarketingAmer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.comBlogger72125tag:blogger.com,1999:blog-815042169806881869.post-5131961451139233562017-11-17T14:01:00.001+08:002017-11-17T14:03:14.705+08:00Penyebab Loading Blog/Website Berat atau Lambat dan Cara Mengatasinya<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-TMwqSPbuXK4/Wg5608Hp9gI/AAAAAAAACb4/jXNMzeHbUxgTd1w9Mvw_Hi4ec2b4TxywgCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Penyabab Loading Blog, Website Berat atau Lambat dan Cara Mengatasi Blog Lambat" border="0" data-original-height="724" data-original-width="1600" height="288" src="https://1.bp.blogspot.com/-TMwqSPbuXK4/Wg5608Hp9gI/AAAAAAAACb4/jXNMzeHbUxgTd1w9Mvw_Hi4ec2b4TxywgCLcBGAs/s640/Tumbnail%2B1.png" title="Penyebab Loading Blog/Website Berat atau Lambat dan Cara Mengatasinya" width="640" /></a></div>
<b><br /></b>
<a href="http://www.jurnalblog.com/2017/11/penyebab-loading-blogwebsite-berat-atau.html"><b>Penyebab Loading Blog/Website Berat atau Lambat dan Cara Mengatasinya -</b> </a>Lambatnya loading blog atau website dalam memuat halaman akan memberikan dampak buruk terhadap jumlah trafik pengunjung. Karena waktu proses memuat yang lama, pengunjung akan mulai jenuh kemudian klik sana sini dan akhirnya klik tanda x (close) pada bagian pojok kanan atas. Hal tersebut juga dibenarkan oleh beberapa ahli di bidang SEO (Search Engine Optimization) bahwa blog atau website dengan loading lambat dalam memuat sebuah halaman, cenderung akan lebih ditinggalkan oleh pengunjung meskipun tampilan blog tersebut terlihat menarik. Permasalahan inilah yang menjadi tugas pokok bagi anda selaku webmaster, selain mampu menciptakan blog atau website dengan tampilan yang menarik, anda juga dituntut untuk tetap menjaga performa blog agar tetap ringan dan tidak lambat ketika diakses.<br />
<br />
Pihak google sendiri juga mengatakan "<i>Rata-rata, orang memeriksa ponsel mereka lebih dari 150 kali sehari, dan lebih banyak pencarian terjadi pada ponsel daripada komputer. Tapi jika calon pelanggan ada di telepon, dan sebuah situs tidak mudah digunakan, kemungkinan lima kali lebih banyak untuk pergi". </i>Itulah sebabnya mengapa pihak google menekankan agar blog atau website selalu dengan cepat dan ringan dalam proses memuat halaman. Blog yang cepat dan ringan ketika diakses baik menggunakan versi mobile maupun desktop akan membuat pengunjung nyaman dan tidak mudah pergi meninggalkan halaman blog anda.<br />
<br />
Anda sendiri tentunya pernah merasakan jika suatu blog atau website dengan loading akses yang sangat lama, maka akan meninggalkan halaman tersebut bukan? Maka tidak heran jika loading blog yang lambat juga memiliki pengaruh terhadap penurunan jumlah pengunjung. Seperti pernyataan dari Google <i>“Hampir setengah dari semua pengunjung akan meninggalkan situs mobile jika halaman tidak dimuat dalam waktu 3 detik”</i>. Maka untuk menghindari permasalahan yang cukup krusial ini, Anda diharapkan mampu mengembangkan blog atau website yang memuat dengan cepat dan mudah digunakan baik melalui layar ponsel maupun dekstop. Langkah pertama yang mesti anda lakukan adalah melihat bagaimana kinerja blog atau website Anda.<br />
<br />
Anda perlu mengidentifikasi penyebab dari berat atau lambannya blog/website ketika diakses. Pada umumnya yang menjadi faktor penyebab loading blog atau website lambat dapat dibagi menjadi dua faktor yaitu faktor internal dan faktor eksternal. Faktor internal merupakan faktor yang terjadi dari dalam (in) blog atau website itu sendiri. Sedangkan faktor eksternal merupakan penyebab dari luar (eks) yang tidak ada kaitannya dengan isi dari blog atau website tersebut.<br />
<br />
Nah, bagi Anda sebagai pengembang blog atau website, melakukan optimasi terhadap kecepatan blog dalam memuat halaman juga patut untuk dipertimbangkan agar dapat diakses menggunakan perangkat apapun baik melalui mobile maupun desktop. Untuk melakukan <a href="http://www.jurnalblog.com/2017/10/14-situs-tools-untuk-mengukur-kecepatan.html" target="_blank">pemeriksaan terhadap performa kecepatan loading blog atau website dalam memuat halaman dapat menggunakan beberapa tools yang ada.</a> Sehingga dalam menangani permasalahan juga diperoleh solusi yang pas dan layak untuk digunakan dalam mengoptimasi kecepatan loading blog atau website tersebut. Berikut beberapa penyebab loading blog atau website menjadi lambat:<br />
<br />
<h3>
PENYEBAB INTERNAL:</h3>
<b>1. Template atau tema yang Anda gunakan berat</b><br />
Hal yang paling utama dalam mempengaruhi kecepatan loading blog atau website anda adalah template atau tema yang anda gunakan. Umumnya template yang berat disebabkan oleh banyaknya script kode html yang terpasang pada tema tersebut. Sehingga mengakibatkan loading blog menjadi lambat saat diakses. Jadi, gunakan template sederhana yang bersifat responsive (tampilan dapat menyesuaikan ukuran layar secara otomatis).<br />
<br />
<b>Cara mengatasinya:</b><br />
Jika anda paham bahasa pemrograman silahkan anda edit kode script yang belum di kompres atau buang kode yang tidak diperlukan, karena itu juga berpengaruh terhadap kinerja situs anda. Namun bagi anda yang tidak paham dengan bahasa pemrograman saya sarankan agar segera ganti template dan pastikan bahwa template yang anda gunakan ringan, SEO friendly, fast loading, mobile friendly, valid HTML, valid CSS, dan tidak ada struktur template yang error.<br />
<br />
<b>2. Terlalu banyak widget yang Anda gunakan</b><br />
Penggunaan widget yang berlebihan juga dapat mempengaruhi kinerja blog sehingga menjadi lambat saat diakses. Selain untuk mempercantik tampilan, widget juga berfungsi untuk memudahkan pengunjung dalam berselancar di setiap halaman blog. Maka dari itu, sebelum menggunakan widget pastikan bahwa widget tersebut penting untuk digunakan sehingga memudahkan pengunjung dalam menjelah setiap konten, bukan malah sebaliknya yang hanya untuk mempercantik tampilan sehingga mengakibatkan kinerja blog menurun atau widget yang bersifat mubadzir seperti pemasangan jam.<br />
Oleh karena itu, Anda bisa mempertimbangkan kembali bagaimana Anda akan menggunakan widget. Tetapi, saya menyarankan Anda untuk menggunakan beberapa widget yang memang diperlukan pada blog Anda. Jangan kedepankan alasan sebagai hiasan atau hal-hal yang kurang perlu, karena ini juga demi kebaikan blog Anda.<br />
<br />
<b>Cara mengatasinya:</b><br />
Pertimbangkan kembali dalam penggunaan widget. Pasang widget yang penting saja dan memberikan kebermanfaatan baik bagi anda selaku pemilik blog atau website maupun pengunjung. Umumnya widget yang dipasang yaitu label, popular post, recent post, pencarian, dan widget subscribe atau berlangganan.<br />
<br />
<b>3. Ukuran gambar atau file yang Anda gunakan terlalu besar</b><br />
Menggunakan gambar sebagai pelengkap artikel merupakan hal yang baik untuk dilakukan. Karena informasi tentu akan lebih menarik jika dilengkapi dengan gambar yang bersifat visual daripada hanya tulisan saja yang hanya bersifat verbal. Namun yang perlu untuk Anda ingat, pastikan gambar yang Anda upload berukuran kecil. Hal ini dikarenakan, jika postingan terlalu banyak gambar dengan ukuran lebih dari 1 MB (1.000 KB), maka bisa dipastikan loading halaman blog anda akan menjadi lambat.<br />
<br />
Anda bisa mencoba sendiri seberapa besar ukuran gambar yang cukup jelas jika pengunjung melihat gambar itu namun dengan ukuran yang lebih ringan. Saya sendiri biasanya ukuran gambar di antara range 65 – 115 kb. Jika ukuran gambar anda lebih dari itu, saya sarankan agar anda perkecil terlebih dahulu ukuran gambar tersebut baik dengan <a href="http://www.jurnalblog.com/2017/09/cara-mengurangi-ukuran-gambar-pada.html" target="_blank">menggunakan tools yang tersedia secara online</a> maupun dengan <a href="http://www.jurnalblog.com/2017/09/cara-mengecilkan-ukuran-gambar-dengan.html" target="_blank">software aplikasi ofline seperti Microsoft office picture manager.</a><br />
<br />
<b>Cara mengatasinya:</b><br />
Kurangi atau perkecil terlebih dahulu ukuran gambar sebelum anda upload pada postingan. Anda bisa menggunakan<a href="http://www.jurnalblog.com/2017/09/cara-mengurangi-ukuran-gambar-pada.html" target="_blank"> tools secara online untuk memperkecil ukuran gambar</a>, atau juga bisa dilakukan <a href="http://www.jurnalblog.com/2017/09/cara-mengecilkan-ukuran-gambar-dengan.html" target="_blank">secara offline dalam mengurangi ukuran gambar</a> namun tetap pastikan bahwa kualitas gambar tetap baik dan jelas untuk dilihat.<br />
<br />
<b>4. Terlalu banyak Anda memasang iklan</b><br />
Memasang iklan merupakan salah satu cara memperoleh penghasilan dari blog. Iklan memang menjadi sarana yang tepat bagi para blogger untuk menghasilkan uang dari blog. Meski tidak dilarang berapa banyak iklan yang ingin anda pasang, namun yang meski anda pertimbangkan bahwa menampilkan banyak iklan pada halaman blog, selain mengganggu aktifitas pengunjung blog, juga dapat membebani kecepatan loading blog Anda. Anda boleh menampilkan iklan pada halaman blog Anda, tetapi jangan terlalu berlebihan. Ingat bahwa tujuan utama menulis adalah berbagi informasi kepada publik (pembaca).<br />
<br />
<b>Cara mengatasinya:</b><br />
Segala sesuatu yang berlebihan itu tidaklah baik, termasuk dalam memasang iklan di blog. Terlalu banyak memasang iklan di blog tidak hanya memberatkan kinerja situs tapi sangat mengganggu pengunjung. Oleh karena itu, pasanglah iklan maksimal 3 buah, untuk tempatnya silahkan anda sesuaikan, namun biasanya iklan ditempatkan di bagian header, bawah header, sidebar, footer atau di dalam artikel (di bawah judul, tengah artikel, dan akhir).<br />
<br />
Selain itu sebisa mungkin hindari penggunaan iklan jenis popunder. Dilihat dari segi pendapatan memang benar, jenis iklan ini sangat menguntungkan bagi anda selaku pemilik blog. Namun jenis iklan ini cenderung tidak disukai oleh pengunjung karena sangat mengganggu.<br />
<br />
<h3>
PENYEBAB EKSTERNAL:</h3>
Selain beberapa penyebab secara internal yang menjadikan kinerja blog lambat dalam memuat halaman, juga ada beberapa faktor secara eksternal yang menjadi penyebab loading blog atau website lambat saat diakses, diantaranya yaitu:<br />
<br />
<b>1. Koneksi internet lambat</b><br />
Jaringan internet merupakan faktor utama bagi penggunanya untuk mengakses suatu blog atau website. Jadi pastikan bahwa sambungan internet yang anda gunakan memiliki koneksi dengan speed atau kecepetan yang tinggi. Karena semakin lambat koneksi internet yang digunakan maka akan semakin lambat juga loading halaman yang diakses. Selain itu, terkadang jaringan operator pada koneksi internet yang anda gunakan sedang mengalami gangguan, sehingga berakibat pada lambatnya dalam mengakses situs halaman.<br />
<br />
<b>Cara mengatasinya:</b><br />
Pastikan bahwa provider yang anda gunakan untuk berselancar mendukung kecepatan tinggi (high speed), jika anda menggunakan jaringan internet dengan kecepatan rendah silahkan ganti.<br />
<br />
Baca juga: <a href="http://www.jurnalblog.com/2017/04/cara-mempercepat-wifi-agar-internetan.html" target="_blank">Cara mempercepat WiFi agar internetan kita semakin lancar</a><br />
<br />
<b>2. Hosting yang Anda gunakan</b><br />
Selain koneksi jaringan internet yang digunakan, faktor eksternal yang menyebabkan loading blog atau website lambat yaitu jaringan hosting yang digunakan bermasalah. Masalah ini biasanya sering terjadi pada blog yang menggunakan platform wordpress.org. Maka dari itu, anda diperlukan kejelian serta ketelitian sebelum Anda memilih hosting. Karena hosting yang Anda pilih sangat menentukan kecepatan loading blog Anda. Namun jika anda ngeblog dengan menggunakan platform blogspot maupun wordpress.com sudah bisa dipastikan jarang atau bahkan tidak pernah mengalami masalah ini. Karena kalian tidak perlu memikirkan sewa hosting serta kedua layanan blog tersebut memiliki reputasi dan menggunakan jaringan serta koneksi yang sangat baik.<br />
<br />
<b>Cara mengatasinya:</b><br />
Jika anda sering mengalami masalah atau gangguan pada hosting, saya menyarankan untuk segera pindah dan cari penyedia hosting yang lainnya. Hal yang patut untuk dijadikan pertimbangan dalam memilih hosting yaitu performance, harga, reputasi perusahaan yang dapat anda lihat berdasarkan review pengguna, dan yang terakhir support (bantuan), umumnya pihak penyedia layanan hosting memberikan support 24 jam / 7 hari.<br />
<br />
Untuk lebih jelas, silahkan kalian baca: <span style="color: #3d85c6;">Tips Memilih Web Hosting Dalam Pembuatan Web.</span><br />
<br />
<b>3. Terjadi gangguan teknis pada server hosting</b><br />
Terjadinya gangguan terhadap server hosting merupakan hal yang wajar sehingga berakibat pada lambatnya loading blog atau website dalam memuat suatu halaman bahkan terjadi error saat diakses. Kondisi ini biasanya terjadi saat penyedia layanan server melakukan backup di semua server atau sedang melakukan maintenance secara rutin untuk hosting di Negara tertentu. Maka hal-hal semacam ini akan mempengaruhi terhadap kecepatan blog atau website tersebut.<br />
<br />
<b>Cara mengatasinya:</b><br />
Tidak banyak yang dapat anda lakukan, jika hal semacam ini terjadi. Hal yang pertama yang mesti anda lakukan yaitu segera hubungi penyedia layanan hosting. Dan bersabarlah untuk menunggu perbaikan.<br />
<br />
<b>4. Blog/Website terkena serangan hacker</b><br />
Selain hosting serta jaringan server yang digunakan, kendala lainnya yaitu gangguan yang ditimbulkan oleh pihak lain (hacker/peretas) untuk melumpuhkan situs atau pihak pemilik server hosting. Meski hal seperti ini dapat diminimalisir jika pihak pemilik server hosting melakukan backup pada blog atau website tersebut, sehingga tetap bisa diakses meski dengan loading yang sangat lambat. Loading yang lambat tersebut juga biasanya tidak mampu menampilkan halaman secara utuh, artinya pengguna hanya bisa membuka halaman depan tersebut meski terkadang bagian bawah halaman terlihat kosong (blank). Namun jika hacker atau peretas tersebut mampu mengambil alih secara utuh, maka blog atau website tersebut tidak hanya loadingnya lambat, tetapi tidak dapat diakses sama sekali.<br />
<br />
<b>Cara mengatasinya:</b><br />
Bagi anda yang memiliki blog baru tidak perlu khawatir dengan hal semacam ini, sebab kemungkinan kecil blog anda diretas oleh hacker. Namun lain halnya jika blog anda sudah memiliki nama di search engine, atau selalu menduduki peringkat atas dengan berbagai macam keyword. Maka anda perlu untuk mengamankannya.<br />
<br />
<b>5. Kecepatan prosesor perangkat yang Anda gunakan</b><br />
Kecepatan prosesor dalam perangkat laptop, komputer atau smartphone yang Anda gunakan juga mempengaruhi terhadap kecepatan halaman yang Anda akses pada browser. Biasanya loading lambat pada komputer Anda disebabkan oleh prosessor yang rendah, terlalu banyak aplikasi yang di install, atau perangkat yang Anda gunakan terkena virus. Semakin tinggi kecepatan prosesor dalam perangkat yang anda gunakan maka semakin cepat pula loading dalam menampilkan suatu laman.<br />
<br />
<b>Cara mengatasinya:</b><br />
Jika yang menyebabkan loading lambat dari perangkat prosesor yang anda gunakan, maka cara mengatasinya cukup mudah. Tinggal beli baru lagi yang terbaru :)<br />
<br />
Demikianlah tadi beberapa <a href="http://www.jurnalblog.com/2017/11/penyebab-loading-blogwebsite-berat-atau.html" target="_blank">penyebab loading blog/website lambat saat diakses serta cara mengatasinya</a>. Jadi pastikan bahwa blog atau website anda tetap dalam keadaan prima. Semoga bermanfaat dan jangan lupa untuk anda share artikel ini ke sahabat-sahabat lainnya.<br />
<div>
<br /></div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-58329471931803327932017-11-13T15:30:00.000+08:002017-11-13T15:32:46.825+08:00Banned Komentator Spam Blogger dengan jQuery<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-82IiEU9hxrI/WglJeKpiCzI/AAAAAAAACZY/ysLtAOZ-4rA_PkbBu3rgW5xkAUM8K0igACLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Banned Komentator Spam di Blogger" border="0" data-original-height="760" data-original-width="1600" height="302" src="https://2.bp.blogspot.com/-82IiEU9hxrI/WglJeKpiCzI/AAAAAAAACZY/ysLtAOZ-4rA_PkbBu3rgW5xkAUM8K0igACLcBGAs/s640/Tumbnail%2B1.png" title="Banned Komentator Spam Blogger dengan jQuery" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/11/banned-komentator-spam-blogger-dengan.html">Banned Komentator Spam Blogger dengan jQuery - </a></b>Terkadang tidak sedikit kita menemukan beberapa komentar pada artikel yang kita posting memuat unsur-unsur yang tidak diinginkan, seperti berkata kasar, berbau sara, membagikan konten yang berisi hoax, membagikan link judi, pornografi ataupun jenis-jenis komentar lainnya seperti promosi dukun yang bisa menggadakan uang atau <strike>menebak angka togel</strike>.<br />
<br />
Maka dari itu, sangat penting juga untuk diberikan <a href="http://www.jurnalblog.com/2017/08/cara-mudah-membuat-deskripsi-petunjuk.html" target="_blank">petunjunk atau rambu-rambu yang jelas</a>. Hal-hal apa saja yang tidak boleh digunakan dalam memberikan komentar pada suatu postingan. Beberapa unsur komentar yang biasanya tidak boleh untuk digunakan atau ditampilkan diantaranya yaitu berunsur sara dan komentar spam.<br />
<br />
<b>Komentar yang mengandung sara: </b>yang dimaksud dengan komentar yang mengandung sara yaitu berbagai pandangan dan tindakan yang didasarkan pada sentimen identitas yang menyangkut golongan tertentu baik berupa agama, kebangsaan, kesukuan ataupun keturunan. Sehingga bisa menyinggung perasaan suatu individu, golongan atau kelompok, agama atau diskriminasi terhadap budaya tertentu.<br />
<br />
<b>Komentar yang mengandung spam: </b>Spam merupakan suatu pesan atau informasi yang tidak ada kaitannya (tidak dikehendaki) oleh penerimanya. Pada dunia blogger, komentar spam biasanya cenderung dilakukan oleh para blogger pemula untuk mengajak orang lain (berupa link) untuk berkunjung pada situsnya. Dunia youtuber-pun demikian, sejauh yang saya amati. Para youtuber juga sering memberikan komentar spam yang berupa ajakan baik hanya untuk berkunjung maupun subcribe terhadap channelnya.<br />
<br />
Selain komentar spam yang berupa ajakan dengan membagikan link, komentar spam lainnya yaitu komentar ala kadarnya seperti artikel bagus, mantap gan, saya suka artikelnya, dan lain sebagainya. Namun meski begitu komentar tersebut lebih baik daripada jenis komentar yang mengandung sara maupun link ajakan yang tidak ada kaitannya sama sekali dengan isi dari postingan.<br />
<br />
Oleh karena itu, jika anda sudah <a href="http://www.jurnalblog.com/2017/08/cara-mudah-membuat-deskripsi-petunjuk.html" target="_blank">memberikan petunjuk pada bagian komentar</a> namun tetap saja tidak dipedulikan, anda perlu untuk melakukan tindakan untuk mengantisipasi hal-hal hal-hal tersebut. Anda perlu untuk memasukkan kode tertentu dalam template blog anda.<br />
<br />
<h3>
Cara Pertama Banned Komentator dengan jQuery</h3>
<div>
1. Masuk terlebih dahulu dalam akun blog anda</div>
<div>
2. Pilih bagian <b>Template > Edit HTML</b></div>
<div>
3. Carilah kode <span style="color: #3d85c6;"></body> </span>untuk memudahkan pencarian, tekan tombol <b>Ctrl+F </b>pada keyboard anda</div>
<div>
4. Tambahkan kode <b>jQuery </b>di bawah ini, tepat berada di atas kode <span style="color: #3d85c6;"></body></span> </div>
<br />
<pre data-codetype="CSSku" title="jQuery"><code class="language-css"> <script type='text/javascript'>
//<![CDATA[
var spamlist=[
'http://www.blogger.com/profile/123456789xxx', /* contoh URL komentator */
'http://nama_blog.blogspot.com/',
'Alamat URL komentator ke 3' /* URL terakhir tidak perlu diberi koma */
];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment-block").find(".comment-content")
.replaceWith("<div class='comment-content' style='color:red'>Anda telah di banned! Silakan tinggalkan blog ini!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})
}
//]]>
</script> </code></pre>
<br />
Sedangkan bagi anda yang menggunakan template dengan sistem komentar hack, bisa menggunakan kode di bawah ini<br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"> <script type='text/javascript'>
//<![CDATA[
var spamlist=[
'http://www.blogger.com/profile/123456789xxx', /* contoh URL komentator */
'http://nama_blog.blogspot.com/',
'Alamat URL komentator ke 3' /* URL terakhir tidak perlu diberi koma */
];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment_inner").find(".comment_body")
.replaceWith("<div class='.comment_body' style='color:red'>Anda telah di banned! Silakan tinggalkan blog ini!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})
}
//]]>
</script> </code></pre>
<br />
5. Klik pada tombol <b>Simpan Template</b><br />
<b><br />
</b> <br />
<h3>
Cara Kedua Banned Komentator dengan Tag Kondisional</h3>
<div>
1. Buka akun blog anda terlebih dahulu</div>
<div>
2. Pilih bagian <b>Template > Edit HTML</b></div>
<div>
3. Carilah kode di bawah ini, dengan cara copy kode tersebut kemudian tekan <b>Ctrl+F </b>pada tombol keyboard anda lalu paste pada kolom yang disediakan dan tekan <b>Enter </b></div>
<br />
<b:loop values='data:post.comments' var='comment'><br />
<br />
4. Selanjutnya, tambahkan kode ini tepat berada di bawah kode tersebut<br />
<br />
<pre data-codetype="JQueryku" title="HTML"><code class="language-javascript"> <!--blacklist-->
<b:if cond='data:comment.authorUrl != &quot;http://www.blogger.com/profile/12345678910&quot;'>
<!--blacklist--> </code></pre>
<br />
<blockquote class="tr_bq">
Ganti <span style="color: #3d85c6;">http://www.blogger.com/profile/12345678910 </span>dengan URL profile yang ingin anda banned.</blockquote>
<br />
5. Setelah itu, cari kode <span style="color: #3d85c6;"></b:loop>,</span> kemudian tambahkan kode ini tepat berada diatasnya,<br />
<br />
<!--blacklist--><br />
</b:if><br />
<!--blacklist--><br />
<br />
6. Kemudian, tekan tombol <b>Simpan Template</b><br />
<br />
<blockquote class="tr_bq">
Cara yang kedua ini, hanya berlaku untuk sistem Threaded Comment Hack</blockquote>
<br />
Demikianlah tadi, tutorial <a href="http://www.jurnalblog.com/2017/11/banned-komentator-spam-blogger-dengan.html">cara banned komentator spam blogger dengan menggunakan jQuery maupun tag kondisional</a>. Langkah ini merupakan langkah lanjutan, setelah anda sudah memberikan rambu-rambu mengenai hal-hal apa saja yang tidak boleh digunakan dalam berkomentar. Namun tetap tidak diperdulikan oleh pembaca. Semoga artikel ini bermanfaat dan silahkan untuk kalian share ke yang lainnya.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-14143822866624684512017-11-10T16:16:00.000+08:002017-11-10T16:18:31.949+08:00Cara Membuat Efek Animasi Loading Sederhana <div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-47GNzZK1P-Y/WgVgBKLYEjI/AAAAAAAACX4/P-QMB5OH6eMKYTaV7WYS7gfUcpWhz6TEACLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Efek Animasi Loading Sederhana" border="0" data-original-height="760" data-original-width="1600" height="302" src="https://3.bp.blogspot.com/-47GNzZK1P-Y/WgVgBKLYEjI/AAAAAAAACX4/P-QMB5OH6eMKYTaV7WYS7gfUcpWhz6TEACLcBGAs/s640/Tumbnail%2B1.png" title="Cara Membuat Efek Animasi Loading Sederhana" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/11/cara-membuat-efek-animasi-loading.html">Cara Membuat Efek Animasi Loading Sederhana</a> -</b> Kesempatan kali ini, saya akan berbagi tutorial tentang cara membuat efek animasi loading sederhana saat halaman pada blog Anda sedang dimuat. Saat pengunjung membuka blog Anda, secara otomatis efek atau kode ini akan berjalan pada saat blog sedang dimuat dan akan berhenti dengan sendirinya jika halaman tersebut telah dimuat sepenuhnya.<br />
<br />
Cara ini bisa Anda gunakan untuk mengkreasikan blog Anda agar terlihat lebih menarik bagi pengunjung saat menunggu proses loading atau muat dari blog Anda. dalam menambahkan efek animasi loading sederhana ini, terbilang cukup mudah. Anda hanya perlu menambahkan beberapa scipt, untuk lebih lengkapnya silahkan Anda ikuti langkah-langkah di bawah ini.<br />
<br />
<h3>
Cara Membuat Efek Animasi Loading Sederhana </h3>
<div>
1. Silahkan masuk terlebih dahulu dalam akun blog Anda</div>
<div>
2. Pilih bagian <b>Template > Edit HTML</b></div>
<div>
3. Carilah kode <span style="color: #3d85c6;">]]></b:skin></span><b> </b>atau <span style="color: #3d85c6;"></style> </span>dengan cara tekan <b>Ctrl+F </b>pada keyboard Anda untuk memudahkan pencarian</div>
<div>
4. Tambahkan kode di bawah ini, tepat berada di atas kode <span style="color: #3d85c6;">]]></b:skin></span><b> </b>atau <span style="color: #3d85c6;"></style></span></div>
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> #cssload {background:url(http://2.bp.blogspot.com/-gwEckHVvyvM/VnbiQdPPZSI/AAAAAAAADcE/wwKnP62ARpc/s1600/loading.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;} </code></pre>
<br />
5. Setelah itu, tambahkan kode <b>HTML </b>di bawah ini, tepat berada di bawah kode <span style="color: #3d85c6;"><body></span><br />
<br />
<pre data-codetype="CSSku" title="HTML"><code class="language-css"> <div id='cssload'/> </code></pre>
<br />
6. Kemudian, tambahkan kode di bawah ini sebelum kode <span style="color: #3d85c6;"></body></span><br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"> <script type='text/javascript'>
//<![CDATA[
// Loader
$(window).bind("load",function(){$("#cssload").fadeOut(1e3)});
//]]>
</script> </code></pre>
<br />
7. Klik tombol <b>Simpan Template </b><br />
<b><br /></b>
Demikianlah tutorial <a href="http://www.jurnalblog.com/2017/11/cara-membuat-efek-animasi-loading.html">cara membuat efek animasi loading sederhana</a> saat halaman dimuat. Bagaimana cukup mudah bukan? Silahkan Anda share artikel ini agar banyak yang lebih tahu tentang tutorial ini. Semoga bermanfaat.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-1430428429292249692017-11-06T16:23:00.002+08:002017-11-06T16:25:00.630+08:00Membuat Judul Blog Muncul Satu Kata<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-3P7CR-Yn8a0/WgAb2Yz-BPI/AAAAAAAACWY/fuCuYjTbd9gtZletzczhiPSIFB3qXN6TwCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Judul Blog Muncul Satu Kata (Tips Blog)" border="0" data-original-height="760" data-original-width="1600" height="300" src="https://1.bp.blogspot.com/-3P7CR-Yn8a0/WgAb2Yz-BPI/AAAAAAAACWY/fuCuYjTbd9gtZletzczhiPSIFB3qXN6TwCLcBGAs/s640/Tumbnail%2B1.png" title="Membuat Judul Blog Muncul Satu Kata" width="640" /></a></div>
<br />
Kesempatan kali ini, saya akan membagikan tutorial <a href="http://www.jurnalblog.com/2017/11/membuat-judul-blog-muncul-satu-kata.html">cara membuat judul blog muncul satu kata</a>. Cara ini berfungsi untuk menghemat space bagi Anda yang memiliki blog dengan nama yang super duper panjang. Sehingga dengan mengikuti tutorial ini judul blog Anda yang terlalu panjang tersebut akan disembunyikan dan hanya satu kata pertama saja yang di tampilkan.<br />
<br />
Seperti contohnya judul blog Anda adalah <span style="color: red;">"Panduan Membuat Blog Bagi Pemula Sampai Menjadi Master"</span>. Maka dengan menggunakan langkah-langkah dibawah ini, secara otomatis judul blog Anda akan terpotong dan hanya ditampilkan kata pertamanya saja yaitu <span style="color: red;">"Panduan"</span>. Selain untuk menghemat space header, blog Anda juga akan terlihat lebih rapi. Bisa Anda bayangkan bukan, jika judul dari blog Anda panjang? Tentu akan mempengaruhi tampilan blog khususnya pada bagian header sobat.<br />
<br />
Langsung saja, ikuti langkah-langkah dibawah ini untuk memperpendek judul blog agar hanya muncul satu kata saja.<br />
<br />
<h3>
Cara Membuat Judul Blog Muncul Satu Kata</h3>
<div>
1. Masuk dalam akun blog Anda terlebih dahulu</div>
<div>
2. Pilih bagian <b>Template > Edit HTML</b></div>
<div>
3. Cari kode <span style="color: #3d85c6;"></head></span> atau <span style="color: #3d85c6;">&lt;/head&gt;&lt;!--<head/>--&gt; </span>dengan cara tekan <b>Ctrl+F</b> pada tombol keyboard sobat</div>
<div>
4. Selanjutnya, tambahkan kode di bawah ini, tepat sebelum kode penutup head di atas</div>
<br />
<pre data-codetype="HTMLku" title="JavaScript"><code class="language-markup"> <script type='text/javascript'> $(document).ready(function(){var e=$("body").find("<span style="background-color: #3d85c6; color: white;">#header .title a</span>").eq(0).text().split(" ");$("body").find("<span style="background-color: #3d85c6; color: white;">#header .title a</span>").eq(0).text(e[0])}); </script> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan Anda sesuaikan kembali pada bagian kode yang ditandai dengan ID atau class pada kode HTML header tema yang Anda gunakan.</blockquote>
<br />
5. Klik tombol <b>Simpan Tema</b><br />
<br />
Demikianlah tadi tutorial <a href="http://www.jurnalblog.com/2017/11/membuat-judul-blog-muncul-satu-kata.html">cara membuat judul blog muncul satu kata</a>, seperti yang sudah saya singgung diatas bahwa fungsi dari tutorial ini yaitu untuk memperpendek tampilan judul blog agar terlihat lebih rapi. Meskipun untuk merapikan judul blog yang terlalu panjang dapat dilakukan dengan cara menggantinya dengan logo (gambar), namun tidak ada salahnya untuk mencoba suatu hal baru guna menambah pengetahuan. Selamat mencoba dan semoga bermanfaat.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-89043874370494706342017-11-01T12:04:00.002+08:002017-11-01T12:09:45.306+08:00Memasang Video Youtube Responsive di Blog<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-r413IRxZ7eA/WflHkLNuAZI/AAAAAAAACVE/6UjTilbraZkLJ7V16f3-Is35-RCg_cD2gCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="www.jurnalblog.com" border="0" data-original-height="760" data-original-width="1600" height="302" src="https://3.bp.blogspot.com/-r413IRxZ7eA/WflHkLNuAZI/AAAAAAAACVE/6UjTilbraZkLJ7V16f3-Is35-RCg_cD2gCLcBGAs/s640/Tumbnail%2B1.png" title="Memasang Video Youtube Responsive di Blog" width="640" /></a></div>
<br />
<a href="http://www.jurnalblog.com/2017/11/memasang-video-youtube-responsive-di.html">Memasang Video Youtube Responsive di Blog -</a> Seringkali kita melihat beberapa blog yang memasang video dari youtube ke dalam sebuah postingan, namun terlihat tidak responsive sehingga tidak bisa menyesuaikan ukuran dimensi layar kita.<br />
<br />
Youtube sebagai situs berbagi video yang cukup populer saat ini, sebab anda diberikan keleluasaan untuk membuat channel anda sendiri. Sehingga anda bisa mengupload video, menonton video, bahkan anda juga bisa memperoleh penghasilan dari video tersebut. Baik melalui cara berjualan produk, sebagai endorse, maupun ikut gabung sebagai publisher google adsense. Namun sebelum akun anda disetujui oleh pihak google adsense, tentu ada beberapa persyaratan yang mesti anda siapkan terlebih dahulu. Agar anda bisa bergabung dan mendapatkan penghasilan dari google adsense tersebut, salahsatunya yaitu jumlah viewer kalian minimal mencapai 10.000 viewer.<br />
<br />
Bagi anda yang ingin meningkatkan penghasilan dari google adsense, tidak ada salahnya untuk menggabungkan kedua sumber pendapatan anda yaitu dari blog dan youtube, dengan cara membuat sebuat postingan dan video (red:tutorial) yang saling berkaitan. Kemudian silahkan anda upload video terlebih dahulu dalam channel di youtube anda, setelah itu buatlah sebuah postingan dan masukkan video anda dengan cara menggunakan fitur emmbed video.<br />
<br />
Salah satu tools yang disediakan oleh pihak youtube yaitu adanya fitur embed video yang memungkinkan anda untuk bisa menambahkan video dalam sebuah postingan blog sekaligus dapat monontonya tanpa harus ke direct situsnya. Namun dengan menggunakan fitur emmbed dalam postingan tersebut dapat berdampak buruk pada nilai SEO blog anda. Karena adanya elemen iframe serta tampilan yang tidak responsive sehingga tidak bisa menyesuaikan dimensi layar.<br />
<br />
Oleh karena itu, kesempatan kali ini saya akan membagikan tutorial cara memasang video youtube di blog yang responsive dapat menyesuaikan besar kecilnya ukuran layar. Sehingga tidak mempengaruhi terhadap penurunan nilai SEO blog anda.<br />
<br />
<h3>
Cara Memasang Video Youtube Responsive di Blog</h3>
<div>
<b>Cara Pertama</b><br />
<b><br />
</b> 1. Bukalah terlebih dahulu akun blog kalian</div>
<div>
2. Masuk pada bagian <b>Template > Edit HTML</b></div>
<div>
3. Carilah kode <b>]]></b:skin> </b>atau <b></style> </b>dengan cara tekan <b>Ctrl+F </b>pada keyboard kalian untuk memudahkan pencarian</div>
<div>
4. Tambahkan kode <b>CSS </b>di bawah ini, tepat berada di atas kode <b>]]></b:skin> </b>atau <b></style></b></div>
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> /* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} </code></pre>
<br />
5. Setelah itu, tambahkan kode <b>jQuery </b>di bawah ini, tepat di atas kode <b></body></b><br />
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script> </code></pre>
<br />
6. klik tombol <b>Simpan Template</b><br />
<b><br />
</b> <b>Cara Kedua</b><br />
<b><br />
</b>1. Selain cara di atas, ada juga cara lainnya yang dapat dilakukan dalam membuat embed video youtube agar terlihat responsive hanya dengan menambahkan kode <b>CSS</b> tepat berada di atas kode <b>]]></b:skin> </b>atau <b></style></b><br />
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> /* CSS Only */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}} </code></pre>
<br />
2. Silahkan anda sesuaikan ukuran max-height pada media query<br />
<br />
<h3>
Cara Menambahkan Video Youtube di Blog</h3>
<div>
1. Buatlah sebuah postingan terlebih dahulu yang ada kaitannya dengan video yang akan anda tambahkan pada postingan di blog anda.</div>
<div>
2. Jika sudah, aktifkan pada mode <b>HTML </b>(<i>bukan mode Compose, ingat!</i>)<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-GCsybgglY5o/Wfk8mQRwQOI/AAAAAAAACTw/5XZGYwlQ9XQhTckM2IgNJwnTYjJRnQBNgCLcBGAs/s1600/Jurnal%2BBlog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Memasang Video Youtube Responsive di Blog" border="0" data-original-height="118" data-original-width="794" height="92" src="https://2.bp.blogspot.com/-GCsybgglY5o/Wfk8mQRwQOI/AAAAAAAACTw/5XZGYwlQ9XQhTckM2IgNJwnTYjJRnQBNgCLcBGAs/s640/Jurnal%2BBlog.png" title="Mengaktifkan mode HTML" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mengaktifkan mode HTML</td></tr>
</tbody></table>
<br /></div>
<div>
3. Tambahkan kode <b>HTML </b>di bawah ini</div>
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="<span style="background-color: blue;">SIMPAN-LINK-EMBED-VIDEO-DI-SINI</span>">
</div>
</div>
</div> </code></pre>
<br />
Contoh dari link video youtube yang di ambil seperti berikut<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-RxAX71aTe0o/WflBW6z4TiI/AAAAAAAACUY/Yzqoqy3ApPMaWobswyzfiIiglS8jj7n_QCLcBGAs/s1600/Jurnal%2BBlog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Memasang video youtube responsive di blog" border="0" data-original-height="191" data-original-width="566" height="214" src="https://2.bp.blogspot.com/-RxAX71aTe0o/WflBW6z4TiI/AAAAAAAACUY/Yzqoqy3ApPMaWobswyzfiIiglS8jj7n_QCLcBGAs/s640/Jurnal%2BBlog.png" title="Link embed video youtube" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Link embed video youtube</td></tr>
</tbody></table>
<br />
4. Salin link embed seperti pada gambar di atas, dan tambahkan pada kode <b>HTML </b>di atas seperti ini.<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="<span style="background-color: blue;">https://www.youtube.com/embed/dnIeJZ5qXb0</span>">
</div>
</div>
</div> </code></pre>
<br />
5. Terakhir klik pada tombol <b>Publikasikan</b><br />
<b><br /></b>
Demikianlah tadi tutorial cara <a href="http://www.jurnalblog.com/2017/11/memasang-video-youtube-responsive-di.html">memasang video youtube responsive di blog</a>. Dengan menggunakan cara di atas, maka video dari youtube yang anda sematkan pada salah satu postingan blog anda akan terlihat responsive pada setiap ukuran layar.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-41813112958883077092017-10-25T16:03:00.001+08:002017-10-25T16:05:26.460+08:00Membagi Konten Artikel Menjadi Beberapa Halaman<a href="http://www.jurnalblog.com/2017/10/membagi-konten-artikel-menjadi-beberapa.html"><b>Membagi Konten Artikel Menjadi Beberapa Halaman</b> </a>- Kesempatan kali ini, saya akan membagikan tutorial cara membagi konten artikel menjadi beberapa halaman. Bagi kalian yang sering melakukan update artikel yang cukup panjang/ banyak jumlah katanya, maka tutorial ini sangat cocok untuk kalian ikuti. Sebab dengan membagi konten artikel menjadi beberapa halaman dapat menghemat ruang di halaman postingan kalian. Selain menghemat halaman ruang, juga dapat meningkatkan jumlah pageview.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-tw5ZoSvsKuA/WfBEzt_dzWI/AAAAAAAACRk/Qoy4sPTlDYoWqqzVSqqk0vOuDTCkpFOOgCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membagi Konten Artikel Menjadi Beberapa Halaman" border="0" data-original-height="760" data-original-width="1600" height="300" src="https://3.bp.blogspot.com/-tw5ZoSvsKuA/WfBEzt_dzWI/AAAAAAAACRk/Qoy4sPTlDYoWqqzVSqqk0vOuDTCkpFOOgCLcBGAs/s640/Tumbnail%2B1.png" title="Membagi Konten Artikel Menjadi Beberapa Halaman" width="640" /></a></div>
<br />
Tutorial ini cukup mudah untuk kalian ikuti, sebab kalian hanya perlu menambahkan kode HTML di bagian editor postingan yang nanti akan muncul pada blog kalian. Oke langsung saja, ikuti langkah-langkah dibawah ini.<br />
<br />
<h3>
Membagi Konten Artikel Menjadi Beberapa Halaman</h3>
<div>
1. Masuk terlebih dahulu, dalam akun blog kalian</div>
<div>
2. Buka menu <b>Template > Edit HTML </b></div>
<div>
3. Carilah kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b><span style="color: #3d85c6;"></style></span> </b>dengan cara tekan <b>Ctrl+F </b>pada keyboard kalian untuk memudahkan pencarian</div>
<div>
4. Tambahkan kode <b>CSS </b>di bawah ini, tepat berada di atas kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b><span style="color: #3d85c6;"></style> </span></b></div>
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> /* Multiple Page Slide */
a.movepg.nexter,a.movepg.prever{color:#fff}
.separator{overflow:hidden;max-height:240px;margin:0 0 20px}.separator img{background:#eee;max-width:100%;vertical-align:middle;background-position:middle;border:0;height:auto;width:100%}.next-wrap img,.next-wrap video,.next-wrap object{max-width:100% }.next-wrap{position:relative;padding:0 0 0 40px;line-height:normal;}.instruction{display:block;height:100%;width:100%;overflow:hidden}.slidecontentWrap{width:1000%}.slidecontent{float:left;width:10%;line-height:161%;overflow:hidden}.movepg{display:none;position:absolute;bottom:20px;background:#e74c3c;color:#fff;font-weight:700;text-transform:uppercase;padding:6px 12px;cursor:pointer;font-size:80%;outline:none;border-radius:3px;transition:background .6s}.movepg:hover{background:#c0392b}.movepg.prever{left:20px}.movepg.nexter{right:20px} </code></pre>
<br />
5. Selanjutnya, tambahkan kode <b>jQuery </b>di bawah ini, tepat berada di atas kode <b></body></b><br />
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,<span style="background-color: yellow;">maxIndex=4</span>;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti kode <b>maxIndex=4</b> dengan jumlah halaman yang kalian inginkan.</blockquote>
<br />
6. Klik pada tombol <b>Simpan Template</b><br />
7. Langkah selanjutnya yaitu buatlah sebuah postingan baru, tambahkan kode di bawah ini pada postingan kalian dalam posisi tab <b>HTML </b><i>(Ingat, rubah ke posisi HTML bukan Compose)</i><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div class="next-wrap">
<div id="photocons" class="instruction">
<div class="slidecontentWrap">
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
<div class="slidecontent">
<-- ISI KONTEN DI SINI -->
</div>
</div>
</div>
<a class="movepg prever">prev</a>
<a class="movepg nexter">next</a>
</div> </code></pre>
<br />
8. Jika sudah, langsung saja klik pada tombol <b>Publikasikan </b>dan lihat hasilnya<br />
<br />
Itulah tadi, tutorial cara <a href="http://www.jurnalblog.com/2017/10/membagi-konten-artikel-menjadi-beberapa.html">membagi konten artikel menjadi beberapa halaman</a>. Dengan membagi konten menjadi beberapa halaman dapat menghemat ruang tampilan halaman blog kalian, sehingga tutorial ini sangat cocok bagi kalian yang sering membagikan artikel dengan jumlah kata yang banyak. Namun yang perlu untuk diperhatikan juga, buatlah pengunjung blog kalian se nyaman mungkin. Artinya jika memang artikel kalian jumlah katanya masih sedikit, tidak perlu untuk membagi dalam beberapa halaman.<br />
<br />
Mungkin itu saja, yang dapat saya sampaikan pada tutorial kali ini, semoga bermanfaat dan selamat berkarya.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-40522612475383299242017-10-22T12:28:00.001+08:002017-10-22T12:29:43.616+08:00Membedakan Style Komentar Admin di Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-gp6T8MllucM/WeweD7x8MoI/AAAAAAAACQk/xMSRXTQH1QQL4J0msNEoj44ixO1q0OQOwCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membedakan Style Komentar Admin di Blog" border="0" data-original-height="760" data-original-width="1600" height="302" src="https://2.bp.blogspot.com/-gp6T8MllucM/WeweD7x8MoI/AAAAAAAACQk/xMSRXTQH1QQL4J0msNEoj44ixO1q0OQOwCLcBGAs/s640/Tumbnail%2B1.png" title="Membedakan Style Komentar Admin di Blog" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/10/membedakan-style-komentar-admin-di-blog.html">Membedakan Style Komentar Admin di Blog</a></b> - Pada dasarnya, membedakan style komentar admin dan pengunjung di blog dapat dilakukan dengan menggunakan CSS. Namun pada kesempatan kali ini, saya akan membagikan cara membedaka gaya komentar admin dengan penggunjung menggunakan jQuery. Karena dilihat dari kelebihan jQuery itu sendiri yang telah mendukung CSS1-3, menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascript yang telah ada. Termasuk mempercepat coding javascript dalam sebuah website. Dibandingkan kita harus mulai sebuah script javascript dari nol.<br />
<br />
Dengan menggunakan jQuery ini, kita bisa menggunakan beberapa URL yang dapat dijadikan sebagai admin dari blog kita. Baik langsung saja, untuk membedakan style komentar admin di blog dengan menggunakan jQuery sebagai berikut.<br />
<br />
<h3>
Membedakan Style Komentar Admin di Blog</h3>
<div>
1. Masuk terlebih dahulu dalam akun blog kalian</div>
<div>
2. Pilih menu <b>Template >> Edit HTML</b></div>
<div>
3. Carilah kode <span style="color: #3d85c6; font-weight: bold;"></body> </span>dengan menggunakan Ctrl+F untuk memudahkan pencarian</div>
<div>
4. Tambahkan kode jQuery di bawah ini, tepat berada di atas kode <b><span style="color: #3d85c6;"></body></span></b></div>
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
var bloggAdmin= [
"URL ADMIN PERTAMA", // Admin 1
"URL ADMIN KE DUA", // Admin 2
"URL ADMIN KE TIGA" // Admin 3
];
$.each(bloggAdmin, function(i) {
$('a[href="' + bloggAdmin[i] + '"]').closest('.comment_inner').css('border-top', '5px solid #30abd5');
});
//]]>
</script> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti pada kode URL ADMIN PERTAMA dengan kode URL Admin Google Plus atau Profile Blogger</blockquote>
5. Berdasarkan dari kode tersebut, saya memberikan gaya atribut border top pada bagian <span style="color: #3d85c6;">.comment_inner </span>Silahkan kalian desain sekreatif mungkin sesuai dengan keinginan kalian<br />
<br />
6. Klik <b>Simpan Template</b><br />
<b><br /></b>
Itulah tadi tutorial cara <a href="http://www.jurnalblog.com/2017/10/membedakan-style-komentar-admin-di-blog.html">membedakan style komentar admin di blog</a>. Semoga tutorial yang saya bagikan bermanfaat bagi kita semua.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-57803648362850919492017-10-13T19:51:00.001+08:002017-10-13T19:52:48.377+08:00Membuat Tombol Demo dan Download Material Design<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-ZIjhqK6HqJU/WeCopHzkmfI/AAAAAAAACOQ/uKOxkcBHgZYIC9LpY8dyfPGLCuPJAt8ewCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tombol Demo dan Download Material Design" border="0" data-original-height="760" data-original-width="1600" height="302" src="https://3.bp.blogspot.com/-ZIjhqK6HqJU/WeCopHzkmfI/AAAAAAAACOQ/uKOxkcBHgZYIC9LpY8dyfPGLCuPJAt8ewCLcBGAs/s640/Tumbnail%2B1.png" title="Membuat Tombol Demo dan Download Material Design" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/10/membuat-tombol-demo-dan-download.html">Membuat Tombol Demo dan Download Material Design - </a></b>Material Design merupakan bahasa desain yang dikembangkan oleh Google dan diumumkan pada acara konferensi Google I/O pada 25 Juni 2014. Kesempatan kali ini, saya akan membagikan tutorial membuat tombol demo dan download yang ditambahkan dengan efek animasi ripple (gelombang) pada saat kursos menekan tombol tersebut yang merupakan salah satu dari efek animasi material design.<br />
<br />
Semenjak diumumkannya material design yang diprakarsai oleh perusahaan besar dari negeri paman sam tersebut, material design menjadi sebuah tren baru dalam dunia desain antar muka (<i>user interface</i>) baik untuk halaman web maupun aplikasi <i>mobile. </i>Para desainer maupun pengembang perangkat lunak juga menyambut dengan baik atas berbagai fitur yang ditawarkan serta tampilan yang terlihat lebih simpel dan tetap elegant.<br />
<br />
Nah, bagi kalian yang memiliki blog berbagi file baik <i>software </i>maupun film tombol blog merupakan salah satu syarat yang harus anda siapkan untuk memudahkan pengunjung dalam melihat demo serta mendownload file yang kalian bagikan. Melihat dari pentingnya tombol demo dan download pada blog berbagi file, pada kali ini saya akan memberikan tutorial membuat tombol demo dan download material design terlihat lebih simpel namun tetap menarik.<br />
<br />
<h3>
Membuat Tombol Demo dan Download Material Design</h3>
<div>
1. Masuk dalam akun blog kalian terlebih dahulu</div>
<div>
2. Pilih <b>Template > Edit HTML</b></div>
<div>
3. Cari kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b style="color: #3d85c6;"></style> </b>dengan menggunakan Ctrl+F pada tombol keyboard kalian</div>
<div>
4. Tambahkan kode <b>CSS</b> di bawah ini, tepat di atas kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <span style="color: #3d85c6; font-weight: bold;"></style></span> </div>
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> /* Jurnal Blog Material Design Button */
#wrap{margin:20px auto;text-align:center}
#wrap a{text-decoration:none}
.tombolripple{cursor:pointer!important;overflow:hidden;text-decoration:none;display:inline-block;-webkit-appearance:none;font-size:1.7em;border-radius:4px;color:rgba(255,255,255,0.8);font-weight:400;padding:20px 25px;margin:0 15px;box-shadow:0 2px 2px 1px rgba(0,0,0,0.1);transition:all 0.3s}
.tombolripple:hover,.tombolripple:active{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}
.tombolripple.tsatu{background:<b><span style="color: yellow;">#FFD700</span></b>}
.tombolripple.tdua{background:<b><span style="color: yellow;">#008000</span></b>}
.tombolripple.tsatu:hover,.tombolripple.tsatu:active{background:<b><span style="color: yellow;">#FFA500</span></b>}
.tombolripple.tdua:hover,.tombolripple.tdua:active{background:<b><span style="color: yellow;">#6B8E23</span></b>}
svg{position:absolute;top:0;left:0;width:100%;height:100%}
circle{fill:rgba(255,255,255,0.07)}
.ripple-effect{position:relative;overflow:hidden;-webkit-transform:translatez(0)}
.teffect{display:block;position:absolute;pointer-events:none;border-radius:50%;transform:scale(0);background:#fff;opacity:0.5}
.teffect.animate{animation:ripple-effect 0.5s linear}
@keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}}
@-webkit-keyframes ripple-effect{100%{opacity:0;transform:scale(2.5)}} </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti, pada kode yang berwarna kuning, dengan kode warna yang kalian inginkan.</blockquote>
<br />
5. Setelah itu, carilah kode <b><span style="color: #3d85c6;"></body></span> </b>dan tambahkan kode <b>jQuery </b>di bawah ini, tepat berada di atas kode <b style="color: #3d85c6;"></body> </b>tersebut<br />
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
!function(a){a(".ripple-effect").click(function(b){var c=a(this);0===c.find(".teffect").length&&c.append("<span class='teffect'></span>");var d=c.find(".teffect");if(d.removeClass("animate"),!d.height()&&!d.width()){var e=Math.max(c.outerWidth(),c.outerHeight());d.css({height:e,width:e})}var f=b.pageX-c.offset().left-d.width()/2,g=b.pageY-c.offset().top-d.height()/2;d.css({top:g+"px",left:f+"px"}).addClass("animate")})}(jQuery);
//]]>
</script> </code></pre>
<br />
<blockquote class="tr_bq">
Fungsi dari kode <b>jQuery </b>tersebut yaitu untuk memunculkan efek Ripple pada tombol saat disentuh oleh kursor</blockquote>
<br />
6. Selanjutnya klik pada tombol <b>Simpan Template</b><br />
<b><br />
</b> <br />
<h3>
Cara Memasang Tombol Demo dan Download pada Postingan</h3>
<div>
1. Buatlah sebuah postingan baru</div>
<div>
2. Kemudian tambahkan kodel <b>HTML </b>di bawah ini pada bagian tab <b>HTML </b>(bukan <b>Compose</b>)<br />
<br /></div>
<a href="https://3.bp.blogspot.com/-ICeiH-Cgyoc/WeCivbhyABI/AAAAAAAACOA/icHZKxBbVbU3XiDT8AlPOcwXMRzguHHVQCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Membuat Tombol Demo dan Download Material Design" border="0" data-original-height="89" data-original-width="754" height="74" src="https://3.bp.blogspot.com/-ICeiH-Cgyoc/WeCivbhyABI/AAAAAAAACOA/icHZKxBbVbU3XiDT8AlPOcwXMRzguHHVQCLcBGAs/s640/Untitled.png" title="Menambahkan kode HTML pada tab HTML" width="640" /></a><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div id="wrap">
<a class="tombolripple tsatu ripple-effect" href="<b><span style="color: yellow;">#</span></b>" rel="nofollow" target="_blank">Demo</a>
<a class="tombolripple tdua ripple-effect" href="<b><span style="color: yellow;">#</span></b>" rel="nofollow" target="_blank">Download</a>
</div> </code></pre>
<br />
<blockquote class="tr_bq">
Ganti pada kode <b># </b>dengan link tujuan kalian</blockquote>
<br />
3. Jika sudah, klik pada tombol <b>Publikasikan </b>dan lihat hasilnya.<br />
<br />
Itulah tadi tutorial, cara <a href="http://www.jurnalblog.com/2017/10/membuat-tombol-demo-dan-download.html">membuat tombol demo dan download material design</a> yang terlihat simpel dan tetap elegant. Semoga bermanfaat bagi kita semua, sekian dan terimakasih.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-64191402405564019432017-10-10T11:00:00.001+08:002017-10-10T11:02:38.322+08:00Memotong Snippet Popular Posts di Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-B7ZG-9v644M/Wdw3eF3RkSI/AAAAAAAACM0/uLApTFHGcrAoarGgxVm983cPf5Wl_uYUQCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memotong Snippet Popular Posts di Blogger" border="0" data-original-height="920" data-original-width="1600" height="368" src="https://1.bp.blogspot.com/-B7ZG-9v644M/Wdw3eF3RkSI/AAAAAAAACM0/uLApTFHGcrAoarGgxVm983cPf5Wl_uYUQCLcBGAs/s640/Tumbnail%2B1.png" title="Memotong Snippet Popular Posts di Blogger" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/10/memotong-snippet-popular-posts-di.html">Memotong Snippet Popular Posts di Blogger</a> - </b>Cara memotong snippet popular posts merupakan salah satu widget yang cukup popular untuk dipasang di blog. Fungsi dari widget ini yaitu memberitahukan informasi kepada pembaca, postingan atau artikel apa saja yang sering dibaca berdasarkan settingan waktu yang telah ditentukan baik 7 hari, 30 hari atau setiap saat. Sehingga, pembaca akan mendapatkan lebih banyak pilihan untuk menelusuri setiap halaman pada blog kita.<br />
<br />
Kombinasi terhadap judul post, tumbnail dan snippet/ deskripsi singkat pada widget popular posts terkadang terlihat kurang rapi saat di pasang pada sidebar yang berakibat pada tampilan atau desain halaman jadi terlihat berantakan. Untuk itu, kita perlu untuk memotong snippet atau deskripsi singkat dari popular post tersebut.<br />
<br />
Langsung saja, silahkan kalian ikuti tutorial berikut ini untuk memotong snippet popular posts di blog.<br />
<br />
<h3>
Cara Memotong Snippet Popular Posts di Blogger</h3>
<div>
1. Masuk dalam akun blogger kalian terlebih dahulu.</div>
<div>
2. Pilih bagian <b>Template > Edit HTML</b></div>
<div>
3. Tambahkan kode <b>jQuery </b>di bawah ini, tepat berada di atas kode <b><span style="color: #3d85c6;"></body></span></b></div>
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
var txt=$(this).text().substr(0,<span style="color: yellow;"><b>48</b></span>);
var j=txt.lastIndexOf(' ');
if(j>42)
$(this).text(txt.substr(0,j).replace(/[?,!.-:;]*$/,'...'));
});
//]]>
</script> </code></pre>
<br />
<blockquote>
Silahkan kalian ganti, pada kode yang berwarna kuning dengan jumlah huruf yang ingin ditampilkan</blockquote>
4. Klik pada tombol <b>Simpan Template</b><br />
<b><br /></b>
Demikianlah tadi tutorial, cara <a href="http://www.jurnalblog.com/2017/10/memotong-snippet-popular-posts-di.html">memotong snippet popular posts di blogger</a>. Semoga bermanfaat bagi kita semua, selamat berkarya dan sampai jumpa.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-80103139813208435562017-10-08T16:12:00.001+08:002017-10-08T16:17:05.673+08:0014 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-MG2VO0bT7Jo/WdndnSkAhDI/AAAAAAAACL4/H0U9DaomZTcZhFKvpkA78Vt45Q9gPPrGQCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="http://www.jurnalblog.com" border="0" data-original-height="617" data-original-width="1600" height="246" src="https://3.bp.blogspot.com/-MG2VO0bT7Jo/WdndnSkAhDI/AAAAAAAACL4/H0U9DaomZTcZhFKvpkA78Vt45Q9gPPrGQCLcBGAs/s640/Tumbnail%2B1.png" title="14 Situs Tools untuk Mengukur Kecepatan Loading Blog" width="640" /></a></div>
<b><br />
</b> <b><a href="http://www.jurnalblog.com/2017/10/14-situs-tools-untuk-mengukur-kecepatan.html">14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!</a> -</b> Mengetahui kecepatan blog dalam memuat laman merupakan suatu hal yang penting dan perlu untuk diperhatikan. Karena dengan menurunnya kecepatan blog dalam memuat laman akan mempengaruhi terhadap kejenuhan visitor untuk menunggu (loading), tentu hal tersebut akan berimbas pada larinya pengunjung dari blog kita. Selain itu, kecepatan blog juga memiliki pengaruh terhadap rangking hasil pencarian.<br />
<br />
Maka dari itu, pastikan bahwa kecepatan blog kalian tidak terlalu lambat, faktor yang paling umum dalam menurunnya kecepatan blog salah satunya yaitu gambar yang tidak di optimasi. Sehingga bagi setiap blog yang membahas tentang tutorial, tentu banyak gambar yang digunakan dalam mendukung kontennya. Oleh karena itu, pastikan gambar yang akan kalian <i>upload</i>, terlebih dahulu sudah <a href="http://www.jurnalblog.com/2017/09/cara-mengecilkan-ukuran-gambar-dengan.html" target="_blank">kalian kurangi ukurannya</a> agar tidak terlalu memberatkan kinerja blog.<br />
<br />
Seperti yang telah saya singgung di atas, bahwa kecepatan blog yang di bawah rata-rata akan berpengaruh terhadap kepuasan pengunjung, selain itu juga akan berdampak buruk bagi mesin penelusuran. Hal tersebut dikarenakan bahwa data URL blog kalian telah tersimpan dan diindeks oleh mesin pencari. Namun, jika pengunjung kalian menemui error URL pada blog kalian yang disebabkan oleh beratnya loading blog kalian dalam memuat laman sehingga berujung pada error URL, maka error URL tersebut juga akan ikut tersimpan di database mesin pencari. Sehingga masalah tersebut berpengaruh terhadap trafik dan perkembangan rangkin blog kalian di mesin penelusuran.<br />
<br />
Nah, untuk dapat meningkatkan kecepatan blog. Terlebih dahulu kalian harus mengetahui kecepatan situs blog kalian dengan memanfaatkam situs <i>tools</i> untuk mengukur kecepatan situs blog yang dapat kalian akses secara gratis, sehingga kalian dapat mengetahui kinerja yang sudah atau perlu untuk di optimalkan lagi.<br />
<br />
Berikut merupakan 14 situs <i>tools</i> untuk mengukur kecepatan loading blog yang dapat digunakan secara gratis, sehingga dengan menggunakan <i>tools</i> ini. Kalian mengetahui berapa nilai kecepatan dari blog kalian, serta hal-hal apa saja yang perlu untuk dilakukan pengoptimalan.<br />
<br />
<h3>
14 Situs Tools untuk Mengukur Kecepatan Loading Blog </h3>
<b><br />
</b> <b>1. Google PageSpEed Insight</b><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-sC6_95vEM0Q/WdnE-LdvEEI/AAAAAAAACJs/sB04j7je8JwLNkyLfGqKbqVoQCyLvj_aQCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="212" data-original-width="1341" height="100" src="https://4.bp.blogspot.com/-sC6_95vEM0Q/WdnE-LdvEEI/AAAAAAAACJs/sB04j7je8JwLNkyLfGqKbqVoQCyLvj_aQCLcBGAs/s640/Untitled.png" title="PageSpeed Insights" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Google PageSpeed Insight</td></tr>
</tbody></table>
<br />
Google PageSpeed Insights merupakan salah situs yang dapat kalian manfaatkan untuk mengetahui kecepatan akses blog. Google PageSpeed Insights akan me<i>review</i> sekaligus menganalisis konten blog Kalian sekaligus memberikan solusi yang seharusnya kalian lakukan, mulai dari mengurangi waktu respon server, optimasi javascript dan CSS, cache browser, ukuran gambar, dan lainnya. Ini sangat penting, jika kalian belum mengetahuinya, maka segera cek kecepatan loading blog Kalian sekarang juga.<br />
<br />
Google PageSpeed Insight adalah alat uji kecepatan situs web yang memberi peringkat pada situs web kalian dalam skala 1 – 100 yang diberdayakan oleh Google. Semangkin tinggi jumlahnya, semangkin baik pengoptimalan web kalian. Angka yang baik untuk situs web kalian adalah 85 keatas, karena menunjukan situs web atau blog kalian bekerja dengan baik. PageSpeed memberi kalian laporan untuk versi dekstop dan versi seluler situs kalian. Kalian dapat melihat rekomendasi perbaikan setelah uji kecepatan, untuk perbaikan yang di butuhkan seperti mengurangi waktu respon server, optimasi javascript dan CSS, cache browser, ukuran gambar, dan lainnya.<br />
<br />
<b>2. Gt-Metrix </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-PAZqiJTj1i8/WdnGHHWbxsI/AAAAAAAACJ4/aboJGF-np5UGzWZbcmuELmFwbVaL_6_ggCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="364" data-original-width="1341" height="172" src="https://1.bp.blogspot.com/-PAZqiJTj1i8/WdnGHHWbxsI/AAAAAAAACJ4/aboJGF-np5UGzWZbcmuELmFwbVaL_6_ggCLcBGAs/s640/Untitled.png" title="GtMetrix" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">GTmetrix</td></tr>
</tbody></table>
<b><br />
</b> Selain Google PageSpeed Insights, GTmetrix juga merupakan situs tools gratis yang berfungsi untuk mengukur kecepatan loading blog. Kalian akan mendapatkan banyak hal yang mempengaruhi loading blog ketika diakses, kalian juga bisa membandingkan kecepatan loading blog kalian dengan blog lain melalui GTmetrix. Selain itu, GtMetrix sangat detail dalam memeriksa dan memberikan laporan metrik pagespeed dan Yslow. Penilaian yang diberikan oleh pihak GtMertix terhadap kecepatan situs yaitu dalam skala A sampai F, laporan terbagi dalam lima bagian PageSpeed, Yslow, video dan Histori (sejarah).<br />
<br />
Dengan pendaftaran yang gratis, kalian dapat mengetest dari tujuh lokasi berbeda. Kalian dapat memilih browser sebagai pembanding, Firetox vs Chrome. Kalian dapat menguji dan membandingkan kinerja situs dengan berbagai jenis koneksi seperti: cable vs dial-up untuk melihat bagaimana beban yang mempengaruhi laman situs kalian. Fitur lainnya seperti pemutaraan video untuk mengatasi kemacetan (buffering) dan juga kemampuan menjalankan AdBlock plus. Dengan iklan yang di nonaktifkan kalian dapat melihat bagaimana pengaruhnya terhadap pemuatan situs kalian.<br />
<br />
<b>3. Ping-Dom</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-m0U22yN-OG0/WdnGwQmWJ8I/AAAAAAAACKA/khWvYOjsvogSyZ51tujrvRDuVln1y9d9QCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="415" data-original-width="1233" height="214" src="https://1.bp.blogspot.com/-m0U22yN-OG0/WdnGwQmWJ8I/AAAAAAAACKA/khWvYOjsvogSyZ51tujrvRDuVln1y9d9QCLcBGAs/s640/Untitled.png" title="PingDom" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PingDom</td></tr>
</tbody></table>
<br />
PingDom mungkin salah satu alat uji kecepatan situs yang lebih terkenal. Laporan mereka di bagi menjadi empat bagian yang mencangkup tingkat kinerja, analisis halaman, dan history (riwayat). Analisis halaman menawarkan ikhtisar yang sangat bagus dengan menambahkan informasi seperti analis ukuran, ukuran per domain (kalian dapat mengukur situs blog mas mukti dengan situs blog/web kalian), jumlah permontaan per domain dan jenis konten yang banyak diminati.<br />
<br />
Namun yang menjadi kelemahan dari pingdom ini, yaitu kalian perlu untuk melakukan pendaftaran akun terlebih dahulu, baru bisa masuk ke dalam situs untuk menggunakan tools-tools yang ada, salah satunya yaitu mengukur kecepatan loading blog kalian. Disamping itu, jika kalian ingin menggunakan situs dari pingdom ini secara berkelanjutan kalian diharuskan untuk membayar, artinya kalian hanya bisa menggunakan tools ini secara gratis selama 14 hari.<br />
<br />
<b>4. WebPage-Test </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-aoVIIjIl9qs/WdnHbL7xFQI/AAAAAAAACKI/7QXnXXfmh4gpr9G8uyBOnaRW45j4yoltgCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="430" data-original-width="1014" height="270" src="https://1.bp.blogspot.com/-aoVIIjIl9qs/WdnHbL7xFQI/AAAAAAAACKI/7QXnXXfmh4gpr9G8uyBOnaRW45j4yoltgCLcBGAs/s640/Untitled.png" title="WebPagetest" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">WebPagetest</td></tr>
</tbody></table>
<br />
WebPage Test sangat mirip dengan beberapa alat uji kecepatan lainnya, namun memiliki lebih dari 40 lokasi untuk dipilih dan lebih dari 25 browser (termasuk juga mobile). Kalian hanya perlu mengklik “Page Speed” dan memulai pengecekan loading blog kalian. Setelah itu, Webpagetest akan memberikan solusi untuk meningkatkan kecepatan loading blog kalian.<br />
<br />
WebPage Test Ini memberikan nilai dalam skala dari F ke A berdasarkan dari berbagai tes kinerja seperti Cache, kompresi, FFTB, pengginaan CDN yang efektif, dan lain-lain. Laporan ini terbagi menjadi enam bagian meliputi: ringkasan rincian, rincian kinerja, rincian konten, dan Screen Shot.<br />
WebPage Tes memiliki fitur yang canggih seperti pengambilan video, menonaktifkan javascript, mengabaikan sertifikal SSL, mempunyai fitur otomatis untuk melacak asal Negara, dan masih banyak lagi keunggulannya.<br />
<br />
<b>5.</b> <b>KeyCDN </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-Opnf2F_5Xlw/WdnIGiVyi_I/AAAAAAAACKQ/r77nHuDiMigCiIClad06e9JPPjtThAbGgCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="420" data-original-width="1130" height="236" src="https://1.bp.blogspot.com/-Opnf2F_5Xlw/WdnIGiVyi_I/AAAAAAAACKQ/r77nHuDiMigCiIClad06e9JPPjtThAbGgCLcBGAs/s640/Untitled.png" title="KeyCDN" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">KeyCDN</td></tr>
</tbody></table>
<br />
KeyCDN merupakan situs uji kecepatan web yang baru dikembangkan pada tahun 2017. Ini merupakan uji kecepatan yang ringan kalian dapat menggunakan untuk menambah pengetahuan yang terperinci tentang situs kalian. Pada situs ini terdapat 14 lokasi yang ditawarkan untuk dipilih di seluruh dunia, kalian dapat membuat hasil tes secara pribadi atau publik. Tes ini meliputi pratinjau situs web visual di bagian bawah. KeyCDN meskipun merupakan situs baru, namun situs alat uji kecepatan blog ini sangat responsif dan bagus di perangkat seluler.<br />
<br />
<b>6. Varvy Pagespeed Optimization </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-vOlaezyJ8V4/WdnIoR95paI/AAAAAAAACKY/KxgCLyc1PdA06ud6oGbdJwfr5Ver5FS1wCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="370" data-original-width="1228" height="192" src="https://4.bp.blogspot.com/-vOlaezyJ8V4/WdnIoR95paI/AAAAAAAACKY/KxgCLyc1PdA06ud6oGbdJwfr5Ver5FS1wCLcBGAs/s640/Untitled.png" title="Varvy" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Varvy</td></tr>
</tbody></table>
<b><br />
</b> Varvy Pagespeed Optimization adalah alat yang dikembangkan dan dikelola olah Patrick Sexton, yang juga menciptakan situs getlisted.org, yang sekarang di kenal dengan nama Moz Local.<br />
Laporan dibagi menkadi 5 bagian yang berbeda termasuk diagram sumber, pengoriman css, pengunaan javascript, masalah kecepatan halaman yang ditemukan, dan layanan yang digunakan. Alat ini lebih banyak menggunakan representasi grafis tentang apa yang dapat di perbaiki di situs kalian, contoh memuat pencekalan.<br />
<br />
Varvy Pagespeed Optimization ini juga memberikan dokumentasi tentang bagaimana cara mengoptimalkan situs kalian dengan tutorial di jalur perenderan, menunda pemuatan javascript dan masih ada banyak lagi. Selain pagespeed opyimization, Varvy juga menyediakan alat untuk mengukur kualitas SEO, dan Mobile SEO dari situs kalian. Inilah salah satu kelebihan dari situs varvy yang multifungsi. Sehingga disamping kita mengukur kecepatan loading blog, kita juga bisa mengukur kualitas blog kita dari sisi SEO dan Mobile.<br />
<br />
<b>7. PageScoring </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-n0JeBGntQz8/WdnJOHvftYI/AAAAAAAACKg/Y1nHwRTW0v4pYE_7d4yvb5jtKp3oaWxHACLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="180" data-original-width="792" height="144" src="https://3.bp.blogspot.com/-n0JeBGntQz8/WdnJOHvftYI/AAAAAAAACKg/Y1nHwRTW0v4pYE_7d4yvb5jtKp3oaWxHACLcBGAs/s640/Untitled.png" title="PageScroring" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PageScoring</td></tr>
</tbody></table>
<br />
PageScoring merupakan salah satu situs untuk menguji kecepatan yang menawarkan laporan kinerja yang sederhana dan mudah dimenggerti dengan desain yang minimalis. Sebab, kalian langsung bisa menggunakan tools tersebut tanpa harus membuat akun terlebih dahulu. Situs ini akan menunjukan keseluruhan waktu muat. Informasi lihat di bawah:<br />
<br />
<ul>
<li>Pencarian domain</li>
<li>Waktu koneksi</li>
<li>Ukuran laman</li>
<li>Ukuran download</li>
<li>Waktu pengalihan</li>
</ul>
<br />
Kalian dapat mencoba uji kecepatan ini berapa lama waktu yang dibutuhkan untuk memuat laman situs.<br />
<br />
<b>8. PerfTooL </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-wFPcrHUJiSM/WdnKER01QwI/AAAAAAAACKo/0NOKGWHwBY4KNvZAWrBh9RfXNmGVvBy3wCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="408" data-original-width="1219" height="214" src="https://2.bp.blogspot.com/-wFPcrHUJiSM/WdnKER01QwI/AAAAAAAACKo/0NOKGWHwBY4KNvZAWrBh9RfXNmGVvBy3wCLcBGAs/s640/Untitled.png" title="PerfTool" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PerfTool</td></tr>
</tbody></table>
<b><br />
</b> PerfTool adalah proyek open source client side performance tool, yang di-host di github. Ini mengumpulkan berbagai informasi tentang situs kalian dan menampilkan dengan mudah pada halaman laporan. Ini mengabungkan tiga sumber data menjadi satu, Pagespeed Insights, devperf, dan W3CJS. Kalian dapat membandingkan lebih dari 200 indikator kinerja yang berbeda.<br />
Kelebihan dari perftool adalah kalian dapat menjalankan beberepa halaman tes sekaligus untuk laporan google pagespeed insights. Kemudian, bandingkan hasil dari tes dari yang sebelumnya sudah pernah di coba.<br />
<br />
<b>9. Dotcom-monitor </b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-OUPgEAZkQ7w/WdnK41SgnkI/AAAAAAAACKw/qNgJJhuSTeMmK9OmvhdZ0wKIaJfI1CjegCLcBGAs/s1600/Untitled.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="200" data-original-width="448" height="283" src="https://4.bp.blogspot.com/-OUPgEAZkQ7w/WdnK41SgnkI/AAAAAAAACKw/qNgJJhuSTeMmK9OmvhdZ0wKIaJfI1CjegCLcBGAs/s640/Untitled.jpg" title="Dotcom-Monitor" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Dotcom-Monitor</td></tr>
</tbody></table>
<b><br />
</b> Dotcom-monitor menawarkan 23 lokasi yang berbeda dengan 7 browser dimana kalian dapat menjalankan tes kecepatan situs web kalian. Fitur unik ini adalah kalian dapat menjalankan semua tes geografis secara bersamaan. Kalian dapat menghemat waktu, karena alat uji kecepatan yang lain mungkin kalian menjalankan nya satu demi satu.<br />
Penguji kecepatan ini terbagi atas beberapa bagian yang berbeda, diantaranya yaitu: Ringkasan, Kinerja, Host dan Error.<br />
<b><br />
</b> <b>10. Uptrends</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-uvS9W_exr5Q/WdnLlqF_IeI/AAAAAAAACK4/5cnjTeNEA4wGDPLoDmrwXkr63G3qhU3-ACLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="609" data-original-width="1317" height="294" src="https://4.bp.blogspot.com/-uvS9W_exr5Q/WdnLlqF_IeI/AAAAAAAACK4/5cnjTeNEA4wGDPLoDmrwXkr63G3qhU3-ACLcBGAs/s640/Untitled.png" title="Uptrends" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Uptrends</td></tr>
</tbody></table>
<b><br />
</b> Uptrends cukup mendasar tetapi mereka menawarkan lebih dari 35 lokasi yang dapat kalian pilih ketika menjalankan tes kecepatan. Laporan mereka dipecah menjadi dua bagian, gangguan air terjun dan kelompok domain. Kelompok-kelompok domain menawarkan perspektif yang unik karena mengkategorikan sumber daya ke sumber yang berbeda: Partai 1, statistik, CDN, sosial, iklan, pihak pertama secara keseluruhan, dan pihak ketiga secara keseluruhan.<br />
<br />
<b>11. Yellow Lab </b><b>Tools</b><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-pvGQ2PCcwDU/WdnMDaXP35I/AAAAAAAACK8/FOfp8Jgds5EFfqYnYc7z1TKemsSpzxXxACLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="401" data-original-width="815" height="314" src="https://2.bp.blogspot.com/-pvGQ2PCcwDU/WdnMDaXP35I/AAAAAAAACK8/FOfp8Jgds5EFfqYnYc7z1TKemsSpzxXxACLcBGAs/s640/Untitled.png" title="Yellow Lab Tools" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Yellow Lab Tools</td></tr>
</tbody></table>
<b><br />
</b> Yellow Lab Tools adalah kinerja web dan front-end alat pengujian kualitas yang lebih baru dikembangkan oleh Gaël Metais. Kelebihan yang ditawarkan pada situs ini, yaitu kalian tidak perlu melakukan pendaftaran akun, artinya kalian langsung bisa melakukan uji coba kecepatan situs kalian baik melalui simulasi desktop, tablet, maupun mobile device. Alat ini memberikan banyak informasi dan beberapa fitur unik yang tidak terlihat di alat-alat lain seperti pemKalianngan saat interaksi JavaScript dengan DOM selama pemuatan halaman dan masalah kode validasi lainnya. Mendapatkan skor global berdasarkan kualifikasi berikut.<br />
<ul>
<li>Berat halaman</li>
<li>Permintaan</li>
<li>DOM</li>
<li>Bad Javascript</li>
<li>Bad CSS</li>
<li>Server Config</li>
<li>Timeline JavaScript menunjukkan dengan tepat bagaimana DOM berinteraksi selama pemuatan halaman.</li>
</ul>
<br />
<b>12. DevTools Google Chrome</b><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-7gC3NTJjf0A/WdnWFHbZg1I/AAAAAAAACLk/KU2k2ovKwNo-YlZJA3w2o7wCKfQSF65vQCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="195" data-original-width="536" height="232" src="https://4.bp.blogspot.com/-7gC3NTJjf0A/WdnWFHbZg1I/AAAAAAAACLk/KU2k2ovKwNo-YlZJA3w2o7wCKfQSF65vQCLcBGAs/s640/Untitled.png" title="DevTools Google Chrome" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DevTools Google Chrome</td></tr>
</tbody></table>
<b><br />
</b> Google Chrome DevTools merupakan salah satu tools yang disediakan oleh Google Chrome yang dapat kita gunakan dalam mengukur kecepatan blog kita. Penggunaan tools ini juga cukup mudah dan kalian dapat dengan cepat memulai kapan saja di broswer Chrome Pilih More Tools > Developer Tools dari Menu Chrome.<br />
Klik-kanan pada elemen laman dan pilih Inspect<br />
Gunakan pintasan keyboard Ctrl+Shift+I (Windows) atau Cmd+Opt+I (Mac)<br />
<br />
<b>13. Sucuri Load Time Tester</b><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-jcyNfAKcDiI/WdnM0FCM4dI/AAAAAAAACLE/RyDv9YcoLFYzj0R4dJD_FXTX618sjdozgCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="275" data-original-width="998" height="176" src="https://2.bp.blogspot.com/-jcyNfAKcDiI/WdnM0FCM4dI/AAAAAAAACLE/RyDv9YcoLFYzj0R4dJD_FXTX618sjdozgCLcBGAs/s640/Untitled.png" title="Sucuri Load Time Tester" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sucuri Load Time Tester</td></tr>
</tbody></table>
<b><br />
</b> Sucuri Load Time Tester merupakan salah satu situs untuk mengukur kecepatan loading blog kalian secara gratis, pada situs ini kalian bisa mengukur kecepatan blog kalian tanpa melakukan pendaftaran akun terlebih dahulu. Penggunaannya juga cukup mudah, sebab kalian hanya perlu memasukkan url blog kalian, kemudian klik pada tombol test load time. Lalu situs ini akan menyajikan laporan, berapa lama waktu yang dibutuhkan dalam membuka situs kalian dari berbagai lokasi. Penilaian yang diberikan yaitu dari A sampai F. Sebuah nilai yang sangat penting untuk memperhatikan adalah "waktu untuk byte pertama", yang memberi Kalian berapa lama waktu untuk konten yang akan dikirim kembali ke browser untuk mulai memproses halaman.<br />
<br />
<b>14. Pagelocity</b><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-Gx-1r7aupu4/WdnRB28G0WI/AAAAAAAACLQ/XDnm90fN3CUwzTOvFxQIzzEznhmFDiW3wCLcBGAs/s1600/Untitled.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="14 Situs Tools untuk Mengukur Kecepatan Loading Blog, Gratis!" border="0" data-original-height="129" data-original-width="448" height="184" src="https://3.bp.blogspot.com/-Gx-1r7aupu4/WdnRB28G0WI/AAAAAAAACLQ/XDnm90fN3CUwzTOvFxQIzzEznhmFDiW3wCLcBGAs/s640/Untitled.jpg" title="Pagelocity" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Pagelocity</td></tr>
</tbody></table>
<b><br />
</b> Situs Pagelocity menawarkan cara unik lain untuk menganalisis kecepatan website. Sebab situs ini tidak hanya memberikan laporan performa saja, melainkan dilihat dari segi SEO, dan Kode Insight dengan penilaian menggunakan skala 100 yang terdiri dari faktor-faktor seperti sosial, SEO, sumber daya, dan kode. Alat ini juga menawarkan kemampuan untuk melacak pesaing Kalian.<br />
<br />
Selain bisa langsung digunakan tanpa melakukan pendaftaran akun, kalian juga dapat mendaftar untuk mendapatkan akun gratis demi mendapatkan keuntungan dari fitur tambahan. Tampilan kode ini terutama unik karena akan menunjukkan jika situs Kalian berjalan melalui HTTPS, apa TTFB Kalian, dan antarmuka grafis dari elemen DOM Kalian dengan bar chart.<br />
<br />
Seperti yang telah kalian lihat ada banyak sekali jumlah alat uji kecepatan situs web yang dapat kalian pilih. Masing-masing memiliki fitur unik tersendiri seperti yang sudah di bahas diatas. Ada baiknya jika kalian menguji kecepatan secara rutin dan menetapkan patokan sehingga dengan berjalan nya waktu kalian dapat melakukan perbaikan.<br />
<br />
Begitu kalian mengetahui bahwa situs kalian terdapat loading lama, kalian bisa memperbaikinya. Hampir semua alat di atas yang saya rekomendasikan. Beberapa laporan yang diberikan untuk segera dilakukan perbaikan yang umum meliputi:<br />
<ul>
<li>Memilih web host dengan cepat</li>
<li>Mengompresi gambar dan file kalian</li>
<li>Mengurangi jumlah permintaan HTTP</li>
<li>Menggunakan jaringan pengirim Konten</li>
<li>Caching</li>
<li>Mengoptimalkan kode dan script kalian.</li>
</ul>
Demikianlah tadi, artikel tentang <a href="http://www.jurnalblog.com/2017/10/14-situs-tools-untuk-mengukur-kecepatan.html"><i>tools </i>yang dapat kalian gunakan untuk mengukur kecepatan situs blog kalian secara gratis</a>. Silahkan untuk kalian cek performa situs blog kalian, apakah sudah dalam keadaan baik atau masih perlu untuk dilakukan perbaikan baik dari segi gambar, cache maupun lainnya. Jika ada hal yang kurang dimengerti silahkan untuk ditanyakan melalui kolom komentar dibawah.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-51628363298779683962017-10-07T20:34:00.002+08:002017-10-07T20:37:21.107+08:00Mengganti Fungsi Widget Label Menjadi Dropdown<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-sEn4N-XrkeU/WdjJwn9MfwI/AAAAAAAACJE/lUsMOLQFn3w7e8tjq1OmKtuRJEuF04jEwCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Label Dropdown" border="0" data-original-height="617" data-original-width="1600" height="246" src="https://1.bp.blogspot.com/-sEn4N-XrkeU/WdjJwn9MfwI/AAAAAAAACJE/lUsMOLQFn3w7e8tjq1OmKtuRJEuF04jEwCLcBGAs/s640/Tumbnail%2B1.png" title="Mengganti Fungsi Widget Label Menjadi Dropdown" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/10/mengganti-fungsi-widget-label-menjadi.html">Mengganti Fungsi Widget Label Menjadi Dropdown -</a> </b>Widget label berfungsi untuk memudahkan pengunjung dalam memilih artikel yang sejenis atau selabel. Sedangkan fungsi dari dropdown sendiri yaitu untuk menghemat ruang dari <i>sidebar</i>. Seperti yang telah kita ketahui bahwa pada tampilan <i>setting </i>label terdapat dua fungsi dan tampilan, yaitu tampilan daftar label dan <i>cloud </i>label.<br />
<br />
Maka dari itu pada kesempatan kali ini saya akan memberikan tutorial Mengganti Fungsi Widget Label Menjadi Dropdown. Sehingga nantinya widget label kalian akan terlihat secara <i>dropdown </i>yang lebih menghemat ruang dan tentunya akan lebih mempercantik tampilan karena terlihat lebih rapi. Tampilannya sendiri sama dengan tampilan <i>dropdown </i>pada widget arsip.<br />
<br />
Langsung saja, ikuti langkah-langkah berikut ini untuk mengubah fungsi widget label menjadi dropdown.<br />
<br />
<h3>
Mengganti Fungsi Widget Label Menjadi Dropdown</h3>
1. Masuk terlebih dahulu dalam akun blog kalian<br />
2. Pilih pada menu <b>Template > Edit HTML</b><br />
3. Kemudian carilah kode seperti di bawah ini dengan menggunakan <b>Ctrl+F </b>pada keyboard kalian<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
(
<data:label.count/>)
</li>
</b:loop>
</ul> </code></pre>
<br />
Ganti seluruh kode di atas tersebut dengan kode di bawah ini<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div class="dropmedown">
<select class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'>
<option> <b>Search Category</b> </option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'>
<data:label.name/> (
<data:label.count/>)
</option>
</b:loop>
</select>
</div> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti pada tulisan yang bercetak tebal sesuai dengan yang diinginkan</blockquote>
<br />
4. Kemudian, tambahkan kode <b>CSS </b>di bawah ini, sebelum kode <b>]]></b:skin> </b>atau <b></style></b><br />
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> /* Dropdown Label */
.dropmedown select{outline:none;cursor:pointer}
.dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444}
.dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none}
.dropmedown:before{border-bottom-style:solid;border-top:none}
.dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none}
.dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none}
.dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer} </code></pre>
<br />
5. Klik tombol <b>Simpan Template </b>dan lihat hasilnya.<br />
<br />
Silahkan klik tombol <b>Result </b>dibawah ini untuk melihat contohnya<br />
<div id="wrap">
<a class="btn-slide" href="https://jsfiddle.net/amirsID/cLpvs26c/2/embedded/result/" target="_blank"><br />
<span class="circle"><i class="fa fa-rocket"></i></span><br />
<span class="title">Result</span><br />
<span class="title-hover">Click here</span><br />
</a></div>
<br />
Demikianlah tadi tutorial <b><a href="http://www.jurnalblog.com/2017/10/mengganti-fungsi-widget-label-menjadi.html">mengganti fungsi widget label menjadi dropdown.</a></b> Semoga bermanfaat bagi kita semua. Jangan lupa untuk di <i>share</i> ke yang lainnya. Selamat berkarya dan sampai jumpa.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-2613831170083938482017-10-06T15:43:00.003+08:002017-10-06T15:45:36.969+08:004 Tips Memperoleh Uang dari Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-pEHCEMptPcA/Wdc0AyOS79I/AAAAAAAACH4/rXEkj6xhyLA1IZ5fea-_yyZl249scMiLwCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menghasilkan uang dari blog" border="0" data-original-height="617" data-original-width="1600" height="246" src="https://3.bp.blogspot.com/-pEHCEMptPcA/Wdc0AyOS79I/AAAAAAAACH4/rXEkj6xhyLA1IZ5fea-_yyZl249scMiLwCLcBGAs/s640/Tumbnail%2B1.png" title="4 Tips Memperoleh Uang dari Blog" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/10/4-tips-memperoleh-uang-dari-blog.html">4 Tips Memperoleh Uang dari Blog</a> - </b>Terdapat berbagai cara yang dapat dilakukan untuk memperoleh penghasilan (uang) melalui situs blog kalian. Blog yang sebelumnya hanya sebagai tempat berbagai informasi atau semacam catatan harian dengan memanfaatkan teknologi jaringan internet, sekarang telah berubah menjadi profesi yang cukup diminati. Sebab selain menjadi tempat berbagi informasi melalui tulisan-tulisan, blog juga dapat dijadikan sebagai tempat memperoleh materi (uang). Oleh sebab itu, blog bisa menjadi suatu investasi yang cukup menjanjikan, pengembang situs akan memperoleh hasil (passive income) sesuai dengan hasil kerja keras dalam mengembangkan blognya. Pada kesempatan kali ini, saya akan membagikan empat cara mudah untuk mendapatkan profit dari blog, tentu agar kita semakin bersemangat dalam mengelola blog sehingga memberikan suatu manfaat bagi kita semua.<br />
<br />
Era sekarang ini (teknologi informasi), banyak cara yang dapat dilakukan dalam memperoleh penghasilan melalui internet. Salah satunya yaitu melalui blogging. Blogging merupakan salatu satu cari favorit saya dalam memperoleh uang dari internet. Karena banyak manfaat yang kita peroleh dengan menjadi seorang blogger, seperti membangun kepercayaan (branding), mengasah kemampuan menulis, berbagi informasi, dan tentu yang akan saya bahas pada tulisan kali ini yaitu mendapatkan penghasilan secara berkelanjutan (passive income) yang cukup menjanjikan, tentu hal tersebut akan kalian nikmati setelah melakukan kerja keras, konsistensi, doa, dan ikhtiar. Keempat hal tersebut adalah salah satu kunci yang dapat kalian terapkan dalam berbagai konteks seperti menjadi seorang blogger.<br />
<br />
Jika dalam internet terdapat banyak cara untuk memperoleh suatu penghasilan, begitu juga dengan blog. Banyak cara yang dapat kalian lakukan untuk mendapatkan uang atau bahasa lainnya memonetisasi blog kalian. Berikut empat cara yang menurut saya paling sederhana, praktis, simple dan tentunya mudah untuk diterapkan bagi siapa saja dalam menghasilkan penghasilan dari blog yang perlu untuk kalian coba.<br />
<br />
<h3>
Menjual Barang atau Jasa</h3>
Dalam memperoleh penghasilan melalui blog yang paling mudah adalah dengan berjualan. Baik berupa barang atau jasa. Sebab era sekarang ini, dalam berjualan juga sudah dapat kalian lakukan tanpa adanya stock barang, yaitu dengan cara sistem dropship. Tentu dengan adanya sistem dropship tersebut menguntungkan bagi kita yang belum memiliki modal cukup besar. Sehingga kita hanya perlu menyiapkan situs semacam <i>e-commerce</i> dan tinggal proses promosi dengan memanfaatkan sosial media yang ada.<br />
<br />
Selain dengan cara berjualan barang menggunakan sistem dropship, kalian juga bisa menjual barang berupa barang digital seperti <i>template, icon, ebook</i> dan lain sebaginya. Cara ini juga sering digunakan oleh para blogger yang memiliki kemampuan bahasa pemrograman, desain grafis, maupun menulis. Jika kalian memiliki passion dibidang menulis, mungkin kalian bisa menjual <i>ebook</i> sekaligus menjual jasa sebagai <i>content writing</i>. Karena tidak menutup kemungkinan para pelaku bisnis <i>online</i> tidak ada waktu untuk meng<i>update</i> artikel karena terlalu fokus pada pengoptimasian blog. Sehingga hal tersebut membutuhkan orang untuk melakukan <i>update</i> artikel yaitu jasa <i>content writing</i>. Menjual jasa tidak hanya terpaku sebagi<i> content writing</i>, hal tersebut tinggal kalian sesuaikan dengan passion dan kemampuan yang kalian kuasai.<br />
<br />
<h3>
Bergabung Menjadi Publiser Iklan</h3>
Seperti yang sudah saya singgung sebelumnya, bahwa hal yang paling banyak digunakan bagi para blogger di Indonesia khususnya dalam mendapatkan uang dari blog yaitu menjadi publisher. Menjadi publisher merupakan langkah yang mudah untuk diterapkan dan cukup menjanjikan dalam memperoleh <i>passive income</i> dari blog. Kalian dapat menentukan beberapa pilihan jaringan periklanan yang tersedia baik yang berupa <i>pay per click</i> (PPC) yang artinya kalian akan dibayar ketika ada pengunjung yang mengklik iklan, <i>cost per mile</i> (CPM) kalian akan memperoleh hasil ketika iklan tersebut tayang per 1000x, atau <i>cost per action</i> (CPA) kalian mendapatkan hasil ketika pengunjung melakukan aksi dari iklan tersebut seperti mendownload aplikasi yang disarankan atau yang lainnya.<br />
<br />
Jika kalian menentukan untuk menggunakan jasa periklanan sejenis PPC, maka Google Adsense adalah pilihan terbaik yang dapat kalian gunakan dalam memonetisasi blog kalian. Hal tersebut karena kepopuleran dari Google Adsense serta banyak kelebihan dibanding dengan jasa periklanan lainnya seperti kualitas iklan, ketepatan dalam hal pembayaran, nilai impresi iklan, dan lainnya. Namun situs-situs yang menjadi publisher di Google Adsense tentu merupakan situs yang berkualitas, yang telah memenuhi kriteria berdasarkan ketentukan oleh pihak Google Adsense. Namun tidak perlu khawatir, bagi kalian yang masih baru dalam membangun sebuah blog tetap bisa <a href="http://www.jurnalblog.com/2017/10/cara-mudah-menghasilkan-uang-dari-blog.html" target="_blank">menghasilkan uang dari blog meski dengan trafik rendah</a> dengan menjadi publisher di penyedia iklan lainnya.<br />
<br />
Tidak dapat kita pungkiri, bahwa google adsense merupakan jaringan periklanan yang terbaik dan paling banyak digunakan oleh para blogger Indonesia dalam memperoleh uang dari blog. Namun bukan berarti tidak ada jaringan periklanan lainnya. Sebab ada banyak sekali jaringan periklanan yang dapat digunakan terutama bagi para blogger pemula yang ingin menghasilkan uang selain dari google adsens, diantaranya yaitu Chitika, AdNow, PropellerAds, dan lain sebagainya.<br />
<br />
<h3>
Menyediakan Space Iklan Bagi Advertiser</h3>
Kalian juga bisa mendapatkan penghasilan melalui blog kalian dengan cara memberikan <i>space</i> iklan untuk calon pengiklan. <i>Space</i> iklan ini bisa kalian taruh pada samping <i>header</i>, dibawah <i>header</i>, <i>sidebar</i>, maupun di atas <i>footer</i>.<br />
<br />
Namun, tentu cara ini hanya diperuntukan bagi blog yang sudah memiliki cukup banyak pengunjung setiap harinya. Karena tentu tidak mungkin pengiklan akan mengiklankan pada situs yang masih baru atau masih tahap pengembangan. Oleh karena itu, bagi kalian yang sudah memiliki banyak pengunjung perharinya, tidak ada salahnya untuk mencobanya. Buatlah tawaran yang menarik, dan jelas.<br />
<br />
Berikut tips yang mungkin dapat kalian terapkan dalam menarik calon pengiklan agar tertarik beriklan di situs kalian.<br />
<br />
<ul>
<li>Gunakan bahasa yang baik dan mudah untuk dipahami</li>
<li>Jelaskan mengenai diskripsi konten blog kalian</li>
<li>Informasikan jumlah statistik blog kalian</li>
<li>Carilah pengiklan yang sesuai atau memiliki keterkaitan dengan pembahasan di blog kalian. Contoh: blog kalian membahas tentang beasiswa, maka calon pengiklan tentu merupakan dari pengembang bisnis konsultasi pendidikan, maupun lembaga pendidikan lainnya. </li>
<li>Jangan terlalu tinggi dan terlalu rendah dalam mematok harga </li>
<li>Selain itu berikanlah deskripsi harga yang jelas dalam beriklan misalnya, berapa harga yang dibayar untuk disamping header, di sidebar, dan ke unggulan dari masing-masing tempat tersebut.</li>
</ul>
<br />
<h3>
Mengikuti Program Afiliasi</h3>
Program afiliasi merupakan cara yang cukup popular bagi para blogger dalam memperoleh penghasilan dari blog. Dalam program ini kalian perlu memberikan sosialisasi atau istilah lainnya me<i>review </i>terhadap produk yang ada dan jangan lupa untuk mencantumkan link tempat beli produk tersebut, kemudian seseorang melakukan pembelian melalui link yang kalian bagikan, maka dari situlah kalian akan memperoleh komisi sesuai dengan ketentuan besar persen yang sudah ditentukan. Selain menjadi publisher pada penyedia iklan, program afiliasi ini juga patut untuk kalian coba. Sebab tidak menutup kemungkinan penghasilan yang diperoleh melebihi penghasilan dari program periklanan berbasis <i>pay per click</i> (PPC).<br />
<br />
Bagi kalian yang memiliki blog bule (berbahasa Inggris), program afiliasi yang dapat kalian ikuti diantaranya yaitu amazon. Amozan merupakan salah satu <i>e-commerce</i> yang menawarkan program afiliasi yang banyak diikuti oleh para blogger, namun khusus untuk blog yang menggunakan bahasa Inggris saja. Selain itu, kalian juga bisa mencoba untuk mengikuti program afiliasi yang ditawarkan oleh jasa hosting seperti Bluehost.<br />
<br />
Sedangkan bagi kalian yang memiliki blog dengan bahasa Indonesia, tidak perlu khawatir. Sebab kalian juga bisa mengikuti program afiliasi yang ditawarkan oleh situs <i>e-commerce</i> seperti Lazada. Jika kalian memiliki blog yang bertemakan tentang gadget atau barang elektronik lainnya, maka bergabung program afiliasi Lazada perlu untuk kalian coba. Selain lazada, kalian juga bisa mencoba program afiliasi dari web hosting seperti Niaga Hoster.<br />
Tentu dari masing-masing penawar program afiliasi memiliki kelebihan dan kelemahan. Selain itu juga terdapat besar kecil komisi yang diberikan. Sehingga besar kecilnya komisi dari barang satu dengan yang lainnya tentu tidak sama. Namun seperti yang sudah saya singgung diatas, bahwa penghasilan dari program afiliasi ini memiliki potensi melebihi penghasilan dari program periklanan berbasis PPC.<br />
<b><br /></b>
<b>Tips Mengikuti Program Afiliasi</b><br />
<br />
<ul>
<li>Buatlah sosialisasi produk dengan menggunakan bahasa yang baik dan mudah untuk dipahami</li>
<li>Berikan sosialisasi tentang produk yang lagi ngehits dan memiliki nilai jual saat ini</li>
<li>Deskripsikan produk yang kalian tawarkan secara jelas</li>
<li>Jelaskan kelebihan dari produk yang kalian tawarkan</li>
<li>Jangan lupa untuk memberikan link kalian (ini penting)</li>
<li>Gunakan kupon diskon (Jika mengikuti program afiliasi niagahoster)</li>
</ul>
<br />
“Banyak jalan menuju roma” dalam hal memonetisasi blog juga demikian. Banyak cara yang dapat kalian lakukan untuk <a href="http://www.jurnalblog.com/2017/10/4-tips-memperoleh-uang-dari-blog.html">memperoleh penghasilan dari blog</a>, apa yang telah saya jelaskan diatas merupakan bagian kecil dari kesekian banyak cara yang mungkin bisa kalian terapkan untuk memonetisasi blog kalian. Sehingga kalian juga mendapatkan profit yang sebanding dengan usaha serta kerja keras kalian dalam membangun serta mengembangan blog kalian.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-42823273758597441012017-10-05T17:18:00.000+08:002017-10-05T17:19:55.256+08:00Cara Mudah Menghasilkan Uang dari Blog Baru dengan Trafik Rendah<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-QOYBUG68I3s/WdX4n3p9sEI/AAAAAAAACHM/vDo-xa7ig6c6G9IMo8FjJlvJar2yFZ3TACLcBGAs/s1600/Tumbnail%2B1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mendapatkan Uang dari Blog" border="0" data-original-height="173" data-original-width="448" height="244" src="https://4.bp.blogspot.com/-QOYBUG68I3s/WdX4n3p9sEI/AAAAAAAACHM/vDo-xa7ig6c6G9IMo8FjJlvJar2yFZ3TACLcBGAs/s640/Tumbnail%2B1.jpg" title="Cara Mudah Menghasilkan Uang dari Blog Baru dengan Trafik Rendah" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.jurnalblog.com/2017/10/cara-mudah-menghasilkan-uang-dari-blog.html">Cara Mudah Menghasilkan Uang dari Blog Baru dengan Trafik Rendah -</a></b> Blog sebelumnya yang hanya sebagai sarana berbagi informasi atau catatan dalam bentuk elektronik, sekarang sudah mulai bergeser ke arah bisnis yang cukup menjanjikan. Maka tidak heran, sejak diberlakukan ketentuan baru dari Google Adsense pada tahun 2012 bahwa blog dengan bahasa Indonesia sudah bisa didaftarkan sebagai publisher dari Google Adsense banyak sekali para blogger indonesia yang mendaftarkan situs blognya ke Google Adsense.<br />
<br />
Sampai saat ini, Google Adsense (GA) merupakan salah satu jenis mendapatkan uang dari blog yang populer, sehingga banyak para blogger yang mempercayakan pada Google Adsense dalam meraup uang dari blognya. Dengan jenis periklanan berbasis Pay Per Click (PPC), Google Adsense memberikan bayaran dengan jumlah yang tidak terbatas kepada para publishernya. Tentu dengan sistem tersebut setiap blogger cenderung berbeda satu dengan lainnya, hal tersebut bergantung dengan beberapa faktor pendukung. Tidak hanya pada jumlah pengunjung, namun banyak aspek yang menjadi faktornya.<br />
<br />
Sayangnya, menjadi publisher di Google Adsense bukanlah suatu perkara yang mudah, bahkan beberapa blogger pemula kesulitan cara mendaftarkan situsnya, padahal dilihat secara sepintas mendaftar pada Google Adsense cukup mudah, hanya saja untuk menjadi publishernya tidak mudah banyak faktor yang perlu menjadi pertimbangan agar dapat diterima dan menjadi publisher dari Google Adsense tersebut, tentu perusahaan setingkat Google tidak akan asal-asalan dalam meng<i>approve </i>setiap akun blog. Sehingga mereka juga memberikan kriteria blog atau website yang cocok untuk menjadi publisher dan tidak menyalahi aturan yang ada.<br />
<br />
Jika Google Adsense merupakan langkah dalam menghasilkan uang yang banyak digunakan oleh para blogger atau para webmaster yang tentu sudah diluar kepala dalam mengoptimalkan situsnya, serta ada beberapa kriteria yang menjadi acuan pihak google dalam memilih setiap situs yang didaftarkan, apakah ada jenis pengiklan semacam Google Adsense yang juga memberikan penghasilan atau pemasukan yang sebanding dan cocok untuk para blogger pemula? Jawabannya, Ada. Banyak alternatif yang bisa digunakan dalam memonetisasi blog kalian, yang juga memberikan profit tidak jauh berbeda dari yang diberikan oleh Google Adsense.<br />
<br />
Terkait dengan cara menghasilkan uang dari blog, banyak yang dapat kalian lakukan untuk memonetisasi terutama bagi blog yang masih baru dengan jumlah trafik yang rendah, salah satunya yaitu dengan menjadi publisher pada penyedia iklan. Sebenarnya cukup banyak penyedia iklan dengan sistem Pay Per Click baik di luar negeri maupun di dalam negeri. Namun, yang menjadi pokok pembahasannya adalah apakah ada yang hampir menyamai dari Google Adsense? Sehingga profit yang kita hasilkan sebanding dengan trafik dan usaha kita dalam memelihara blog selama ini.<br />
<br />
Menemukan jasa pengiklan berbasis Pay Per Click dan yang sebanding dengan Google Adsense dalam hal profit tentu bukanlah perkara yang mudah, sebab kita perlu untuk mengetahui dari masing-masing kelebihan yang ditawarkan serta bayaran yang diberikan dari penyedia iklan ke situs kita yang sebagai publisher. Terlebih lagi situs yang kita daftarkan tergolong masih baru dan masih sedikit jumlah pengunjungnya. Namun tidak ada salahnya jika saya memberikan alternatif sebagai solusi yang dapat kalian jadikan dalam memonetisasi situs kalian yang masih baru tersebut yaitu PopellerAds.<br />
<br />
PropellerAds adalah layanan periklanan secara online yang dapat digunakan oleh para publisher Indonesia untuk menghasilkan uang secara online melalui blog yang mereka miliki dengan tingkat penghasilan yang cukup besar. Kelebihan yang dimiliki dari PropellerAds itu sendiri yaitu terletak pada proses pendaftaran yang tidak mengharuskan trafik yang tinggi, artinya blog yang masih baru dengan jumlah visitor yang rendah juga bisa melakukan pendaftaran di PropellerAds ini.<br />
<br />
<h3>
Tentang PropellerAds</h3>
<div>
PropellerAds merupakan sebuah situs jaringan periklanan yang didirikan pada tahun 2011. PropellerAds ini menyediakan iklan secara online dengan sistem Cost Per Million (CPM) bagi para publisher, Cost Per Action (CPA) dan Cost Per Lead (CPL) bagi para Advertiser. Seperti yang sudah saya singgung sebelumnya, kelebihan dari situs ini tidak memberikan persyaratan jumlah trafik minimal, sehingga ketika kalian selesai melakukan pendaftaran akan memperoleh pesan bahwa kalian disetujui sebagai publisher dan langsung bisa memasang iklan dalam situs blog kalian.</div>
<div>
<br /></div>
<h3>
Keunggulan PropellerAds</h3>
<div>
Adapun keunggulan yang ditawarkan oleh pihak PropellerAds pada pada publishernya selain profit yang cukup tinggi yaitu:</div>
<div>
<ul>
<li>Tidak adanya jumlah minimum trafik</li>
<li>Pendapat dari Popunder yang tinggi berpotensi menghasilkan pendapatan sampai 200%</li>
<li>Rasio konversi yang tinggi</li>
<li>Tersedia berbagai jenis iklan</li>
<li>Adanya program referral sebesar 5% yang berlaku seumur hidup</li>
</ul>
</div>
<br />
<h3>
Menjadi Publisher di PropellerAds</h3>
<div>
Seperti yang sudah disinggung sebelumnya, untuk menjadi publisher pada situs PropellerAds ini cukup mudah. Sebab tidak ada persyaratan terkait jumlah trafik, sehingga blog baru baik yang menggunakan secara gratisan seperti blogspot, maupun berbayar <i>self hosting </i>bisa melakukan pendaftaran dan langsung bisa memasang iklan. Namun dari pihak PropellerAds sendiri memberikan golongan atau tingkatan bagi para publishernya sesuai dengan trafik yang dimiliki. Akan tetapi bagi kalian yang masih memiliki trafik yang rendah tetap bisa mengoptimalkan penghasilan dari blog kalian, sebab mereka memberikan opsi menampilkan iklan berbasis dekstop maupun mobile.</div>
<div>
<br /></div>
<div>
Berikut ini langkah-langkah pendaftaran dan memasang iklan pada blog kalian.</div>
<div>
<br /></div>
<div>
1. Buka halaman utama <a href="http://www.propellerads.com/?rfd=T3Kq" target="_blank">Propeller Ads Media </a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-beJUyoL5Zv0/WdJmk2jbggI/AAAAAAAACD4/UCg31hcbgZAIamRG6Am8nG7cNRcuh0QsQCLcBGAs/s1600/Gambar%2B1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menghasilkan Uang dari Blog Selain Adsense" border="0" data-original-height="198" data-original-width="448" height="176" src="https://2.bp.blogspot.com/-beJUyoL5Zv0/WdJmk2jbggI/AAAAAAAACD4/UCg31hcbgZAIamRG6Am8nG7cNRcuh0QsQCLcBGAs/s400/Gambar%2B1.jpg" title="Cara Menghasilkan Uang dari Blog dengan Trafik Rendah" width="400" /></a></div>
<br /></div>
<div>
2. Klik pada tombol <b>Register</b> kemudian nanti akan muncul dua pilihan dan pilih pada tombol <b>Publisher</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-xbJhJarg7-M/WdJnz5q3haI/AAAAAAAACEE/lJla8Ureir8TFY6rfLgMxBzS-InLNVlqwCLcBGAs/s1600/Gambar%2B2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menghasilkan Uang dari PropellerAds" border="0" data-original-height="248" data-original-width="1138" height="86" src="https://3.bp.blogspot.com/-xbJhJarg7-M/WdJnz5q3haI/AAAAAAAACEE/lJla8Ureir8TFY6rfLgMxBzS-InLNVlqwCLcBGAs/s400/Gambar%2B2.png" title="Daftar Sebagai Publisher" width="400" /></a></div>
<b><br /></b>
3. Selanjutnya, silahkan kalian pilih mendaftar untuk akun pribadi atau akun perusahaan, contoh disini yaitu sebagai akun pribadi dan isilah beberapa data yang diperlukan seperti <b>Nama Utama, Nama Tengah, Nama Akhir, Negara, Kota, </b>dan<b> Alamat Rumah</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-fMtrE3LA5R0/WdJoJq5WOtI/AAAAAAAACEI/6_vkJfoc0CgkeQF1-g53-sk1s1aBxcnnQCLcBGAs/s1600/Gambar%2B3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memperoleh Uang dari Blog" border="0" data-original-height="499" data-original-width="1341" height="148" src="https://4.bp.blogspot.com/-fMtrE3LA5R0/WdJoJq5WOtI/AAAAAAAACEI/6_vkJfoc0CgkeQF1-g53-sk1s1aBxcnnQCLcBGAs/s400/Gambar%2B3.png" title="Mengisi Identitas Pribadi" width="400" /></a></div>
<b><br /></b>
4. Silahkan scroll kebawah, dan isi juga kolom yang disediakan sesuai dengan identitas kalian seperti <b>Email, Select Messenger, Messenger Details, Your Website, </b>dan <b>Pesan</b> (Semacam Deskripsi Singkat) Jangan lupa untuk klik pada bagian <b>I have read and accepted the Terms and Conditions </b>kemudian klik pada tombol <b>Sign Up As Publisher</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-xfjfayklhdc/WdJqFVyPNPI/AAAAAAAACEU/yep0pu9NqbUoXkoFfXZmS7BQercZwQ_ygCLcBGAs/s1600/Gambar%2B4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mendaftar di PropellerAds" border="0" data-original-height="547" data-original-width="1341" height="162" src="https://2.bp.blogspot.com/-xfjfayklhdc/WdJqFVyPNPI/AAAAAAAACEU/yep0pu9NqbUoXkoFfXZmS7BQercZwQ_ygCLcBGAs/s400/Gambar%2B4.png" title="Mengisi Email di PropellerAds" width="400" /></a></div>
<br />
5. Buka akun email kalian, lalu buka pesan <b>Confirmation Letter</b> dari PropellerAds untuk melakukan konfirmasi akun dengan cara klik pada bagian link yang diberikan seperti yang terlihat pada gambar dibawah ini<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-ZyUo9jRz3FQ/WdJqYoZuqqI/AAAAAAAACEY/6RGvvhQ6bUwdXeXH6a4TKIx8GZ7_lMa3gCLcBGAs/s1600/Gambar%2B5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Aktivasi akun di PropellerAds" border="0" data-original-height="368" data-original-width="1081" height="135" src="https://4.bp.blogspot.com/-ZyUo9jRz3FQ/WdJqYoZuqqI/AAAAAAAACEY/6RGvvhQ6bUwdXeXH6a4TKIx8GZ7_lMa3gCLcBGAs/s400/Gambar%2B5.png" title="Konfirmasi Letter" width="400" /></a></div>
<br />
6. Setelah itu, tunggu beberapa menit hingga masuk sebuah pesan baru <b>Welcome to PropellerAds </b>yang berisikan tentang pemberitahuan akun anda seperti username serta password untuk masuk / login ke akun PropellerAds.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-M3W9kZoeZUk/WdJrUpk783I/AAAAAAAACEg/Gf6EuHGTGT0tZVcOcsY39XKooGzXLRUjACLcBGAs/s1600/Gambar%2B6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mendaftar Publisher di PropellerAds" border="0" data-original-height="392" data-original-width="1092" height="142" src="https://3.bp.blogspot.com/-M3W9kZoeZUk/WdJrUpk783I/AAAAAAAACEg/Gf6EuHGTGT0tZVcOcsY39XKooGzXLRUjACLcBGAs/s400/Gambar%2B6.png" title="Memperoleh Username dan Password" width="400" /></a></div>
<br />
7. Kemudian, kembali lagi ke halaman PropellerAds. pilih menu <b>Sites </b>dan klik tombol <b>Add New Site, </b>masukkan URL blog kalian lalu klik pada tombol <b>Submit</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-oIWSDZ2RTYI/WdJsny9EVHI/AAAAAAAACEs/-ZJ50AqR8LgnWM5E7oG9xaDADg7ocQ4AQCLcBGAs/s1600/Gambar%2B7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memperoleh Profit Tinggi dari PropellerAds" border="0" data-original-height="264" data-original-width="1337" height="78" src="https://1.bp.blogspot.com/-oIWSDZ2RTYI/WdJsny9EVHI/AAAAAAAACEs/-ZJ50AqR8LgnWM5E7oG9xaDADg7ocQ4AQCLcBGAs/s400/Gambar%2B7.png" title="Menambahkan Blog Baru" width="400" /></a></div>
</div>
<div>
<br /></div>
<div>
8. Setelah itu, kalian akan memperoleh script <b>Meta tag </b>untuk melakukan verifikasi kepemilikan situs yang telah kalian tambahkan. Script tersebut silahkan kalian tambahkan pada kode <b>Template </b>kalian dengan cara <b>buka akun blog kalian > Template > Edit HTML </b>carilah kode <b><head> </b>dan silahkan kalian taruh script <b>Meta tag </b>tersebut berada dibawah kode <b><head>. </b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-lUY0ZEQ2lmA/WdJusiSXPDI/AAAAAAAACE4/9dSKydrx5HQHnLP8S3Bs8C9bGOho9VLwACLcBGAs/s1600/Gambar%2B9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Verifikasi Akun Propeller Ads" border="0" data-original-height="349" data-original-width="1343" height="103" src="https://1.bp.blogspot.com/-lUY0ZEQ2lmA/WdJusiSXPDI/AAAAAAAACE4/9dSKydrx5HQHnLP8S3Bs8C9bGOho9VLwACLcBGAs/s400/Gambar%2B9.png" title="Memperoleh Kode Meta Tag" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-PiUqokAG1d8/WdJuwszyYTI/AAAAAAAACE8/7tswZ-Jk0V0SUNXbVNh3FkXlJkm3VT8CACLcBGAs/s1600/Gambar%2B8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mendapatkan Uang dari Blog Baru di PropellerAds" border="0" data-original-height="291" data-original-width="1337" height="86" src="https://2.bp.blogspot.com/-PiUqokAG1d8/WdJuwszyYTI/AAAAAAAACE8/7tswZ-Jk0V0SUNXbVNh3FkXlJkm3VT8CACLcBGAs/s400/Gambar%2B8.png" title="Menambahkan Kode Meta Tag" width="400" /></a></div>
<div>
<br /></div>
<div>
Jika sudah, klik pada tombol <b>Simpan Tema, </b>kembali ke akun <b>PropellerAds </b>dan klik pada tombol <b>Verify</b></div>
<div>
<b><br /></b></div>
<div>
9. Selanjutnya, pilih jenis iklan yang ingin kalian gunakan, seperti <b>Web Advertising, Mobile Advertising, </b>dan <b>Banner Advertising </b>namun yang perlu diketahui bahwa banner advertising hanya diperuntukkan bagi situs yang sudah memiliki 10000 visitor perhari. Sehingga bagi kalian yang masih baru tahap pengembangan dengan jumlah visitor rendah, bisa menggunakan jenis Web Advertising atau Mobile Advertising. Sebagi contoh pilih pada bagian <b>Popunder</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-TFcFkw84aec/WdO3_c6M-RI/AAAAAAAACFc/V7kvm0Ij7WQKcae48Sjj561zi7yHFFa8gCLcBGAs/s1600/Gambar%2B10.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memilih jenis iklan di PropellerAds" border="0" data-original-height="208" data-original-width="448" height="185" src="https://3.bp.blogspot.com/-TFcFkw84aec/WdO3_c6M-RI/AAAAAAAACFc/V7kvm0Ij7WQKcae48Sjj561zi7yHFFa8gCLcBGAs/s320/Gambar%2B10.jpg" title="Memilih jenis iklan di PropellerAds" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
10. Jangan lupa untuk memberikan nama, pada bagian <b>Provide Name </b>untuk memudahkan kalian mengetahui jenis iklan yang kalian gunakan (jika memasang lebih dari satu jenis iklan) kemudian klik <b>Next</b></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-sCUQ9nZjnA8/WdO4K_3fzoI/AAAAAAAACFg/MORiBYblousjDO7lUyXSIZdf16rWBVDkgCLcBGAs/s1600/Gambar%2B11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mendapatkan penghasilan dari propellerads" border="0" data-original-height="360" data-original-width="1334" height="107" src="https://1.bp.blogspot.com/-sCUQ9nZjnA8/WdO4K_3fzoI/AAAAAAAACFg/MORiBYblousjDO7lUyXSIZdf16rWBVDkgCLcBGAs/s400/Gambar%2B11.png" title="Memberikan Nama pada Provide Name" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
11. Setelah itu copy script <b>HTML </b>yang diberikan, dan taruhlah di bawah kode <b style="color: #3d85c6;"><body> </b>dengan cara, masuk ke <b>akun blog kalian > Template > Edit HTML > taruh di bawah kode </b><span style="color: #3d85c6; font-weight: bold;"><body> </span>klik tombol <b>Simpan Template </b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-LjPL4an1O9M/WdO4O-xiZ_I/AAAAAAAACFk/S3LK4WioWMoao_t_z1Gq4Jt6CMbynQhTACLcBGAs/s1600/Gambar%2B12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Mendapatkan uang dari PropellerAds" border="0" data-original-height="443" data-original-width="1334" height="132" src="https://1.bp.blogspot.com/-LjPL4an1O9M/WdO4O-xiZ_I/AAAAAAAACFk/S3LK4WioWMoao_t_z1Gq4Jt6CMbynQhTACLcBGAs/s400/Gambar%2B12.png" title="Menambahkan kode HTML dari PropellerAds" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Banyak cara yang dapat kita gunakan dalam mendapatkan uang dari blog, salah satunya yaitu menjadi publisher dari penyedian jaringan iklan seperti PropellerAds yang merupakan salah satu penyedian iklan yang berani memberikan profit cukup tinggi bagi para publishernya. Sehingga blog baru dengan trafik rendah juga bisa <a href="http://www.jurnalblog.com/2017/10/cara-mudah-menghasilkan-uang-dari-blog.html">memperoleh penghasilan dari blog mereka melalui propellerads</a> ini. Karena pihak propellerads sendiri tidak memberikan syarat jumlah trafik blog. Sehingga sangat saya rekomendasikan bagi kalian semua.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-74199523955509479782017-10-05T15:35:00.001+08:002017-10-05T16:04:29.740+08:00Cara Membuat Tombol Back to Top Versi Kail Pancing<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-gTA1vJl1IAE/WdXgVsi8gaI/AAAAAAAACGw/sO5Lu5EnZyEuyh67rs_-zf6fAL531wmHgCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tombol Back to Top Versi Kail Pancing" border="0" data-original-height="617" data-original-width="1600" height="246" src="https://4.bp.blogspot.com/-gTA1vJl1IAE/WdXgVsi8gaI/AAAAAAAACGw/sO5Lu5EnZyEuyh67rs_-zf6fAL531wmHgCLcBGAs/s640/Tumbnail%2B1.png" title="Cara Membuat Tombol Back to Top Versi Kail Pancing" width="640" /></a></div>
<b><br />
</b> <b><a href="http://www.jurnalblog.com/2017/10/cara-membuat-tombol-back-to-top-versi.html" target="_blank">Cara Membuat Tombol Back to Top Versi Kail Pancing -</a> </b>Tombol Back to Top merupakan suatu tombol yang berfungsi untuk kembali ke atas (top) dari posisi halaman blog, tanpa harus menggunakan scrollbar. Sehingga keberadaan tombol back to top tersebut memudahkan para pengunjung untuk kembali ke atas halaman secara cepat, tentu hal tersebut memiliki nilai efisien dalam segi waktu. Jika kalian masih bingung tentang apa itu fungsi dari tombol back to top. Silahkan kalian coba untuk scroll ke bawah maka secara otomatis kalian akan melihat sebuah tombol berwarna merah dibagian pojok bawah pada halaman ini.<br />
<br />
Namun yang seperti kalian lihat, bahwa tombol kembali ke atas seringkali kita jumpai pada tampilan yang sederhana, terlihat biasa hanya berupa petunjuk arah atau yang sejenisnya. Maka pada kesempatan kali ini, saya akan membagikan tutorial cara memasang tombol back to top yang lain dari biasanya, unik, dan pastinya anti mainstream.<br />
<br />
Seperti yang telah sudah saya singung diatas, bahwa fungsi tombol ini memudahkan pengunjung untuk kembali ke atas halaman tanpa menggunakan scrollbar sehingga cukup menghemat waktu. Selain itu, tampilan dari tombol kembali ke atas yang akan saya bagikan ini berbeda dari yang lainnya. Sebab berupa kail pancing ikan. Sehingga terlihat seolah-olah kita sedang memancing ikan, jika scrollbar diarahkan kebawah maka secara otomatis kail pancing tersebut akan turun kebawah, dan ketika scrollbar diarahkan ke atas, maka kalin pancing tersebut akan ikut naik ke atas. Disamping itu, jika kail pancing tersebut di klik, maka scrollbar akan kembali menuju ke atas. Begitu juga dengan kail pancingnya.<br />
<br />
Langsung saja, ikuti langkah-langkah dibawah ini dalam membuat sebuah tombol back to top (kembali ke atas) versi kail pancing sebagai berikut.<br />
<br />
<h3>
Tombol Back to Top Versi Kail Pancing</h3>
<div>
1. Masuk terlebih dahulu ke dalam akun blog kalian</div>
<div>
2. Klik pada bagian <b>Template > Edit HTML</b></div>
<div>
3. Kemudian carilah kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b><span style="color: #3d85c6;"></style></span> </b>(dengan cara klik <b>Ctrl+F </b>pada tombol keyboard kalian)</div>
<div>
4. Tambahkan kode <b>CSS </b>di bawah ini, tepat berada di atas kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b><span style="color: #3d85c6;"></style></span></b></div>
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> /* Back to Umpan Ikan */
.kailpancing{background-image:url(https://3.bp.blogspot.com/-cYh1IxsmhD4/VyLubMGA9gI/AAAAAAAADAw/v5_BdKLkkrwVosuBC8gTlXYSN_l0Qo_NwCLcB/s1600/umpanikan.png);background-repeat:no-repeat;position:relative}
#kailpancing{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#kailpancing-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#kailpancing:hover > #kailpancing-bubble,#kailpancing:hover > #kailpancing-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#kailpancing-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99} </code></pre>
<br />
5. Selanjutnya, tambahkan kode<b> jQuery</b> di bawah ini. Tepat berada di atas kode <b><span style="color: #3d85c6;"></body></span></b><br />
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#kailpancing").css("top","0"):n("#kailpancing").css("top",o-700+"px")}),n("#kailpancing").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#kailpancingTOP").offset().top},"slow")})});
//]]>
</script> </code></pre>
<br />
6. Setelah itu, tambahkanlah kode <b>HTML </b>di bawah ini. Tepat berada di bawah kode <b><span style="color: #3d85c6;"><body></span></b><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div id="kailpancingTOP"></div>
<div class="kailpancing" id="kailpancing">
<div id="kailpancing-bubble"><b><span style="color: yellow;">Back to Top</span></b></div>
</div> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti tulisan <b>Back to Top </b>sesuai dengan tulisan yang diinginkan</blockquote>
<br />
7. Klik pada tombol <b>Simpan Template</b><br />
<b><br />
</b> Demikianlah tadi tutorial, <a href="http://www.jurnalblog.com/2017/10/cara-membuat-tombol-back-to-top-versi.html" target="_blank">cara membuat tombol back to top</a>, yang terlihat unik dan berbeda dari yang lainnya. Semoga tutorial ini bermanfaat bagi kita semua, selamat berkarya. Sekian dan terimakasih.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-20614664699310590292017-09-28T16:34:00.001+08:002017-09-28T16:49:05.334+08:00Cara Membuat Widget Melayang Ketika di Scroll (Sticky)<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-Eo3G_XAVWVA/Wcy3Vv32HUI/AAAAAAAACC8/tbI5G_euD0IPmdDJQpDji__P854qSUM-gCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="www.jurnalblog.com" border="0" data-original-height="619" data-original-width="1600" height="244" src="https://2.bp.blogspot.com/-Eo3G_XAVWVA/Wcy3Vv32HUI/AAAAAAAACC8/tbI5G_euD0IPmdDJQpDji__P854qSUM-gCLcBGAs/s640/Tumbnail%2B1.png" title="Cara Membuat Widget Melayang Ketika di Scroll (Sticky)" width="640" /></a></div>
<br />
<b><a href="http://www.jurnalblog.com/2017/09/cara-membuat-widget-melayang-ketika-di.html">Membuat Widget Melayang Ketika di Scroll (Sticky)</a> -</b> Pada postingan sebelumnya saya sudah pernah memberikan tutorial tentang <a href="http://www.jurnalblog.com/2017/08/cara-membuat-menu-melayang-sticky-menu.html" target="_blank">membuat menu bar melayang ketika di scroll</a> maka pada kesempatan kali ini, saya akan memberikan tutorial yang hampir sama namun kita terapkan pada sebuah widget. Sehingga ketika scroll diarahkan ke bawah, widget tersebut berhenti dan melayang diatas footer.<br />
<br />
Keberadaan sticky tersebut tentunya memberikan keuntungan bagi kita semua, salah satunya yaitu memberikan kemudahan pada pembaca dalam berselancar di blog kita tanpa harus mengarahkan scroll ke atas lagi. Sebab widget yang kita pasang sticky tersebut akan tetap berada pada posisi diatas footer atau melayang.<br />
<br />
<h3>
Widget Sticky Melayang Saat di Scroll</h3>
<div>
1. Silahkan login terlebih dahulu ke dalam akun blog kalian</div>
<div>
2. Masuk pada menu <b>Template > Edit HTML</b></div>
<div>
3. Selanjutnya, carilah kode <b style="color: #3d85c6;"></body> </b>(disarankan dengan cara tekan <b>Ctrl+F </b>untuk memudahkan pencarian)</div>
<div>
4. Tambahkan kode <b>HTML </b>dibawah ini, tepat berada diatas kode <b><span style="color: #3d85c6;"></body></span></b></div>
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
// Script Widget Sticky
$(function(){if($("#HTML9").length){var o=$("<span style="color: #3d85c6;">#HTML9</span>"),t=$("<span style="color: #3d85c6;">#HTML9</span>").offset().top,i=$("<span style="color: #3d85c6;">#HTML9</span>").height();$(window).scroll(function(){var s=$("<span style="color: yellow;">#footer-wrapper</span>").offset().top-i-70,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:0}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}});
//]]>
</script>
<style type='text/css'>
<span style="color: #3d85c6;">#HTML9</span> {
width: 298px;
}
</style> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti script warna biru (#HTML9) dengan ID Widget yang ingin kalian jadikan widget sticky, selain itu juga ganti script warna kuning (#footer-wraper) dengan ID Footer kalian, dan ganti ukuran <b>width:298px</b> sesuaikan dengan ukuran sidebar blog kalian. </blockquote>
<br />
<h3>
Cara Mengetahui ID Widget di Blog</h3>
<div>
1. Silahkan masuk pada bagian <b>Tata Letak</b></div>
<div>
2. Silahkan kalian cari widget yang ingin di jadikan sticky bisa melayang, contoh <b>Artikel Pilihan </b>klik <b>Edit</b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-YZMqDJKW_Bw/WcyytGYGdBI/AAAAAAAACCc/5-XscIekQCoEpKnSPT203-BdSIcFGjVPACLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="www.jurnalblog.com" border="0" data-original-height="320" data-original-width="1058" height="192" src="https://1.bp.blogspot.com/-YZMqDJKW_Bw/WcyytGYGdBI/AAAAAAAACCc/5-XscIekQCoEpKnSPT203-BdSIcFGjVPACLcBGAs/s640/Untitled.png" title="Cara Membuat Widget Melayang Ketika di Scroll" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Memilih Widget</td></tr>
</tbody></table>
<div>
<b><br /></b></div>
<div>
3. Tunggu hingga muncul sebuah jendela widget tersebut, lihat pada bagian akhir <b>URL</b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-IKrScCGmDIQ/WcyzdVsMM2I/AAAAAAAACCk/4EBcjDWMpnwfRbV65HLS2G6JzKDrXEPXwCLcBGAs/s1600/Untitled.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="www.jurnalblog.com" border="0" data-original-height="519" data-original-width="586" height="353" src="https://3.bp.blogspot.com/-IKrScCGmDIQ/WcyzdVsMM2I/AAAAAAAACCk/4EBcjDWMpnwfRbV65HLS2G6JzKDrXEPXwCLcBGAs/s400/Untitled.png" title="Cara Membuat Widget Melayang Ketika di Scroll (Sticky)" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Memperoleh ID Widget</td></tr>
</tbody></table>
<div>
<b><br /></b></div>
<div>
Seperti itulah tadi tutorial <a href="http://www.jurnalblog.com/2017/09/cara-membuat-widget-melayang-ketika-di.html">cara membuat widget melayang ketika di scroll (sticky)</a>. Sehingga ketika di scoll widget tersebut akan berhenti diatas footer yakni melayang. Cukup sekian dan semoga bermanfaat bagi kita semua.</div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-11834690115205923332017-09-28T01:25:00.002+08:002017-09-28T01:26:50.515+08:00Fitur Terbaru Google Allo, Bermain Sambil Chat dengan Teman<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-58YudCs2g-Q/WcveuUyQw4I/AAAAAAAACB8/3U3miNqBwnEbT8MckFT95Pal_m_hErpJwCLcBGAs/s1600/Download-Google-Allo-APK-for-Android.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="www.jurnalblog.com" border="0" data-original-height="294" data-original-width="600" height="312" src="https://1.bp.blogspot.com/-58YudCs2g-Q/WcveuUyQw4I/AAAAAAAACB8/3U3miNqBwnEbT8MckFT95Pal_m_hErpJwCLcBGAs/s640/Download-Google-Allo-APK-for-Android.jpg" title="Fitur Terbaru Google Allo, Bermain Sambil Chat dengan Teman" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: left;">(Sumber: androidterbaik)</td></tr>
</tbody></table>
<br />
Google merupakan suatu perusahaan multinasional dari Amerika Serikat yang bergerak di bidang barang dan jasa Internet dengan produk unggulannya yaitu mesin penelusuran, dan periklanan yang dilakukan secara online (AdWords).<br />
Google sebagai perusahaan tentu tidak akan tinggal diam saja tanpa melakukan sebuah inovasi selain untuk menjaga kredibilitas dari perusahaan juga untuk memenuhi kebutuhan setiap penggunanya.<br />
<br />
Hal tersebut dibuktikan dengan update yang diberikan pada salah satu produk sosial miliknya yaitu Google Allo yang baru diluncurkan satu tahun kemarin (tanggal 21 September 2016 dan baru bisa digunakan oleh masyarakat Indonesia pada tanggal 23 September 2016) selalu memberikan nuansa yang baru, salah satunya yaitu tersedianya fitur game didalam aplikasinya. Ketersediaan fitur bermain game pada aplikasi instant message yang diberikan oleh Google Allo tersebut dapat kita gunakan untuk bermain sambil chatting bersama teman.<br />
<br />
Terdapat <a href="http://www.jurnalblog.com/2017/09/fitur-terbaru-google-allo-bermain.html">empat jenis permainan yang disediakan oleh Google Allo</a> tersebut, diantaranya yaitu Pet Hotel, Catur Group, Toadal Pontage, dan Quick Draw. Keempat permainan tersebut tersedia dalam pilihan bahasa Indonesia dan Inggris, karena memang di rancang khusus bagi pengguna Google Allo di Indonesia.<br />
<br />
<b>Pet Hotel</b> adalah sebuah permainan yang hampir mirip dengan game dinner dash cuman letak perbedaan terletak pada setting yang berbeda. Jika pada dinner dash kalian disuruh untuk melayani pembeli maka permainan ini mengajak kalian menjadi manajer hotel. Tujuan permainannya adalah menjaga agar seluruh tamu hotel senang. Kalian dapat bersaing dengan teman-teman untuk menjadi hotel terfavorit bagi hewan-hewan peliharaan.<br />
<b><br /></b>
<b>Catur Group</b> adalah sebuah permainan catur yang tidak hanya dapat dimainkan secara head to head saja melainkan bisa mengajak teman satu grup kalian untuk bermain catur. Kalian hanya tinggal memilih sisi mana yang kalian inginkan dan pindahkan bidak untuk mengalahkan lawan.<br />
<b><br /></b>
<b>Toadal Pondage</b> adalah permainan yang membuat kalian bersaing dengan teman-teman dalam menenggelamkan katak-katak mereka sebelum mereka menenggelamkan katak-katak milikmu.<br />
<b><br /></b>
<b>Quick Draw</b> adalah permainan yang mengandalkan machine learning (keterpaduan). Cara bermain nya kalian hanya tinggal menggambar dan sistem yang akan menebak apa yang digambar. Kalian juga bisa menantang teman-teman grup untuk melihat siapa yang dapat menggambar paling cepat.<br />
<br />
Inovasi yang diberikan oleh aplikasi Allo memberikan nilai lebih terhadap fasilitas dari instant message yang ada, karena selain berkomunikasi dengan teman-teman kalian juga bisa bermain bersama, baik secara head to head maupun secara group.<br />
<div>
<br /></div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-6976782223459249482017-09-27T22:31:00.000+08:002017-09-27T22:31:13.097+08:00Bismillahirrahmanirrahim, Jurnal Blog dot ComBanyak hal yang menjadi pertimbangan pada diri saya dalam memilih sebuah nama domain yang pas, dengan jumlah kata yang sedikit, mewakili isi artikel dan tentunya mudah untuk diingat. Dan akhirnya jatuh pada nama www.jurnalblog.com. Karena menurut saya, lebih baik dari nama sebelumnya ketika saya masih menggunakan domain bawaan dari blogspot yaitu ideseonesia.blogspot.com yang menurut saya cukup rumit untuk dieja bagi orang awam. Kemudian saya menggunakan domain gratisan dari freenom dengan ekstensi .tk sehingga menjadi www.amirsyarifuddin.tk seharusnya saya juga masih ada kesempatan untuk menggunakan domain tersebut selama sepuluh bulan lagi. Hanya saja, menurut saya pribadi sudah saatnya untuk mulai fokus dan menentukan sebuah nama yang branding yang mampu mewakili isi dari setiap artikel yang dibagikan.<div>
<br /></div>
<div>
Ini merupakan langkah pertama dari www.jurnalblog.com berselancar dalam dunia virtual, semoga dengan diiringi bacaan basmallah blog ini berguna, dan bermanfaat bagi kita semua dalam meraih kesuksesan. Peluncuran blog ini juga berketepatan dengan hari jadinya google yang ke-19.</div>
<div>
<br /></div>
<div>
Selamat datang bagi para pembaca setia blog, mulai saat ini izinkan saya untuk memperkenalkan blog baru saya www.jurnalblog.com yang akan menyajikan berbagai macam informasi menarik seputar blog, tips dan trick, teknologi, finansial dan internet marketing.</div>
<div>
<br /></div>
<div>
Jadi, bagi kalian yang sedang mengembangkan sebuah blog yang baik jangan lupa untuk berkunjung di www.jurnalblog.com untuk mendapatkan berbagai macam informasi yang mendukung dalam pengembangan blog kalian. Terimakasih.</div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-728201605765322052017-09-25T12:41:00.002+08:002017-09-25T13:07:43.942+08:00Cara Mendapatkan Kode ID Aplikasi Facebook<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ML9X_FNgWWU/WciOqqcTf-I/AAAAAAAAB-0/uC4eb7pH3mQsGMr3NrFU65N-lTtcUBhYwCLcBGAs/s1600/Tumbnail%2B1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="173" data-original-width="448" height="246" src="https://1.bp.blogspot.com/-ML9X_FNgWWU/WciOqqcTf-I/AAAAAAAAB-0/uC4eb7pH3mQsGMr3NrFU65N-lTtcUBhYwCLcBGAs/s640/Tumbnail%2B1.jpg" title="Cara Mendapatkan Kode ID Aplikasi Facebook" width="640" /></a></div>
<b><br /></b>
<b><a href="http://www.amirsyarifuddin.tk/2017/09/cara-mendapatkan-kode-id-aplikasi.html">Cara Mendapatkan Kode ID Aplikasi Facebook</a> </b>- Facebook merupakan salah satu situs sosial modia yang cukup populer, hal tersebut dibuktikan dengan banyaknya pengguna sosial media tersebut, pada tahun 2016 tercatat pengguna aktif hampir mencapai angka 2 miliar. Dalam laporan keuangan kuartal empat 2016, Facebook sendiri mengatakan pengguna aktif setiap bulannya berada pada angka 1,86 miliar. Tentu kesuksesan yang dicapai tersebut sebanding dengan fasilitas atau fitur-fitur yang terus mengalami peningkatan dan perbaikan dalam memenuhi kebutuhan penggunanya.<br />
<br />
Kesempatan kali ini saya tidak akan memberikan tutorial bagaimana cara membuat akun facebook yang sudah terlalu lazim untuk diberikan. Melainkan cara mendapatkan kode applikasi ID facebook. Aplikasi ID adalah sebuah kode identitas yang diberikan oleh facebook kepada para pengembangnya. Tentu kode yang diberikan tersebut berupa angka unik yang tidak akan sama dengan kode ID milik orang lainnya. Ibarat sebuah identitas kartu penduduk kode unik tersebut terletak pada NIK yaitu nomor identitas kependudukan. Cara memperoleh kode aplikasi identitas di facebook ini juga tergolong cukup mudah dan tanpa harus melakukan pembayaran sepeserpun alias gratis.<br />
<br />
Banyak manfaat yang diperoleh dengan mengetahui dan memasang kode aplikasi tersebut pada blog kita, diantaranya yaitu pembuatan plugin like, fanspage, komentar, share dan lain sebagainya. Namun diluar itu yang paling penting adalah dengan memasang kode aplikasi kita telah berhasil melakukan verifikasi kepemilikan situs kita pada sosial media tersebut (facebook).<br />
<br />
<h3>
Cara Mendapatkan Kode Aplikasi ID Facebook</h3>
<div>
1. Buka laman developers.facebook.com/apps</div>
<div>
2. Login dengan menggunakan akun facebook kalian</div>
<div>
3. Klik pada tombol <b>Tambahkan sebuah Aplikasi Baru</b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-PpujvzFHKH8/WciEf-MJHwI/AAAAAAAAB98/PoI3ck6qdscZ_zXfWBgVKlc9EjmNbi2sACLcBGAs/s1600/Gambar%2B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="139" data-original-width="1012" height="84" src="https://2.bp.blogspot.com/-PpujvzFHKH8/WciEf-MJHwI/AAAAAAAAB98/PoI3ck6qdscZ_zXfWBgVKlc9EjmNbi2sACLcBGAs/s640/Gambar%2B1.png" title="Menambahkan sebuah aplikasi baru" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menambahkan sebuah aplikasi baru</td></tr>
</tbody></table>
<div>
<b><br /></b></div>
<div>
4. Selanjutnya isilah nama tampilan yang ingin kalian kaitkan dengan ID aplikasi serta emai kontak untuk komunikasi lalu klik tombol <b>Buat ID Aplikasi </b>dan masukkan kode Captcha dengan benar lalu klik <b>Kirim</b></div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-XTa6cdBidSY/WciFlGplz0I/AAAAAAAAB-I/QZYqtTxsNZE8Sx20q1fme7DrgtLLLPp_ACLcBGAs/s1600/Gambar%2B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="318" data-original-width="722" height="175" src="https://2.bp.blogspot.com/-XTa6cdBidSY/WciFlGplz0I/AAAAAAAAB-I/QZYqtTxsNZE8Sx20q1fme7DrgtLLLPp_ACLcBGAs/s400/Gambar%2B1.png" title="Menambahkan Nama dan Email" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menambahkan Nama dan Email</td></tr>
</tbody></table>
<div>
</div>
<div>
5. Lihat pada bagian ID Aplikasi yang saya beri tanda garis biru, silahkan kalian salin kode tersebut.</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-eN0w3mUy4CY/WciG--hILSI/AAAAAAAAB-Y/5Ynisn8WZpkTFT-bWlyrnKHUdaIxwAUcACLcBGAs/s1600/Gambar%2B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="319" data-original-width="1336" height="152" src="https://3.bp.blogspot.com/-eN0w3mUy4CY/WciG--hILSI/AAAAAAAAB-Y/5Ynisn8WZpkTFT-bWlyrnKHUdaIxwAUcACLcBGAs/s640/Gambar%2B1.png" title="Menyalin kode ID Aplikasi" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menyalin kode ID Aplikasi</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
6. Selanjutnya silahkan login dalam akun blogger kalian dan masuk pada menu <b>Template > Edit HTML</b></div>
<div>
7. Silahkan kalian tambahkan kode ID aplikasi yang telah kalian peroleh sebelumnya ke dalam kode meta blog kalian seperti <span style="color: #3d85c6;"><meta content ='kode id aplikasi facebook' property='fb:app_id'/></span></div>
<div>
<span style="color: #3d85c6;"><br /></span></div>
<div>
Demikianlah tadi tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-mendapatkan-kode-id-aplikasi.html">cara mendapatkan kode ID aplikasi facebook</a>. Dengan memperoleh kode ID tersebut banyak kemudahan serta kebermanfaatan yang diperoleh salah satunya yaitu memverifikasi kepemilikan situs kita pada sosial media facebook. Semoga bermanfaat, selamat berkarya dan sampai jumpa.</div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-23834128421221022642017-09-24T21:09:00.001+08:002017-09-24T21:30:57.506+08:00Cara Mengecilkan Ukuran Gambar dengan Microsoft Office Picture Manager<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-ZsQB_k1bJkQ/WcezbuE5M4I/AAAAAAAAB9g/LHBCDpOdpAY6GaU_QrlQpsVC9oE8TDuNwCLcBGAs/s1600/Tumbnail%2B1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="173" data-original-width="448" height="246" src="https://2.bp.blogspot.com/-ZsQB_k1bJkQ/WcezbuE5M4I/AAAAAAAAB9g/LHBCDpOdpAY6GaU_QrlQpsVC9oE8TDuNwCLcBGAs/s640/Tumbnail%2B1.jpg" title="Cara Mengecilkan Ukuran Gambar dengan Microsoft Office Picture Manager" width="640" /></a></div>
<br />
Mengurangi ukuran gambar pada sebuah postingan, menjadi solusi yang dapat digunakan dalam mengatasi waktu muat halaman yang lambat. Ukuran gambar yang terlalu besar tentu akan memberatkan kinerja blog serta banyak memakan ruang penyimpanan. Jika pada postingan sebelumnya saya sudah membagikan tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-mengurangi-ukuran-gambar-pada.html" target="_blank">cara mengurangi ukuran gambar pada postingan</a> secara online dengan menggunakan tools dari compressnow. Maka pada kali ini saya akan membagikan tutorial yang sama namun dilakukan secara offline.<br />
<div>
<br /></div>
<div>
Sebenarnya tools seperti compresnow banyak tersedia di google, namun tentu hal tersebut dapat dilakukan ketika kita sedang terhubung dengan data internet. Lalu bagaimana dengan kita yang sedang tidak ada data internet? Tidak perlu khawatir, sebab jika kalian tidak punya data internet kalian masih tetap bisa mengurangi ukuran gambar dengan bantuan aplikasi bawaan dari Microsoft yaitu Microsoft Office Picture Manager.</div>
<div>
<br /></div>
<div>
Microsoft Office Picture Manager merupakan salah satu tool yang dapat difungsikan dalam mengurangi ukuran gambar, dengan hasil yang cukup memuaskan. Meski ini merupakan tool bawaan dari Microsoft dan meskipun cara yang sudah cukup lama, tidak ada salahnya untuk saya bagikan pada teman-teman semua yang belum mengetahuinya.</div>
<div>
<br /></div>
<div>
1. Pilihlah gambar yang ingin kalian kecilkan ukurannya</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-nRNDnLzNHaU/WcebKB4ogVI/AAAAAAAAB7U/MaCNlIdeG3Iuou9s1ffyzjNT1JzNMj0OQCLcBGAs/s1600/Gambar%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="149" data-original-width="776" height="75" src="https://4.bp.blogspot.com/-nRNDnLzNHaU/WcebKB4ogVI/AAAAAAAAB7U/MaCNlIdeG3Iuou9s1ffyzjNT1JzNMj0OQCLcBGAs/s400/Gambar%2B1.png" title="Memilih Gambar yang Ingin dikecilkan ukurannya" width="400" /></a></div>
<div>
<br /></div>
<div>
2. Klik kanan kemudian pilih <i>Open With </i>> <i>Microsoft Office 2010</i><br />
<i><br /></i>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-rjJ7fSvV5XU/WcenqVWk_KI/AAAAAAAAB7w/BBorBW3sRHI2eSl_3J2gL2ZQtAfgtZ2TwCLcBGAs/s1600/Gambar%2B2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="479" data-original-width="941" height="202" src="https://2.bp.blogspot.com/-rjJ7fSvV5XU/WcenqVWk_KI/AAAAAAAAB7w/BBorBW3sRHI2eSl_3J2gL2ZQtAfgtZ2TwCLcBGAs/s400/Gambar%2B2.png" title="Membuka Microsoft Office Picture Manager" width="400" /></a></div>
<i><br /></i>
3. Selanjutnya akan muncul sebuah jendela Microsoft Office Picture Manager klik menu bar <b>Picture > Compress Picture</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-pby-y9dCW5o/WcepBhC0VsI/AAAAAAAAB78/4Vz4kAzuX-gsx13qMIg8hHxXkQuTj1JmQCLcBGAs/s1600/Gambar%2B3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="269" data-original-width="1365" height="78" src="https://3.bp.blogspot.com/-pby-y9dCW5o/WcepBhC0VsI/AAAAAAAAB78/4Vz4kAzuX-gsx13qMIg8hHxXkQuTj1JmQCLcBGAs/s400/Gambar%2B3.png" title="Compress Picture" width="400" /></a></div>
<b><br /></b>
4. Setelah itu akan keluar sebuah jendela Compress Picture Setting, pilih Compress for: <b>Web Pages </b>dan klik <b>Ok</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-64vL9B5QxsY/WceqNfe3McI/AAAAAAAAB8Y/eey1qYoJvfEob8JEqmbCA5ac7t5HOFrsACLcBGAs/s1600/Gambar%2B4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="515" data-original-width="193" height="400" src="https://4.bp.blogspot.com/-64vL9B5QxsY/WceqNfe3McI/AAAAAAAAB8Y/eey1qYoJvfEob8JEqmbCA5ac7t5HOFrsACLcBGAs/s400/Gambar%2B4.png" title="Merubah ke Web Pages" width="148" /></a></div>
<b><br /></b>
5. Kemudian gambar akan terlihat mengecil sesuai dengan kebutuhan ruang dari web pages, klik tombol <b>Save</b> untuk penyimpanan secara otomatis atau <b>Save as</b> untuk tetap menjaga ukuran gambar sebelumnya.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-CGArmmxBnek/WcerRxOb6wI/AAAAAAAAB8w/JBsgOpsGY50EP0x2tH2y6fYLSsEZ3QfiQCLcBGAs/s1600/Gambar%2B5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="717" data-original-width="1365" height="210" src="https://1.bp.blogspot.com/-CGArmmxBnek/WcerRxOb6wI/AAAAAAAAB8w/JBsgOpsGY50EP0x2tH2y6fYLSsEZ3QfiQCLcBGAs/s400/Gambar%2B5.png" title="Menyimpan Hasil Kompres" width="400" /></a></div>
<br />
6. Sebagai contoh perbandingan ukuran gambar antara sebelum saya kompres dan sesudah saya kompres dengan aplikasi <i>Microsoft Office Picture Manager </i>sebagai berikut. Ukuran aslinya 715 Kb menjadi 50 Kb, sedangkan dimensi sebelumnya 2304 x 1296 menjadi 448 x 252.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-asqJ1ixoZ9I/Wcerxw-9KwI/AAAAAAAAB84/kyjqchPCOEs3lX3UFWv8A41Xn-Ic7y_xACLcBGAs/s1600/Gambar%2B6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="146" data-original-width="769" height="75" src="https://3.bp.blogspot.com/-asqJ1ixoZ9I/Wcerxw-9KwI/AAAAAAAAB84/kyjqchPCOEs3lX3UFWv8A41Xn-Ic7y_xACLcBGAs/s400/Gambar%2B6.png" title="Hasil Ukuran Gambar" width="400" /></a></div>
<br />
Demikianlah <a href="http://www.amirsyarifuddin.tk/2017/09/cara-mengecilkan-ukuran-gambar-dengan.html">cara mengecilkan ukuran gambar dengan microsoft office picture manager</a>. Penggunaan yang sangat mudah, hasil yang memuaskan dan tentunya dapat digunakan secara <i>offline </i>tanpa harus tersambung dalam data internet.</div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-79576257606325681892017-09-24T11:59:00.001+08:002017-09-24T12:02:08.377+08:00Cara Mengurangi Ukuran Gambar Pada Postingan<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-tq4di6JRRmI/Wcctduyv5MI/AAAAAAAAB6w/71OdZZHfkxwVzve0UuAscKFT3xP3LUghwCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="617" data-original-width="1600" height="246" src="https://2.bp.blogspot.com/-tq4di6JRRmI/Wcctduyv5MI/AAAAAAAAB6w/71OdZZHfkxwVzve0UuAscKFT3xP3LUghwCLcBGAs/s640/Tumbnail%2B1.png" title="Cara Mengurangi Ukurang Gambar Pada Postingan" width="640" /></a></div>
<b><br />
</b> <b><a href="http://www.amirsyarifuddin.tk/2017/09/cara-mengurangi-ukuran-gambar-pada.html">Cara Mengurangi Ukuran Gambar Pada Postingan</a></b> - Selama ini, hampir setiap para blogger yang menyediakan artikel tutorial mengeluh tentang kecepatan blog yang semakin hari semakin menurun nilai kecepatannya. Hal tersebut karena file atau gambar yang mereka <i>upload </i>pada postingan memiliki ukuran yang cukup besar. Tentu itu salah satu alasan kenapa kecepatan blog mereka menurun.<br />
<br />
Mengurangi ukuran atau size gambar merupakan opsi yang dapat digunakan dan cukup baik untuk dilakukan sebelum di <i>upload, </i>dan memang disarankan untuk dilakukan sehingga dapat menghemat waktu dalam memuat sebuah laman blog. Selain itu, mengurangi ukuran gambar juga dapat menghemat ruang penyimpanan hosting kalian agar tidak terlalu cepat habis. Tentu hal tersebut perlu untuk kalian hindari agar tidak cepat melakukan <i>upgrade </i>hosting.<br />
<br />
Postingan kali ini, saya akan berikan tutorial cara mengurangi ukuran gambar pada postingan namun dengan kualitas yang tetap terjaga sebelum kalian <i>upload </i>dalam sebuah postingan blog.<br />
<br />
<blockquote class="tr_bq">
Bagi kalian yang menggunakan plug in addblock atau sejenisnya pada browser<i> </i>kalian silahkan untuk di <i>pause </i>terlebih dahulu, inilah yang menjadi kelemahan dari situs ini yang hanya dapat digunakan ketika addblock atau sejenisnya tidak dijalankan</blockquote>
<br />
1. Siapkan terlebih dahulu gambar yang ingin kalian <i>upload </i>baik yang berekstensi JPG, PNG, maupun GIF.<br />
2. Selanjutnya buka situs <span style="color: #3d85c6;">compressnow.com</span>.<br />
3. Kemudian <i>upload </i>gambar yang ingin di kompress dengan cara <i>drag</i> <i>and drop </i>atau klik tombol <b>+ Upload Image(s) </b>(Maksimal file 9Mb = 9000Kb).<br />
4. Tentukan angka <i>compression level</i> (dalam persen) menjadi 25% atau sesuai keinginan kalian.<br />
5. Lalu klik tombol <b style="font-style: italic;">Compress Now </b>maka ukuran gambar kalian akan berubah ukurannya menjadi lebih kecil dari sebelumnya.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-7ximU0WwvQA/WccoGVPIqRI/AAAAAAAAB6g/zvBf7BFzytUfcGshhhTu__CXiKbYR9T5ACLcBGAs/s1600/Gambar%2B1-compressed.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="445" data-original-width="983" height="288" src="https://3.bp.blogspot.com/-7ximU0WwvQA/WccoGVPIqRI/AAAAAAAAB6g/zvBf7BFzytUfcGshhhTu__CXiKbYR9T5ACLcBGAs/s640/Gambar%2B1-compressed.jpg" title="Meng Compress Gambar" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Meng <i>Compress </i>Gambar</td></tr>
</tbody></table>
<blockquote class="tr_bq">
Semakin tinggi nilai persen yang kalian gunakan, maka semakin kecil pula ukuran gambar kalian. Namun kualitas gambar bisa jadi berkurang juga</blockquote>
<br />
6. Terlihat sebelumnya ukuran gambar berukuran 911Kb sekarang menjadi 385Kb, berarti gambar tersebut berhasil di kompres sebesar 515Kb atau sekitar 65%.<br />
7. Setelah itu, silahkan klik tombol <b>Download </b>untuk mengunduh gambar yang telah dikurangi ukurannya tersebut ke dalam komputer kalian.<br />
8. Silahkan kalian <i>upload </i>dalam postingan artikel kalian.<br />
<br />
Demikianlah tadi tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-mengurangi-ukuran-gambar-pada.html">cara mengurangi ukuran gambar pada postingan</a>, dengan cara tersebut dapat mengurangi ukuran gambar kalian sehingga lebih menghemat dalam waktu muat serta ruang penyimpanan hosting blog kalian. Semoga bermanfaat, sekian dan terimakasih.<br />
<br />Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-77790261010946356522017-09-23T19:46:00.001+08:002017-09-23T19:48:10.726+08:00Cara Mengetahui Kode Verifikasi Google Webmaster Tools<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-u3srUzBmrO8/WcZJX-F9gnI/AAAAAAAAB6E/JCkMkSnAy-4QtJ_hL6sQlCI24ORCpdnLQCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="618" data-original-width="1600" height="246" src="https://2.bp.blogspot.com/-u3srUzBmrO8/WcZJX-F9gnI/AAAAAAAAB6E/JCkMkSnAy-4QtJ_hL6sQlCI24ORCpdnLQCLcBGAs/s640/Tumbnail%2B1.png" title="Cara Mengetahui Kode Verifikasi Google Webmaster Tools" width="640" /></a></div>
<b><span style="color: #3d85c6;"><br /></span></b>
<b><span style="color: #3d85c6;"><a href="http://www.amirsyarifuddin.tk/2017/09/cara-mengetahui-kode-verifikasi-google.html">Cara mengetahui kode verifikasi google webmaster tools</a></span></b> - google webmaster merupakan sebuah tool milik perusahaan google yang dapat digunakan oleh para pengembang atau webmaster dalam mengukur perkembangan blog. Tentu manfaat yang akan diperoleh dengan menggunakan tool tersebut, kalian akan memperoleh berbagai saran dalam meningkatkan perkembangan blog kalian.<br />
<br />
Bagi kalian yang sedang memulai dalam membangun sebuah website atau blog, mendaftarkan pada sebuah webmaster tools seperti google maupun bing merupakan salah satu hal yang wajib untuk dilakukan. Karena dengan mendaftarkan pada webmaster tersebut kemungkinan besar blog kita akan mudah untuk dirayapi dan terindeks oleh mesin pencari. Meskipun pada dasarnya blog sudah langsung terverifikasi oleh webmaster secara otomatis, namun kita perlu untuk mengetahui kode verifikasi untuk melakukan beberapa optimasi lainnya agar blog semakin melejit.<br />
<br />
Penambahan kode verifikasi google webmaster biasanya terletak pada template di bagian meta tag, seperti <meta content = '<span style="color: red;">kode verifikasi google webmaster</span>' name='google-site-verification'/> kalian hanya perlu memasukkan kode verifikasi kalian pada bagian tulisan berwarna merah. Baik, langsung saja, ikuti tutorial pada langkah-langkah dibawah ini untuk mengetahui serta menambahkan kode verifikasi google wwebmaster.<br />
<br />
<h3>
Cara Memasang Kode Verifikasi Google Webmaster</h3>
<div>
Memasang kode verifikasi google webmaster pada template blog kita cukup mudah, sebab kalian hanya perlu mendaftarkan website atau blog kalian pada tool tersebut, kemudian menambahkan kode verifikasinya ke template dan mengirimkan sitemap atau daftar isi dari blog kalian.</div>
<div>
<br /></div>
<div>
1. Silahkan kalian masuk terlebih dahulu ke dalam akun <b><a href="https://www.google.com/webmasters/tools/home?hl=in">Google Webmaster Tools</a> </b>dengan menggunakan gmail</div>
<div>
2. Kemudian, bagi kalian yang baru daftar akan terdapat ucapan "Selamat Datang di Search Console", silahkan kalian tambahkan URL blog dan klik tombol <b>Tambahkan Properti</b></div>
<div>
<b><br />
</b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-tqlfO91PkNY/WcY5mz3IVnI/AAAAAAAAB30/fVZ30YeA0o0QjzqeaaBzHLvDtHwGA9bOQCLcBGAs/s1600/Gambar%2B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="www.ideseonesia.blogspot.com" border="0" data-original-height="201" data-original-width="1028" height="124" src="https://3.bp.blogspot.com/-tqlfO91PkNY/WcY5mz3IVnI/AAAAAAAAB30/fVZ30YeA0o0QjzqeaaBzHLvDtHwGA9bOQCLcBGAs/s640/Gambar%2B1.png" title="Menambahkan URL Blog di Google Webmaster" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menambahkan URL Blog di Google Webmaster</td></tr>
</tbody></table>
<div>
<b><br />
</b></div>
<div>
3. Setelah itu, klik tombol seperti <b>Gerigi </b>disebelah kanan atas, dan pilih <b>Detail Verifikasi</b></div>
<div>
<b><br />
</b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://4.bp.blogspot.com/-RKbLA1x0PUs/WcY6TWkzS6I/AAAAAAAAB38/MlgdcFoeq04wuyhxqY9sUOd-EEcKsSPEwCLcBGAs/s1600/Gambar%2B2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="www.ideseonesia.blogspot.com" border="0" data-original-height="288" data-original-width="1081" height="170" src="https://4.bp.blogspot.com/-RKbLA1x0PUs/WcY6TWkzS6I/AAAAAAAAB38/MlgdcFoeq04wuyhxqY9sUOd-EEcKsSPEwCLcBGAs/s640/Gambar%2B2.png" title="Detail Verifikasi" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Detail Verifikasi</td></tr>
</tbody></table>
<div>
<b><br />
</b></div>
<div>
4. Kemudian klik link <b>Verifikasikan dengan menggunakan metode yang berbeda</b></div>
<div>
<b><br />
</b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-YIa1-5hMe1U/WcY6008EPDI/AAAAAAAAB4E/sOSJcgRqIw4Q_v48ekJNCQRi3pcSwBg8QCLcBGAs/s1600/Gambar%2B3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="153" data-original-width="793" height="122" src="https://1.bp.blogspot.com/-YIa1-5hMe1U/WcY6008EPDI/AAAAAAAAB4E/sOSJcgRqIw4Q_v48ekJNCQRi3pcSwBg8QCLcBGAs/s640/Gambar%2B3.png" title="Verifikasikan dengan menggunakan metode yang berbeda" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Verifikasikan dengan menggunakan metode yang berbeda</td></tr>
</tbody></table>
<div>
<b><br />
</b></div>
<div>
5. Pilih metode verifikasi <b>Tag HTML</b>,<b> </b>silahkan kalian salin kode meta tag tersebut dan tempel pada bagian <span style="color: #3d85c6;"><head></span> sebelum bagian <span style="color: #3d85c6;"></body></span></div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-P0-a7Z9Dx4g/WcY9WQ4xFOI/AAAAAAAAB4c/dMhnoPI0KSU1qm-qitPIi-GZueHngqCgQCLcBGAs/s1600/Gambar%2B4.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="579" data-original-width="1309" height="282" src="https://2.bp.blogspot.com/-P0-a7Z9Dx4g/WcY9WQ4xFOI/AAAAAAAAB4c/dMhnoPI0KSU1qm-qitPIi-GZueHngqCgQCLcBGAs/s640/Gambar%2B4.png" title="Kode Verifikasi Google Webmaster" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Kode Verifikasi Google Webmaster</td></tr>
</tbody></table>
<div>
<b><br />
</b></div>
<div>
6. Buka akun blogger kalian, kemudian pilih menu <b>Template > Edit HTML </b>silahkan kalian cari kode <span style="color: #3d85c6;"><meta content='#' name='google-site-verification'/></span> atau<span style="color: #3d85c6;"> <meta name='google-site-verification' content='#'/> </span>tempel kode verifikasi yang kalian peroleh pada langkah di atas di bagian '<b>#' </b>dan klik <b>Simpan Tema</b></div>
<div>
<b><br />
</b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-e0VSOqOc6zI/WcZABfH-mqI/AAAAAAAAB40/bS2G21QUtQUTnV7qJJ80CMcytEI7lcM2gCLcBGAs/s1600/Gambar%2B5.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="505" data-original-width="1085" height="296" src="https://3.bp.blogspot.com/-e0VSOqOc6zI/WcZABfH-mqI/AAAAAAAAB40/bS2G21QUtQUTnV7qJJ80CMcytEI7lcM2gCLcBGAs/s640/Gambar%2B5.png" title="Menambahkan Kode Verifikasi" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menambahkan Kode Verifikasi</td></tr>
</tbody></table>
<div>
</div>
<blockquote class="tr_bq">
Ingat, yang perlu kalian masukan hanya kode unik saja yang terdapat dibagian <b>content</b></blockquote>
<br />
7. Kembali ke Google Webmaster Tools klik tombol <b>Verifikasi</b>, jika berhasil akan terdapat informasi seperti dibawah ini.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://1.bp.blogspot.com/-kQjvrs5xax8/WcZBDVMHa4I/AAAAAAAAB5A/I7PR0B5KH1sQ8poDUxTzDybtpmUBce_GACLcBGAs/s1600/Gambar%2B7.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="122" data-original-width="695" height="112" src="https://1.bp.blogspot.com/-kQjvrs5xax8/WcZBDVMHa4I/AAAAAAAAB5A/I7PR0B5KH1sQ8poDUxTzDybtpmUBce_GACLcBGAs/s640/Gambar%2B7.png" title="Verifikasi Berhasil" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Verifikasi Berhasil</td></tr>
</tbody></table>
<br />
8. Sampai disini, blog kalian telah berhasil diverifikasi oleh google webmaster. Langkah selanjutnya yaitu kalian perlu submit sitemap atau peta situs.<br />
<br />
<h3>
Cara Submit Sitemap atau Peta Situs di Google Webmaster Tools</h3>
<div>
1. Masuk terlebih dahulu ke <b><a href="https://www.google.com/webmasters/tools/home?hl=in" target="_blank">Google Webmaster Tools</a></b></div>
<div>
2. Pilih menu <b>Perayapan > Peta Situs</b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-kpCCpvDFBU0/WcZC6HxHG6I/AAAAAAAAB5Y/KKAQikZ8R_MT3x7VPv9USoPb2t7fIjCNgCLcBGAs/s1600/Gambar%2B8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="403" data-original-width="950" height="270" src="https://2.bp.blogspot.com/-kpCCpvDFBU0/WcZC6HxHG6I/AAAAAAAAB5Y/KKAQikZ8R_MT3x7VPv9USoPb2t7fIjCNgCLcBGAs/s640/Gambar%2B8.png" title="Menambahkan Peta Situs" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Menambahkan Peta Situs</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
3. Pilih <b>Tambahkan/Uji Situs </b>masukkan sitemap blog kalian dengan format <b>sitemap.xml </b>klik tombol <b>kirim</b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-tx0PqJCkaro/WcZDrPloeSI/AAAAAAAAB5g/rDN5PkkBOTMwFNuucV4UGIdzL6nkY9f4QCLcBGAs/s1600/Gambar%2B9.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="190" data-original-width="1106" height="108" src="https://3.bp.blogspot.com/-tx0PqJCkaro/WcZDrPloeSI/AAAAAAAAB5g/rDN5PkkBOTMwFNuucV4UGIdzL6nkY9f4QCLcBGAs/s640/Gambar%2B9.png" title="Mengirim Sitemap" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Mengirim Sitemap</td></tr>
</tbody></table>
<div>
<b><br /></b></div>
<div>
4. Setelah itu, klik <b>Segarkan Laman</b></div>
<div>
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://2.bp.blogspot.com/-yp9MPoxGRR4/WcZEU43Mk1I/AAAAAAAAB5o/keajbKzargkW4NL9vOdIkdZAxEpkj39jgCLcBGAs/s1600/Gambar%2B10.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="ideseonesia.blogspot.com" border="0" data-original-height="221" data-original-width="1119" height="126" src="https://2.bp.blogspot.com/-yp9MPoxGRR4/WcZEU43Mk1I/AAAAAAAAB5o/keajbKzargkW4NL9vOdIkdZAxEpkj39jgCLcBGAs/s640/Gambar%2B10.png" title="Segarkan Laman" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Segarkan Laman</td></tr>
</tbody></table>
<div>
<b><br /></b></div>
<div>
5. Selesai, kalian hanya perlu menunggu google untuk melakukan perayapan terhadap situs kalian dan melihat perkembangan selanjutnya.</div>
<div>
<br /></div>
<div>
Itulah tadi tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-mengetahui-kode-verifikasi-google.html">cara mengetahui kode verifikasi google webmaster</a> sekaligus cara menambahkan sitemap atau peta situs pada google webmaster. Semoga tutorial diatas dapat bermanfaat bagi kita semua, selamat berkarya. Sekian dan terimakasih.</div>
Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-6042809960907872392017-09-20T14:31:00.001+08:002017-09-20T14:35:17.896+08:00Memasang Double Click to Select All Text Berdasarkan Tag<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-KSWvYG8AFME/WcILCZ5Uz2I/AAAAAAAAB2w/BbuQY3pEtV4d3EtmV5aFtkmePPlFU1wIQCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="www.ideseonesia.blogspot.com" border="0" data-original-height="695" data-original-width="1600" height="276" src="https://4.bp.blogspot.com/-KSWvYG8AFME/WcILCZ5Uz2I/AAAAAAAAB2w/BbuQY3pEtV4d3EtmV5aFtkmePPlFU1wIQCLcBGAs/s640/Tumbnail%2B1.png" title="Memasang Double Click to Select All Text" width="640" /></a></div>
<br />
Blog yang memiliki niche tutorial khusunya dalam hal yang berkaitan dengan berbagi script tentu sudah tidak asing lagi dengan judul diatas. Namun bagi kalian yang baru membangun sebuah blog dengan niche tutorial yang erat kaitannya tentang scipt saya sarankan untuk menggunakan <a href="http://www.amirsyarifuddin.tk/2017/09/memasang-double-click-to-select-all.html">double click to select all </a>tersebut. Karena dengan adanya perintah klik dua kali, pengunjung akan lebih mudah untuk menyeleksi script yang kalian bagikan, tanpa harus menyeleksi dari awal sampai akhir.<br />
<br />
Baik langsung saja, ikuti tutorial dibawah ini dalam memasang double click to select all text berdasarkan label yang kalian inginkan.<br />
<br />
1. Buka terlebih dahulu akun blog kalian di www.blogger.com<br />
2. Masuk kebagian <b>Template > Edit HTML</b><br />
3. Setelah itu, carilah kode <b></body</b>> (gunakanlah <b>Ctrl+F </b>untuk memudahkan pencarian script)<br />
4. Tambahkan kode <b>JavaScript </b>di bawah ini, tepat berada di atas kode <b></body></b><br />
<br />
<pre data-codetype="HTMLku" title="JavaScript"><code class="language-markup"> <script type='text/javascript'>
//<![CDATA[
//Double Click
for (var pres = document.querySelectorAll("<b><span style="color: #3d85c6;">blockquote</span></b>,<b><span style="color: #6fa8dc;">pre</span></b>"), i = 0; i < pres.length; i++) pres[i].addEventListener("dblclick", function() {
var e = getSelection(),
t = document.createRange();
t.selectNodeContents(this), e.removeAllRanges(), e.addRange(t)
}, !1);
//]]>
</script> </code></pre>
<br />
<blockquote class="tr_bq">
Ganti pada script tag <b>blockquote </b>dan <b>pre </b>dengan script tag yang kalian inginkan. Kalian juga bisa menambahkan tag dengan menggunakan tanda (,) Contoh: ("blockquote,pre,tagkalian")</blockquote>
<br />
5. Klik tombol <b>Simpan Template</b><br />
<br />
Demikianlah tadi tutorial cara memasang <a href="http://www.amirsyarifuddin.tk/2017/09/memasang-double-click-to-select-all.html"><b>Double Click to Select All Text Berdasarkan Tag</b></a>. Sehingga dengan kalian memasang fitur klik dua kali tersebut pengunjung juga akan lebih mudah dalam melakukan seleksi script yang kalian bagikan. Semoga artikel ini bermanfaat bagi kita semua, cukup sekian dan terimakasih.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-21197360971704222412017-09-19T06:31:00.001+08:002017-09-19T06:34:13.273+08:00Cara Memasang Sosial Share and Like Button<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-t7O68xnvzXc/WcBJLHcYt7I/AAAAAAAAB2A/q-y8wcXE19IV1BsSGIy2j5KyQVtZG3iHgCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="www.ideseonesia.blogspot.com" border="0" data-original-height="695" data-original-width="1600" height="278" src="https://3.bp.blogspot.com/-t7O68xnvzXc/WcBJLHcYt7I/AAAAAAAAB2A/q-y8wcXE19IV1BsSGIy2j5KyQVtZG3iHgCLcBGAs/s640/Tumbnail%2B1.png" title="Cara Memasang Sosial Share and Like Button" width="640" /></a></div>
<br />
Keberadaan sosial media seperti facebook, google+, twitter, instagram dan lainnya cukup memudahkan kita dalam membagikan informasi, maupun melakukan promosi dan memperkenalkan bisnis yang sedang kita jalani pada teman-teman kita.<br />
<br />
Tentunya hal tersebut didukung dengan salah satu fitur yang dimiliki dari masing-masing sosial media tersebut yaitu adanya fitur share (bagikan). Sehingga kita hanya perlu membagikan informasi kita kepada teman-teman hanya dengan beberapa kali langkah. Seperti yang akan Amirs ID bagikan pada pagi ini, yaitu sebuah tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-memasang-sosial-share-and-like.html">cara memasang sosial share button and like</a> pada blog kita.<br />
<br />
Sosial share and like button tersebut terdiri dari beberapa sosial media kelas atas yang sudah pasti banyak digunakan dari berbagai kalangan, seperti facebook, google+, twitter, dan linkedin. Tentu dengan adanya sosial share and like button tersebut cukup memudahkan kita dalam membagikan setiap artikel yang ada.<br />
<br />
Langsung saja, bagi kalian yang ingin memasang sosial share button, ikuti langkah-langkah seperti dibawah ini.<br />
<br />
<h3>
Cara Memasang Sosial Share and Like Button</h3>
<div>
1. Login terlebih dalam akun blog kalian di www.blogger.com</div>
<div>
2. Klik pada menu <b>Template > Edit HTML</b></div>
<div>
3. Setelah itu, silahkan kalian cari kode <span style="color: #3d85c6; font-weight: bold;"><data:post.body/> </span> (tekan tombol <b>Ctrl+F</b> pada keyboard kalian untuk memudahkan pencarian)</div>
<div>
4. Tambahkan kode <b>HTML </b>dibawah ini, tepat berada di atas kode <b><span style="color: #3d85c6;"><body:post.body/></span> </b></div>
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Tombol share media sosial -->
<div class='share-buttons-box'>
<div class='share-buttons'>
<div class='share gplus'>
<div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'>
<div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'>
<div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
<div class='share linkedin'>
<script src='//platform.linkedin.com/in.js' type='text/javascript'>
lang: en_US
</script>
<script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/>
</div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div style='clear: both;'/>
</b:if> </code></pre>
<br />
<div>
<blockquote class="tr_bq">
Biasanya masing-masing template berbeda-beda dalam artian terdapat banyak kode <b><span style="color: #3d85c6;"><body:post.body/></span></b>. Maka tambahkan pada kode yang kedua</blockquote>
</div>
<br />
5. Kemudian, tambahkan kode <b>CSS</b> dibawah ini, tepat berada di atas kode <b></head></b><br />
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> <style type='text/css'>
/* share buttons */
.share-buttons-box{height:67px;background:url(https://3.bp.blogspot.com/-moj4-jk-UB0/U1qCkCPaGQI/AAAAAAAADTY/tixmak8NHV8/s1600/share.png) no-repeat 330px 10px;margin:20px 0 15px;overflow:hidden;position:relative}
.share-buttons{margin:0 0;height:67px;float:left}
.share-buttons .share{float:left;margin-right:10px;display:inline-block}
</style> </code></pre>
<br />
6. Klik <b>Simpan Template</b>, dan coba lihat hasilnya.<br />
<br />
<blockquote class="tr_bq">
Jika widget tersebut tidak berjalan, coba kalian taruh kode <b>HTML</b> diatas kode <b><body:post.body/> </b>lainnya. Jika masih tetap tidak berjalan, coba untuk kalian taruh diatas kode <b>'related-post</b>. Karena setiap template berbeda-berbeda.</blockquote>
<br />
Demikianlah tadi tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-memasang-sosial-share-and-like.html">cara memasang sosial share and like button</a> pada blog. Semoga tutorial tersebut bermanfaat bagi kita semua, jika masih ada hal yang kurang dimengerti silahkan berikan komentar dibawah. Cukup sekian dan terimakasih.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-63012332427112518972017-09-16T15:52:00.001+08:002017-09-16T15:55:58.637+08:00Membuat Widget PopUp Berdasarkan Waktu <div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-ekwSaoGprDs/WbzM4qRx8iI/AAAAAAAABy8/SJaKuPygkck6FiUQeM9c3PctPuat8MjrQCPcBGAYYCw/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="www.ideseonesia.blogspot.com" border="0" data-original-height="1045" data-original-width="1600" height="260" src="https://1.bp.blogspot.com/-ekwSaoGprDs/WbzM4qRx8iI/AAAAAAAABy8/SJaKuPygkck6FiUQeM9c3PctPuat8MjrQCPcBGAYYCw/s400/Tumbnail%2B1.png" title="Membuat Widget PopUp Berdasarkan Waktu" width="400" /></a></div>
<br />
Jendela pop up atau lebih dikenal dengan pop up merupakan sebuah jendela yang muncul secara otomatis pada layar monitor kalian tanpa adanya pemberitahuan, sehingga jendela tersebut muncul secara otomatis tanpa diperintahkan sebelumnya.<br />
<br />
Ukuran jendela pop up tersebut biasanya bervariasi, namun tidak menutup secara keseluruhan dari ukuran layar monitor. Kesempatan kali ini, Amirs ID akan memberikan tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/membuat-widget-popup-berdasarkan-waktu.html">cara membuat widget pop up berdasarkan waktu</a> yang telah ditentukan.<br />
<br />
Postingan kali ini, sebenarnya ada kaitannya dengan postingan sebelumnya, yaitu cara membuat PopUP kartu ucapan di blog. Namun letak perbedaannya yaitu pada tutorial ini kita akan menambahkan perintah waktu kapan jendela tersebut harus muncul berdasarkan setting waktu yang telah ditentukan. Langsung saja untuk tutorialnya, silahkan ikuti langkah-langkah dibawah ini.<br />
<br />
Sebelum kalian mengikuti tutorial dibawah ini, pastikan bahwa template kalian telah terpasang <b>jQuery, </b>jika belum silahkan tambahkan kode <b>jQuery </b>dibawah ini tepat berada diatas kode <b><span style="color: #3d85c6;"></head></span></b><br />
<br />
<pre data-codetype="HTMLku" title="jQuery"><code class="language-markup"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </code></pre>
<br />
<h3>
Cara Membuat Widget PopUp Berdasarkan Waktu</h3>
<div>
1. Silahkan masuk kedalam akun blogger kalian terlebih dahulu</div>
<div>
2. Masuk ke menu <b>Template > Edit HTML</b></div>
<div>
3. Carilah kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b><span style="color: #3d85c6;"></style></span></b></div>
<div>
4. Tambahkan kode <b>CSS</b> dibawah ini, tepat berada diatas kode <b><span style="color: #3d85c6;">]]></b:skin></span> </b>atau <b><span style="color: #3d85c6;"></style></span></b></div>
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> #myModal{
display:none;
}
#timer{
visibility: hidden;
}
/*Widget Pop Up Card*/
#amirsid {
z-index: 1000;
position: fixed !important;
top: 100px;
left: 50%;
width: 700px;
margin-left: -350px;
}
#belakang {
left: 0px;
background: #000 none repeat scroll 0% 0%;
opacity: 0.6;
position: fixed;
z-index: -1;
top: 0px;
height: 100%;
width: 100%;
}
.tulisan {
font-size: 20px;
background: #FFF none repeat scroll 0% 0%;
border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14);
cursor: pointer;
display: inline-block;
padding: 2px 9px;
text-align: center;
font-family: arial,sans-serif;
position: absolute;
top: -15px;
right: -20px;
collor:#344;
return:false;
}
.isinya {
border-radius: 3px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: 700px;
height: 400px;
border: 4px solid #FFF;
} </code></pre>
<br />
5. Setelah itu, tambahkan kode <b>JavaScript </b>dibawah ini, tepat berada diatas kode <b><span style="color: #3d85c6;"></body></span></b><br />
<br />
<pre data-codetype="HTMLku" title="JavaScript"><code class="language-markup"> <script>
var count=-1; // initially -1 as we are having a delay of 1000ms
var counter=setInterval(timer, 1000); //1000 will run it every 1 second
function timer()
{
count=count+1;
if (count >=<span style="color: #3d85c6;"><b>6</b></span>) //+1 than the req time as we have a delay of 1000ms
{
clearInterval(counter);
/////////////what code should go here for the modal to pop up??///////////////////////
$("#myModal").modal();
return;
}
document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}
</script> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian rubah (count >=<b>6</b>) angka tersebut seusai dengan berapa lama (menit) yang diinginkan</blockquote>
<br />
6. Kemudian, carilah kode <span style="color: #3d85c6; font-weight: bold;"></head> </span>dan tambahkan kode <b>JavaScript</b> dibawah ini, tepat diatas kode <b><span style="color: #3d85c6;"></head> </span></b><br />
<br />
<pre data-codetype="HTMLku" title="JavaScript"><code class="language-markup"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </code></pre>
<br />
7. Selanjutnya, tambahkan kode <b>HTML </b> dibawah ini, tepat berada diatas kode <b><span style="color: #3d85c6;"></body></span></b><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <span id="timer"></span>
<div class="modal fade" id="myModal" >
<div id='amirsid'>
<div id='belakang'></div>
<div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>&#215;</a></div>
<div class='isinya'><a href='<span style="color: #3d85c6;">https://facebook.com/luckysyarif</span>' target='_blank'><img style="width: 700px; height: 400px;" alt='Amirs ID on Facebook!' src='<span style="color: yellow;">https://1.bp.blogspot.com/-ekwSaoGprDs/WbzM4qRx8iI/AAAAAAAABy8/SJaKuPygkck6FiUQeM9c3PctPuat8MjrQCPcBGAYYCw/s1600/Tumbnail%2B1.png</span>'/></a>
</div>
</div>
</div> </code></pre>
<br />
<blockquote class="tr_bq">
Silahkan kalian ganti, url berwarna <b>biru </b>dengan url facebook kalian, dan url yang berwarna <b>kuning </b>dengan url gambar yang kalian inginkan.</blockquote>
<br />
8. Klik tombol <b>Simpan Template</b><br />
<b><br />
</b> Cukup sekian tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/membuat-widget-popup-berdasarkan-waktu.html">cara membuat widget popup berdasarkan waktu</a>. Semoga artikel yang ke 50 ini bermanfaat bagi kita semua, dan jika masih ada hal yang kurang dimengerti silahkan berikan komentar dibawah. Sekian dan terimakasih.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0tag:blogger.com,1999:blog-815042169806881869.post-12477921715442011332017-09-16T11:52:00.001+08:002017-09-16T11:57:52.783+08:00Cara Memasang Fanspage Facebook Melayang di Pojok Kanan<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-_928vhRVvqQ/WbyfsExzRGI/AAAAAAAAByc/Afzjb1UvGdwMK_PT5n6_7L3eZiba7yZhgCLcBGAs/s1600/Tumbnail%2B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Fanspage Facebook Melayang di Pojok Kanan" border="0" data-original-height="635" data-original-width="1421" height="284" src="https://4.bp.blogspot.com/-_928vhRVvqQ/WbyfsExzRGI/AAAAAAAAByc/Afzjb1UvGdwMK_PT5n6_7L3eZiba7yZhgCLcBGAs/s640/Tumbnail%2B1.png" title="Cara Memasang Fanspage Facebook Melayang di Pojok Kanan" width="640" /></a></div>
<br />
<a href="http://www.amirsyarifuddin.tk/2017/09/cara-memasang-fanspage-facebook.html"><b>Cara Memasang Fanspage Facebok Melayang di Pojok Kanan.</b></a> Fanspage merupakan sebuah halaman yang disediakan oleh pihak facebook. Fungsi dari fanspage tersebut yaitu sebagai sarana promosi atau kenalan baik dari seorang idola (artis, aktris, dsb) maupun bisnis.<br />
<br />
Adanya fanspage tersebut tentunya kita sebagai pemilik akun dapat dengan mudah menyebarkan informasi kepada orang lain yang mengikuti halaman kita. Sehingga sasaran dalam penyebaran tersebut tepat sesuai dengan keinginan lain halnya dengan kita melakukan share secara langsung menggunakan akun (non fanspage) maka yang melihat belum tentu orang-orang yang sesuai dengan kriteria yang diinginkan.<br />
<br />
Pada kesempatan kali ini, Amirs ID akan membagikan tutorial cara memasang fanspage facebook melayang di pojok kanan. Tutorial ini dapat digunakan sebagai sarana promosi agar fanspage kalian diketahui oleh para pembaca setia blog kalian, sehingga kemungkinan besar mereka akan mengikuti fanspage kalian yang berdampak pula pada penambahan jumlah follower kalian. Untuk tutorial fanspage facebook melayang di pojok kanan bawah, langsung saja ikuti langkah-langkah dibawah ini.<br />
<br />
<h3>
Cara Memasang Fanspage Facebook Melayang di Pojok Kanan</h3>
<div>
1. Login terlebih dahulu ke dalam akun blogger kalian</div>
<div>
2. Masuk pada menu <b>Template > Edit HTML</b></div>
<div>
3. Carilah kode <span style="color: #3d85c6; font-weight: bold;"></head> </span>(disarankan menggunakan Ctrl + F pada keyboard kalian)</div>
<div>
4. Tambahkan kode <b>CSS </b>dibawah ini tepat berada diatas kode <b><span style="color: #3d85c6;"></head></span></b></div>
<br />
<pre data-codetype="HTMLku" title="CSS"><code class="language-markup"> <style type="text/css">
#fbLikeBox{background-color:#FFFFFF;border:4px solid rgb(210,210,210);bottom:0;border-bottom:0;float:left;height:auto;margin-bottom:0;margin-right:5px;position:fixed;right:0;width:auto;z-index:10}
.fbLikeBox-close{color:#333!important;position:absolute;top:1px;right:1px;width:20px;height:20px;line-height:20px;text-align:center;font-size:11px}
.slideUpfbLikeBox{animation-name:slideUpfbLikeBox;-webkit-animation-name:slideUpfbLikeBox;animation-duration:1s;-webkit-animation-duration:1s;animation-timing-function:ease;-webkit-animation-timing-function:ease;visibility:visible!important}
@keyframes slideUpfbLikeBox{0%{transform:translateY(100%)}50%{transform:translateY(-8%)}65%{transform:translateY(4%)}80%{transform:translateY(-4%)}95%{transform:translateY(2%)}100%{transform:translateY(0%)}}
@-webkit-keyframes slideUpfbLikeBox{0%{-webkit-transform:translateY(100%)}50%{-webkit-transform:translateY(-8%)}65%{-webkit-transform:translateY(4%)}80%{-webkit-transform:translateY(-4%)}95%{-webkit-transform:translateY(2%)}100%{-webkit-transform:translateY(0%)}}
</style> </code></pre>
<br />
5. Setelah itu, carilah kode <b style="color: #3d85c6;"></body> </b>dengan cara yang sama seperti diatas<br />
6. Tambahkan kode <b>HTML </b>dibawah ini, tepat berada diatas kode <b><span style="color: #3d85c6;"></body> </span></b><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div class='slideUpfbLikeBox' id='fbLikeBox'>
<a class='fbLikeBox-close' href='#fbLikeBox-close-like-box' onclick='hide(&apos;fbLikeBox&apos;)' title='Close'><i class='fa fa-times' /></a>
<div class='fb-like-box ' data-header='false' data-height='62' data-href='https://www.facebook.com/<span style="color: #3d85c6;">amirsid</span>' data-show-faces='true' data-stream='false' data-width='187'><span style='height: 62px; width: 187px; '><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F<span style="color: #3d85c6;">amirsid</span>&amp;width=187&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true' style='border:none; overflow:hidden; width:187px; height:62px;'/>
</span></div>
</div>
<script type='text/javascript'>
function show(target) {
document.getElementById(target).style.display = &#39;block&#39;;
}
function hide(target) {
document.getElementById(target).style.display = &#39;none&#39;;
}
</script> </code></pre>
<br />
<blockquote class="tr_bq">
Gantilah tulisan berwarna <b>biru </b>dengan username fanspage facebook kalian</blockquote>
<br />
7. Klik <b>Simpan Template</b><br />
<b><br /></b>
Demikianlah tadi tutorial <a href="http://www.amirsyarifuddin.tk/2017/09/cara-memasang-fanspage-facebook.html">cara memasang fanspage facebook melayang di pojok kanan</a>. Semoga kalian yang mengikuti tutorial diatas mampu menambah jumlah follower fanspage kalian semua. Cukup sekian dan terimakasih.Amer Syarifuddinhttp://www.blogger.com/profile/09718316847862816549noreply@blogger.com0