Infinity Xsamz: Blogging

Home / Blogging

Cara Mengecek Struktur Data Pada Template Blog - Bagi kalian yang suka ngeblog, mengecek struktur data pada template blog ini sangat penting, karena ini akan mempengaruhi SEO pada blog kalian.

Baca juga: Memasang Meta Tag SEO Friendly dan Valid HTML5

Jika kalian penasaran bagaimana cara cek struktur template blog, yuk kita langsung saja ke pembahasan.

Cara Mengecek Struktur Data Pada Template Blog

Untuk cek struktur template blog, buka halaman https://search.google.com/structured-data/testing-tool/u/0/ dan akan terbuka tampilan seperti ini:

Masukkan alamat blog kalian pada kolom dan klik tombol yang berwarna hijau. Dan tunggu proses nya hingga selesai.

Usahakan tidak ada yang error pada struktur data template blog kalian, karena 1 kesalahan pun akan membuat blog kalian jelek di SERP Google.

Referensi: Mas Isam

Bagaimana Cara Mengecek Struktur Template Blog?

Summer Sabtu, 16 Februari 2019

Cara Membuat Safelink Converter di Blogger – Safelink Converter adalah sebuah website yang berfungsi untuk melakukan Redirect terhadap website lain agar penggunanya mendapat keamanan berupa link yang terenkripsi. Safelink Converter sekarang banyak digunakan dan diterapkan pada blog–blog yang memiliki niche download karena memiliki traffic yang tinggi sehingga para pemilik blog tersebut memanfaatkan tingginya traffic tersebut untuk mendapatkan uang lebih banyak melalui safelink converter. Bagaimana caranya membuat safelink sendiri di blogspot? simak artikel ini sampai habis ya.

Baca juga: Cara Membuat Spoiler Keren di Blog

Apakah Safelink aman untuk Adsense? sampai sekarang akun Adsense saya baik-baik saja walaupun menggunakan Safelink buatan saya sendiri.

Cara Membuat Safelink Converter Sendiri di Blogspot

Cara Membuat Safelink Sendiri di Blogspot

Untuk cara membuat safelink sendiri di blog, ada 2 tahap yang harus Anda dilakukan seperti berikut ini.

#1. Tahap Pertama: Memasang Template Safelink

Pertama-tama Anda harus mengunduh template safelink disini, dan password template safelink nya disini.

Jika sudah mengunduh template safelink, silahkan pergi ke halaman Blogger > Tema > Backup/Restore > Pilih File > Upload.

Jika sudah memasang template safelink di blog, sekarang ikuti tahap kedua berikut ini.

#2. Tahap Kedua: Memasang Tombol Get Link dan Iklan pada Safelink

Pertama-tama buka Postingan Anda, pilih HTML bukan Compose, lalu tambahkan kode dibawah ini:

Taruh kode ini pada postingan bagian atas:

<div id="timer"></div>
<div class="text-center">
<button id='getlink' class='btn bt-success hidden' disabled=''>Get Link</button>
<!-- Kode Iklan Anda -->
</div>

Taruh kode ini pada postingan bagian tengah ataupun bawah:

<div class="text-center">
<button id='gotolink' class='btn bt-success hidden' disabled=''>Go to Link</button>
<div style='margin:auto;display:inline-block'>
<!-- Kode Iklan -->
</div>
</div>

Baca juga: Cara Membuat Tampilan Dark Mode di Blog

Nah, seperti itulah cara membuat safelink sendiri di blog dengan mudah. jika ada pertanyaan mengenai cara membuat safelink di blogspot, silahkan berkomentar dibawah.

DEMO SAFELINK

Jika Anda suka dengan artikel ini, Anda bisa memfollow fanpage kita di Facebook (Infinity Xsamz).

Penutup

Terima kasih telah membaca artikel Cara Membuat Safelink Sendiri di Blogger, Semoga bermanfaat untuk kalian semua.

Cara Membuat Safelink Sendiri di Blogspot

Summer Sabtu, 02 Februari 2019

Cara Membuat Tombol Dark Mode di Blog - Dark Mode atau biasa disebut Mode Malam ini rupanya bukan hanya bisa dipasang pada aplikasi seperti youtube, twitter, dan lain-lain saja, rupanya dark mode atau mode malam ini bisa juga Anda pasang pada blog Anda.

Bagaimana cara membuat atau memasang Dark Mode di blog? Nah, pada artikel ini Admin ingin membahas bagaimana cara memasang dark mode di blog.

Dalam tutorial memasang dark mode ini khusus buat pengguna template viomagz. bagaimana dengan template lain? coba saja, semoga work.

