Trik Ricky: Blogger
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

10/04/19

Membuat Halaman Under Maintenance Di Blogspot (CSS)

Membuat halaman khusus blog yang sedang perbaikan

Terkadang pasti ada saja masalah perbaikan yang serin dialami oleh para blogger, termasuk salah satunya memperbaharui design template pada blog, Dalam masa perbaikan tersebut tentu kita tak ingin agar pengunjung datang dan akhirnya membuat pengunjung pergi karena tampilan blog yang berantakan.

Nah untuk mencegah hal tersebut kita perlu membuat halaman khusus yang nantinya pengunjung akaan di arahkan ke halaman khusus ini, halaman ini berisi keterangan bahwa blog sedang di perbaiki/maintenance. Keterangan tersebut umumnya dibuat menuju link gambar tertentu, contohnya seperti ini.

Membuat Halaman Under Maintenance Khusus Dengan CSS


Jika blog kamu sedang ada perbaikan, entah perbaikan template atau apapun itu, ada baiknya membuat Halaman Under Maintenance ini agar nantinya pengunjung bisa kembali lagi dilain waktu setelah blog kita selesai di perbaiki, untuk membuatnya mudah kok, kamu hanya cukup meletakkan kode dibawah ini di atas syle yang pertama atau di atas </head>

<style type='text/css'>
/*<![CDATA[*/
html:after {
  content: "";
  background: #fff url(https://2.bp.blogspot.com/-7xbzasXFR50/Wa43L1IIFAI/AAAAAAAAskE/JKR51NgBl_EIuoZJylbY3QqhQv03tR2LwCLcBGAs/s1600/maintainance.jpg) no-repeat;
  background-size: auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  background-position: center;
}
body {
  display:none;
}
@media screen and (max-width:800px) {
  html:after {
    background-size: contain;
  }
}
/*]]>*/
</style>

Kamu juga bisa mengganti link gambar sesuai keinginanmu sendiri dengan mengganti kode yang di tandai merah

Nah jika sudah selesai simpan template dan lihat hasilnya dengan mengklik link blog kalian yang sudah terpasang Halaman Under Maintenance tersebut.

Demikian.. Happy Blogging gaaaesss..!!!

30/01/19

Mengatasi Artikel Terkait Tidak Muncul Pada Halaman Versi Mobile

Kode Penyebab artikel terkait tidak muncul

Artikel terkait merupakan sebuah link yang umumnya di sertai gambar yang saling berhubungan dengan artikel yang menjadi topik utama di halaman web atau blog. Artikel terkait ini juga berfungsi untuk mengarahkan pengunjung lebih mudah menjangkau topik terkait lainnya agar traffic blog menjadi meningkat.

Nah buat kamu yang masih pake template gratisan yang sudah banyak di bagikan di google mungkin pernah mengalami masalah pada artiket terkait yang tidak muncul sama sekali saat blog dibuka melalui mobile/gadget. Contohnya saja template Viomagz yang banyak di share di internet.

Mengatasi Artikel Terkait Tidak Muncul


Kenapa harus Viomagz? ini semua karena saya sendiri saat ini menggunakan template tersebut di salah satu blog saya dan masalah artikel terkait yang tidak muncul di halaman mobile tersebut saat ini sudah teratasi. Ternyata masalah tersebut ada pada sebuah script yang memang sengaja dibuat agar artikel terkait tidak muncul di halaman mobile.

Nah buat kamu pengguna template yang saya sebutkan diatas (Viomagz) dan ingin Artikel terkaitnya muncul juga di halaman mobile, silakan cari kode script dibawah ini, kode ini biasanya di letakan di bagian atas </body>

<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Related Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span class="bg_overlay"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:///g , "//").replace(//s[0-9]+(-c)?/, "/s"+d.thumbnailSize):d.noImage;u=("summary"in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div class="related-post-item-text"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title-thumb" href="'+v+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a></div><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><div class="related-post-item-thumbnail"><img alt="" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

Kemudian cari kode dibawah ini didalam kode script tersebut.

j(d.homePage.replace(/\/$/,"")

Selanjutnya ganti kode yang ada didalam tanda kurung dengan kode dibawah ini

(\&|$)|\/+$/, "")

Simpan template dan lihat reviewnya, hasilnya bisa kamu lihat di blog saya yang lainnya Disini.

