Category: Blog

Demo Widget Pricing Plans
Basic

20% off

Rp 150.000

Documentation

Premium Template

1 License

Full Optimization

1 Month Full Support

Easy Customize

–

Order Sekarang

Personal

Best Value

Rp 220.000

Documentation

Premium Template

3 License

Full Optimization

3 Month Full Support

Easy Customize

–

Order Sekarang
January 27, 2022
Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman

ilustrasi | arlinacode.com

– Salah satu faktor yang menyumbang beban loading pada suatu blog adalah konten gambar, di sini laborblog.my.id akan memberikan tips tentang bagaimana Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman.

Menunda Pemuatan Gambar Sebelum Scroll Halaman di sini adalah saat memuat sebuah halaman gambar tidak akan dimuat sampai kita scroll halaman dan itu akan menambah kecepatan blog. Proses seperti ini pernah saya bagikan juga di sini Cara Meningkatkan Loading Blog dengan LazySizes.

Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman

Pertama, buka Blogger > Klik menu Tema > Klik Edit HTML > Kemudian cari dan tambahkan kode di bawah ini sebelum </body>

Kode 1

<script>

//<![CDATA[

// LazyLoad

function loadScript(d){var o=document.createElement(“script”);o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript(“https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js”)}window.addEventListener?window.addEventListener(“load”,downloadJSAtOnload,!1):window.attachEvent?window.attachEvent(“onload”,downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

Bagi sobat yang sudah terlanjur menambahkan kode lazysizes, cukup ganti kode tersebut dengan kode ini.

Kode 2

<script>

//<![CDATA[

// Lazysizes

var lazysizer=!1;window.addEventListener(“scroll”,function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement(“script”);e.type=”text/javascript”,e.async=!0,e.src=”https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js”;var a=document.getElementsByTagName(“script”)[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);

//]]>

</script>

Note: Pilih salah satu kode di atas

Penerapannya hampir sama seperti pada postingan tentang Lazysizes, sobat hanya perlu mencari semua img di dalam tema. Kode akan terlihat seperti ini:

<img…

Contohnya..

<img src=’//www.blogger.com/img/icon_delete13.gif’/>

Tambahkan class=’lazy’ untuk Kode 1 dan class=’lazyload’ untuk Kode 2 pada markup tersebut seperti ini:

<img class=’lazy’ data-src=’//www.blogger.com/img/icon_delete13.gif’ src=’data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’/>

ganti src menjadi data-src dan tambahkan src=’data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’ setelah data-src

Atau contoh ini

<img expr:alt=’data:post.title’ expr:src=’resizeImage(data:post.firstImageUrl, 280, "300:200")’ height=’186′ width=’280’/>

Menjadi seperti ini

<img class=’lazy’ expr:alt=’data:post.title’ expr:data-src=’resizeImage(data:post.firstImageUrl, 280, "300:200")’ height=’186′ src=’data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’ width=’280’/>

Lakukan cara di atas pada semua markup img pada tema. Bagaimana jika di dalam markup img tersebut sudah terdapat class? Maka sobat hanya perlu menambahkan lazy atau lazyload setelah class pertama, contohnya:

<img class=’blogger lazy’ data-src=’//www.blogger.com/img/icon_delete13.gif’ src=’data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’/>

Setelah selesai, simpan tema dan lihat hasilnya di blog sobat.

Selanjutnya untuk meningkatkan bagian Expires headers yang bisa sobat cek di GTmetrix sobat perlu mengganti s1600 dan s640 pada link gambar di dalam Editor postingan. Contohnya seperti ini:

<div class=”separator” style=”clear: both; text-align: center;”>

<a href=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmDAQvlPYsQpcTYELDp0uHKQCBlMHJsHpQjUW8VGwgJrhAJhpHQ7tLayfWsC9zegLhXCxFTarJbqQfnBrUxa067fcNGKnUW8KNMJxVlP3N0BGPOfftWGbic9eDlrUkpTV-AFnCM0GAC1zy/s1600/Cara+Memasang+Widget+Newsletter+di+Blogger.png” style=”margin-left: 1em; margin-right: 1em;”><img alt=”Cara Memasang Widget Newsletter di Blogger” class=”lazyload” style=”border: none;” data-original-height=”800″ data-original-width=”1200″ height=”426″ src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmDAQvlPYsQpcTYELDp0uHKQCBlMHJsHpQjUW8VGwgJrhAJhpHQ7tLayfWsC9zegLhXCxFTarJbqQfnBrUxa067fcNGKnUW8KNMJxVlP3N0BGPOfftWGbic9eDlrUkpTV-AFnCM0GAC1zy/s640/Cara+Memasang+Widget+Newsletter+di+Blogger.png” title=”Cara Memasang Widget Newsletter di Blogger” width=”640″

/></a></div>

Tambahkan -rw disetiap gambar postingan

<div class=”separator” style=”clear: both; text-align: center;”>

<a href=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmDAQvlPYsQpcTYELDp0uHKQCBlMHJsHpQjUW8VGwgJrhAJhpHQ7tLayfWsC9zegLhXCxFTarJbqQfnBrUxa067fcNGKnUW8KNMJxVlP3N0BGPOfftWGbic9eDlrUkpTV-AFnCM0GAC1zy/s1600-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png” style=”margin-left: 1em; margin-right: 1em;”><img alt=”Cara Memasang Widget Newsletter di Blogger” class=”lazyload” style=”border: none;” data-original-height=”800″ data-original-width=”1200″ height=”426″ src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmDAQvlPYsQpcTYELDp0uHKQCBlMHJsHpQjUW8VGwgJrhAJhpHQ7tLayfWsC9zegLhXCxFTarJbqQfnBrUxa067fcNGKnUW8KNMJxVlP3N0BGPOfftWGbic9eDlrUkpTV-AFnCM0GAC1zy/s640-rw/Cara+Memasang+Widget+Newsletter+di+Blogger.png” title=”Cara Memasang Widget Newsletter di Blogger” width=”640″ /></a>

</div>

Perlu diketahui, jika sobat sudah menambahkan -rw di setiap gambar postingan. Gambar tersebut tidak akan terbaca oleh widget pihak ke tiga seperti widget Recent Post, Random Post, dll. Kecuali sobat menyesuaikan kembali kode third party tersebut dengan format gambar yang baru.

Oke, demikian tutorial yang laborblog.my.id ulas dari arlinacode.com tentang Cara Menunda Pemuatan Gambar Sebelum Scroll Halaman. Semoga bermanfaat dan menambah wawasan.

January 24, 2022
Cara Membagi Halaman di Postingan dengan Nomor Navigasi

ilustrasi

– Mungkin sahabat pernah mengunjungi situs gosip atau situs baca komik yang di setiap isi postingannya dibagi menjadi beberapa halaman, biasanya pada postingan tersebut terdapat tombol Next yang ketika kita menekan tombol tersebut akan mengarah ke halaman selanjutnya.

Begitupun dengan tips yang akan aku berikan ini, cara kerjanya yaitu membagi beberapa paragraf dari isi postingan menjadi beberapa bab sesuai harapan sobat. Beberapa manfaat yang di sanggup kalau menerapkan tips ini antara lain:

Halaman akan terasa lebih rapi cocok untuk sahabat yang mempunyai artikel dengan isi yang panjang dan menghemat daerah semoga pengunjung tidak capek menggulir halaman

Cocok untuk situs gosip dan situs baca komik

Bisa dijadikan penanda untuk pengunjung di halaman mana akan melanjutkan membaca nantinya

Menambah jumlah Pageviews alasannya yaitu terdapat fungsi refresh halaman ketika menekan tombol navigasi ke halaman berikutnya.

Nah, bagi sahabat yang ingin menambahkan cara ini di blognya, silakan ikuti langkah-langkah berikut ini.

Membagi Halaman di Postingan dengan Nomor Navigasi

Seperti biasa, buka halaman Blogger > Klik sajian Tema dan klik tombol Edit HTML > Tambahkan instruksi CSS ini sebelum </head>

<b:if cond=’data:view.isSingleItem’>

<style>

/* Membagi Halaman di Postingan */

.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}

</style>

</b:if>

Tambahkan instruksi berikut sebelum </body>

<b:if cond=’data:view.isSingleItem’>

<script>

//<![CDATA[
function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split(“&”);for(t=0;t<e.length;t++)if((o=e[t].split(“=”))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n(“halaman”);$(“.post-content”).hide(),void 0===halaman?$(“.content_1”).show():$(“.content_”+halaman).show();var o=$(“.post-content”).length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(“.pagearl”).append($(‘<a href=”‘+t+”?halaman=”+i+’” class=”buttonar n’+i+’”> ‘+i+” </a>”))}else $(“.pagearl”).hide();void 0==halaman&&$(“.buttonar.n1”).toggleClass(“arlinapage”),halaman==halaman&&$(“.buttonar.n”+halaman).toggleClass(“arlinapage”)});
//]]>

