Category: Blogspot

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
Review EasyHits4u: Meningkatkan Trafik Blog dan Menghasilkan Uang

EasyHits4u

Satu lagi situs yang tidak boleh dilewatkan bagi para pemburu dollar lewat internet, yaitu easyhits4u.com. Situs ini adalah sebuah situs traffic exchange yang terbesar dan terpercaya di dunia yang telah berdiri sejak tahun 2003.

Terpercaya karena telah terbukti membayar kepada para penggunanya. Walaupun pendapatannya hanya sedikit yaitu $0.3 per 1000 visits selama 3 – 4 jam sehari, dan akan dibayar setelah terakumulasi sebanyak minimal $3 ke akun paypal atau payza kita. Selain itu juga bisa meningkatkan trafic pengunjung blog/situs yang anda kelola.

Sungguh ini hanya uang yang sedikit tetapi cukup berarti untuk membiayai kegiatan di internet, karena penghasilan dari internet tidak hanya melalui EasyHits4U saja. Ini bisa di padukan dengan beberapa situs penghasil dollar lainnya Misalnya, melalui ojooo, goldenclix, croclix, forums digitalpoint, fiverr, designcrowd, dreamstime, dll

EasyHit4U adalah situs traffic exchange terbesar didunia dengan anggota sebanyak 1,3 juta orang dikelasnya. walaupun dibandingkan dengan wad ojooo (situs ptc dengan 20 juta orang anggota dan mempunyai fasilitas traffic exchange juga disana).

Ada 3 cara mendapatkan uang di EasyHits4U yaitu antara lain melalui:

1. Traffic exchange (surfing), yaitu dengan melihat situs/blog orang lain setiap hari selama 3 – 4 jam artinya sebanyak 100 – 200 situs dengan memiklih opsi perbandingan surfing sebanyak 1 : 1 (20 detik), maka akan didapatkan uang sebanyak $3 – $4 dalam 2 bulan.

2. akan mendapatkan komisi $0.1 apabila setiap refferal melakukan surfing sebanyak minimal 100 kali.

3. Mendapatkan komisi uang sebanyak 5 level kedalaman yaitu , untuk free member : 10% – 5% – 3% – 2% – 1%, sedangkan untuk premium member sebanyak 6 level kedalaman yaitu : 15% – 10% – 5% – 3% – 2% – 1%.

Sedangkan disamping sebagai alat untuk mendapatkan uang secara langsung, ada juga keuntungan lainnya andaikata kita aktif di EasyHits4U adalah:

1. kita akan mendapatkan traffic gratis kesitus atau blog yang kita miliki dengan menaruh link blog disana untuk dilakukan traffic xchange.

2. kita akan mendapatkan banyak teman yang bisa kita manfaatkan untuk mencari uang juga dengan mengirim message supaya bergabung dengan situs tertentu.

3. Kita bisa membuat tulisan artikel dalam bahasa inggris dimana kita dapat menaruh link website atau blog kita pada bio profile yang ada dibawah setiap artikel yang kita tulis.

4. Kita bisa memanfaatkan halaman profile dengan menaruh link website/blog kita yang aktif. sehingga setiap orang yang mengajak berteman keapada kita (request) akan melihat bio profile dimana juga ada link social media networking yang kita miliki disana, sehingga kemungkinan untuk bergabung dengan kita menjadi follower atau hanya sekedar mengujungi website/blog kita sangat besar.

5. Kita juga bisa membangun backlink ke situs atau blog kita dari halaman profile kita disana , harap diingat EasyHits4U adalah situs yang mempunyai page rank cukup tinggi yaitu PR6. dengan ranking di alexa cukup bagus 17K, sehingga akan mengingkatkan paga rank website atau blog kita.

6. Kita juga bisa membuat splash page (semacam halaman penjualan) secara gratis guna meningkatkan penjualan apapun disana.

7. sebaiknya kita memanfaatkan pula directory dari EasyHits4U atau relmaxtop directory untuk link website atau blog kita. untuk menaikkan page rank situs atau blog kita.

Bagaimana caranya mulai membuat uang di EasyHits4U secara mudah dan cepat?

1. Mari kita mulai melakukan pendaftaran di

2. Kemudian check konfirmasi pendaftaran di email kita , lakukan konfirmasi dengan klik link yang diberikan oleh EasyHits4U.

3. Login kedalam EasyHits4U, lihat dashboard yang ada.

Tangkapan Layar

4. Masukkan link website atau blog yang kita punya untuk segera melakukan surfing, sebagai syarat dalam melakukan traffic exchange.

5. Lengkapi semua info pribadi kita di profile kita, nama, link social media macam twitter, facebook, google plus, linkedin. lokasi, negara, foto pribadi, alamat paypal atau payza.

Tangkapan Layar

6. Segera mulai melakukan surfing selama 3 – 4 jam sehari.

Tangkapan Layar

7. lakukan promosi link dari EasyHits4U anda untuk mencari referral sebanyak mungkin.

8. Check pendapatan di akhir bulan, apabila sudah memenuhi batas minimal ($3) untuk di withdraw, segera lakukan penarikan ke payza kita.

9. Selesai.

Sebenarnya banyak situs traffic exchange yang besar dan bagus di internet yang bisa digunakan untuk sekedar berpromosi wesite atau blog kita atau EasyHits4U. Tetapi untuk mendapatkan uang disana secara langsung seperti easyhits4u, hampir tidak ada. Oleh sebab itu EasyHits4U adalah situs yang tidak boleh diabaikan dalam usaha untuk mendapatkan uang secara online di internet.

January 2, 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