Nah cara diatas bisa kamu terapkan pada template Viomagz atau template lain yang memiliki kode yang mirip dengan kode script tersebut. Namun jika kode script diatas tidak ada mungkin Widget tersebut hanya disembunyikan oleh tag kondisional yang biasanya seperti dibawah ini.

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><div id='related-wrapper'>
<div class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];var relatedPostConfig={homePage:&quot;<data:blog.homepageUrl/>&quot;,widgetTitle:&quot;&lt;h4&gt;Artikel Terkait&lt;/h4&gt;&quot;,numPosts:6,summaryLength:0,titleLength:&quot;auto&quot;,thumbnailSize:320,noImage:&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,containerId:&quot;related-post&quot;,newTabLink:false,moreText:&quot;Read More&quot;,widgetStyle:3,callBack:function(){}}
  </script></div>
</b:if>

Hapus kode tag kondisional diatas atau ganti "false" jadi "true"

Demikian semoga Cara Mengatasi Artikel Terkait Tidak Muncul Pada Halaman Mobile Kali ini Bermanfaat, Happy Blogging.

03/01/19

Tools Screenshoot Halaman Web Full Page Di Hp & PC


Mengambil sebuah screenshoot di android tentu sangatlah mudah, namun semuanya itu hanya sebatas panjang dan lebar layar hp yang kita digunakan, ada bagian tertentu yang tidak bisa di jangkau dalam screenshoot tersebut alias terpotong. Lalu, bagaimana caranya agar bisa mengambil screenshot halaman web full tanpa terpotong dari atas hingga ke bawah di android?

Bagi sebagian orang mungkin screenshoot  ini bukanlah hal penting, namun tidak untuk para design web atau para pembuat website. Mendapatkan screenshot dari website hasil karyanya secara keseluruhan adalah hal yang penting, mengingat sebuah halaman website yang di screenshoot tersebut nantinya akan digunakan sebagai demo atau review ketika hendak di promosikan untuk dijual dalam sebuah artikel.

Untuk kamu yang sedang mencari-cari cara Screenshot Halaman web full page diandroid tentu kamu tidak salah lagi jika masuk ke website dan artikel kali ini, karena disini saya akan membagikan tutorialnya secara cuma-cuma. Nah gimana sih caranya, yuk simak tutorial nya berikut ini.

Cara Screenshoot Halaman Website Full Page


Sebelum saya menjelaskan gimana cara Screenshoot Halaman web full page tanpa terpotong di android, kamu bisa lihat dulu contoh screenshoot yang baru saja saya ambil pada salah satu blog saya yaitu lovelybekasi.web.id di bawah ini.

Ini tampilan Dekstop:


Dan ini tampilan mobile:


Mohon maaf jika gambar agak buram di karenakan gambar saya perkecil ukurannya agar tidak memberatkan loading blog, gambar asli hasil screenshoot diatas lebih jelas dan lebih tinggi resolusinya.

Nah jika kamu sudah melihat hasil yang saya lampirkan diatas sekarang mari kita coba Screenshoot Halaman Web kalian dengan cara sebagai berikut:

  • Buka browser kamu, bebas, boleh Chrome, modzila atau browser bawaan hp kamu.
  • Tap dan copy paste link https://web-capture.net ke kolom pencarian browser.
  • Masukan link website/blog km dikolom yang tersedia.
  • Pilih format gambar yang ingin dihasilkan screenshoot, ada 7 Pilihan format gambar yang tersedia yaitu adalah JPEG, PNG, SVG, File PDF, TIFF, BMP dan File Postscript (PS)
  • Setelah pilih format gambar, tap tombol Tangkap Halaman Web di bagian bawah kolom tempat kamu memasukan link web yang ingin kamu ambil gambarnya.
  • Tunggu hingga proses screenshoot selesai.
  • Unduh file hasil proses screenshoot tadi ke hp/PC kamu.
  • Selesai.


Nah coba lihat hasil download Screenshoot yang dihasilkan tadi. Gimana mudah bukan???

Dengan ini artinya kamu sudah berhasil membuat screenshot halaman website full satu halaman penuh, yuk share artikel ini agar teman-teman kamu tau Cara Paling mudah Screenshoot Web Full Page tanpa aplikasi yang telah saya bagikan kali ini.

17/10/18

Cepat Terindeks! Cara Submit URL Di Search Console Baru

Submit url artikel blog di webmaster

Belum lama ini google telah mengubah tampilan webmaster menjadi lebih baik, dengan menu yang lebih ringkas dan simple mungkin banyak di antara pembuat website atau blog bingung bagaimana cara submit url di webmaster baru agar tiap artikel baru yang di publikasikan lebih cepat terindeks di halaman pencarian.

Awalnya saya sendiri bingung, dan masih mengalihkan dan menggunakan webmaster lama untuk submit tiap url yang saya publikasikan. Namun ternyata untuk submit url di webmaster baru lebih mudah ketimbang submit url di webmaster lama. Nah buat kalian yang masih bingung gimana cara submit url di webmaster baru, kamu bisa ikuti langkah-langkah nya di bawah ini.