Baca juga: Cara Membuat Efek Turun Salju di Blog

Jika tertarik untuk membuat night mode diblog, silahkan ikuti tutorial dibawah.

Cara Memasang Tombol Dark Mode di Blog

Pertama-tama kalian harus membuka Blogger > Tema > Edit HTML, lalu copy kode dibawah ini tepat diatas kode ]]></b:skin>.

/* Night Mode infinityxsamz.com */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 20px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #bdc3c7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #1d2129;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
transform: translateX(40px);
}
/* Rounded sliders */
.slider.round {
border-radius: 20px;
}
.slider.round:before {
border-radius: 50%;
}
.Night #wrapper {background:#1d2129;}
.Night #HTML3 {background:#1d2129;}
.Night #footer-widget-container {background:#1d2129;}
.Night .share-this-pleaseeeee {background:#1d2129;}
.Night #label-info-th {background:#1d2129;}
.Night body {background:#1d2129;}
.Night .post-body {color:#cccccc}
.Night #baca-juga h2 {color:#cccccc;background:#1d2129}
.Night .label-info-th a {color:#cccccc;background:#1d2129}
.Night li.recent-posts a{color:#cccccc}
.Night .recent-posts-title h2{color:#cccccc}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan span.mastamvan_title a{color:#cccccc}
.Night span.mastamvan_title a .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan {color:#cccccc;background:#1d2129}
.Night .Recent_Post_Mas_Tamvan .recent-post-mas-tamvan .widget-content {color:#cccccc;background:#1d2129}
.Night .post-info {color:#cccccc}
.Night {background:#1d2129;}
.Night h2.post-title a {color:#cccccc}
.Night .post-title {color:#cccccc}
.Night ul.nav-social {color:#1d2129}
.Night .post-snippet {color:#cccccc}

Sekarang tambahkan kode dibawah ini sebelum kode </body>.

<script>//<![CDATA[
$("#Night").click(function(){
$("body").toggleClass('Night');
});
//]]></script>

Jika sudah, tambahkan kode tombol dark mode dibawah ini dimana saja sesuai keinginan Anda.

<li><br/><label class='switch' for='Night'>
<input id='Night' type='checkbox'/>
<div class='slider round'/>
</label></li>

Jika sudah, klik Simpan template dan lihat hasil nya.

Mudah bukan cara membuat tampilan dark mode di blog? Sekarang blog Anda bisa menggunakan fitur night mode pada tampilan blog Anda.

Baca juga: Cara Membuat Efek Preloading Keren di Blog

Nah, seperti itulah cara membuat tombol dark mode di blog. Jika Anda suka dengan artikel ini, Anda bisa memfollow fanpage kita di Facebook (Infinity Xsamz).

Penutup

Terima kasih telah membaca artikel Cara Memasang Tombol Mode Gelap di Blog, Semoga bermanfaat untuk kalian semua.

Blogging

Cara Membuat Tampilan Dark Mode di Blog

Summer Kamis, 31 Januari 2019

Memasang Efek Smooth Scroll di Blogspot - Mungkin Anda pernah saat menscroll halaman situs orang lain ataupun milik Anda sendiri tapi terasa kurang smooth atau agak patah-patah gitu saat discroll halamannya.

Nah, oleh karena itu Admin mau memberikan sebuah script agar memberikan efek smooth saat di scroll pada blog.

Jika Anda tertarik untuk memasang efek smooth scroll di blogspot, ikuti tutorial berikut ini:

Cara Memasang Efek Smooth Scroll di Blog

Blogging

Cara Memasang Efek Smooth Scroll di Blog

Summer Rabu, 30 Januari 2019

Cara Menonaktifkan Inspect Element di Blog dengan JavaScript - Untuk mematikan inspect element di blog ini cukup mudah sekali. tapi sebelum memulai ke pembahasan, apakah Anda sudah tahu apa funsi dari Inspect Element? Oke, jika Anda belum tau apa fungsi dari Inspect Element maka akan saya beri tahu sekarang.

Sesuai dengan namanya, Inspect Element berfungsi untuk memeriksa element yang terkandung di dalam situs, mulai dari header, footer dan segala yang berhubungan dengan situs, lebih umumnya adalah pada element.

Jika Anda tidak mau kode didalam template atau tema blog dicopas oleh orang lain, silahkan gunakan script dibawah ini untuk mematikan atau menonaktifkan inspect element pada blog Anda agar tidak di copas.

Baca juga: Cara Memasang Spoiler Keren di Blog

Jika Anda tertarik untuk mematikan Inspect Element di blog, silahkan ambil script dibawah ini dan pastekan di blog Anda.

Cara Mematikan Inspect Element di Blog Dengan JavaScript

Pertama-tama kalian masuk ke Blogger -> Tema -> Edit HTML, lalu copy kode javascript dibawah ini dan pastekan sebelum kode </body>.

<script type='text/javascript'>
//<![CDATA[
// Anti Inspect Element
!function t(){try{!function t(n){1===(""+n/n).length&&0!==n||function(){}.constructor("debugger")(),t(++n)}(0)}catch(n){setTimeout(t,5e3)}}();
//]]>
</script>

Jika sudah, klik Simpan template dan Anda tinggal klik kanan lalu klik Inspeksi atau klik Ctrl + Shift + I untuk mencobanya.

Mudah bukan Cara Mematikan Inspect Element di Blog? Sekarang Anda tidak perlu khawatir lagi untuk dicopas kode nya ya.

Baca juga: Cara Memasang Meta Tag SEO Friendly dan Valid HTML5

Nah, Seperti itulah Cara Menonaktifkan Inspect Element di Blog dengan JavaScript. Jika kalian suka dengan artikel ini, kalian bisa memfollow fanpage kita di Facebook (Infinity Xsamz).

Penutup

Terima kasih telah membaca artikel Cara Menonaktifkan Inspect Element dengan JavaScript di Blog, Semoga bermanfaat untuk kalian semua.

Blogging

Cara Menonaktifkan Inspect Element di Blog dengan JavaScript

Summer Minggu, 27 Januari 2019

Cara Memasang Meta Tag Seo Friendly dan Valid HTML5 - Pada artikel ini Admin akan membahas Meta Tag yang pastinya SEO Friendly dan Valid HTML5.

Kenyataannya, Banyak blogger pemula yang tau Meta Tag tapi hanya tahu namanya saja tapi tidak tahu artinya, oke akan Admin bahas dalam artikel ini Apa itu Meta Tag.

Meta adalah Elemen atau Tag dalam Bahasa Pemrograman HTML atau XHTML yang berfungsi sebagai pemberi informasi Metadata dari sebuah halaman Web. Elemen Meta ini harus diletakkan pada bagian Head dalam HTML tersebut. Tag Meta ini dapat dipakai juga untuk menyatakan Deskripsi atau Keterangan dari suatu halaman Web dan untuk menjelaskan mengenai Kata Kunci (Keyword) Yang Terkait Serta Untuk Metadata Lain Tanpa Head. Secara Umum, Terdapat Beberapa Macam Meta Tag Dengan Fungsi Yang Berbeda. Beberapa Fungsi Tersebut Misalnya Meta Title, Keywords Dan Description.

Cara Memasang Meta Tag SEO Friendly dan Valid HTML5

Contoh Meta Tag:

Pada umumnya, Meta Tag memiliki 3 Elemen penting untuk memberikan informasi sebuah Website. Ketiga tersebut adalah:

<Title>Judul Website Anda</Title>
<Meta Content=’Deskripsi Website Anda’ Name=’Description’/>
<Meta Content=’Keyword Website Anda’ Name=’Keywords’/>

Meta Title

Meta Tag Title ini berfungsi untuk memberikan informasi Judul sebuah Website. Seperti “Infinity Xsamz” atau yang lainnya. Contoh:

<Title>Judul Website Anda</Title>

Meta Description

Meta Description berfungsi untuk memberikan informasi Deskripsi Website. Seperti “Infinity Xsamz adalah Situs Berbagi Tutorial Apa Saja”. Contoh:

<Meta Content=’Deskripsi Website Anda’ Name=’Description’/>

Meta Keyword

Meta Keyword berfungsi untuk memberikan informasi Keyword atau Kata Kunci Website. Seperti, “Infinity Xsamz, Isa Ahmad Mujahid”. Meta Tag Keyword di isi dan di Pisah oleh tanda koma (,). Contoh:

<Meta Content=’Keyword Website Anda’ Name=’Keywords’/>

Blogging SEO

Memasang Meta Tag SEO Friendly dan Valid HTML5

Summer Jumat, 25 Januari 2019

Cara Memasang Breadcrumbs SEO Friendly Blogger Valid HTML5 - Pada artikel kali ini saya akan membagikan Breadcrumbs SEO Friendly yang sudah valid html5, Walaupun saya tidak begitu paham tentang SEO, tapi ini sudah saya buktikan sendiri bahwa Breadcrumbs SEO Friendly ini Valid HTML5, Semua label terindeks oleh Mesin Pencari Google dan yang pasti Valid HTML5.

Baca Juga: Memasang Meta Tag SEO Friendly dan Valid HTML5

Bicara mengenai breadcrumbs, banyak blogger yang belum mengenal apa fungsi breadcrumbs pada blognya terutama blogger baru. Dibilang penting sih tidak, namun sebagian blogger mengatakan pemberian breadcrumbs pada blog sangatlah penting dan berguna terutama untuk memudahkan navigasi.

Lalu apa itu breadcrumbs?. Breadcrumbs adalah navigasi pada blog yang membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah situs. Dengan kata lain, breadcrumbs ini menyempurnakan navigasi seperti homepage, label, tag, dan lain-lain. Memang menurut admin sendiri breadcrumbs ini tidak terlalu penting karena sudah ada kategori, tag, dan arsip yang membantu pengunjung. Namun namanya manusia pasti selalu ada yang pemahamannya kurang bagus jadi perlu bantuan ekstra.

Cara Memasang Breadcrumbs SEO Friendly Valid HTML5 di Blog

Pertama-tama Anda harus masuk terlebih dahulu ke Blogger -> Tema -> Edit HTML, Lalu copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin> atau </style>.

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

Jika sudah, Selanjutnya cari kode <b:includable id='main' var='top'>...</b:includable> didalam template Anda lalu pastekan kode dibawah ini tepat dibawah kode <b:includable id='main' var='top'>...</b:includable>.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Jika sudah, Klik Simpan template.

Mudah bukan untuk Memasang Breadcrumbs SEO Friendly Valid HTML5 di Blog?

Baca juga: Cara Agar Artikel Blog Cepat Terindeks Google Terbaru

Nah, Seperti itulah Cara Memasang Breadcrumbs SEO Friendly Valid HTML5. Jika kalian suka dengan artikel ini, kalian bisa memfollow fanpage kita di Facebook (Infinity Xsamz).

Referensi:

https://www.arlinadzgn.com/2016/04/cara-memasang-breadcrumbs-seo-friendly.html

https://dewailmu.id/apa-itu-breadcrumbs/

Penutup

Terima kasih telah membaca artikel Cara Memasang Breadcrumbs SEO Friendly Valid HTML5, Semoga bermanfaat untuk kalian semua.

Blogging SEO

Memasang Breadcrumbs SEO Friendly Valid HTML5

Summer Jumat, 25 Januari 2019

Cara Memasang Efek Preloading Keren di Blog - Untuk membuat tampilan blog terlihat lebih cakep, saya membuat efek preloading keren untuk blog saya dan akan saya share disini.

Baca juga: Cara Membuat Efek Turun Salju di Blog

Memasang Efek Preloading sederhana ini sangat mudah sekali, bahkan kalian hanya perlu mengcopy kode dibawah ini dan tinggal menempelkannya pada template blog kalian.

Cara Membuat Efek Preloading Keren di Blog

Saya akan memberikan cara memasang preloading google dan preloading sederhana seperti yang saya gunakan, berikut ini adalah cara memasang preloading keren di blog.

Memasang Efek Preloading Sederhana di Blog

Pertama-tama buka Blogger > Tema > Edit HTML, lalu copy kode preloading dibawah ini dan pastekan tepat diatas </body>.

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://4.bp.blogspot.com/-1yYrB6cSaSA/XEdMofK4dcI/AAAAAAAADk0/ypF0sOj4UYUEJKt6Wa-21MoZ4ePs-kXWgCLcBGAs/s1600/lg-text-entering-comment-loader.gif') no-repeat 50% 30%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Jika sudah, klik Simpan dan lihat hasilnya.

Untuk Demo Preloading Sederhana nya, Klik disini (Open in new tab).

Memasang Efek Preloading Google di Blog

Pertama-tama buka Blogger > Tema > Edit HTML, lalu copy kode preloading dibawah ini dan pastekan tepat diatas </body>.

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://4.bp.blogspot.com/-fxhOm3MBvpw/XEdIaeZ9tuI/AAAAAAAADkc/Ww_VjylWwSc0OdaJYsQxvGsYZfmmdlZTACLcBGAs/s1600/image1.gif') no-repeat 50% 30%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Jika sudah, klik Simpan dan lihat hasilnya.

Untuk Demo Preloading Google nya, Klik disini (Open in new tab).

Baca juga: Cara Memasang Auto Refresh di Blog

Nah, begitulah Cara Memasang Efek Preloading Keren di Blog. Jika kalian suka dengan artikel ini, kalian bisa memfollow fanpage kita di Instagram (@infinityxsamz).

Penutup

Terima kasih telah membaca artikel Cara Membuat Efek Preloading Keren di Blog, Semoga bermanfaat untuk kalian semua.

Blogging

Cara Membuat Efek Preloading Keren di Blog

Summer Rabu, 23 Januari 2019