Bung Benk

24/04/19

Cara Membuat Tampilan Blog Tidak Dapat Diperbesar

Apakah Kamu ingin mengatur tampilan blog Anda agar tidak dapat diperbesar? Jika iya, artikel ini akan memberikan panduan tentang cara melakukan hal tersebut. Dalam artikel ini, kita akan membahas potongan kode yang dapat Kamu tambahkan atau ganti di template blog Kamu untuk bisa menerapkan efek ini.

Pertama-tama, pastikan Kamu membuka editor HTML blog Kamu dan mencadangkan template sebelum melakukan perubahan apa pun. Setelah itu, temukan bagian <head> di kode HTML blog Kamu dan letakkan kode berikut dibawahnya :

<meta charset='utf-8'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Setelah Kamu menambahkan atau mengganti potongan kode tersebut, simpan perubahan pada template blog Kamu. Selanjutnya, buka blog Anda dan coba untuk melakukan zoom in atau zoom out pada tampilannya. Kamu akan melihat bahwa tampilan blog Kamu tidak dapat diperbesar.

Pastikan untuk menguji tampilan blog Kamu di berbagai perangkat dan browser untuk memastikan bahwa efek ini berfungsi dengan baik. Jika Anda ingin mengembalikan fungsi zoom pada tampilan blog Anda, cukup hapus atau komentar potongan kode yang telah Anda tambahkan sebelumnya.

Sekarang kamu telah mengetahui cara membuat tampilan blog tidak dapat diperbesar. Kamu dapat mengimplementasikan ini untuk memberikan pengalaman pengguna yang lebih terkontrol dan konsisten pada blog Anda.

Semoga artikel ini bermanfaat buat kamu dalam mengatur tampilan blog Anda! Jika Anda memiliki pertanyaan lain, jangan ragu untuk mengajukan.

Apakah blog kamu masih bisa dizoom?
Sisipkan jawabanmu di bawah ya..

10/04/19

Membuat Halaman Under Maintenance Di Blogspot (CSS)


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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOXT5jq1DnnZvotJ62__NqUNxNYjtyyTSy__d8kYf_1zt1chKRSkiowA5T8paoSpYcuQH2X1i1C4mZSJK5Xt11uju9rGYHxvSeQU0qILSYRDIxJOG_z_pALWGsPbwTEKKEsqvGWc7f2eh/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..!!!

24/03/19

Solusi SVG Icon Tidak Tampil Di Browser Chrome Versi Mobile

Browser Chrome Mobile Versi Terbaru

Sejak update aplikasi Browser Chrome di ponsel Xiaomi A1 saya, ternyata saya baru menyadari ternyata SVG icon pada Navigasi menu di blog saya tidak muncul. Anehnya SVG icon ini tidak muncul hanya pada browser chrome versi mobile yang saya update sekitar 1 bulan yang lalu hingga akhirnya saya memposting artikel ini.

Saya sudah coba bermacam-macam aplikasi browser bawaan Hp seperti Samsung, Xiaomi, Iphone, Modzilla Firefox, dll namun hanya pada browser chrome versi terbaru saat ini, SVG icon yang ada pada Slide menu tersebut tidak muncul sama sekali, namun ketika diklik Sidebar menu tetap muncul dan berjalan normal.

Entahlah dimana letak kesalahannya, saya sendiri bingung dan pernah suatu hari menanyakan hal ini kepada mas adhy suryadi (kompi ajaib) yang telah Membuat Slide Menu ala AMP Sidebar Untuk Blog Non AMP seperti yang saya gunakan di Blog saya ini. Saya sempat memohon mas adhy untuk mengupdate script maupun htmlnya namun mas adhy menjawab seperti screenshoot berikut.

SVG Icon Eror Pada Template Saya

Dari jawaban mas Adhy diatas akhirnya saya pun coba mengecek nya demo link Slide menu tersebut di link ini, dan ternyata pada demo tersebut SVG iconnya masih normal dan tampil di browser chrome pada ponsel saya. Hmmm.. dimana ya letak kesalahannya? Padahal udah saya cek dengan teliti isi dari pada template yang saya gunakan saat ini, dan sampai saat ini pun blm ketemu.

