Category: Website

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
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
Cara dan Fungsi Penggunaan Tag Textarea Form HTML

Ilustrasi

Objek form textarea digunakan untuk membuat teks input yang dapat berisi lebih dari satu baris input. Tag textarea mirip dengan tag teks jenis input, tetapi memiliki keuntungan berisi banyak baris. Biasanya, tag textarea digunakan untuk entri yang panjang, seperti komentar, deskripsi, atau catatan.

Untuk menggunakan Textarea, kita hanya mengambil label Textarea sebagai berikut:

<textarea></textarea>

Hasil

Teks dapat disisipkan di antara tag pembuka dan penutup yang akan ditampilkan sebagai bidang awal text area sebagai berikut:

<textarea>Contoh</textarea>

Hasil

Contoh

Meskipun tidak diperlukan, tetapi jika text area digunakan dalam formulir, atribut name bertindak sebagai identitas tag textarea. Identitas ini diperlukan selama pemrosesan sisi server (misalnya menggunakan PHP). Atribut name ini akan menjadi variabel untuk menyimpan nilai yang dipilih oleh pengguna. Atribut name ditempatkan di dalam tag textarea:

<textarea name=”contoh”>contoh</textarea>

Hasil

contoh

Untuk membatasi tampilan lebar kolom (cols) dan tinggi baris (rows) dari zona teks. Nilai yang dimasukkan adalah jumlah karakter yang menjadi lebar kotak teks. Misalkan kita mengatur atribut cols = “40”, maka kotak teks akan memiliki lebar karakter 40. Namun, lebar ini tidak akan tepat 40 karakter, karena akan tergantung pada font serta jenis karakter yang diinput.

Contoh penggunaan atribut cols dan rows:

<textarea cols=”40″>Contoh</textarea>

<textarea cols=”40″ rows=”10″>Contoh</textarea>

Hasil

Contoh

Contoh

Atribut disabled dan readonly digunakan untuk membuat kotak teks tidak dapat digunakan. Penggunaan atribut ini biasanya dipadukan dengan javascript agar bekerja secara maksimal. Misalnya, kotak teks hanya dapat diisi jika pengguna telah mengisi bidang lain. Kedua atribut ini hanya memiliki 1 nilai yaitu dirinya sendiri yang ditulis dengan disabled = “disabled” dan readonly = “readonly”. Berikut adalah contoh penulisannya:

<textarea readonly=”readonly”>Contoh</textarea>

<textarea disabled=”disabled”>Contoh</textarea>

Hasil

Contoh

Contoh

Meskipun dua kotak teks yang memiliki atribut ini tidak dapat digunakan, keduanya akan terlihat berbeda. Atribut yang dinonaktifkan akan membuat kotak teks menjadi abu-abu, sedangkan atribut read-only akan terlihat seperti kotak teks biasa. Oleh karena itu, atribut nonaktif biasanya sering digunakan karena akan memberikan kesan kepada pengguna bahwa kotak teks tidak dapat digunakan.

Selain atribut name, value, column, rows, disabled dan read-only, kita juga dapat menggunakan atribut umum seperti id dan class dalam tag textarea. Id dan tag class akan diperlukan untuk pemrograman HTML menggunakan JavaScript dan CSS. Terkadang kotak teks diperlukan untuk memasukkan formulir yang membutuhkan kalimat panjang seperti komentar.

December 19, 2021