Cara Submit URL di Google Webmaster Baru


Silakan login terlebih dahulu menggunakan akun gmail yang terdaftar di situs Google Search Console dan tap menu Bar di Pojok kiri atas > Inspeksi URL > Masukan URL > Enter > Minta pengindeksan.

Submit URL Di Search Console Baru

Proses pengindeksan dibutuhkan waktu 1-2 menit, biarkan dan tunggu sebelum tab popup baru muncul.

Nah selesai, lakukan hal tersebut secara rutin setelah kamu selesai memposting artikel baru agar lebih cepat terindeks oleh mesin pencari google. Demikian Tutorial kali ini mengenai Cara Submit URL Di Search Console Baru.

04/05/18

Solusi Gambar Blog Menyamping Saat Share Ke Facebook

Gambar blog miring saat dishare ke facebook

Di google banyak sekali template gratis maupun berbayar yang di bagikan secara gratis, namun ternyata banyak sekali kekurangan dan salah satu kekurangan tersebut adalah masalah gambar berada di posisi kiri dan judul di posisi kanan saat link postingan di bagikan ke facebook.

Nah untuk menangani masalah Gambar Blog Menyamping Saat Share Ke Facebook sebenarnya tidak lah terlalu sulit, kamu cukup menambahakan beberapa rangkaian meta tag, dan untuk menerapakannya ikuti langkah-langkah berikut:

Solusi Gambar Blog Menyamping Saat Share Ke Facebook


Sebelum menambahkan beberapa meta tag di bawah ini baiknya backup dulu template kamu untuk menghindari hal-hal yang tidak di inginkan.

Jika sudah buka template dan cari kode seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>

Tambahkan kode berikut tepat dibawah kode yang kamu cari tadi.

<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />

Jika di gabungkan hasilnya akan seperti berikut.

<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="315" />
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-NlWOxoj13hY/Wus4YgVUK1I/AAAAAAAAADU/vGbbrEvX-fUbCx-TBrCgbRV9Ro7NU-OJACLcBGAs/s1600/KonveksiQu-Banner.jpg' property='og:image'/>
</b:if>
</b:if>

Simpan template dan coba share kembali salah satu postingan kamu ke facebook. Lihat hasilnya. Bagaimana apakah gambar artikel postingan kamu sudah tidak menyamping lagi?

Share yuk artikel ini agar teman-teman kamu tau bagaimana mudahnya mengatasi Gambar artikel Blog Menyamping Saat Share Ke Facebook.

Akhir kata

Demikian Semoga Solusi Gambar Blog Menyamping Saat Share Ke Facebook bermanfaat untuk kamu. Salam.

28/03/18

Cara Paling Gampang Edit HTML Via Smartphone

Cara Paling Gampang Edit HTML Via Smartphone

Sebagai seorang blogger pastinya kamu tidak asing dengan yang namanya HTML. HTML atau Hyper Text Multi Laguage adalah bahasa pemrograman yang terdiri dari rangkain dan kode-kode khusus seperti huruf, angka maupun karakter tertentu.

Hypertext Markup Language juga merupakan sebuah bahasa markah yang digunakan untuk design sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. (Sumber: Wikipedia)

Jadi dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML

Untuk mengedit HTML di blogger biasanya kita dapat melakukannya dengan masuk ke dasboard blogger > Theme > Edit HTML, namun hal ini tentu hanya bisa di akses dengan menggunakan Komputer. Lalu bagaimana jika kami ingin mengedit dengan menggunakan Smartphone???

Jika Kamu membuka dasbord blogger dengan smartphone tentu bisa saja namun screen yang di tampilkan hanya support tampilan desktop. Hal ini pasti akan sedikit menyulitkan pandangan mata kamu.

Apalagi jika kita ingin mengedit HTML untuk merubah tampilan blog, setelah tampilan Kode2 HTML tersebut terbuka kita tidak dapat melakukan hal-hal yang biasa diakukan ketika mengunakan dekstop seperti mengedit maupun menghapus kode-kode tertentu yang kita inginkan.

Untuk bisa mengedit file HTML kamu perlu menambahkan aplikasi tambahan yang bisa membuka file dan mengedit file HTML dengan mudah. Dari dari sekian banyak aplikasi sejenis yang sudah saya coba, saya rekomendasikan sebaiknya kamu menggunakan aplikasi Quick Edit.

Lalu bagaimanakah cara menggunakannya agar kamu dapat dengan mudah mengedit file HTML, CSS maupun JavaScript untuk merubah design blog atau website? simak aja Cara Paling Gampang Edit HTML Via Smartphone berikut ini.

Cara Edit HTML Dengan Quick Edit