Barangkali ada teman-teman yang bisa membantu atau pernah mengalami masalah diatas saat menggunakan Slide Menu Ala Kompi ajaib ini, mungkin bisa share pada kolom komentar di bawah ini untuk bisa sama-sama memecahkan masalah tersebut bersama-sama.

Demikian semoga dengan adanya artikel ini, teman-teman bisa memberikan solusi atas permasalahan yang sedang saya alami diatas yaitu mengenai Masalah SVG Icon pada Slide Menu Ala Kompi Ajaib Tidak Muncul Pada Browser Chrome Versi Mobile.

Update Perbaikan:

SVG icon tidak tampil pada browser Chrome terbaru

Ternyata kesalahan ada pada saat saya mengganti kode warna, hal ini seperti apa yang disampaikan kang Adhy Suryadi mengenai pertanyaan saya kepada beliau minggu lalu.

30/01/19

Tentang Artikel Terkait Tidak Muncul Pada Halaman 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,

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

Rekomendasi Tools Screenshoot Halaman Web Full Page


Artikel ini membahas tentang alat yang dapat digunakan untuk mengambil screenshot dari seluruh halaman web. Alat ini sangat berguna bagi mereka yang perlu mengambil screenshot dari halaman web secara lengkap, bukan hanya bagian yang terlihat di layar.

Alat ini bernama "Nimbus Screenshot" dan tersedia sebagai ekstensi untuk browser Google Chrome dan Mozilla Firefox. Setelah menginstal ekstensi ini, kamu dapat dengan mudah mengambil screenshot dari seluruh halaman web hanya dengan satu klik.

Berikut adalah langkah-langkah untuk menggunakan Nimbus Screenshot:

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 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.

23/11/18

Perbaikan Thumbnail Gambar Blur Pada Widget Popular Post

Perbaikan thumbnail Gambar Blur di blog

Thumbnail blur atau gambar buram pada blog merupakan masalah yang serius bagi kebanyakan blogger, tentu saja hal ini pasti membuat tampilan blog jadi kurang menarik dan profesional. Gambar buram umumnya sering terjadi pada widget popular post maupun recent post. Meski tak jarang halaman homepage pun sering mengalami hal seperti ini.

Untuk itu kali ini saya akan sedikit berbagi cara Memperbaiki Thumbnail Gambar yang buram pada popular post blogger. Nah simpel saja, untuk memperbaikinya pun tidak begitu sulit, kamu hanya cukup mengubah resolusi gambar seperti yang saya pernah terapkan pada template blog yang saya gunakan saat ini.

Perbaikan Thumbnail Gambar Buram Pada Popular Post


Monggo, buka template editor dan temukan kode berikut.

data:post.featuredImage, 72, "1:1"

72 merupakan tinggi dari gambar utama yang muncul pada popular post dan 1:1 adalah perbandingan resolusi gambar.

Silakan ubah angka 72 menjadi 200 atau 300 dan 1:1 menjadi 2:1 atau 3:2 (coba satu persatu). Jika sudah simpan kembali template dan coba lihat hasilnya.

Cara ini 100% berhasil ketimbang cara yang lainnya yang pernah saya temui di beberapa blog, seperti dengan menbahkan JS dan lain-lain.

Demikian semoga apa yang bisa saya share kali ini mengenai Perbaikan Thumbnail Gambar Blur Pada Widget Popular Post bermanfaat. Happy blogging!

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoAhZ4bwQoJ-tOkxTcKzs25ZUZIcFCYwJZfegCJTmfWK-K31gOf4t9jW2cWOHUZY-WhUeTMT7VAW00Ahv95J3qZUx-EVAnU-SIhBWRJ1UQ33y-WOkdTknOoXW-TJ0ifgkkYdRlb7r4uQiP/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