</script>

</b:if>

Kemudian klik tombol Simpan tema.

Selanjutnya untuk instruksi pemanggilnya, silakan buka editor postingan dan tambahkan markup berikut pada tab HTML (Bukan Compose)

<div class=”post-content content_1″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_2″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_3″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_4″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_5″>

ISI ARTIKEL DI SINI

</div>

Note: Untuk ISI ARTIKEL DI SINI diganti dengan isi konten postingan dan untuk content_1 hingga content_5 mengambarkan nomor navigasi dari isi postingan yang ingin dibagi. Untuk menambahkan halaman yang ingin dibagi, cukup ganti angka dari content_5 menjadi content_6 dan seterusnya.

Contohnya menyerupai ini:

<div class=”post-content content_4″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_5″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_6″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_7″>

ISI ARTIKEL DI SINI

</div>

<div class=”post-content content_8″>

ISI ARTIKEL DI SINI

</div>

Kemudian tambahkan instruksi navigasi di bawah ini di final postingan.

<div class=”arlinapage”>

</div>

<div class=”pagearl”>

</div>

Namun kalau sahabat ingin memunculkan instruksi navigasi di setiap postingan secara otomatis, soba sanggup tambahkan instruksi di atas di bawah instruksi <data:post.body/> (Post body khusus halaman postingan). Contoh penerapannya menyerupai ini:

<data:post.body/>

<div class=’arlinapage’/>

<div class=’pagearl’/>

Selesai dan lihat akhirnya di blog sobat. Jika berhasil akan berfungsi seperti demo dibawah ini.

Dibawah ini hanya contoh tombolnya saja

Ganti instruksi CSS kalau ingin menambahkannya dengan tampilan minimalis

<style type=’text/css’>

/* Membagi Halaman di Postingan */

.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{position:relative;background:#fff;margin:0 auto 20px auto;text-align:center;padding:20px;font-size:14px}.pagearl .buttonar{background:#e74c3c;font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 4px 0 0;border-radius:3px;transition:all .2s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#c0392b;color:#fff}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:#333;color:#fff}

</style>

Atau ganti dengan instruksi CSS ini kalau ingin menambahkannya dengan tampilan animasi Gradient

<style>

/* Membagi Halaman di Postingan */

@keyframes Gradients{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{background:#517aef;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;margin:30px auto;text-align:center;padding:10px;border-radius:3px;overflow:hidden;box-shadow:0 10px 10px -5px rgba(0,0,0,0.15);animation:Gradients 15s ease infinite}.pagearl .buttonar{background:rgba(255,255,255,.2);font-weight:bold;display:inline-block;color:#fff;text-decoration:none;text-align:center;border-right:0;font-size:14px;padding:.4rem .8rem;border:0;margin:0 5px 0 0;border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,0.1);transition:all .6s}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:rgba(255,255,255,.45);color:#fff;box-shadow:0 1px 10px rgba(0,0,0,0.1)}.buttonar.arlinapage,.buttonar.arlinapage:hover{background:rgba(255,255,255,.95);color:#0984e3}

</style>

Oke, sekian dari wacana cara Membagi Halaman di Postingan dengan Nomor Navigasi. Semoga bermanfaat bagi sahabat dan wassalam.[arlina]

January 24, 2022
How to Refresh Ad Slots Automatically?

illustration | pragmaticwebmedia.com

– There are multiple ways to refresh ad slots using GPT library function. But none of the documents or examples provided for auto refreshing ad slots based on Time event.

How to do?

Declare variable name globally before ‘cmd.push’ function and assign to the ad slot declaration. Example see below

var slot1;

Assign variable to the ad slot.

Add that variable before the ad slot in the header tag.

slot1 = googletag.defineSlot(‘/200894144/Responsive’, [[300, 250], [300, 600]], ‘div-gpt-ad-1620832289302-0’).addService(googletag.pubads());

Auto Refresh Trigger

The final step is to trigger auto refresh using ‘SetInterval’ function on the Body code. This will trigger the refresh code on specified interval.

setInterval(function(){googletag.pubads().refresh([slot1]);}, 3000);

The variable which declared on the first step to be added within the refresh function on the above code. “3000” represent three second time interval . Time cab be adjusted based on your requirement. Best practices is minimum 30 seconds.

Complete Code Configuration

Here is the full code representation for the above discussions. Added key values for the test purposed. Ignore that in your code and replace as per your requirements.

<script async src=”https://securepubads.g.doubleclick.net/tag/js/gpt.js”></script>

<script>

window.googletag = window.googletag || {cmd: []};

var slot1;

googletag.cmd.push(function() {

slot1 = googletag.defineSlot(‘/200894144/Responsive’, [[300, 250], [300, 600]], ‘div-gpt-ad-1620832289302-0’).setTargeting(“Test_Mode”, “ON”).addService(googletag.pubads());

googletag.enableServices();

});

</script>

<div id=’div-gpt-ad-1620832289302-0′>

<script>

googletag.cmd.push(function() { googletag.display(‘div-gpt-ad-1620832289302-0’);

setInterval(function(){googletag.pubads().refresh([slot1]);}, 3000);

});

</script>

</div>

Hope this article helps!!!. Please share your comments. Thank You!!!![source]

*The information contained in this post is for general information purposes only. The information is provided by How to auto refresh ad slots? and while we endeavor to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the post for any purpose.

January 23, 2022
Splitting a Long Blog Post in Blogger Into Multiple Pages

illustration

– Splitting posts in wordpress is very simple and there are many plugins to achieve this, but how it’s done in Blogger. In Blogger there is no build in feature to split posts or pages and there are no widgets to paginate, but by using a simple jQuery function you can paginate your blog posts.

So why to split a blog post? We have already discussed all the benefits of adding pagination to blog posts in this article. Here we will show you how to split long blog post in Blogger into multiple pages.

Don’t panic, the code below is simple and easy to understand. Assume that you are about to publish a long blog post and would like to split that into 4 pages. Here is how you do that in just 3 simple steps.

How to split long blog post in Blogger into multiple pages

Step 1: Usually you will edit your post in compose mode, but this time you are going to do this in HTML mode. Switch to HTML editor, add the span element that you see below and add your blog content in each element respectively.

From the below lines you can see that only 1st page content is visible and the remaining 2nd, 3rd and 4th pages are hidden. So the remaining pages will be visible only if the visitor navigates.

<span class=”content1″>

Add your first page content here

</span>

<span class=”content2″ style=”display:none”>

Add your second page content here

</span>

<span class=”content3″ style=”display:none”>

Add your third page content here

</span>

<span class=”content4″ style=”display:none”>

Add your final page content here

</span>

Step 2: Hope you have added your content. Now you have to create page links so when a user clicks on that page he or she should get that particular content. Just below to the above code add this one which adds Pages: 1 2 3 4 links below your post content.

<p><b>Pages: <span style=”color: #3d85c6;”>

<a href=”#” class=”page1″>1</a>

<a href=”#” class=”page2″>2</a>

<a href=”#” class=”page3″>3</a>

<a href=”#” class=”page4″>4</a></span></b></p>

Step 3: Next to make this links to work add the following script just below the pagination links.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

<script style=”text/javascript”>

jQuery(document).ready(function(){

jQuery(‘.page1’).click(function(){

jQuery(‘.content1’).show();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page2’).click(function(){

jQuery(‘.content1’).hide();

jQuery(‘.content2’).show();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page3’).click(function(){

jQuery(‘.content1’).hide();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).show();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page4’).click(function(){

jQuery(‘.content1’).hide();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).show();

return false;

});

});

</script>

That’s it! When everything is done publish your article and view it where you will see page links below the content. Just click on the links to see how it works. Hope that helped you to split long blog posts in Blogger into multiple pages. Got any questions? Feel free to ask below in comments section.[source]

January 18, 2022
Cara Membuat Postingan Blog Menjadi Beberapa Halaman

Ilustrasi

Beberapa blogger bertanya kepada laborblog.my.id yaitu tentang membagi posting blog yang panjang menjadi beberapa halaman di blogger. Memisahkan posting di wordpress sangat sederhana dan ada banyak plugin untuk mencapai ini, tetapi bagaimana hal itu dilakukan di Blogger.

Di Blogger tidak ada fitur bawaan untuk membagi posting atau halaman dan tidak ada widget untuk membuat paginasi, tetapi dengan menggunakan fungsi jQuery sederhana Anda dapat membuat paginasi posting blog Anda.

Jadi mengapa membagi posting blog?

laborblog.my.id telah membahas semua manfaat menambahkan pagination ke posting blog di artikel ini. Di sini laborblog.my.id akan menunjukkan cara membagi posting blog panjang di Blogger menjadi beberapa halaman.

Jangan panik, kode di bawah ini sederhana dan mudah dipahami. Asumsikan bahwa Anda akan menerbitkan posting blog yang panjang dan ingin membaginya menjadi beberapa halaman. Inilah cara Anda melakukannya hanya dalam 3 langkah sederhana.

Cara membagi posting blog panjang di Blogger menjadi beberapa halaman

Langkah 1:

Biasanya Anda akan mengedit posting Anda dalam mode penulisan, tetapi kali ini Anda akan melakukannya dalam mode HTML. Beralih ke editor HTML, tambahkan elemen span yang Anda lihat di bawah dan tambahkan konten blog Anda di setiap elemen masing-masing.

Dari baris di bawah ini Anda dapat melihat bahwa hanya konten halaman pertama yang terlihat dan halaman ke-2, ke-3, dan ke-4 yang tersisa disembunyikan. Jadi halaman yang tersisa hanya akan terlihat jika pengunjung menavigasi.

<span class=”content1″>
Add your first page content here
</span>

<span class=”content2″ style=”display:none”>
Add your second page content here
</span>

<span class=”content3″ style=”display:none”>
Add your third page content here
</span>

<span class=”content4″ style=”display:none”>
Add your final page content here
</span>

Langkah 2:

Selanjutnya sekarang Anda harus membuat tautan halaman sehingga ketika pengguna mengklik halaman itu, dia akan mendapatkan konten tertentu. Tepat di bawah kode di atas tambahkan kode berikut yang menambahkan Halaman: 1 2 3 4 tautan di bawah konten posting Anda.

<p><b>Pages: <span style=”color: #3d85c6;”>

<a href=”#” class=”page1″>1</a>

<a href=”#” class=”page2″>2</a>

<a href=”#” class=”page3″>3</a>

<a href=”#” class=”page4″>4</a></span></b></p>

Langkah 3:

Selanjutnya untuk membuat tautan ini berfungsi, tambahkan skrip berikut tepat di bawah tautan pagination.

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script style=”text/javascript”>

jQuery(document).ready(function(){

jQuery(‘.page1’).click(function(){

jQuery(‘.content1’).show();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page2’).click(function(){

jQuery(‘.content1’).hide();

jQuery(‘.content2’).show();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page3’).click(function(){

jQuery(‘.content1’).hide();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).show();

jQuery(‘.content4’).hide();

return false;

});

jQuery(‘.page4’).click(function(){

jQuery(‘.content1’).hide();

jQuery(‘.content2’).hide();

jQuery(‘.content3’).hide();

jQuery(‘.content4’).show();

return false;

});

});

</script>

Itu dia! Setelah semuanya selesai, publikasikan artikel Anda dan lihat di mana Anda akan melihat tautan halaman di bawah konten. Cukup klik tautan untuk melihat cara kerjanya.

Semoga tutorial ini membantu Anda untuk membagi posting blog panjang di Blogger menjadi beberapa halaman. Ada pertanyaan? Jangan ragu untuk bertanya di bawah di bagian komentar.

January 18, 2022
Cara Mudah Mengganti Cursor di Blog/Web

Ilustrasi | Tangkapan Layar

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi Sobat yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Sobat bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog Sobat, tampilan kursornya akan berubah sesuai dengan icon yang Sobat gunakan.

Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:

1. Login ke Blogger. Masuk ke menu Design ==> Edit HTML

2. Cari kode </head>

3. Letakkan kode css berikut diatas </head>

<style type=”text/css”> HTML,BODY{cursor: url(“http://cursors1.totallyfreecursors.com/thumbnails/rainbow-ani3.gif“), auto;} </style>

Keterangan:

Teks yang berwarna biru adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin Sobat gunakan.

4. Setelah itu, simpan template Sobat. Selesai Jika Sobat tidak memiliki icon kursor, coba kunjungi http://www.totallyfreecursors.com Situs tersebut menyediakan ratusan hingga ribuan icon kursor menarik yang bisa Sobat pilih sesuai selera.[abdulhamidinfo]

January 14, 2022
Cara Pasang Kode Meta Tag Facebook Open Graph Di Blog

Ilustrasi

Saat Anda membagikan URL blog di Facebook, URL tersebut akan diubah menjadi tampilan ringkas atau ringkasan blog, yang berisi komponen blog yang dimaksud berupa judul, thumbnail (gambar), deskripsi, URL blog, dan nama penulis dengan konten blog jika dibagikan di Facebook, Anda perlu menginstal tag meta Facebook Open Graph.

Apa itu Facebook Open Graph? Bagaimana cara memasang Open Graph Facebook yang baik dan benar agar terlihat bagus saat dibagikan di Facebook? Perhatikan baik-baik. Sekali lagi, laborblog.my.id akan membagikan sedikit informasi terkait Facebook.

Apa Itu Kode Meta Tag Facebook Open Graph?

Facebook Open Graph adalah serangkaian kode khusus dalam bentuk tag Meta HTML yang berfungsi untuk memuat komponen halaman ketika URL halaman dibagikan di Facebook untuk menjadi konten. Komponen yang ditampilkan adalah Judul, Thumbnail (Gambar), Deskripsi, URL Blog, dan Nama Penulis. Kode Open Graph Facebook ini dapat diinstal pada semua platform blogging seperti Blogspot, WordPress, dll.

Mengapa Anda harus menginstal Meta Tag Facebook Open Graph?

Anda perlu menginstal Facebook Open Graph untuk menarik pengunjung. Ini akan membuat ringkasan blog Anda terlihat lebih bagus saat dibagikan di dinding Facebook (berbagi media sosial). Tanpa kode ini, Facebook tidak akan dapat menampilkan sebagian besar blog Anda dengan benar. Mereka tidak akan tertarik jika menemukan konten seperti ini, berikut perbandingan blog yang memasang dan tidak memasang kode meta tag Facebook Open Graph.

Daftar Kode Meta Tag Facebook Open Graph

Berdasarkan Dokumen Developers Facebook di Webmaster, Anda perlu menginstal 5 kode utama. laborblog.my.id akan menjelaskan kepada Anda satu per satu, berdasarkan halaman hasil terjemahan dan kesimpulan.

og:url

URL canonical dari blog kamu.

og:title

Judul dari artikel.

og:description

Ringkasan dari isi artikel, biasanya terdiri dari 2 sampai 4 kalimat. Ditampilkan dibawah judul dari post Facebook.

og:image

Gambar atau thumbnail. Biasanya diambil dari gambar pertama yang ada di dalam artikel.

fb:admins

Nama author. Berupa sebuah URL yang dapat di-klik untuk menuju ke profil Facebook dari author bersangkutan.
Ada juga beberapa kode meta tag opsional yang dapat dipasang. Kode lengkapnya ada di bawah ini, termasuk cara pasangnya.

January 2, 2022
9 Keuntungan menggunakan Linkcollider SEO Tool

Tangkapan Layar

Nah, kali ini laborblog.my.id pada artikel kali ini akan mencoba membahas dan memandu Anda cara menggunakan linkcollider untuk meningkatkan lalu lintas blog dengan cepat (meningkatkan pengunjung blog). Sebelum mendaftar, tidak ada salahnya untuk mengetahui keuntungan mendaftar ke linkcollider:

Keuntungan Menggunakan Linkcollider

1. Lalu lintas web

Peningkatan lalu lintas web Anda menunjukkan peluang keuntungan yang lebih besar untuk bisnis Anda, membantu Anda menghasilkan lebih banyak.

2. Tidak ada server proxy

Tidak ada server proxy atau bot, situs web Anda menerima lalu lintas web nyata dan pengunjung dengan alamat IP yang unik dan benar dari komunitas Linkcolider global.

3. Backlink

Tidak perlu membayar satu sen untuk mendapatkan backlink. Dengan menggunakan generator backlink dan berdasarkan deskripsi situs Anda, linkcolider memastikan bahwa backlink Anda tetap selamanya dan diindeks oleh mesin pencari.

4. Twitter, Youtube, Facebook, Tumblr, Stumbleupon dan Pinterest

Sebagai bagian dari layanan SEO linkcollider, ini juga mencakup aktivitas berbagi media sosial seperti berbagi, menyukai, blogging, dan men-tweet

5. Artikel Instan

Anda tidak perlu melakukannya memiliki blog untuk menulis artikel di situs web Anda.

6. Direktori Online

Hal ini terutama digunakan untuk mengindeks situs yang paling penting di dunia. Linkcollider mengkompilasi direktori online paling populer dan memungkinkan Anda untuk mengirimkan situs web Anda dalam satu klik dengan alat pengiriman direktori Linkcollider.

7. Drop My Link

Lupakan memikirkan di mana harus memposting tautan untuk mendapatkan lebih banyak backlink. Drop My Link membantu Anda menemukan situs web untuk memposting tautan Anda di bagian komentar untuk mempromosikan situs web Anda dan mendapatkan tautan balik gratis.

8. Membuat Artikel Secara Otomatis

Article Builder membantu Anda membuat artikel baru dan unik dengan menukar kata dengan sinonim yang setara secara gratis.

9. Pengoptimalan Situs Web Berdasarkan pengembang web Google, blog, dan panduan konten HTML yang tak terhitung jumlahnya.

Linkcollider menerapkan 10 aturan HTML untuk meningkatkan visibilitas di mesin pencari. Dan masih banyak lagi…

Manfaat di atas sebagian diterjemahkan dari situs resminya. Berikut cara daftar di linkcolider:

1. Buka situsnya https://www.linkcollider.com

2. Cukup isi kolom pendaftaran.

3. Tunggu hingga linkcolider mengirimkan email link verifikasi untuk memverifikasi akun Anda, lalu klik link verifikasi yang dikirimkan.

December 25, 2021
Cara Membuat Blog Pribadi yang Menarik, Gratis dan Menguntungkan

Ilustrasi

Di era digital ini semua orang bisa bebas berkarya bahkan ikut menyambut kemajuan teknologi, semakin banyak kebebasan berekspresi yang bisa diekspresikan lewat blog atau wordpress juga bisa memberikan keuntungan yang lumayan menggiurkan jika dikelola dengan baik.

Buat kamu yang lagi berimajinasi dan ingin menuangkannya dalam bentuk tulisan, membuat blog adalah solusi untuk kamu, selain bisa mengeksplorasi imajinasi dengan menulis, kamu juga bisa mengasah kemampuan menulismu.

Salah satu platform yang bisa digunakan untuk blog adalah blogspot, meskipun Blogspot sendiri jika dijalankan dengan baik akan memberikan keuntungan. Tidak masalah siapa yang sudah berpengalaman atau pemula, blogspot bisa menghasilkan keuntungan salah satunya membuat dompet anda jadi berisi. Apalagi cara memulai blogspot cukup sederhana, sehingga memungkinkan bagi siapa saja yang ingin mencoba memiliki blog pribadi.

Berikut cara membuat blog pribadi yang menarik, gratis, dan menguntungkan, yang dirangkum dari berbagai sumber:

Cara Mudah Membuat Blog Sederhana

Cara pertama untuk membuat blog pribadi yang menarik, gratis, dan produktif adalah dengan menggunakan blogger.com atau blogspot.com. Cara membuat blogspot ini adalah yang paling mudah dilakukan. Hal ini dikarenakan blogspot sendiri merupakan platform blogging yang ramah bagi pemula, selain itu blogspot juga merupakan platform yang dibuat oleh google sehingga banyak sekali fitur yang ditawarkan.

Ada dua cara untuk membuat blog pribadi: yang pertama adalah membuat blog menggunakan smartphone dan yang kedua menggunakan komputer atau PC.

Cara Membuat Blog Menggunakan Smartphone

Cara pertama untuk membuat blog pribadi yang menarik, gratis, dan produktif adalah dengan memulai blogspot melalui smartphone. Berikut kami rangkum cara membuat blogspot melalui smartphone:

1. Unduh aplikasinya. Untuk membuat blog melalui mobile, Anda harus terlebih dahulu mendownload aplikasi blogspot. Aplikasi yang tersedia untuk blogspot adalah Blogger.com. Anda dapat mengunduhnya melalui Google Play Store atau melalui App Store.

2. Masukkan alamat email Anda Setelah aplikasi diunduh dan diinstal, langkah selanjutnya adalah memasukkan alamat email Anda untuk membuat akun.

3. Daftar dengan alamat email Langkah selanjutnya adalah mendaftar dengan alamat email dan kata sandi Anda.

4. Edit Profil Setelah Anda berhasil login ke dalam aplikasi, Anda dapat mulai mengisi profil yang ada sesuka Anda dengan panduan pada halaman edit profil, dan kemudian Anda dapat memilih untuk membuat blog baru.

5. Tulis Alamat Blog dan Judul Blog Setelah melihat halaman Buat Blog Baru, Anda dapat menuliskan alamat blog. Saat mengisi alamat blog, Anda diminta untuk menuliskannya dengan nama yang belum pernah digunakan oleh pengguna lain.

6. Klik pada template desain. Jika Anda telah menuliskan alamat dan judul blog Anda, Anda dapat memilih template desain yang cocok untuk Anda.

Cara Membuat Blog Menggunakan PC atau Laptop

Langkah selanjutnya adalah membuat blog hanya dari apps di pc atau laptop anda, anda perlu menyiapkan alamat email google. Langkah-langkah yang dapat dilakukan antara lain:

1. Buka halaman browser. Langkah pertama adalah membuka halaman browser di PC atau laptop Anda. Kemudian ketik alamat https://www.blogger.com pada kolom alamat website.

2. Klik Buat blog Anda/create your blog. Setelah halaman blogger.com ditampilkan, Anda dapat mengklik tombol Buat blog Anda untuk mulai membuat blog baru.

3. Buat akun dengan email. Anda kemudian dapat memasukkan alamat email dan kata sandi Anda untuk membuat akun baru di blogspot Anda. Bahkan jika Anda membuat akun baru, Anda tidak perlu mendaftar. Karena blogspot akan langsung tertaut dengan data akun gmail anda.

4. Lengkapi profil Anda. Setelah masuk ke akun blogger.com Anda, Anda akan diminta untuk melengkapi profil di blog Anda. Bahkan jika Anda diminta untuk melengkapi profil, Anda dapat menyelesaikannya nanti.

5. Pengaturan dasar di dasbor. Pada halaman profil, Anda bisa langsung menuju dashboard untuk menentukan tampilan awal blog yang akan Anda buat. Di dasbor ini, Anda dapat menulis judul dan alamat blog, serta tema yang ada. Kemudian klik Buat blog/create blog. Jika Anda ditawari untuk membeli domain, Anda dapat menolaknya dengan mengklik Tidak, No Thanks di layar.

6. Setting posting blog. Pada langkah selanjutnya, Anda akan masuk ke dashboard untuk mengatur blog dan menulis konten blog Anda. Kemudian Anda dapat mengklik Publish setelah selesai menulis konten blog.

7. Lihat Hasil Akhir Postingan, jika Anda ingin melihat seperti apa tampilan postingan blog Anda, Anda bisa mengklik kunjungi blog atau ketik alamat blog yang Anda buat.

Cara Menghasilkan Uang dari Blogging

Cara membuat blog pribadi yang menarik tentunya tidak lepas dari niat menggunakan blog untuk menghasilkan uang.Bagi anda yang berkeinginan bisa menghasilkan uang dari blog, berikut beberapa cara yang bisa dilakukan.

1. Jadi Publisher Iklan

Publisher iklan adalah orang yang menempatkan iklan di situs web seseorang atau web yang anda kelola. Salah satu layanan yang biasa digunakan blogger adalah Google Adsense.

Google Adsense sendiri merupakan jaringan periklanan yang disediakan oleh Google. Untuk pemilik situs web, mereka dapat menempatkan iklan Google di situs web mereka. Setiap klik dan view yang didapatkan akan terakumulasi jadi uang yang kemudian dapat dicairkan jika sudah memenuhi target minimal pencairan.

2. Memberi Ulasan Produk Tertentu

Cara memulai blog pribadi yang bisa menghasilkan uang selanjutnya adalah dengan meng-endorse atau mereview produk tertentu. Pemilik merek akan memposting produk atau menawarkan layanan yang dapat dinikmati blogger secara gratis. Bahkan cukup banyak blogger yang dibayar untuk mereview produk tersebut di blog pribadi mereka.

December 21, 2021