Buka smartphone kamu dan lakukan langkah-langkah berikut:

  • Langkah Pertama Download dan instal terlebih dahulu aplikasi Quick Edit di Google Play Disini atau jika ingin Versi Premiumnya (Tanpa iklan) saya punya File Apk nya (Quick Edit V1.3.5) silakan Unduh Disini.
  • Download Template/Tema blog yang ingin kamu edit.
  • Buka file tema yang kamu download tadi.
  • Edit sesuai keinginan anda.
  • Simpan kembali.
  • Upload kembali Tema yang kamu edit tadi ke blog.
  • Selesai

Backup template kamu sebelum mengedit dengan Quick Edit dengan cara mengcopy filenya menjadi 2 bagian, 1 untuk edit, 1 untuk backup.

Nah untuk memudahkan kamu mencari kode-kode tertentu Tap tiga titik di pojok kanan atas dan ketik HTML, CSS, maupun Script ingin kamu edit.

Upps bagaimana? Mudah sekali bukan. Jika ada kesulitan, sisipkan komentarmu yah dibawah. Selamat mencoba. 

01/01/18

Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger

Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger

HTTPS merupakan singkatan dari Hypertext Transfer Protocol Secure adalah protokol komunikasi internet yang memiliki fungsinya melindungi integritas dan privasi data pengguna antara komputer pengguna dan situs/web/blog yang dikunjungi.

Pengguna internet Zaman Now tentu menginginkan penelusuran yang aman dan bersifat pribadi saat menggunakan mengunjungi sebuah situs/web/blog agar privasi mereka terlindungi selama terkoneksi dengan jaringan initernet. HTTPS Zaman Now ini tentu sangat baik menjalankan fungsinya sebagai media untuk melindungi koneksi/jaringan si pengguna internet itu sendiri ke situs/web/blog.

Bila kita mengakses dasboard blogger melalui www.blogger.com tentu menu pilihan untuk setting HTTPS suport ini belum muncul, dan untuk membukanya kita harus mengakses alamat draft.blogger.com dengan cara pilih setelan > dasar dan lihat bagian kanan pilihan yang ada seperti gambar berikut:

Setting Https Untuk Custom Domain Blogger

Berikutnya aktifkan HTTPS Availability dengan memilih YES pada kolom pilihan, halaman dashboard akan te-refresh otomatis yang kemudian akan masuk ke proses pengalihan url yang semula HTTP dan akan di alihkan ke HTTPS atau menunggu HTTPS aktif (lihat gamabar)

Proses Pengalihan Http ke Https Untuk Custom Domain Blogger

Dalam mode pilihan diatas untuk beberapa saat blog tidak bisa diakses. Tak perlu khawatir, pengalihan url dari HTTP ke HTTPS hanya sebentar, setelah menu pilihan kedua "Https redirect" sudah bisa diklik, pilih juga "Yes" pada pengaturan ini. Lihat gambar dibawah ini:

Proses Redirect Http ke Https Berhasil

Jika pemgaturan sudah disetting seperti gambar diatas maka blog sudah kembali bisa diakses, tentunya url blog juga sudah berubah menjadi HTTPS. Jadi Jika ada link di blog awalnya menggunakan url Http maka otomatis akan dialihkan ke Https, begitu juga jika ada pengunjung yang mengakses dengan url blog yang lama dan masih menggunakan Http maka otomatis alan dialihkan ke HTTPS.

Di samping itu juga untuk anda yang menggunakan adsense maka adsense anda yang biasanya tayang dengan normal akan hilang/blank beberapa saat, namun anda tak perlu khawatir, masalah ini tak akan berlangsung lama, adsense membutuhkan waktu beberapa saat dan akan otomatis nantinya untuk menyesuaikan iklan yang mendukung Https.