Mudah! Panduan Edit HTML Menggunakan Ponsel

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.
  • 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

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

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. 

19/12/17

Mengalihkan Halaman Pencarian Blog Ke halaman Pencarian Google


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.

Menerapkan Assalamualaikum Didalam Postingan

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjin1s4DiRlZ2pZXKT2zs2TEADYWftXf_WUKz7in89SpxWVNyxfilSAG5kG7ExXpEXevvLpvdxY7nD7H5KKd_eJbm2i7zMsZKmyZwagjwB4Y17l01EpfOV0leb5-c7tp3UeaQiLd0p2U42G/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjin1s4DiRlZ2pZXKT2zs2TEADYWftXf_WUKz7in89SpxWVNyxfilSAG5kG7ExXpEXevvLpvdxY7nD7H5KKd_eJbm2i7zMsZKmyZwagjwB4Y17l01EpfOV0leb5-c7tp3UeaQiLd0p2U42G/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

11/11/17

Membuat Border Pelangi Sederhana Dengan CSS Di Blog

Membuat Border Pelangi Sederhana Dengan CSS Di Blog

Jika sebelumnya ada beberapa template yang menggunakan border warna-warni ini di blog dengan gambar sesuai dengan ukuran border yang akan digunakan, pada tutorial kali ini saya tidak menggunakan gambar untuk membuat border tersebut, kali ini saya akan Membuat Border Pelangi dengan menggunakan CSS.

Border ini terdiri dari 7 warna dan bisa ada di tempatkan di mana saja, di atas header, di bawah header, dibawah navigasi menu, maupun di atas footer atau sebaliknya. Contohnya bisa anda lihat pada gambar berikut:

Contoh border warna-warni dengan CSS

Jika anda tertarik membuatnya tambahkan CSS berikut di tempat yang semestinya:

/* Border Pelangi By trikricky.com */
.tr-border{display:table;width:100%;table-layout:fixed}
.tr-border span{float:left;width:14.28%;height:5px;background:#CC0000}
.tr-border span:nth-child(2){background:#FF7E00}
.tr-border span:nth-child(3){background:#F7C602}
.tr-border span:nth-child(4){background:#4D9902}
.tr-border span:nth-child(5){background:#3B94D9}
.tr-border span:nth-child(6){background:#B60783}
.tr-border span:nth-child(7){background:#550175}

Untuk menampilkan bordernya didalam template tambahkan html berikut ditempat yang anda mau.

<div class='tr-border'>
<span/><span/><span/><span/><span/><span/><span/>
</div>

Simpan dan lihat reviewnya. Demikian moga bermanfaat untuk mempercantik tampilan blog anda.

27/10/17

Membuat Share Button Yang di Gunakan Berminat Template

Inilah Share Button Yang di Gunakan Berminat Template

Berminat adalah nama template blog yang di buat oleh bungfrangki, konsep template ini sepertinya di buat minimalis untuk personal blog. Dari struktur kode yang ada didalam template ini Ada 1 hal yang menarik perhatian saya, hal tersebut adalah share button yang berada tepat dibawah postingan.

Share button Berminat template ini kelihatannya sangat rapi dan enak di pandang mata, nah jika anda tertarik membuatnya, silakan ikuti langkah-langkah di bawah ini.

Share button Berminat template


Kalo anda sering buka dan utak-atik template editor pasti tau dimana kode2 berikut ditempatkan, nah silakan buka template editor dan tambahkan ke 3 kode terpisah ini ke masing-masing posisinya didalam template:

KODE 1

/* share this */
.share,h4.sharetitle{display:block;float:left;position:relative}
h4.sharetitle{width:80px;text-transform:uppercase;font-size:15px;padding:0;margin-top:3px;margin-right:25px;text-align:center;font-weight:bold;color:#777}
h4.sharetitle:before{content:"f1e0";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;font-size:17px;padding:2px 30px 0;text-align:center;}
.sharethis{position:relative;margin:0}
.share{position:relative;margin:0;}
.share a,span.pl{display:inline-block;color:#fff;padding:12px 0 10px;width:85px;text-align:center;margin-right:8px;margin-bottom:8px;border-radius:5px;}
.share a:hover,span.pl:hover{box-shadow:0 0 10px rgba(0,0,0,.3)}
.share i,span.pl i {font-size:25px;padding:0;margin:0}
a.gp{background:#de3425}a.fb{background:#395796}a.tw{background:#4cb0ea}a.pr{background:#0a7111}a.pin{background:#ce2127}
span.pl{background:#ff9d40;cursor:pointer}
#share-menu{display:none}
.dropdown-menu{position: absolute;top: 100%;right:2px;z-index:9999;float: left;padding:0;margin:5px 0 0;font-size: 14px;list-style: none;-webkit-background-clip: padding-box;background-clip: padding-box}
ul.dropdown-menu{margin:10px 0 0 !important;background-color:#fff;box-shadow: 0 1px 4px rgba(0,0,0,.6);border-radius:2px}
.dropdown-menu li{list-style: none!important;margin: 0!important;padding:0 !important}
.dropdown-menu li a{clear:both;margin:0 !important;color:#444!important;font-weight:400;display:block;padding:5px 20px !important;border-radius:0 !important}
.dropdown-menu li a:hover{background:#2b427d!important;color:#fff !important}

KODE 2

<h4 class='sharetitle'>Shares</h4>
<script type='text/javascript'>
//<![CDATA[
var siteurl = window.location.href;
  document.write('<div class="sharethis"><div class="share"> 
<a class="gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Share to Google+">
    <i class="fa fa-google-plus"></i></a> 
<a class="fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Share to Facebook">
    <i class="fa fa-facebook"></i></a> 
<a class="tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'" target="_blank" title="Share to Twitter">
    <i class="fa fa-twitter"></i></a> 
<a class="pin" href="http://pinterest.com/pin/create/button/?source_url=' + siteurl + '" target="_blank" title="Share to Pinterest">
    <i class="fa fa-pinterest"></i></a> 
    <span class="pl" id="pl" onclick="showhide()" title="More Share"><i class="fa fa-plus"></i></span> 
<ul class="dropdown-menu" id="share-menu"> 
    <li><a href="//www.digg.com/submit?url=' + siteurl + '" target="_blank" title="Share This On Digg">Digg</a></li> 
    <li><a href="//www.linkedin.com/shareArticle?mini=true&amp;url=' + siteurl + '" target="_blank" title="Share This On Linkedin">Linkedin</a></li> 
    <li><a href="//www.stumbleupon.com/submit?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Stumbleupon">Stumbleupon</a></li> 
    <li><a href="//delicious.com/post?url=' + siteurl + '&amp;title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Delicious">Delicious</a></li> 
    <li><a href="http://www.tumblr.com/share/link?url=' + siteurl + '&name='+encodeURIComponent(document.title)+'&description='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Tumblr">Tumblr</a></li> 
    <li><a href="http://bufferapp.com/add?text='+encodeURIComponent(document.title)+'&url=' + siteurl + '" target="_blank" title="Share This On BufferApp">BufferApp</a></li> 
    <li><a href="https://getpocket.com/save?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Pocket">Pocket</a></li> 
    <li><a href="http://www.evernote.com/clip.action?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Evernote">Evernote</a></li> 
    <li><a href="http://reddit.com/submit?url=' + siteurl + '&title='+encodeURIComponent(document.title)+'" target="_blank" title="Share This On Reddit">Reddit</a></li> 
    </ul> 
</div><div class="clear"></div></div> 
');
//]]>
</script>

KODE 3

<script type='text/javascript'>
//<![CDATA[
function showhide(){var e=document.getElementById("share-menu");"block"!==e.style.display?e.style.display="block":e.style.display="none"};
//]]>
</script>

Simpan template dan lihat hasilnya. Demikian, selamat malam.

13/10/17

Pengalaman Mengatasi Kesalahan DNS Total Di Webmaster Tools

Pengalaman Mengatasi Kesalahan DNS Total Di Webmaster Tools

Ternyata ngeblog itu bukan sekedar menulis artikel dan menerbitkannya, kita juga harus memperhatikan hal lain yang berkaitan dengan blog itu sendiri, dari mulai memilih/membuat design template, setting domain dan hosting, memantau aktifitas blog di webmaster, mempromosikannya ke media sosial, menautkan link kesana kesini, dan banyak lagi.

Nah kali ini saya baru saja untuk yang pertama kalinya mengalami masalah kecil di beranda Webmaster Tools saya, di dashboard terdapat laporan bahwa blog saya tidak dapat ditemukan dan tidak dapat dirayapi oleh google, blog saya mengalami masalah DNS total seperti tampak pada screenshoot berikut:


Alhasil saya panik bercampur kesal, saya pun coba menghubungi salah satu Penyedia domain yang saya pakai saat itu melalui layanan CS yang sudah disediakan, dan ternyata setelah mereka cek blog saya dalam keadaan baik-baik saja. Mereka hanya menyarankan untuk verifikasi ulang blog dan domain di webmaster dan memasukan ulang kembali.

Akhirnya saya pun mengikuti saran tersebut, lebihnya lagi justru saya sampai menghapus blog saya yang dari webmaster dan kemudian memverifikasikan ulang semuanya kembali satu persatu, namun tetap saja icon kuning yang berisi tanda seru putih itu tak kunjung menghilang.

Saya coba mencari informasi kesana kesini sampai mengacak-acak semua halaman google, bertanya di forum-forum namun sedikit sekali blog yang menjelaskan dan memberi solusi akan masalah ini. Rasa penasaran saya pun menjadi-jadi, saya coba menghubungi kembali penyedia layanan DNS dan hosting di blog saya, saya mendesaknya dengan berbagai macam pertanyaan, sampai akhirnya pihak CS pun mengakui bahwa memang benar adanya server mereka sedang trouble alias Down. Mereka pun meminta maaf dan meminta saya untuk menunggu 3x24 jam kerja dan akan normal kembali.

Setelah memdapat kabar tersebut rasa kesal saya semakin menjadi-jadi, Meski masa berlaku domain saya masih 6 bln lagi, tanpa pikir panjang akhirnya saya mencari penyedia layanan domain dan hosting lain dan menggantinya dengan domain baru.

Nah dari kejadian diatas disimpulkan bahwa penyebab semua masalah DNS di atas adalah si penyedia layananan domain dan hosting itu sendiri, maka dari itu pilihlah layanan penyedia hosting dan domain yang baik dan hampir tidak pernah mengalami down pada server mereka. Tentunya kita tidak ingin traffic blog merosot bukan? Untuk itu sebelum membeli domain atau hosting sebaiknya anda bisa bertanya dahulu kepada sesama blogger atau menanyakannya di forum-forum blogger ternama.

Demikian sedikit ringkasan mengenai Pengalaman Mengatasi Kesalahan DNS di Webmaster Tools kali ini, semoga apa yang terjadi pada saya tidak terjadi juga pada anda yang belum pernah mengalami masalah seperti ini, khususnya blogger pemula yang baru ingin mengganti domainnya dari blogspot ke domain TLD.

30/09/17

Menghapus Pesan Showing Post By Label Di Blog

Menghapus Pesan Showing Post By Label Di Blog

Jika anda membuka halaman label dan halaman pencarian pada template bawaan blog muncul rangkaian Pesan "Showing Post by Label, Show Post". Jika anda terganggu dengan munculnya pesan seperti ini, kali ini saya akan share trik menghilangkan pesan tersebut dari blog permanen atau menyembunyikannya.

Jika kita cari di dalam template pesan tersebut tidak ada.. itulah yang membuat para blogger pemula bingung dimana letak pesan itu sebenarnya, sama hal nya seperti saya.. awalnya saya tidak tahu dan bingung dimana letak kode script dan html pesan berisi "showong post by label, show all post", jika saja pesan ini saya temukan pasti saya akan langsung menghapus semua tag nya.

Setelah lama utak atik template akhirnya saya mencoba cara untuk inspect elemen dengan mengklik kanan pesan yang muncul tersebut dengan menggunakan browser chrome, alhasil jreeeeng ternyata pesan tersebut bersembunyi di rangkaian kode seperti gambar dibawah ini:

Review Menghapus Pesan Showing Post By Label Di Blog

Atau jika anda masih bingung anda bisa melihat kode di bawah ini:

<b:if cond='data:post.editUrl'>
          <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
            <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
              <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
            </a>
          </span>
        </b:if>
      </b:includable>
          <b:includable id='shareButtons' var='post'/>
          <b:includable id='status-message'>
        <b:if cond='data:navMessage'>
        <div class='status-msg-wrap'>
          <div class='status-msg-body'>
            <data:navMessage/>
          </div>
          <div class='status-msg-border'>
            <div class='status-msg-bg'>
              <div class='status-msg-hidden'><data:navMessage/></div>
            </div>
          </div>
        </div>
        <div class='clear'/>
        </b:if>
      </b:includable>
<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/><br/>

Dari rangkaian kode diatas anda bisa menghapusnya untuk menghilangkan pesan yang di maksud, atau jika anda tidak ingin menghapusnya anda bisa menyembunyikannya dengan menambahkan kode berikut diatas ]]></b:skin> atau <style/>

.status-msg-wrap{display:none !important;}

Kemudian simpan template dan lihat hasilnya dengan cara mengklik menu label atau halaman hasi pencarian. Untuk mencegah kesalahan sebaiknya, sebelum mengedit backup terlebih dahulu template anda.

Demikian semoga Trik Menghapus Pesan Showing Post By Label bisa diterapkan di blog anda dan menjadikan inspirasi untuk anda kedepannya dalam mengelola blog.

29/09/17

Cara Memperbaiki Contact Form Blogger Tidak Berfungsi

Trik Memperbaiki Contact Form Blogger Tidak Berfungsi

Contact form merupakan salah satu sarana kelengkapan sebuah web atau blog, dengan contact form pengunjung bisa langsung berkomunikasi dengan si pembuat blog langsung via email. khusus untuk web dan blog berplatform blogspot anda bisa membuat halaman contact form dengan mudah tanpa menambahkan CSS ke dalam Template dan Jika anda belum membuatnya anda bisa simak caranya Membuat Contact form Sederhana Di halaman statis di sini.

Jika Contact form sudah ada di blog anda namun tidak berfungsi ketika tombol kirim pesan maka anda perlu mengikuti langkah-langkah dibawah ini:

Edit halaman statis anda yang didalamnya terdapat kode contact form seperti ramgkaian kode berikut ini.

<form id="kontak-ricky" name="contact-form">
Contact admin disini

<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama *" size="30" type="text" value="" />

<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />

<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Isi Pesan *" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

Setiap kontak form umumnya di awali dengan <form> dan di tutup dengan </form>, kode di atas adalah isi dari kode kontak form yang saya gunakan saat ini, dan kode ini kurang lebih sama seperti kode contact form yang di gunakan para blogger saat ini.

Hal yang membuat kode diatas tidak berfungsi karena tidak adanya script di bawah ini. Untuk itu tambahkan Kode berikut tepat dibawah kde penutup contact form diatas yaitu </form>

<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '7106032244507869187';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d7106032244507869187','//www.trikricky.com/','7106032244507869187');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar3', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '7106032244507869187', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti semua kode 7106032244507869187 seperti yang ditandai merah diatas dengan ID blog anda. Simpan halaman dan cek dengan mengirimkan email ke contact form yang sudah anda perbaiki tadi.

Demikian dan semoga bermanfaat untuk anda yang sedang mencari solusi untuk Memperbaiki Contact Form yang Tidak Berfungsi. Salam hangat.