Dalam hal ini juga ada beberapa hal yang wajib dilakukan setelah Https aktif diantaranya adalah:

  • Ganti semua Url lama yang di edit di Html dengan cara masuk ke edit HTML, tekan Ctrl + Shif + R untuk memunculkan kotak di pojok kanan atas.
  • Ketikan url lama anda yang masih menggunakan Http pada kolom yang muncul kemudian tekan Enter (http//:www.namadomainanda.com)
  • Ketikan https//:www.namadomainanda.com dan tekan Enter kembali.
  • Periksa template blog anda untuk mixed content. Jika Https blog anda masih berwarna abu-abu artinya menandakan template blog memiliki mixed content, tentu hal ini harus diperbaiki agar HTTPS berubah warna menjadi hijau. Semua Url js dan gambar menggunakan Https dan dapat diakses dengan normal.
  • Rubah url sitemap di robots.txt menjadi Https. Sebelumnya Tambahkan dulu properti baru di Search Console untuk nama domain anda dengan awalan Https
  • Selesai

Demikian Tutorial Blogger kali ini mengenai Dukungan Https Kini Sudah Tersedia Untuk Custom Domain Blogger. Semoga apa yang bisa saya share kali ini bermanfaat, salam hangat.

19/12/17

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google
Umumnya hasil pencarian pada blog atau web muncul di halaman blog saja, namun jika anda ingin mengalihkan hasil pencariannya ke galaman google, anda cukup menambahkan beberapa rangkaian html dibawah ini ke tempat dimana anda meletakan kode search form tersebut.

Sekarang perhatikan HTML berikut, jika anda sering mengutak-atik template pasti paham dengan susunan kode ini:

<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='search-wrapper' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='search-form' itemprop='query-input' name='q' placeholder='Cari artikel...' required='required' type='search'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'SEARCH</button>
</form></div>

Dari rangkaian kode di atas anda tak perlu mengganti semuanya, pada tiap template pasti memiliki kode yang berbeda, namun intinya tetap sama. Dari beberapa kode di atas pasti sudah ada dalam kode search form pada template anda saat ini, yang anda lakukan adalah cukup sesuaikan kode yang saya block merah dengan id dan class pada CSS search form anda saat ini.

Sebagai contoh, dibawah ini adalah kode awal sebelum kode diatas di tambahkan:

<form action='/search' id='searchform'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Search here....' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>

Maka hasilnya akan seperti dibawah ini:


<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='searchform' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-form' name='q' placeholder='Cari artikel....' required='required' type='text'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form></div>

Perhatikan kode yang saya tandai, yang berwarna merah adalah id dan class nya, kode yang berwarna kuning adalah kode yang saya ubah, dan kode yang berwarna biru adalah kode yang saya tambahkan.

Simpan template dan coba ketikan kata kunci di kolom search form anda, jika belum berhasil anda bisa mengganti search form anda dengan Search form with keyframe effect seperti artikel yang sudah saya bagikan sebelumnya Disini.

Demikian Artikel mengenai cara Mengalihkan halaman pencarian blog ke halaman pencarian Google. Selamat beraktifitas.

18/12/17

Cara Simple Membuat Social Share Button Dengan Font Awesome

Social Share button dengan font awesome

Pada artikel sebelumnya pernah saya bagikan artikel yang sama tentang Cara membuat social share button lengkap dengan Whatsapp, Line dan BBM, namun kali ini Social Share yang saya bagikan sangat simple dan mudah untuk diterapkan diblog.

Terdapat 3 tombol share umum yang saya letakan pada social share kali ini, yaitu Facebook, Twiter dan Google+.

Untuk penerapannya, ikuti langkah-langkah berikut:


Langkah 1

Letakan kode CSS berikut diatas </style>

/* Simple Socshare With Font Awesone */
.shareku span {font-size:16px}
.shareku a, .shareku a:hover {color:#fff}
.fb, .twit, .gplus {text-align:center; padding:5px 12px; font-size:12px; border-radius:3px}
.fb { background-color:#1358BA}
.twit { background-color:#03C7E9}
.gplus { background-color:#FE1635}
.fb:hover, .twit:hover, .gplus:hover {background-color:#547279; transition:background-color 0.7s ease-out 0s}

Langkah 2

Cari kode <div class='post-footer-line-1'> dan letakan kode berikut tepat dibawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='shareku'>
<span>Bagikan Artikel:</span>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-facebook icon-large'/> Facebook</a> 
<a class='twit' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-twitter icon-large'/> Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='icon-google-plus icon-large'/> Google+</a>
</div>
</b:if>

Langkah 3

Karena Social share ini menggunakan Font Awesome, pastikan anda sudah menambahkan kode berikut ke dalam template tepat di atas </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Lewati langkah ke 3 jika sudah terdapat kode tersebut di dalam template anda.

Selesai, simpan template dan lihat hasilnya.

Demikian Cara membuat Cara Simple Membuat Social Share button dengan Font Awesome. Selamat beraktifitas.

Membuat Page Loader Sederhana Ala Arlina Design

Membuat Page Loader Sederhana Ala Arlina Design

Pada tutorial kali ini saya akan membagikan tutorial cara membuat page loader atau efek loading yang di gunakan pada template arlina design, page loader ini mirip seperti Membuat Efek Loading Bar Seperti Di Youtube yang sudah saya bagikan pada tutorial sebelumnya.

Page loader ini akan muncul sebelum halaman blog terbuka, efeknya page loader ini memunculkan berbagai warna yang berganti dan melebar keluar secara horizontal.

Nah jika anda tertarik menambahkan efek ini, berikut adalah langkah-langkahnya:

Membuat Page Loader Arlina


Langkah awal letakan kode CSS berikut diatas </style>

/* CSS Loader Arlina */
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

Selanjutnya letakan JavaScript berikut diatas </body>

<script type='text/javascript'>
//<![CDATA[
// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

Kemudian letakan Kode berikut di diantara tag <body> dan </body> (tempatkan sesuai keinginan anda)

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

Simpan template.

Jika anda masih bingung peletakan kode HTML diatas anda bisa melihat kode diatas yang saya letakan tepat dibawah Navigasi menu berikut:

<nav id='navigation-hype' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='maxwrap'>
<input type='checkbox'><i aria-hidden='true' class='fa fa-align-left'/> Menu</input>
<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/>
<ul>
<li class='indie'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Info%20Ikan' itemprop='url'><span itemprop='name'>Info Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Jenis%20Ikan' itemprop='url'><span itemprop='name'>Jenis Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Pakan' itemprop='url'><span itemprop='name'>Pakan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Akuarium' itemprop='url'><span itemprop='name'>Akuarium</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Budidaya%20Ikan' itemprop='url'><span itemprop='name'>Budidaya Ikan</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Wisata%20Air' itemprop='url'><span itemprop='name'>Wisata Air</span></a></li>
<li><a href='http://idnaquarium.blogspot.co.id/search/label/Tips%20Trik' itemprop='url'><span itemprop='name'>Tips Trik</span></a></li>
</ul>
</div>
</nav>


Demikian Cara membuat Page loader ala Arlina Design, semoga dapat menjadi bahan inspirasi untuk anda.

Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini

Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini

Makin banyaknya pengguna smartphone yang menggunakan Browser anti iklan atau Adblock seperti Uc browser dan opera mini membuat kita galooou sebagai blogger yang menggaet penghasilannya dari iklan yang kita tayangkan.

Untuk mengatasi hal tersebut cara yang paling jitu saat ini adalah Memblokir dan mengalihkannya secara otomatis ke browser Google chrome agar iklan kita dapat tampil dengan baik saat blog dibuka dan diakses oleh pengunjung.

Cara ini adalah cara paling mujarab ketimbang Cara yang pernah saya bagikan sebelumnya di Artikel yang berjudul Trik Memblokir Pengunjung ketika blog di buka dengan UC browser.

Sederhana, dengan cara ini pengguna tidak lagi menemukan notifikasi apapun seperti cara ysng pernah saya share sebelumnya ketika pengunjung mengakses blog kita dengan Uc browser dan Opera mini. Jika pengunjung terdeteksi membuka blog kita dengan salah satu dari ke dua browser tersebut maka akan langsung di alihkan ke browser nomor 1 google yaitu Chrome.

Penasaran gimana caranya? Now.. Penerapannya adalah sebagai berikut:

1. Buka Template editor.
2. Tambahkan ke 2 JavaScript dibawah ini tepat di atas </head>

Script Redirect Otomatis UC browser


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
var findmove1 = navigator.userAgent;
var redirect = findmove1.search("UCBrowser");
if(redirect>1) {
var queries1 = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = queries1;document.getElementsByTagName('head')[0].appendChild(activity);
}
//]]>
</script>
</b:if>

Script Redirect Otomatis Opera Mini


<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script type='text/javascript'>
//<![CDATA[
var findmove2 = navigator.userAgent;
var redirect = findmove2.search("Opera Mini");
if(redirect>1) {
var queries2 = window.location.assign("googlechrome://navigate?url="+ window.location.href);
var activity = queries2;document.getElementsByTagName('head')[0].appendChild(activity);
}
//]]>
</script>
</b:if>

Jika sudah jangan lupa simpan kembali template dan silakan coba buka blog anda sendiri dengan ke dua browser tersebut.

Demikian, Semoga Auto Redirect Ketika Blog Diakses Dengan UC Browser & Opera Mini ini dapat meningkatkan penghasilan adsense anda karena setelah ini blog anda tetap dapat menampilkan iklan meskipun endingnya harus di alihkan ke browser bawaan mbah google itu.

Menerapkan Assalamualaikum Di dalam Postingan (Snippet)

Menerapkan Assalamualaikum Di dalam Postingan (Snippet)

Bagi yang ingin Menerapkan Assalamualaikum di dalam Postingan pada blog anda silahkan simak cara-cara berikut.

Menerapkan Assalamualaikum Didalam Postingan


Langkah awal buka Dashboard > pilih template > edit html

Lalu letakan kode css berikut sebelum kode </style> (yang pertama) atau ]]></b:skin>

/* CSS Assalamualaikum */
.salamku{font-weight:700;color:#333;font-family:'traditional arabic'; font-size: 23px; text-align: center;}

Untuk menambahkan assalamualaikum sebelum postingan silahkan cari kode <data:post.body>, biasanya terdapat lebih dari satu <data:post.body>, maka dari itu cari kode yang didalam terdapat tag konditional item, jika masih bingung silakan coba satu persatu (backup template jika anda masih ragu). Tambahkan kode berikut sebelum kode yang anda cari tadi.

<div class='salamku'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>
الس&#1617;&#1614;لا&#1614;م&#1615; ع&#1614;ل&#1614;ي&#1618;ك&#1615;م&#1618; و&#1614;ر&#1614;ح&#1618;م&#1614;ة&#1615; الله&#1616; و&#1614;ب&#1614;ر&#1614;ك&#1614;ات&#1615;ه&#1615;
</span></span></div>

Rasanya jika anda menambahkan assalamualaikum di awal postingan kurang afdol jika anda tidak meambahkan salam penutupnya (Wassalamualaikum).

Untuk menambahkannya tambahkan kode berikut setelah kode <data:post.body>,

<div class='salamku'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>
و&#1614; الس&#1617;&#1614;لا&#1614;م&#1615; ع&#1614;ل&#1614;ي&#1618;ك&#1615;م&#1618; و&#1614;ر&#1614;ح&#1618;م&#1614;ة&#1615; الله&#1616; و&#1614;ب&#1614;ر&#1614;ك&#1614;ات&#1615;ه&#1615;
</span></span></div>

Jangan lupa, simpan template anda dan lihat hasilnya, Semoga Bermanfaat.

Membuat Back To Top Button Di Tengah Footer

Membuat Back To Top Button Di Tengah Footer

Tombol Back To Top adalah sebuah tombol kecil yang kembali ke atas ketika di klik, tombol ini merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol kali ini dibuat dengan gambar dan tanpa menggunakan font awesome.

Tombol back to top memiliki peranan yang sangat penting untuk sebuah blog atau website dengan konten yang berat, memiliki halaman yang memanjang kebawah dan memiliki banyak informasi pada halamannya. Jika tidak maka akan membuat konten-konten lain terlewati.

Tombol ini akan melompat ke atas dengan mudah dan singkat, tanpa menggerakanya dengan mouse pada komputer atau dengan menggesernya untuk penggunaan pada smartphone. Ini adalah salah satu cara untuk mendorong pengguna menjelajahi lebih banyak konten di blog anda.

Jika saja sebuah blog sangat sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidak mempengaruhi loading blog dan kompatibel untuk semua browser/peramban.

Nah untuk membuatnya anda bisa terapkan beberapa langkah di bawah ini

Membuat Tombol Back To Top


Buka template editor, tambahkan CSS, Javascript dan HTML Berikut:

/* Back To Top */
#backtotopid {position:relative;display:table;clear:both;text-align:center;margin:20px auto;}
.backtotopid {color:#fff;}
#backtotopid span {display:block;background:#4b5862;width:48px;height:48px;line-height:45px;border-radius:100%;cursor:pointer;transition:all .3s}
#backtotopid span:hover {background:#5c6b77;}
#backtotopid img{text-align:center;line-height:normal;vertical-align:middle;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user2-select:none;pointer-events:none;}

<script type='text/javascript'>
// Back to Top
$('.backtotopid').click(function(){$('html,body').animate({scrollTop:0},600);return false;});
//]]>
</script>

<div class='backtotopid' id='backtotop' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>

Keterangan:
1. CSS letakan diatas </style>
2. JavaScript letakan diatas </body>
3. HTML letakan antara tag footer

Jika anda bingung dengan peletakan kode HTML nya, anda bisa lihat contoh dibawah ini:

<div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div id='footer'>
<div class='footer-navigation'><ul>
<li><a href='#' title='Formulir Kontak'>Contact</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
</ul>
</div>
<div class='backtotopid' id='backtotopid' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>
Copyright &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a><br/>
</div></div>

Dengan kode diatas anda pun dapat mengubah url gambar diatas sebagaimana mestinya sesuai keinginan.

Demikian Tutorial Membuat Back To Top Button Di Tengah Footer Kali ini, Selamat siang & Happy lunch.

Membuat Efek Loading Blog Seperti Youtube Valid HTML5

Membuat Efek Loading Blog Seperti Youtube Valid HTML5

Youtube Adalah sebuah aplikasi yang mengijinkan penggunanya mengupload, Menonton bahkan Mendownload video pribadi maupun video lainnya kedalam wadah yang ditentukan, video yang kita upload dapat di tonton orang di seluruh dunia tanpa batasan waktu. namun pernahkan anda melihat sebuah bar di bagian atas ada sebuah efek loading keren yang akan muncul ketika kita akan membuka salah satu video youtube.

Jika anda sedang memutar sebuah Video di youtube pasti anda akan melihat sebuah efek loading yg berjalan diatas bar berwarna merah, nah loading bar keren ini bisa juga kita terapkan di blog kita dan tentunya juga bisa mempercantik blog kita di mata pengunjung.

Jika anda tertarik anda bisa memasang loading bar ini di blog anda. Untuk membuatnya tidaklah terlalu sulit, anda hanya cukup menambahkan JavaScript di atas </body>

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#df0d0d";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

Simpan Template dan lihat hasilnya.

Demikian cara Membuat Efek Loading Bar Seperti Youtube di blog. Semoga bermanfaat.

Inspired: Kompi Ajaib

17/12/17

Cara Dapatkan Dollar Dengan Menyingkat URL Via Shorte st

Cara Dapatkan Dollar Dengan Menyingkat URL Via Shorte.st

Banyak sekali penyingkat URL yang beredar dan bisa di gunakan untuk menyingkat alamat url, salah satunya adalah dengan Shorte.st, untuk menghasilkan uang dari shorte.st Anda harus mempersiapkan link yang nantinya setiap pengunjung akan diarahkan terlebih dahulu ke halaman  shorte.st yang yang isinya berisi bermacam iklan dan kemudian akan di arahkan ke halaman yang sebenarnya.

Harga per klik shorte.st memiliki nilai yang lebih besar untuk negara Indonesia dibandingkan dengan Adfly sekitar kurang lebih 0,57. Situs penyingkat url ini akan umumnya digunakan para blogger termasuk saya untuk mempersingkat link yang menuju url aslinya seperti link download seperti software atau template yang biasa di share oleh para blogger, semakin banyak link akan semakin banyak kesempatan didatangi pengunjung.

Cara Daftar Shorte.st situs penyingkat URL


Untuk dapat menggunakan situs penyingkat ini dan mendapatkan uang dari Shorte.st anda diwajibkan mendaftar terlebih dahulu, jadi sekarang silakan Buka Shorte.st Situs Penyingkat URL

Cara Daftar Shorte.st 1

Dibagian bawah pada gambar diatas Pilih Join/daftar dan isikan semua dengan data diri anda.

Cara Daftar Shorte.st 2

Setelah selesai mengisi semua data anda pada tahap sebelumnya, buka email yang anda daftarkan tadi dan lakukan konfirmasi via email yang di kirimkan oleh shorte.st saat itu juga dan pada tahap ini Shorte.st situs penyingkat URL sudah siap di gunakan.

Cara Daftar Shorte.st 3

Sekarang saatnya anda mendapatkan uang dengan menyingkat url apapun dengan shorte.st seperti gambar berikut.

Cara menyingkat url via shorte.st

Dari gambar diatas masukan URL yang ingin anda singkat (umumnya URL yang menuju link download) di kolom yang telah disediakan kemudian klik SHORTEN & copy pastekan hasilnya ke tempat yang anda inginkan.

Demikian artikel mengenai Cara Dapatkan Uang Dengan Menyingkat URL Via Shorte.st pada kesempatan kali ini. Terima kasih sudah berkunjung.

13/12/17

Cara Membuat Tombol Suka Facebook Di Atas Postingan

Cara Membuat Tombol Suka Facebook Di Atas Postingan

Tombol like facebook atau umumnya terdapat di bagian bagian atas postingan, hal ini di maksudkan agar tombol like tersebut lebih mudah terlihat oleh pembaca dan memudahkan pembaca untuk menekan tombol tersebut jika artikel yang di posting terlihat menarik.

Contoh tombol like facebook

Nah jika anda tertarik membuatnya silakan ikuti langkah-langkah berikut:

Tambahkan CSS berikut di atas </style>

.fbliker{display:block;margin:0 0 20px 0}

Atur sendiri posisi CSS diatas sesuai dengan template yang anda gunakan.

Berikutnya taruh kode Berikut diatas </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/id_ID/sdk.js#xfbml=1&amp;version=v2.7&amp;appId=1190181487715105&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
</b:if>

Ganti appId=1190181487715105 dengan ID anda

Kemudian Taruh kode dibawa ini dimana tombol like facebook ini akan di tempatkan, misalnya diatas postinga atau dibawah postingan

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<span class='fbliker'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small' expr:data-href='data:post.url'/>
</span>
</b:if>

Simpan template dan lihat perubahannya.

Tombol like ini hanya akan muncul pada tampilan mobile

Demikian semoga Cara Membuat Tombol Suka Facebook Di atas Postingan kali ini bermanfaat dan menambah kualitas blog anda agar lebih baik lagi.