Blog bungfrangki

Mengatasi Infinite Scroll Blogger yang Error di Mobile

noreply@blogger.com (Bungfrangki) — Fri, 30 Aug 2024 05:31:00 +0000

Masalah infinite scroll yang tidak bekerja (error) di tampilan mobile sebetulnya sudah cukup lama saya menyadarinya. Tetapi baru saat ini saya coba mencarikan solusi untuk mengatasi hal tersebut. Fitur infinite scroll menjadi tidak bekerja sebagaimana mestinya saat website dibuka dengan URL mobile. URL mobile di Blogger biasanya ditandai dengan akhiran ?m=1.

Sebagai informasi, widget infinite scroll yang terpasang di blog ini adalah onclick event, yang akan memuat halaman terlama dengan mengklik tombol Load More.

Adapun pesan error yang muncul (di console) saat mengklik tombol loadmore, kurang lebih sebagai berikut:

Mixed Content: The page at '/?m=1' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.bungfrangki.com/search?updated-max=2023-02-17T20:34:00%2B07:00&max-results=8&m=1'. This request has been blocked; the content must be served over HTTPS.

Dan solusinya dapat memilih salah satu dari 2 cara berikut ini.

Cara Mengatasi Infinite Scroll Blogger yang Error di Perangkat (URL) Mobile

Cara 1

Solusi pertama adalah dengan menambahkan meta tag khusus di blog. Silahkan copy dan paste kode meta tag berikut ini di atas </head> template Blogspot Anda.

<meta content="upgrade-insecure-requests" http-equiv="Content-Security-Policy" />

Cara 2

Atau, solusi lainnya adalah silahkan menambahkan JavaScript berikut ini. Letakkan di atas </body> pada template Blogspot masing-masing.

<script>
//<![CDATA[
window.addEventListener("load", (event) => {
if (window.location.protocol.indexOf('https') == 0){
  var lm = document.createElement('meta');
  lm.setAttribute('http-equiv', 'Content-Security-Policy');
  lm.setAttribute('content', 'upgrade-insecure-requests');
document.getElementsByTagName('head')[0].appendChild(lm);
} 
});
//]]>
</script>

Perhatian:
Cukup menggunakan salah satu dari dua cara di atas. Agar tidak mubazir. Mengingat dua cara di atas memiliki fungsi dan output yang sama.

Update 31 Agustus 2024:

Cara 3 (mempertahankan XMLHttpRequest)

Alih-alih mengganti metode untuk retrive data dengan fetch, Anda bisa coba pertahankan tetap menggunakan XMLHttpRequest, dengan tambahan function force URL to HTTPS.

Ganti JavaScript Blogger Infinite Scroll dengan kode di bawah ini.

<script>
//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}function o(t){return void 0!==t}function a(t){return"function"==typeof t}function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}function d(t,e){o(e)?delete g[t][e]:g[t]=[]}function l(t,e){if(o(g[t]))for(var n in g[t])g[t][n](e)}function f(){return L.inner����vlog�ٷ����=p.text.loading,T=!0,y?(M.classList.add(p.state.loading),l("loading",[p]),void u(y,function(t,n){M.className=x+" "+p.state.load,h=e.createElement("div"),h.inner����vlog�ٷ����=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].inner����vlog�ٷ����:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacent����vlog�ٷ����("afterend",'<span class="fi" id="#fi:'+j+'"></span>'),h=e.createElement("div");for(var f=0,u=a.length;u>f;++f)h.appendChild(a[f]);d.insertAdjacent����vlog�ٷ����("afterend",h.inner����vlog�ٷ����),c(),y=i.length?i[0].href:!1,T=!1,j++,l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error),T=!1,c(1),l("error",[p,t,e])})):(M.classList.add(p.state.loaded),L.inner����vlog�ٷ����=p.text.loaded,l("loaded",[p]))}function c(t){if(L.inner����vlog�ٷ����="",v){h.inner����vlog�ٷ����=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(v=!1),f(),!1},L.appendChild(e)}}var u="infinite-scroll-state-",p={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:u+"load",loading:u+"loading",loaded:u+"loaded",error:u+"error"}},g={load:[],loading:[],loaded:[],error:[]};p=i(p,n||{}),p.on=s,p.off=d;var h=null,u=function(e,n,r){if(t.XMLHttpRequest){function secureUrl(getUrl) {try {let parsedUrl = new URL(getUrl);if (parsedUrl.protocol === 'http:') {parsedUrl.protocol = 'https:';}return parsedUrl.href;} catch (error) {console.error('Not expected URL:', getUrl, error);return getUrl; }}const url = secureUrl(e);var o=new XMLHttpRequest;o.onreadystatechange=function(){if(4===o.readyState){if(200!==o.status)return void(r&&a(r)&&r(o.responseText,o));n&&a(n)&&n(o.responseText,o);history.pushState('','',url)}},o.open("GET",url),o.send()}},v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href,H.insertAdjacent����vlog�ٷ����("afterbegin",'<!--<span class="fi" id="#fi:0"></span>-->'),h=e.createElement("div"),c();var A=function(){E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=m.scrollTop||M.scrollTop,T||E>w+b||f()};A(),0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,500))},!1)}return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
    type: 0,
    target: {
        posts: '.blog-posts',
        post: '.post-outer-container',
        anchors: '.blog-pager',
        anchor: '.load-more-btn'
    },
    text: {
        load: '<button class=\"load-more-btn\">Load More</button>',
        loading: '<span class=\"loading-btn\">Memuat <span>&#9696;</span></span>',
        loaded: '<span class=\"all-posts-showing\"></span>',
        error: 'null, refresh this page'
    }
});
//]]>
</script>

Tambahan informasi, JavaScript di atas juga sudah disertakan history.pushState untuk merubah URL di bilah alamat peramban (address bar).

Cara 4 (pakai Fetch)

Biar lebih modern, Anda dapat menggunakan Blogger Infinite Scroll yang untuk retrive data pakai metode fetch.

Silahkan mengganti JavaScript Infinite Scroll sebelumnya dengan JS di bawah ini:

<script>
//<![CDATA[
!function(t,e){t.InfiniteScroll=function(n){function r(t,n){return n=n||e,n.querySelectorAll(t)}
function o(t){return void 0!==t}
function a(t){return"function"==typeof t}
function i(t,e){t=t||{};for(var n in e)t[n]="object"==typeof e[n]?i(t[n],e[n]):e[n];return t}
function s(t,e,n){return o(t)?o(e)?void(o(n)?g[t][n]=e:g[t].push(e)):g[t]:g}
function d(t,e){o(e)?delete g[t][e]:g[t]=[]}
function l(t,e){if(o(g[t])){for(var n in g[t]){g[t][n](e)}}}
function f(){L.inner����vlog�ٷ����=p.text.loading;T=!0;if(y){M.classList.add(p.state.loading);l("loading",[p]);u(y,function(t,n){M.className=x+" "+p.state.load;h=e.createElement("div");h.inner����vlog�ٷ����=t;var o=r("title",h),a=r(p.target.post,h),i=r(p.target.anchors+" "+p.target.anchor,h),s=r(p.target.post,H);if(o=o&&o[0]?o[0].inner����vlog�ٷ����:"",a.length&&s.length){var d=s[s.length-1];e.title=o;d.insertAdjacent����vlog�ٷ����("afterend",'<span class="fi" id="#fi:'+j+'"></span>');h=e.createElement("div");for(var f=0,u=a.length;u>f;++f){h.appendChild(a[f])}
d.insertAdjacent����vlog�ٷ����("afterend",h.inner����vlog�ٷ����);c();y=i.length?i[0].href:!1;T=!1;j++;l("load",[p,t,n])}},function(t,e){M.classList.add(p.state.error);T=!1;c(1);l("error",[p,t,e])})}else{M.classList.add(p.state.loaded);L.inner����vlog�ٷ����=p.text.loaded;l("loaded",[p])}}
function c(t){L.inner����vlog�ٷ����="";if(v){h.inner����vlog�ٷ����=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){if(2===p.type){v=!1}
f();return!1};L.appendChild(e)}}
var defaultSettings={target:{posts:".posts",post:".post",anchors:".anchors",anchor:".anchor"},text:{load:"%s",loading:"%s",loaded:"%s",error:"%s"},state:{load:"infinite-scroll-state-load",loading:"infinite-scroll-state-loading",loaded:"infinite-scroll-state-loaded",error:"infinite-scroll-state-error"},type:0};var g={load:[],loading:[],loaded:[],error:[]};var p=i(defaultSettings,n||{});p.on=s;p.off=d;var h=null;var u=function(url,onSuccess,onError){
function secureUrl(getUrl) {
    try {
        let parsedUrl = new URL(getUrl);

        if (parsedUrl.protocol === 'http:') {
            parsedUrl.protocol = 'https:';
        }
        return parsedUrl.href;
    } catch (error) {
        console.error('Invalid URL:', getUrl, error);
        return getUrl;
    }
}
let nextUrl = secureUrl(url);
fetch(nextUrl).then(response=>{if(!response.ok)throw response;return response.text()}).then(text=>{onSuccess&&a(onSuccess)&&onSuccess(text)}).catch(err=>{onError&&a(onError)&&onError(err)})};var v=1!==p.type,T=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],y=r(p.target.anchor,L),m=e.body,M=e.documentElement,x=M.className||"",E=H.offsetTop+H.offsetHeight,b=t.innerHeight,w=0,S=null,j=1;if(y.length){y=y[0].href;H.insertAdjacent����vlog�ٷ����("afterbegin",'<span class="fi" id="#fi:0"></span>');h=e.createElement("div");c();var A=function(){E=H.offsetTop+H.offsetHeight;b=t.innerHeight;w=m.scrollTop||M.scrollTop;T||E>w+b||f()};A();0!==p.type&&t.addEventListener("scroll",function(){v||(S&&t.clearTimeout(S),S=t.setTimeout(A,1000))},!1)}
return p}}(window,document);
var infinite_scroll = new InfiniteScroll({
    type: 0,
    target: {
        posts: '.blog-posts',
        post: '.post-outer-container',
        anchors: '.blog-pager',
        anchor: '.load-more-btn'
    },
    text: {
        load: '<button class=\"load-more-btn\">Load More</button>',
        loading: '<span class=\"loading-btn\">Memuat <span>&#9696;</span></span>',
        loaded: '<span class=\"all-posts-showing\"></span>',
        error: 'null, refresh this page'
    }
});
//]]>
</script>

Sebagai informasi, JavaScript di atas dasarnya masih menggunakan konstruksi dari miliknya DTE :], Taufik Nurrohman. Hanya coba dirubah sedikit.

Demikian, semoga membantu dan bermanfaat.

JavaScript Blogger Infinite Scroll: https://dte.web.id/teknis/blogger-infinite-scroll

Menampilkan Komentar Gambar di Blogger dengan JavaScript

noreply@blogger.com (Bungfrangki) — Tue, 27 Aug 2024 14:49:00 +0000

Untuk menampilkan komentar berisi link gambar di Blogger dapat dilakukan dengan manipulasi element di JavaScipt (tanpa jQuery). Kurang lebih penampakannya seperti pada thumbnail/hero postingan ini.

Hari ini saya cukup kaget setelah mendapat balasan komentar dari salah satu Blogger sepuh di Indonesia. Kang Ismet. Bahwa ternyata tampilan logo di footer agak berantakan di browser atau device lain.

Namun, yang ternyata lebih mengganggu pikiran saya adalah, isi komentar berupa link gambar yang panjang itu.

Sedikit merepotkan untuk sekadar mendapatkan informasi dari sebuah gambar. Saya harus copy terlebih dahulu url gambar tersebut. Adapun sebelum tahapan meng-copy link gambar itu, terdapat aktifitas yang disebut dengan menyeleksi teks. Bila beruntung, saya dapat menyeleksinya dengan sekali geseran mouse. Dari awal huruf link sampai akhir, dengan penuh kewaspadaan. Terus mem-paste-nya ke tab baru di browser.

Untungnya link gambar yang dibagikan hanya satu saja. Coba bayangkan bila link gambarnya banyak, dengan panjang linknya yang bukan maen seperti itu. Tentu akan makin merepotkan.

Untuk itulah saya lakukan sedikit modifikasi lagi pada fitur komentar di blog ini. Dengan menambahkan "button" yang dengan hanya diklik, maka dia akan menampilkan link gambar pada komentar. Tanpa perlu copy-paste link dan keluar dari halaman blog untuk membuka tab baru di browser.

Untuk demonya, bisa cek langsung di komentar postingan ini: /2024/07/blogger-conditional-tags-url-contains.html

Cara Menampilkan Komentar Berisi Link Gambar di Blogspot dengan JavaScript

Cara 1 (tanpa tombol, gambar langsung tampil)

const imgElements = document.querySelectorAll('i[rel="img"],i[rel="image"]');
imgElements.forEach((element) => {
const imgUrl = element.textContent;
const imgTag = document.createElement('img');
imgTag.src = imgUrl;
element.inner��vlog�ٷ�� = '';
element.appendChild(imgTag);
element.setAttribute('alt', '');
});

Cara 2 (pakai tombol)

const imgElements = document.querySelectorAll('i[rel="img"],i[rel="image"]
');
imgElements.forEach((element) => {
const button = document.createElement('button');
button.textContent = 'Show Image';
button.classList.add('ShowImageComment');
element.appendChild(button);
button.addEventListener('click', () => {
const imgUrl = element.textContent;
const imgTag = document.createElement('img');
imgTag.src = imgUrl;
element.inner��vlog�ٷ�� = '';
element.appendChild(imgTag);
element.style.display = 'block';
imgTag.setAttribute('alt', '');
});
});

Catatan:
Agar script ini bisa berhasil, pastikan document.querySelectorAll sudah di sesuaikan di blog masing-masing. Pada tutorial ini, document.querySelectorAll yang digunakan adalah i[rel="img"] dan i[rel="image"]

Demikian, semoga bermanfaat.

Blogger Conditional Tags URL Contains

noreply@blogger.com (Bungfrangki) — Sun, 21 Jul 2024 02:39:00 +0000

Melanjutkan tutorial singkat kemari tentang Blogger Conditional Tags dengan data:view.pageId dan data:view.postId. Kali ini akan dibahas Blogger conditional tags lainnya, yang sedikit lebih kompleks dan teknis.

Blogger conditional tags dengan operator URL contains ini memungkinkan Anda untuk membuat kondisi pada semua URL di blog yang mengandung sebagian atau seluruh dari slug tertentu, yang dituliskan sebagai string.

Menariknya, semua URL blog yang dimaksud adalah meliputi URL di Page (halaman static), Post (postingan), label, search, archive dan lainnya.

Penerapan

<b:with value='data:view.url.canonical' var='url'>
<b:if cond='or(contains(data:url, "tutorial-blog"), contains(data:url, "/p/contact"), contains(data:url, "2024/07/cara-"), contains(data:url, "/search/label/Templates"), contains(data:url, "naruto atau boruto"))'>

</b:if>
</b:with>

Alternatif

Bila tidak berhasil dengan cara di atas, silahkan ganti kode pada value dengan kode berikut ini:

data:view.url.canonical.https

Demikian, semoga berhasil!

Blogger Conditional Tags dengan data:view.pageId dan data:view.postId

noreply@blogger.com (Bungfrangki) — Fri, 19 Jul 2024 01:39:00 +0000

Bagi yang masih kesulitan dalam penerapan tag kondisional untuk page dan post tertentu yang tidak bekerja atau mengalami error, bisa mencoba cara ini.

Yaitu dengan langsung memanfaatkan ID pada masing-masing post dan page, yang biasanya dipanggil menggunakan data global <data:blog.pageId/> dan <data:blog.postId/>.

Masalah dalam Penggunaan Conditional Tags pada Page / Post Tertentu

Masalah umum yang sering terjadi saat menerapkan tag kondisional untuk halaman tertentu diantaranya adalah sebagai berikut.

Tidak muncul sama sekali.
Berhasil pada tampilan desktop tetapi gagal pada tampilan mobile.

Masalah error tersebut seringkali terjadi pada kondisi pengecualian, yang biasanya ditulis dengan seperti ini:

<b:if cond='data:view.isHomepage or data:view.isPage and data:view.url != data:blog.homepageUrl.canonical path "p/about.html" and data:view.url != data:blog.homepageUrl.canonical path "p/contact.html"'>

Atau seperti ini:

<b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + "p/page.html"'>
<b:if cond='data:blog.url != data:blog.canonicalHomepageUrl + "2015/04/post.html"'>
<b:if cond='data:view.isPage and !data:view.url.canonical contains "/p/test-page-"'>

Cara Menerapkan Conditional Tags data:view.pageId dan data:view.postId

Sebagai contoh, pada tutorial ini misalnya Anda ingin menyembunyikan kode iklan Adsense pada Page atau Post tertentu.

Maka langkah-langkahnya kurang lebih seperti berikut ini.

Terlebih dahulu, silahkan buka blog editor Page atau Post yang diinginkan.

Lalu perhatikan URLnya, lokasi pageId atau postId adalah seperti yang diseleksi pada gambar di bawah ini:

Pisahkan antara pageId dan postId yang ingin dikondisikan tersebut.

Setelah itu silahkan buka tema editor, dengan mengklik menu Theme > Edit ��vlog�ٷ��.

Kemudian ikuti contoh penerapannya seperti berikut ini.

Page (Halaman)

Misalnya kode iklan ingin disembunyikan pada halaman 'About' dan 'Contact', dengan masing-masing pageId dari halaman tersebut adalah '123456789' dan '987654321' maka cara penerapannya adalah seperti ini:

<b:if cond='data:view.isHomepage or data:view.isPage and !(data:view.pageId in [123456789, 987654321])'>

</b:if>

Post (Postingan)

Dan untuk menyembunyikan kode iklan pada postingan tertentu, Anda bisa menggunakan tag kondisi seperti ini:

<b:if cond='data:view.isHomepage or data:view.isPost and !(data:view.postId in [1223334444, 5667778888, 999999999])'>

</b:if>

Lanjutan: Blogger Conditional Tags URL Contains

Demikian, semoga bermanfaat dan berhasil diterapkan.

Sumber: https://support.google.com/blogger/thread/271332217/how-to-use-conditional-tags-properly?hl=en

Cara Memasang ��vlog�ٷ�� Parse Codes di Blogger

noreply@blogger.com (Bungfrangki) — Sun, 11 Feb 2024 14:33:00 +0000

Cara Pasang Parse Code ��vlog�ٷ�� Widget Tools di Blog yang Valid ��vlog�ٷ��5 - Parse ��vlog�ٷ�� adalah salah satu tools yang digunakan untuk mengkonversi kode, macam kode iklan. Biasanya kode iklan yang di parse adalah iklan yang nantinya akan tampil di dalam postingan, baik di atas, di tengan, maupun di bawah postingan.

Tools ini juga sangat mudah digunakan oleh newbiew sekalipun, sebab cukup menekan satu tombol saja kode ��vlog�ٷ�� langsung diparse. Tools ini sangat cocok dipasang pada blog yang membahas tentang berbagai tutorial seputar script/coding website atau blog.

Bagi yang ingin tau seperti apa tools parse ��vlog�ٷ�� itu, kolom di bawah ini adalah contohnya. Silahkan masukkan kode iklan anda disana, lalu klik Parse Script.

Parse ��vlog�ٷ�� Blogger XML Templates

Gunakan ��vlog�ٷ�� Parse yang lebih baik.

Cara pasang widget parse kode ��vlog�ٷ�� di blogspot/Blogger

Anda pun dapat memasang parse ��vlog�ٷ�� sendiri di blog anda. Kopi kode di bawah ini dan letakkan dimana saja yang ingin anda inginkan. Jika ingin meletakkanya di sidebar, taruh di ��vlog�ٷ��/JavaScript dan jika ingin meletakkanya di halaman postingan atau halaman static maka harus melalui layanan ��vlog�ٷ��.

<script type="text/javascript">
function convert(){var ele1 = document.getElementById("somewhere");var replaced;replaced = ele1.value;replaced = replaced.replace(/&/ig, "&");replaced = replaced.replace(/</ig, "<");replaced = replaced.replace(/>/ig, ">");replaced = replaced.replace(/"/ig, """);replaced = replaced.replace(/±/ig, "±");replaced = replaced.replace(/©/ig, "©");replaced = replaced.replace(/®/ig, "®");replaced = replaced.replace(/ya'll/ig, "ya'll");ele1.value = replaced;}
</script><br />
<table style="margin:0 auto"><tbody>
<tr> <td><textarea id="somewhere" style="background: none repeat scroll 0% 0% rgb(248, 248, 248); border: 1px solid rgb(204, 204, 204); height: 300px; width: 550px"></textarea><br/>
<input onclick="convert();" style="padding: 5px;" type="button" value="Parse Script" /></td> </tr>
</tbody></table>

Setelah itu, Publishkan atau Save postingan.

Demikian tutorial tentang Cara Memasang Widget Parse Kode ��vlog�ٷ�� Tools di Blog yang Valid ��vlog�ٷ��5. Semoga membantu dan selamat mencoba.

Cara Memasang Google Analytics 4 (GA4) di AMP

noreply@blogger.com (Bungfrangki) — Thu, 15 Jun 2023 01:28:00 +0000

Seperti yang diketahui, bahwa properti lawas Google Analytics (universal analytics) benar-benar akan berhenti memproses data mulai 1 Juli 2023. Artinya, properti tersebut tidak dapat lagi digunakan untuk melihat page views, traffics, backlinks dan lainnya untuk blog atau website terkait.

Pun hal sama berlaku untuk blog atau website pengguna AMP (Accelerated Mobile Pages). Untuk itu, semua pengguna properti lawas dari Google Analytics, dianjurkan untuk migrasi ke properti Google Analytics V4. Mula-mulai dianjurkan untuk mengikuti panduan di 'Asisten Penyiapan'.

Langkah ini penting dilakukan untuk berbagi berbagai data antar properti, baik properti Analytics yang lama maupun yang terbaru.

Namun demikian, di porperti teranyar ini kita tetap tidak diberikan script kode pelacakan khusus untuk AMP. Maka solusinya pergi ke Documentation amp-dev, pada tab pembahasan amp-analytics.

Cara Pasang GA4 di Blog AMP

Buka Asisten Penyiapan GA4

Periksa 'Open Connected Property', pastikan properti GA lama dan GA4 sudah terhubung atau connected.
Buka tab menu Setup Asistant di GA4
Pada opsi-opsi yang ada, silahkan pilih Mark as complete.

Ganti Kode Google Analytics AMP yang Lama

Untuk pemasangan Google Analytics (versi lama) di AMP biasanya diterapkan seperi berikut ini:

<amp-analytics  type="gtag" id="analytics1" data-credentials="include" >
<script type="application/json">
{"vars":{"gtag_id":"UA-XXXXXXXXX-1","config":{"UA-XXXXXXXXX-1":{"groups":"default"}},"anonymizeIP":"true"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}
</script>
</amp-analytics>

Kode Script Google Analytics 4 (GA4) di AMP

Nah, untuk cara memasang Google Analytics 4 (GA4) di website atau blog AMP, dapat menggunakan kode berikut ini.

<amp-analytics type="googleanalytics" config="https://amp.analytics-debugger.com/ga4.json" data-credentials="include" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px" i-amphtml-layout="fixed">
  <script type="application/json">
    {
      "vars": {
        "GA4_MEASUREMENT_ID": "G-XXXXXXXXXX",
        "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
        "DEFAULT_PAGEVIEW_ENABLED": true,
        "GOOGLE_CONSENT_ENABLED": false,
        "WEBVITALS_TRACKING": false,
        "PERFORMANCE_TIMING_TRACKING": false,
        "SEND_DOUBLECLICK_BEACON": false
      }
    }
  </script>
</amp-analytics>

Ganti G-XXXXXXXXXX dengan ID GA4 Blog Masing-masing

Silahkan ganti GA4 id G-XXXXXXXXXX pada script di atas, dengan kode Google Analytics versi 4 untuk blog atau website Anda.

Simpan perubahan dan selesai.

Info Tambahan

Pastikan elemen amp-analytics seperti ini:

<script src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" async="" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script>

Atau yang seperti ini:

<script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics">

Sudah terpasang di blog, agar AMP Analytics dapat berjalan dengan baik.

Bikin Forum, Lagi

noreply@blogger.com (Bungfrangki) — Wed, 12 Apr 2023 03:48:00 +0000

Nampaknya saya masih cukup penasaran serta menolak 'kapok' untuk bikin forum lagi. Setelah sebelumnya gagal mengelola dan mempertahankan forum dengan subdomain forum.bungfrangki.com, yang dibangun dengan biaya hampir 0 rupiah. Bagaimana tidak, forum tersebut berjalan di atas salah satu platform forum creator gratis, dan domainnya tinggal menambahkan CNAME baru (forum) pada pengaturan DNS di CloudFlare.

Namun forum kali ini nampak sedikit berbeda. Forum ini dibangun di atas CMS Wordpress dengan plugin bbPress, menggunakan domain (subdomain) khusus dari .co.vu, dan sewa hosting, tentunya.

Meski tak begitu spesial-spesial amat, sebab begitu banyak forum seperti ini, pun begitu mudah untuk membuatnya. Namun, bagi saya ini cukup berarti. Sebab telah menjawab rasa penasaran saya selama ini.

Tentu saja, masih cukup banyak kekurangan dari forum ini. Ditambah lagi topiknya masih sebiji (saat artikel ini ditulis). Untuk itu, masukan dan sarannya masih sangat amat diperlukan.

Bagi para blogger yang ingin berbagi hal-hal penting dan bermanfaat dalam tulisan, bolehlah mampir ke forum baru ini. Nitip backlink pun dipersilhkan. Yang penting kontennya tidak menyalahi Terms and Rules.

Kunjungi forumnya di: ~~https://bungfrangki.co.vu~~ web.bungfrangki.com

Demikian tulisan kali ini, semoga bermanfaat.

Cara Redirect 301 ke Domain Baru di Blogger/Blogspot

noreply@blogger.com (Bungfrangki) — Mon, 03 Apr 2023 05:54:00 +0000

Cara redirect 301 dari domain lama ke domain baru di Blogger atau Blogspot ini juga berlaku bagi blog yang sudah menggunakan TLD (Top Level Domain). Intinya, masih pakai platform Blogger untuk membuat postingan.

Apa Itu Redirect 301?

Redirect 301 ialah upaya untuk me-redirect (mengalihkan) URL atau permalink blog lama ke permalink blog baru secara otomatis. Yang dialihakan bukan hanya antar halaman homepage saja, tetapi juga berlaku untuk halaman post dan static/page.

Adapun model redirect 301 ini bisa dengan mengalihkan nama domain lama ke nama domain baru, misalnya https://domainlama.blogspot.com di redirect ke https://domainbaru.blogspot.com.

Atau bisa juga mengahlikan ke TLD yang baru (dengan nama domain yang sama). Contohnya https://www.namadomainku.com menjadi https://www.namadomainku.net

Secara lengkapnya, ilustrasi redirect 301 adalah sebagai berikut:

https://www.namadomainku.com/
https://www.namadomainku.com/p/halaman-static.html
https://www.namadomainku.com/2019/07/permalink-postingan-blogger.html

Jika kita ingin me-redirect ke TLD baru, maka masing-masing hasilnya akan seperti ini:

https://www.namadomainku.net/
https://www.namadomainku.net/p/halaman-static.html
https://www.namadomainku.net/2019/07/permalink-postingan-blogger.html

Redirect 301 khususnya di Blogger atau Blogspot, akan sangat membantu banyak hal. Yang akan diuraikan berikut ini.

Baca juga: Mengalihkan/Redirect Otomatis URL Error 404 ke Homepage

Alasan Melakukan Redirect 301

Ada berbagai alasan mengapa kita perlu melakukan redirect domain 301, antara lain sebagai berikut.

1. Domain dibanned Google Adsense; Jika domain yang telah di banned oleh Adsense, maka kemungkinan untuk diterima kembali menjadi mitra Google Adsense adalah sebuah mimpi yang tak akan pernah terwujud. Solusinya adalah, semua artikel dipindahkan ke domain baru, lalu di redirect 301 dari domain lama.

2. Ingin menggabungkan beberapa blog menjadi satu; Karena blog di domain lama masih bagus posisinya di Google serv, maka cara cerdas yang hendaknya dilakukan setelah mengimpor seluruh konten ke domain baru adalah, mengalihkan URL (permalink) domain lama ke URL domain baru. Sehingga pengunjung blog di domain baru makin bertambah. Bukan malah menghapus blog yang lama. Itu blunder!

3. Nama domain lama terlihat jelek; Mungkin karena ada kenangan mantan, maka nama blog pun akan terlihat seperti nama makhluk yang suka tulang.

Intinya, tujuan atau alasan utama untuk melakukan redirect 301 ini adalah mempertahakan eksistensi pengunjung dan page views blog, ke domain baru. Karena sejatinya pengunjung tetap akan menikmati konten yang dia inginkan, tanpa disadari bahwa dia telah berada di URL domain baru.

Baca lainnya: Cara Mengatasi Tidak Bisa Centang Redirect non WWW to WWW pada Blogger

Langkah-langkah Menerapkan Redirect 301 di Blogger atau Blogspot

1. Siapkan nama domain baru atau TLD baru. Silahkan beli dulu ke jasa penyedia domain favorit Anda. Klik disini bagi yang belum punya jasa penyedia domain favorit.

2. Bikin blog baru, lalu ganti domainnya dengan nama domain atau TLD yang baru dibeli tadi.

3. Setelah proses propagasi domain selesai, dan domain baru itu sudah bisa diakses, silahkan login ke blog lama. Masuk ke menu Setelan > Lainnya > klik Cadangkan Konten.

4. Buka lagi dashboard domain baru tadi, lalu Impor Konten yang tadi di download dari blog lama. Melalui menu Setelan > Lainnya.

Catatan:
Sebelum melakukan Impor Koten jangan pilih Publish Otomatis. Disarankan untuk posting artikel secara manual. Karena permalink blog lama harus sama persis dengan permalink di blog baru. Utamanya permalink halaman postingan.

5. buka dashboard domain lama, pilih menu Template > Edit ��vlog�ٷ��. Cari kode </head> atau <head> lalu letakkan kode berikut ini di atas kode tadi.

<script type='text/javascript'>
var d='<data:blog.url/>';
d=d.replace(/.*\/\/[^\/]*/, '');
location.href = 'https://www.namadomainku.net' + window.location.pathname;
</script>

Perhatian:
Silahkan ganti https://www.namadomainku.net dengan domain baru Anda.

6. Simpan Template

7. Buka dashboard domain baru, buka menu Postingan > Draf. Silahkan edit satu-satu artikel yang ada disitu, dengan menyamakan permalink dari domain lama ke domain baru.

Jangan lupa juga edit bagian body postingan melalui ��vlog�ٷ�� (bukan Compose), barangkali Anda menggunakan teknik internal link, yang domainnya dianjurkan untuk di ubah ke domain baru.

Mengapa Ribet?

Itu karena kompleksitas Blogger tidak diberi fasilitas yang menyamankan layaknya WordPress, yang tinggal pakai plugin Velvet Blues Update Urls dan seluruh permalink seketika berubah domainnya.

Sebagai saran saja, alangkah baiknya selesaikan dulu masalah postingan dan permalink di domain baru. Setelah seluruh artikel sukses terposting dan permalink telah dipastikan sama persis dengan yang ada di blog lama, maka barulah menerapkan langkah ke 5.

Demikian penjelasan tentang cara redirect 301 dari domain lama ke domain baru di Blogger atau Blogspot. Semoga bermanfaat. Jika ada komentar silahkan tuliskan, jika ada keinginan silahkan bagikan. Terima kasih!

Membuat Table of Contents (ToC) Otomatis di Blogger

noreply@blogger.com (Bungfrangki) — Fri, 17 Feb 2023 13:34:00 +0000

Membuat Daftar Isi Table of Content (ToC) Otomatis di Blogger – Adapun Table of Content atau daftar isi artikel di Blogger / Blogspot ini benar-benar otomatis mirip seperti ToC pada plugin-plugin WordPress. Yang juga dilengkapi dengan tombol show-hide.

Penggunaan Table of Contents tidak perlu melakukan pengeditan pada setiap postingan. Juga tidak menggunakan jQuery library dan FontAwesome, sehingga loading blog tetap lebih ringan.

Anda hanya perlu menyimpan JavaScript (Vanilla JS) di bawah ini, di atas </body> Blogger atau Blogspot Anda, maka secara otomatis Table of Content akan muncul pada setiap postingan yang memiliki Tag Heading (h1, h2, h3, h4, h5, atau h6) dengan jumlah tertentu (sesuai setelan). Sementara permalink-nya adalah hasil generate sesuai judul dari masing-masing heading.

Apakah Table of Contents itu SEO Friendly?

Sederhananya, fitur Table of Content atau ToC di Blogger memberikan ringkasan atau deskripsi singkat akan pokok-pokok bahasan pada artikel, yang berdasar pada penggunaan Tag Heading.

Nah, inilah yang akan ‘dibaca’ oleh Search Engine untuk menjadi dasar isi dari artikel. Dalam hal ini, terkadang hasil generate tag heading tersebut menjadi cikal-bakal Anchor Link yang akan ditampilkan pada hasil pencarian, ketika pengguna mengetikkan keyword yang tepat atau mirip.

Maka dapat dikatakan bahwa penggunaan fitur Table of Contents di blog/website bisa saja berpengaruh dan mempengaruhi SEO artikel blog.

Baca Juga: Cara Memasang Parse Kode ��vlog�ٷ�� Tools di Blogger

Cara Memasang Table of Contents di Blogger

Berikut langkah-langkah cara pasang Table of Content (ToC) atau daftar isi konten di Blogger atau Blogspot:

Kode JavaScript

Silahkan buka pengeditan ��vlog�ٷ�� Blogger di Edit ��vlog�ٷ��.

Lalu cari kode </body> atau </body>

Letakkan JavaScript Table of Contents berikut ini di atasnya:


<script>
//<![CDATA[ 
// var contentContainer = document.querySelectorAll(".post-body")[0].id = "toc-container";
var contentContainer = document.querySelectorAll(".post-body")[0];
const dataTracking = contentContainer.setAttribute("data-tracking-container", "true");
var headings = contentContainer.querySelectorAll("h1,h2,h3,h4,h5,h6");
var showtoc = contentContainer.querySelectorAll(".post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6");
if (headings.length > 3) {
for (i = 0; i <= showtoc.length - 1; i++) {
var tocauto = showtoc[i];  
tocauto.insertAdjacent����vlog�ٷ����('beforebegin','<div class="toc-auto"><input id="toc-sh" type="checkbox"><label class="toc-title" for="toc-sh">Table of Contents</label><div class="toc" id="toc"></div></div>');
tocatr = document.querySelectorAll(".toc-auto")[0];
tocatr.setAttribute('data-tracking-container', 'true');
var toptoc = document.querySelectorAll(".toc-auto");
[].filter.call(toptoc, function(tocselection) {
    return ![].some.call(tocselection.attributes, function(attr) {
        return /^data-tracking-container/i.test(attr.name);
    });
}).forEach(function(tocselection) {
    tocselection.parentNode.removeChild(tocselection);
});};}
class TableOfContents {
    constructor({ from, to }) {
        this.fromElement = from;
        this.toElement = to;
        // Get all the ordered headings.
        this.headingElements = this.fromElement.querySelectorAll("h1, h2, h3, h4, h5, h6");
        this.tocElement = document.createElement("div");
    }
    getMostImportantHeadingLevel() {
        let mostImportantHeadingLevel = 6;
        for (let i = 0; i < this.headingElements.length; i++) {
            let headingLevel = TableOfContents.getHeadingLevel(this.headingElements[i]);
            mostImportantHeadingLevel = (headingLevel < mostImportantHeadingLevel) ?
                headingLevel : mostImportantHeadingLevel;
        }
        return mostImportantHeadingLevel;
    }
    static generateId(headingElement) {
        return headingElement.textContent.toLowerCase().replace(/ /g,"_").replace(/\//g,"_").replace(/&lt;/g,"").replace(/&gt;/g,"").replace(/&amp;/g,"").replace(/&amp;nbsp;/g,"").replace(/&nbsp;/g,"").replace(/\xA0/g,"").replace(/[\n\r\f]+/g, "").replace(/[.,\#!$%\^&\*;:{}=\-@`~()<>?"'“+”]/g,"");
    }
    static getHeadingLevel(headingElement) {
        switch (headingElement.tagName.toLowerCase()) {
            case "h1": return 1;
            case "h2": return 2;
            case "h3": return 3;
            case "h4": return 4;
            case "h5": return 5;
            case "h6": return 6;
            default: return 1;
        }
    }

    generateToc() {
        let currentLevel = this.getMostImportantHeadingLevel() - 1,
            currentElement = this.tocElement;

        for (let i = 0; i < this.headingElements.length; i++) {
            let headingElement = this.headingElements[i],
                headingLevel = TableOfContents.getHeadingLevel(headingElement),
                headingLevelDifference = headingLevel - currentLevel,
                linkElement = document.createElement("a");

            if (!headingElement.id) {
                headingElement.id = TableOfContents.generateId(headingElement);
            }
            linkElement.href = `#${headingElement.id}`;
            linkElement.textContent = headingElement.textContent;

            if (headingLevelDifference > 0) {
                for (let j = 0; j < headingLevelDifference; j++) {
                    let listElement = document.createElement("ul"),
                        listItemElement = document.createElement("li");
                    listElement.appendChild(listItemElement);
                    currentElement.appendChild(listElement);
                    currentElement = listItemElement;
                }
                currentElement.appendChild(linkElement);
            } else {
                for (let j = 0; j < -headingLevelDifference; j++) {
                    currentElement = currentElement.parentNode.parentNode;
                }
                let listItemElement = document.createElement("li");
                listItemElement.appendChild(linkElement);
                currentElement.parentNode.appendChild(listItemElement);
                currentElement = listItemElement;
            }

            currentLevel = headingLevel;
        }

        this.toElement.appendChild(this.tocElement.firstChild);
    }
}
document.addEventListener("DOMContentLoaded", () =>
    new TableOfContents({
        from: document.querySelector(".post-body"),
        to: document.querySelector(".toc")
    }).generateToc()
);

//]]>
  </script>

Kode CSS

Tambahkan kode CSS berikut di atas </style> atau ]]></b:skin> untuk mengatur tampilan Table of Content. Termasuk mengatur Table of Contents agar bisa show-hide.


html {
  scroll-behavior: smooth;
}
/* TOC style bungfrangki.com */
.toc-auto {
    display: table;
    position: relative;
    border-radius: 3px;
    background-color: var(--widget-bg,#f6f9fc);
    padding: 1rem 1rem.85rem;
    margin: 0 0 1.5rem;
}
.toc-auto a {
  transition: .3s ease-in;
  text-decoration:none;
}
.toc-auto a:hover, .toc-auto .current {
    text-decoration: underline !important;
    color: var(--a-hover,#fe8f04);
}
.toc-auto input[type="checkbox"] {
    display: none;
}
.toc-title {
    font-weight: 700 !important;
    margin-top: 5px;
}
.toc-title:after {
    content: '-';
    background-color: var(--text-secondary,#a6e6e5);
    border-radius: 3px;
    clear: both;
    float: right;
    margin-left: 1rem;
    cursor: pointer;
    font-weight: 400 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    transition: .3s ease-in;
}
.toc-title:after:hover {
    background-color: var(--main-color,#028271);
    color: #fff;
}
.toc-auto .toc {
    max-height: 100%;
    max-width: 500px;
    opacity: 1;
    overflow: hidden;
    transition: max-height .1s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;
    visibility: visible;
}
.toc-auto ul li,ol li {
    margin-bottom: 0 !important;
}
#toc-sh:checked~.toc-title:after {
    content: '+';
}
#toc-sh:checked ~ .toc {
    margin-top: 0;
    max-height: 0;
    max-width: 0;
    opacity: 0;
    transition: max-height 0s ease,max-width 0s ease,margin-top .3s linear,opacity .3s linear,visibility .3s linear;
    visibility: hidden;
}

Simpan Tema

Setelah itu, silahkan simpan perubahan pada template Blogspot dengan klik ikon Simpan Tema.

Setelan Table of Contents Otomatis di Blogger

Sedikit saya jelaskan tentang setelan Table of Contents otomatis ini agar sesuai dengan keinginan masing-masing, yaitu sebagai berikut:

Secara default Table of Contents ini akan otomatis muncul bila pada postingan terdapat lebih dari 3 Tag Heading.
Bila ingin mengubahnya dan ingin menampilkan Table of Content pada jumlah heading sesuai keinginan, silahkan ganti angka 3 pada kode if (headings.length > 3) dengan angka lainnya.
Table of Contents akan muncul di atas Heading paling atas (bukan judul artikel). Terlepas dari apapun jenis Tag Headingnya. Entah itu <h1>, <h2>, <h3>, <h4>, <h5>, ataupun <h6>.
Apabila ingin menampilkannya di bawah Tag Heading, ubah beforebegin menjadi afterend pada JavaScript.
Table of Contents hanya akan tampil bila template blogspot memiliki tag class .post-body. Apabila tag tersebut tidak ada di template, Anda boleh menggantinya dengan selector lain pada kode: var contentContainer = document.querySelectorAll(".post-body")

Preview

Berikut telah disediakan preview Table of Contents di CodePen untuk melihat hasilnya, sepebelum diterapkan di Blogger:

CodePen

Penutup

Demikian tutorial tentang cara memasang Table of Content (ToC) atau daftar isi otomatis di Blogger. Agar blog menjadi lebih SEO friendly dan user-friendly.

Semoga bermanfaat dan selamat mencoba.

Ngomong-ngomong, tutorial ini bukanlah artikel lanjutan yang saya janjikan pada postingan sebelumnya, tentang mengubah tag blockquote menjadi tag pre code dengan JavaScript di Blogger.

Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript

noreply@blogger.com (Bungfrangki) — Sat, 11 Feb 2023 08:48:00 +0000

Tutorial kali ini tentang merubah tag <blockquote> menjadi tag <pre><code> dengan JavaScript, dalam hal ini Vanilla JavaScript. Mari kita bahas!

Mukaddimah

Salah satu kebiasaan unik para Blogger pemula adalah menggunakan tag Blockquote untuk membukus tampilan kode-kode CSS, ��vlog�ٷ��, JavaScript, ataupun XML.

Bukan tanpa alasan, hal ini dilakukan karena kemudahan yang beriringan dengan keterbatasan pengetahuan dalam dasar-dasar nge-blog. Sehingga menjadi alergi untuk membuka opsi pengeditan di Tampilan ��vlog�ٷ�� di Post Editor Blogger.

Kemudahan yang dimaksud ialah tag Blockquote atau Kutipan Teks menjadi salah satu menu di Post Editor, sementara tag Pre Code tidak ada di menu Post Editor. Tag Pre Code (beserta penutupnya) mesti diketik dalam tampilan ��vlog�ٷ��, yang saat itu melakukan pengeditan di tampilan ��vlog�ٷ�� ribetnya bukan main. Bikin jengkel!

Setidaknya begitu yang saya lakukan dan rasakan dulu. Sehingga begitu banyak artikel yang berisi kode-kode di blog ini yang terbungkus oleh tag <blockquote>. Yang membuat saya tidak bisa menerapkan Syntax Highlighter. Sebab Syntax Highlighter di Blogger hanya akan berfungsi sempurna bila pakai tag Pre Code.

Namun, sekarang saya hepi 😀. Karena saat ini seperti ‘tidak ada lagi’ kode-kode yang dibungkus oleh tag Blockquote.

Kode-kode ��vlog�ٷ��, CSS, JavaScript, jQuery, Json maupun yang lainnya, kini terbungkus rapi oleh tag <pre><code>, tanpa perlu edit postingan sama sekali. Sudah begitu, ditambah dengan penggunaan Syntax Highlighter, yang otomatis membuat kode-kode itu berwarna-warni dari atas sampai akhir. Dapat dikatakan bahwa semua kode tampil dengan mode Syntax Highlighter secara kaffah.

Mau seperti itu? Begini caranya!

Cara Merubah Tag <blockquote> Menjadi Tag <pre> <code> dengan JavaScript

Kode Javascript ini secara kebetulan ketemu di Stack Overflow, yang kemudian dimodifikasi sedikit agar dapat diterapkan sesuai kebutuhan.

Berikut langkah-langkah penerapa cara mengubah tag Blockquote menjadi tag Pre Code menggunakan JavaScript, dalam hal ini tanpa atau tidak menggunakn jQuery.

1. Langkah Awal

Masuk atau login ke dashboard Blogger. Lalu ke menu Tema > Edit ��vlog�ٷ��.

Kemudian cari kode </body> atau </body>

Letakkan kode JavaScript berikut di atasnya.

2. Kode JavaScript


<script>
    //<![CDATA[
let foundBlockquote = document.querySelectorAll("blockquote");
for(let i = 0; i < foundBlockquote.length; i++){
  let camouflage = foundBlockquote[i];
  let replacement = document.createElement("pre");
replacement.inner����vlog�ٷ���� += replacement.inner����vlog�ٷ����;
replacement.inner����vlog�ٷ���� += '<code>' + camouflage.inner����vlog�ٷ���� + '</code>';
 replacement.inner����vlog�ٷ���� = replacement.inner����vlog�ٷ����.replace(/(<|&lt;)br\s*\/*(>|&gt;)/g,' ');
  camouflage.replaceWith(replacement);
const addprelem = document.querySelectorAll("pre");
addprelem.forEach(preatr => { 
preatr.classList.add('notranslate');preatr.tabIndex = 0;preatr.setAttribute('data-language', 'code'); });
}
//]]>
  </script>

Setelah itu Simpan Tema.

Sedikit saya perlu jelaskan. Adapun kode berikut:


const addprelem = document.querySelectorAll("pre");
addprelem.forEach(preatr => { 
preatr.classList.add('notranslate');preatr.tabIndex = 0;preatr.setAttribute('data-language', 'code'); });

Bisa tidak digunakan atau dihapus saja. Dalam kasus ini, potongan kode tersebut saya perlu tambahkan karena dibutuhkan. Selengkapnya tentang hal ini akan mungkin dijelaskan pada artikel selanjutnya.

Intinya, kode tersebut untuk menambahkan atribut pada elemen PRE.

3. Kode CSS (Opsional)

Rapikan tampilan Pre Code dengan menambahkan CSS berikut ini. Silahkan salin dan simpan kode CSS berikut di atas </style> atau ]]></b:skin>.


.post-body pre code, .post-body code {
    font-family: Consolas,Monaco,'
    Andale Mono',monospace;font-size: 100%;
    font-weight: normal;
}

.post-body pre {
    padding: 7px;
    border-radius: 4px;
    background-color: #23241f;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.4em!important;
}

pre,pre code {
    white-space: pre-wrap;
}

Namun bila di template Blogger Anda sudah ada kode CSS untuk mengatur tampilan pre code, maka CSS di atas tidak perlu ditambahkan lagi.

4. Terapkan Syntax Highlighter (Opsional)

Lebih lanjut, Anda bisa menambakan pengaturan lanjutan dengan menerapkan Syntax Highlighter, agar baris kode terlihat berwarna.

Berikut artikel terkait untuk menerapkan Syntax Highlighter di Blogger:

5. Preview

Bagi yang masih ragu-ragu dengan tutorial ini, berikut preview demo penerapannya.

CodePen

Penutup

Sejatinya cara ini tidak perlu diterapkan bilamana di awal membuat dan membangun blog telah memiliki cukup pengetahuan tentang CSS, ��vlog�ٷ�� dan JavaScript. Setidaknya dasar-dasarnya saja.

Meskipun para kreator template Blogger telah berupaya keras untuk membuat ‘shortcut’ pengeditan tampilan blog lewat Tata Letak (Layout), tetap saja tidak serta merta membuat kita menjadi abai untuk belajar hal-hal yang bersinggungan menyangkut CSS, ��vlog�ٷ�� dan JavaScript.

Demikian informasi tentang cara merubah tag Blockquote menjadi tag Pre Code dengan JavaScript. Meski pada penerapannya pada platform Blogger, kode JavaScript ini juga dapat dipastikan akan bekerja secara sempurna di platform atau tempat lain. Semoga mermanfaat dan selamat mencoba!

Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru

noreply@blogger.com (Bungfrangki) — Thu, 06 Oct 2022 05:09:00 +0000

Widget blogger kali ini adalah cara membuat daftar isi/sitemap yang berlabel ‘new’ atau ‘baru’ sesuai label yang mendapat artikel terbaru. Widget ini untuk mempermudah menavigasi penjelajahan blog dengan melihat label dari blog tersebut.

Dengan begitu para pengunjung akan mengetahui label mana saja yang baru saja mendapatkan update artikel terbaru di blog tertentu.

Seperti yang sudah saya ungkapkan sebelumnya, fungsi #Widget daftar isi ini untuk melihat semua artikel secara lengkap dan supaya mudah di temukan oleh pengunjung dan memudahka bot menjelajah juga untuk merayapi semua artikel di blog anda.

Baca juga: Membuat Widget Random Post Tanpa Thumbnail di Bawah Postingan

Jadi, penggunaan sitemap atau daftar ini di blog sangatlah penting, semakin banyak blog anda di crawl/dijelajahi, maka semakin banyak pula page views yang dihasilkan setiap harinya.

Cara Pasang Widget Daftar Isi di Blog

Alangkah baiknya widget ini diletakkan pada laman statis, dengan cara masuk ke dashboard blog anda, lalu klik Laman > Laman baru. Kemudian tulis judul laman suka-suka anda, dan klik ��vlog�ٷ��, pastekan kode di bawah ini di dalamnya.

<div class="sitemap-widget sitemap-tag-new sitemap">

<script src="https://cdn.jsdelivr.net/gh/bungfrangki/bloggerSitemap@main/daftarisi.js"></script><script src="/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Ganti url www.bungfrangki.com pada kode di atas dengan url blog Anda.

Untuk memperbaiki tampilannya, silahkan tambahkan CSS berikut ini:


.sitemap{
  display:block;
  font-family:var(--body-font,BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif)
}
.sitemap-widget{
  max-height:525px;
  overflow:auto;
}
.sitemap p a{
  background-color:rgba(0,0,0,.055);
  color:var(--accent,#0277d4);
  font-weight:700;
  display:block;
  padding:5px 10px;
  text-decoration:none;
}
.sitemap p a:hover{
  background-color:var(--accent,#0277d4);
  color:#fff;
}
.sitema a{
  transition: .3s ease-in;
}
.sitemap ol li a {
  text-decoration:none;
  color:var(--link-color,#182257)
}
.sitemap ol li a:hover {
  color:var(--hover-color,#0277d4)
}
.sitemap ol li:not(:first-child){
  padding-top:8px;
}
.sitemap ol li:not(:last-child) {
  border-bottom:1px solid rgba(0,0,0,.055);
  padding-bottom:8px;
}

Hasilnya silahkan lihat langsung pada link berikut:

JSFiddle CodePen

Penutup

Demikian cara Membuat Sitemap dengan Tag NEW Pada Label yang Mendapat Artikel Baru, selamat mencoba.

Menggunakan Post Labels Sebagai Meta Data Keywords dan Property article:tag

noreply@blogger.com (Bungfrangki) — Sat, 24 Sep 2022 04:41:00 +0000

Setelah beres dengan urusan 'migrasi' ke Schema Markup BlogPosting, saya mencari-cari apalagi yang sekiranya bisa dioptimasi di platform Blogger atau Blogspot ini. Akhirnya ketemu 2 hal yang cukup penting tapi tidak begitu krusial untuk ditambahkan di blog masing-masing.

Yakni, menjadikan Post Labels atau Entri Label sebagai Meta Data Keywords dan Property article:tag sebagaimana yang seringkali kita lihat pada meta data website platform WordPress, terutama pengguna plugin SEO Rank Math.

Sayangnya, untuk Blogger kita tidak bisa menambahkan kedua keta data tersebut di dalam <head>. Kita hanya bisa melatakkanya di dalam <b:widget type='Blog' ...>. Sama dengan JSON LD untuk schema markup BlogPosting, juga lebih maksimal ditempatkan di dalam widget type Blog.

Namun tidak menjadi masalah, yang penting bisa diterapkan dan terbaca dengan jelas oleh browser dan mesin penelusuran, yang kita kenal dengan istilah sers enjin.

Contoh outputnya sebagai berikut:

Cara Membuat Post Labels Menjadi Meta Keywords dan Property article:tag

Untuk menambahkan label postingan sebagai meta keywords dan property article:tag, silahkan ikuti langkah-langkah berikut:

Cari kode <b:includable id='postBodySnippet' var='post'> atau <b:includable id='postCommentsAndAd' var='post'> lalu letakkan kode berikut ini di bawahnya.

<b:if cond='data:view.isPost'>
  &lt;meta content=&quot;<data:blog.pageName/>, <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='not data:label.isLast'>, </b:if></b:loop>&quot; name=&#39;keywords&#39;/&gt;
   <b:loop values='data:post.labels' var='label'>
  <meta expr:content='data:label.name' property='article:tag'/>
   </b:loop>
</b:if>

Klik tombol Save Template untuk menyimpan.

Adapun kode untuk meta data keyword dan property article:tag yang diambil dari label postingan tersebut di atas, hanya akan muncul pada halaman Postingan saja.

Bila sebelumnya Anda telah menambahkan meta keyword di <head>, maka edit kembali tag conditional (tag kondisi) di meta Keywords itu kurang lebih seperti ini:

<b:if cond='data:view.isMultipleItems'>
<meta content='keyword anda disini, dipisahkan dengan koma' name='keywords'/>
<b:elseif cond='data:view.isSingleItem'/>
</b:if>

Atau seperti ini:

<b:if cond='data:view.isMultipleItems'>
<meta content='keyword anda disini, dipisahkan dengan koma' name='keywords'/>
<b:elseif cond='data:view.isPost'/>
</b:if>

Lalu simpan kembali tema Anda.

Schema Markup BlogPosting

noreply@blogger.com (Bungfrangki) — Thu, 08 Sep 2022 03:19:00 +0000

Baru-baru ini saya mengubah Schema Markup dan Structured Data blog ini dari Article (https://developers.google.com/search/docs/advanced/structured-data/article) menjadi type BlogPosting (https://schema.org/BlogPosting), dalam format Json-LD, dengan menghapus Microdata bawaan Blogger.

Mengapa menggunakan format JSON-LD? Karena (saat ini) itu yang direkomendasikan oleh Google Developer (https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data?hl=id). Lagipula format ini yang (menurut saya) paling mudah digunakan, tidak ribet bila ingin mengganti type atau menambahkan atau menghilangkan item lainnya sewaktu-waktu. Dibanding dengan penerapan Microdata yang menempel pada konten ��vlog�ٷ��.

Mengapa memutuskan mengganti (lagi) Schema dan Stuctured Data menjadi schema BlogPosting markup? Secara garis beasr BlogPosting markup kurang lebih sama dengan Article markup. Namun bagi saya schema BlogPosting markup lebih cocok dipasang di platform Blogger / blogspot dengan jenis konten seperti di bungfrangki.com ini.

Schema BlogPosting Markup

Berikut format JSON-LD untuk schema BlogPosting markup:

<script type='application/ld+json'>{
  &quot;@context&quot;: &quot;http://schema.org&quot;,
  &quot;@type&quot;: &quot;BlogPosting&quot;,
  &quot;inLanguage&quot;: &quot;id-ID&quot;,
  &quot;headline&quot;: &quot;<data:post.title.escaped/>&quot;,&quot;description&quot;: &quot;<b:eval expr='snippet(data:post.snippets.long, { length: 250 })'/>&quot;,&quot;articleBody&quot;: &quot;<b:eval expr='snippet(data:post.body,{ length: 1500, ellipsis: false, links: false, linebreaks: false }).escaped'/>&quot;,&quot;keywords&quot;: &quot; <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='not data:label.isLast'>, </b:if></b:loop>&quot;,&quot;datePublished&quot;: &quot;<data:post.date.iso8601/>&quot;,
  &quot;dateModified&quot;: &quot;<data:post.lastUpdated.iso8601/>&quot;,&quot;image&quot;: {
    &quot;@type&quot;: &quot;ImageObject&quot;,&quot;url&quot;: &quot;<b:if cond='data:blog.postImageUrl'><b:eval expr='resizeImage(data:blog.postImageUrl, 1200, &quot;1200:675&quot;)'/><b:else/>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3tD567IoedA3NwEVbZcM19L2F-KcKyEPxVCDTerIzTsaNitzL-BeNE-4u8NMKoL_3vblOAAjXjU5WQPLdYhHR0YJ3u2aB3CsyYaKz3fVDGHOzoZXMffVbaZBCcEU-82ViR3IgMfoz0U/w810-c-h456/no-thumbnail_810.png</b:if>&quot;,
    &quot;height&quot;: 675,
    &quot;mainEntityOfPage&quot;: {
    &quot;@type&quot;: &quot;WebPage&quot;,
    &quot;@id&quot;: &quot;<data:post.url.escaped/>&quot;,
    &quot;name&quot;: &quot;<data:post.title.escaped/>&quot;
  },
    &quot;width&quot;: 1200},&quot;publisher&quot;: {
    &quot;@type&quot;: &quot;Organization&quot;,
    &quot;name&quot;: &quot;<data:blog.title.escaped/>&quot;,
    &quot;logo&quot;: {
      &quot;@type&quot;: &quot;ImageObject&quot;,
      &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDD9EBEvSMbaRLfRXQZEvmAfPIyHHceV-LiE8BgTTlyCOemMNOY3Zw78RF7a4oKTNVIvyVcf3g6K3_NgGfxFf82IHIGGh-q1HNXKBS-uoGh7_AMSgJBvToNsZMmF8CZRuZRMG_LisahJY/s1600/logo.png&quot;,
      &quot;width&quot;: 600,
      &quot;height&quot;: 133
    }
  },<b:if cond='data:post.author.aboutMe or data:post.author.authorPhoto.image'>&quot;author&quot;: {
    &quot;@type&quot;: &quot;Person&quot;,
    &quot;name&quot;: &quot;<data:post.author.name/>&quot;,
    &quot;url&quot;: &quot;<b:if cond='data:post.author.profileUrl'><data:post.author.profileUrl/></b:if>&quot;</b:if>
  }
}</script>

Masalah articleBody

Pada articleBody menggunakan <b:eval expr='snippet(data:post.body,{ length: 1500, ellipsis: false, links: false, linebreaks: false }).escaped'/> (yang sebetulnya outputnya juga sama persis dengan <data:post.longSnippet/>) alih alih menggunakan <data:post.body/>, karena ternyata outputnya dalam ��vlog�ٷ��, bukan cuma text di post body.

Sehingga, bila dalam postingan mengandung unsur kode tertentu, seperti tanda petik (") atu (') maka dianggap sebagai penutup dari elemen articleBody dalan JSON-LD itu. Hal ini akan memicu munculnya error pada Google Search Console atau Google Webmaster.

Sebetulnya articleBody ini outputnya mesti berisi seluruh aktualisasi paragraf di post body (dalam teks tanpa line break). Hanya saja hal tersebut tidak dapat diterapkan secara maksimal, karena hanya memicu terjadinya error di GSC. Solusi terbaiknya adalah, tetap menggunakan dengan format long snippet atau tidak menggunakannya sama sekali.

Maka saya memilih menggunakan long snippet saja.

Pengujian di Rich Results Test

Dari format Schema BlogPosting Markup di atas, maka hasil Rich Results Test atau Pengujian Hasil Kaya akan nampak seperti gambar berikut:

Penutup

Demikian ulasan tentang Schema BlogPosting Markup kali ini, bila ada masukkan atau saran tentang ini. Mari berdiskusi lewat kolom komentar. Terima kasih sudah menyimak.

10 Bidang Pekerjaan Menarik Untuk Kamu yang Masih Muda

noreply@blogger.com (Bungfrangki) — Thu, 08 Sep 2022 00:53:00 +0000

Ketika kamu masih muda, dunia tampaknya dipenuhi dengan peluang kerja yang menarik dan tak ada habisnya, dan dalam banyak kasus, kesan ini memang benar. Energi dan antusiasme kaum muda, serta kebebasan relatif yang menyertainya, membuatnya lebih mudah untuk melakukan peran atau proyek baru tanpa memberinya banyak pemikiran, dan dengan peluang yang layak untuk menjadi hebat di dalamnya.

Namun, keragaman yang tak terbatas dan banyaknya lowongan dapat dengan cepat menjadi luar biasa atau membingungkan, bahkan mengarah pada kecemasan dan keragu-raguan. Pencarian lowongan kerja untuk mahasiswa di Jooble Indonesia menghasilkan lebih dari 2 ribu lowongan. Ini banyak yang harus dipikirkan dan dipilah-pilah, bahkan untuk kandidat yang lebih berpengalaman.

10 Bidang Pekerjaan dengan Penghasilan dan Jenjang Karir yang Menarik untuk Pemuda

Jadi bagaimana kamu bisa tahu, peluang kerja dan industri mana yang tepat untuk kamu? Selanjutnya, mana yang lebih mungkin memberi kamu penghasilan yang layak dan memberdayakan pertumbuhan karier kamu di masa depan? Dengan mengingat pertanyaan-pertanyaan penting ini, kami telah membuat daftar berikut dengan jenis peluang kerja terbaik untuk kaum muda:

Volunteer work atau pekerjaan sukarela. Kesukarelawanan tentu memiliki kelebihan. kamu dapat memilih hampir semua industri atau jenis bisnis, dan kamu pasti akan menemukan pekerjaan sukarela yang terkait dengan bidang yang kamu inginkan. Tetapi meskipun ini adalah cara yang bagus untuk mendapatkan pengalaman secara gratis dan membangun koneksi di komunitas, kelemahan utama dari pekerjaan sukarela adalah tidak memberi kamu penghasilan.
Sektor ini telah menjadi pilihan tradisional bagi kaum muda untuk beberapa waktu sekarang, sebagian besar berkat aksesibilitas dan persyaratan perekrutan yang relatif rendah. Peran pekerjaan populer termasuk asisten penjualan, konsultan penjualan, dan rekan penjualan. Harap diingat, bahwa pekerjaan entry-level di ritel adalah pekerjaan dengan bayaran terendah dari daftar ini. Namun, jika kamu memilih sub-kategori ritel yang sangat kamu sukai, pelajari produk kamu dengan baik dan bekerja keras dalam hubungan tamu, kemungkinan besar nanti, kamu akan mulai dipromosikan dan menaiki tangga karier, mencapai peran manajemen lebih cepat dari pada industri lainnya.
Pekerja Pemeliharaan / Teknisi. Meskipun jenis pekerjaan ini lebih sulit dan lebih menuntut secara fisik, biasanya bayarannya lebih baik dan jam kerjanya lebih sedikit. Jika kamu cenderung lebih tertarik pada hal-hal dan tidak terlalu menikmati komunikasi dengan orang-orang, maka peran teknis sangat cocok untuk kamu. Pengalaman yang kamu dapatkan akan membantu kamu menjadi lebih mandiri dalam hidup.
Pekerjaan di HoReCa (Hotel, Restaurant, Cafe) terkenal menarik bagi kaum muda. Posisi entry-level di perhotelan tidak memerlukan banyak pengalaman sebelumnya, karena karyawan baru biasanya mendapatkan in-house training. Plus, sebagian besar perusahaan menyediakan seragam, peralatan, makanan, diskon, dan insentif lainnya. Terlepas dari peran kamu yang sebenarnya, resepsionis, pelayan, porter, dll., pekerjaan di industri ini akan membantu kamu mempelajari tentang layanan tamu dan, yang paling penting, hubungan tamu. Sisi negatifnya, pekerjaan di HoReCa cenderung memiliki jam kerja yang lebih panjang dan gaji yang lebih rendah (karena kamu diharapkan mendapatkan tip).
E-Commerce adalah industri yang berkembang pesat yang menghasilkan jutaan pekerjaan di seluruh dunia. Sama seperti perhotelan, masuk ke e-commerce relatif mudah, berkat beragam peran mulai dari dari pekerja gudang hingga agen pengiriman hingga spesialis layanan pelanggan. Tidak peduli latar belakang atau keahlian kamu, e-commerce memiliki pekerjaan untuk kamu, sementara platform e-commerce yang sukses juga menawarkan gaji yang besar.
Fakta bahwa industri ini menarik bagi kaum muda tidak perlu dijelaskan. Kaum muda ingin bersenang-senang, sambil menghasilkan uang juga. Variasi pekerjaan itu sendiri, tidak memberi kebosanan, yakni artis, pembawa acara, MC, spesialis audio/video, penulis, pengiklan – sebut saja. Namun selain menyenangkan, industri ini dikenal kurang stabil dan tidak dapat diprediksi, yang dapat membuat perencanaan dan pengembangan karir cukup menantang.
Meskipun pekerjaan di bidang pendidikan mungkin tampak kurang dihargai, itu akan terbayar dengan peluang untuk membangun karier yang sukses. kamu dapat memulai dengan perlahan, dengan pembinaan atau pelatihan, kemudian mengerjakan resume yang kuat dan mendidik diri kamu sendiri untuk menjadi instruktur yang sangat terspesialisasi, atau bahkan mungkin profesor perguruan tinggi!
Meskipun sains bukanlah pilihan yang paling jelas bagi kaum muda yang mencari pekerjaan, bersabarlah. Ya, akan ada gaji yang lebih rendah dan jam kerja yang lebih lama di awal. Tetapi setelah beberapa tahun kerja keras, investasi akan mulai membuahkan hasil. Ilmuwan adalah salah satu orang yang paling dihormati di planet ini, yang berkontribusi pada kemajuan umat manusia setiap hari, apa yang bisa lebih bergengsi dan bermanfaat? Ilmu pengetahuan modern memiliki ribuan domain dan kategori. kamu pasti akan menemukan sesuatu yang membuat kamu antusias.
Selama ada orang yang hidup di planet ini, permintaan akan perawatan kesehatan juga akan ada. Jika kamu memutuskan untuk menjadi profesional perawatan kesehatan, kamu akan selalu mendapatkan pekerjaan dengan cepat, di mana pun di dunia. Di sebagian besar negara, petugas kesehatan memiliki tingkat pendapatan menengah atau tinggi. Pekerjaan untuk pemula termasuk asisten, teknisi, perawat dan konsultan. Plus, gaji dari pekerjaan pertama kamu akan membantu kamu membayar sekolah kedokteran, yang hampir wajib jika kamu berencana mengembangkan karir kamu di bidang perawatan kesehatan.
IT tentu saja merupakan industri yang banyak diminati oleh kaum muda. Perkembangan IT yang serba cepat memerlukan pendapatan yang cukup besar dan keamanan kerja yang sangat baik. Spesialis IT yang hebat tidak akan pernah menemukan diri mereka hidup tanpa pekerjaan. Pekerjaan entry-level tradisional di sektor ini termasuk teknisi IT, pengembang web, teknisi help desk, dan administrator sistem.

10 Kesalahan Umum Saat Membuat Website

noreply@blogger.com (Bungfrangki) — Fri, 08 Oct 2021 02:17:00 +0000

Kesalahan Saat Membuat Website yang Harus Dikenali

Berencana untuk membuat atau mengunggah website agar bisa diakses di internet? Sebelum itu, di sini kami akan coba jelaskan terlebih dahulu beberapa kesalahan-kesalahan umum dalam pembuatan website.

Tujuan informasi yang kami jelaskan di sini yaitu agar website Anda lebih optimal. Nah, sebelum upload website, silahkan Anda simak beberapa kesalahan umum pembuatan website yang sudah kami rangkum berikut ini:

1. Mengaktifkan Menu “Open New Windows”

Sebagai informasi, menu “Open New Windows” merupakan menu yang pada saat kita klik navigasi tertentu, maka akan terbuka halaman di tab baru.

Contoh, saat kita klik menu “Blog” pada website, maka halaman menu “Blog” tersebut akan terbuka di tab baru.

Sebenarnya menu ini akan sangat membantu, namun hanya pada kondisi-kondisi tertentu. Jika Anda ingin mengaktifkannya, maka sebaiknya jangan terlalu sering. Sesuaikan saja dengan kebutuhan.

Jika terlalu sering, pengunjung website Anda akan merasa malas untuk mengakses website Anda. Hal tersebut bahkan tidak bagus untuk bounce rate pada website yang Anda bangun.

2. Tidak Mengaktifkan Tombol Kembali

Pada sebuah website, tombol kembali memiliki peranan yang sangat penting. Tombol tersebut bahkan dapat memberikan kenyaman ekstra bagi para pengunjung. Akan tetapi, tidak sedikit website yang mematikan tombol tersebut.

Ketika tombol ini dimatikan, maka pengunjung tidak bisa kembali ke halaman sebelumnya. Contohnya saat pengunjung mengakses suatu halaman di website Anda, kemudian mereka akan langsung diarahkan ke halaman tersebut. Namun, mereka tidak bisa kembali ke halaman sebelumnya.

Fungsi dari tombol kembali ini cukup penting pada suatu website. Maka dari itu, sebaiknya Anda tidak mematikan tombol yang satu ini untuk kenyamanan para pengunjung.

3. Tidak Memperhatikan Broken Link

Gangguan yang terjadi pada website yang mengakibatkan halaman tidak bisa diakses adalah masalah umum yang sering terjadi. Contohnya halaman yang muncul kode error “404 error pages”

Kode tersebut muncul akibat broken link pada halaman website. Hal ini akan sangat mengganggu bagi para pemilik website maupun orang yang ingin mengakses halaman situs Anda.

Maka dari itu, Anda harus memastikan bahwa website Anda berjalan dengan baik. Jika ada fungsi yang tidak berjalan, maka sebaiknya sertakan sebuah halaman broken link yang menarik dan informasikan bahwa Anda akan segera memperbaikinya.

Buatlah gambar broken link yang juga meminta pengunjung untuk menginformasikannya kepada Anda jika ada kode 404. Dengan begitu, Anda bisa mengetahui jika ada gangguan broken link pada website Anda.

4. Desain Website yang Lambat

Desain yang bagus dan menarik akan membuat pengunjung tertarik untuk mengakses website Anda. Desain yang indah umumnya punya banyak elemen yang membuat website menjadi tampak lebih meriah.

Akan tetapi, terlalu banyak elemen pada desain terkadang tidak bagus untuk kecepatan website Anda. Karena semakin banyak menggunakan elemen, maka desain tersebut akan membuat website menjadi lambat.

Loading page yang lambat akan membuat pengunjung malas mengaksesnya. Hal ini tentu tidak bagus untuk kelangsungan situs yang Anda miliki. Pasalnya, pengunjung yang menutup kembali website Anda akan berakibat buruk pada bounce rate Google.

5. Tidak Mencantumkan Contact Person

Selain desain dan konten pada website, Anda juga harus memperhatikan contact person. Cantumkanlah contact person Anda sebagai informasi kontak agar pengunjung mudah menghubungi Anda.

Contact person sangat diperlukan, terlebih jika website Anda digunakan untuk tujuan bisnis. Bahkan bagi blogger pun contact person ini sangat dibutuhkan sekali. Tujuannya tentu saja agar pengunjung mudah menghubungi Anda.

Informasi kontak bisa berupa nomor telepon maupun email. Anda juga bisa mencantumkan alamat rumah Anda sendiri untuk memberikan informasi kontak yang lengkap dan juga jelas.

6. Malas Update Konten

Bagi website, konten adalah raja. Contohnya seperti konten artikel. Konten ini sangat dibutuhkan sekali agar website tetap aktif dan mudah ditemukan di Google. Konten juga akan membantu website Anda terus mengalami perkembangan.

Konten artikel juga sangat penting untuk optimasi SEO (Search Engine Optimization). Tanpa artikel, maka website Anda akan sulit sekali ditemukan oleh para pengunjung di mesin pencari.

7. Sistem Navigasi Website yang Jelek

Situs Anda nantinya akan Anda gunakan untuk menyampaikan berbagai informasi penting. Itulah yang menjadi salah satu alasan, kenapa sistem navigasi sangat diperlukan pada sebuah website.

Sistem navigasi akan membantu pengunjung untuk menemukan informasi penting yang ada pada website Anda. Maka dari itu, setelah Anda upload website maka langsung perhatikan sistem navigasi pada website.

Pastikan sistem navigasi yang Anda buat mampu memberikan kenyamanan bagi para pengunjung saat mengakses website Anda.

8. Terlalu Banyak Menggunakan Jenis Font dan Warna

Perlu Anda ketahui, font pada website memiliki fungsi yang tergolong penting. Anda tidak boleh sembarangan dalam memilihnya. Begitu juga saat menggunakannya. Pastikan Anda tidak menggunakan banyak jenis font dan juga tidak memilih font yang aneh.

Selain itu, hindari juga terlalu banyak menggunakan warna pada tampilan website Anda. Pilihlah jenis website yang minimalis dan juga tidak terlalu ramai dari sisi warna. Begitu juga dalam pemilihan font yang sejatinya memilih font yang umum digunakan saja.

9. Sulit Kembali ke Menu “Home”

Menu “Home” juga merupakan salah satu menu navigasi. Menu tersebut merupakan tampilan halaman utama website Anda. Pada halaman website utama biasanya ada banyak informasi konten dan juga menu yang Anda tawarkan kepada customer.

Tombol “Home” sangat diperlukan sekali agar pengunjung dapat dengan mudah mengakses menu halaman utama. Maka dari itu, jangan hilangkan fitur ini di dalam website yang akan Anda buat.

Tidak adanya tombol “Home” pada website Anda, berarti tidak ada navigasi untuk kembali ke halaman utama. Hal ini akan membuat pengunjung tidak nyaman dan meninggalkan website Anda.

10. Tidak Memasang Fitur Share ke Media Sosial

Fitur untuk membagikan konten website pada media sosial akan membantu halaman tersebut dibagikan ke orang lain. Fitur ini biasanya terdapat di bawah konten atau artikel. Fitur share media sosial ini pun sudah sangat lengkap, mulai dari Facebook, Instagram, hingga Twitter.

Maka dari itu, pastikan website Anda menggunakan tombol share media sosial ini pada website. Tujuannya agar pengunjung dan pembaca yang tertarik mau membagikan konten yang Anda buat di media sosial milik mereka.

Dengan begitu, konten atau halaman website Anda berpotensi untuk diakses oleh banyak pengunjung.

Kesimpulan

Ada banyak menu yang sangat penting di dalam sebuah website. Di atas kami jelaskan menu-menu tersebut agar Anda memperhatikannya. Selain itu, update konten juga sangat penting bagi sebuah website. Dengan begitu, website Anda akan semakin optimal.

Sudah berencana untuk mengunggah website? Yuk, kenali terlebih dahulu apa saja hal yang harus Anda perhatikan saat membangun website. Pastikan semua optimasi di atas Anda ikuti agar website Anda memiliki traffic yang baik. Selamat mencoba.

Tips Memilih Hotel Mewah Di Jakarta

noreply@blogger.com (Bungfrangki) — Thu, 23 Sep 2021 07:12:00 +0000

Sumber : pixabay.com

Jakarta sebagai ibukota Indonesia dan juga kota metropolitan nomor satu di Indonesia punya akomodasi yang lengkap. Salah satunya dengan adanya hotel mewah di Jakarta yang beragam.

Pemilihan hotel dengan fasilitas yang mewah dan lengkap tentu saja sangat menarik. Terutama yang memang menyukai menginap atau bermalam di hotel saat liburan ke Jakarta atau pun urusan bisnis. Namun dalam memilih hotel, perlu beberapa tips penting agar mendapatkan yang terbaik.

Memilih Hotel Mewah Di Jakarta

Ada berbagai pilihan hotel mewah di Jakarta untuk kamu sekedar menginap atau staycation. Namun sebelum itu, untuk memilih hotel kamu perlu mengikuti tips berikut ini.

1. Pilih Hotel Dengan View Mempesona

Ketika ingin menginap di hotel di ibu kota, ada berbagai pilihan hotel terbaik di Jakarta dengan view yang mempesona dari ketinggian. Terutama saat malam hari, bisa melihat indahnya gedung-gedung tinggi yang sangat estetik jika diabadikan dalam video ataupun foto.

Untuk yang menyukai kegiatan staycation, pemilihan hotel dengan pemandangan dari ketinggian ini tentu saja sangat membuat kamu betah. Apalagi jika ingin berlama-lama dikamar saat malam hari, sambil melihat view kota Jakarta yang indah.

2. Berbintang 5

Untuk pilihan hotel mewah yang ada di Jakarta, maka kamu bisa cari hotel berbintang 5. Meskipun harganya mahal namun sepadan dengan fasilitas dan juga pelayanan yang diberikan oleh hotel berbintang 5. Ada beberapa pilihan hotel bintang 5 untuk daerah Jakarta yang bisa jadi pilihan.

Misalnya Harris Vertu Hotel Harmoni, Hotel Gran Mahakam, Raffles Jakarta, The Hermitage, Mandarin Oriental Jakarta, Le Meridien, The Ritz-Carlton Jakarta dan masih banyak lagi.

Rekomendasi hotel di atas adalah hotel-hotel bintang 5 terbaik pilihan dari Traveloka. Rata-rata hotel tersebut memiliki rating 8 dari Traveloka. Sementara untuk harga hotel di sendiri mulai dari 800 ribuan saja.

3. Fasilitas Yang Ditawarkan

Hotel mewah biasanya memberikan fasilitas yang beragam kepada para tamu yang menginap. Sebisa mungkin, memilih hotel dengan banyak fasilitas yang bisa mendukung liburan kamu jadi semakin menarik. Misalnya dengan adanya kolam renang.

Kolam renang menjadi salah satu fasilitas wajib yang harus ada saat kamu menginap di hotel. Terlebih, jika ada fasilitas paket floating breakfast. Kamu bisa menikmati sarapan di kolam renang sambil berfoto aesthetic untuk konten di Instagram.

Atau pilih hotel dengan pilihan kolam renang pribadi yang lebih aman di masa pandemi. Namun biasanya fasilitas pribadi seperti ini harganya akan jauh lebih mahal. Selain adanya kolam renang, hotel harus memiliki berbagai fasilitas pendukung seperti layanan spa dan pijat, pusat kebugaran, layanan resepsionis 24 jam dan masih banyak lagi.

4. Pilih Hotel Yang Dekat Dengan Fasilitas Publik

Selain fasilitas hotel yang perlu diperhatikan, kamu juga wajib mencari hotel di Jakarta yang dekat dengan fasilitas publik. Hal ini memudahkan kamu ketika ingin shopping ke pusat perbelanjaan.

Terlebih jika ada hotel di Jakarta yang dekat dengan beberapa mall sekaligus, malah hal ini semakin bagus. Jadi kamu tidak akan membutuhkan biaya transportasi lagi untuk ke mall. Bahkan tinggal jalan kaki saja, sudah bisa sampai.

5. Jangan Lupa Cek Promo

Karena biasanya hotel mewah yang ada di Jakarta memberikan tarif permalam dengan harga mahal, Jangan lupa untuk selalu cek promo.

Mengecek promo terbaik bisa kamu lakukan pada situs booking hotel salah satunya Traveloka. Di Traveloka biasanya rutin memberikan diskon dan promo menarik untuk kamu yang akan booking hotel.

Pastinya ikuti syarat dan ketentuan yang berlaku agar kamu bisa mendapatkan harga lebih murah untuk booking hotel mewah yang ada di Jakarta. Jadi dengan adanya promo-promo menarik ini, menginap di hotel mahal bukan lagi impian.

Akhir Kata

Kini tentu kamu sudah tahu beberapa tips dalam memilih hotel mewah di Jakarta, saat akan liburan ataupun ketika memiliki urusan bisnis di ibukota. Untuk rekomendasi hotel-hotel terbaik yang ada di Jakarta kamu bisa menggunakan situs booking hotel seperti Traveloka.

Di Traveloka terdapat banyak rekomendasi hotel yang bisa disesuaikan dengan budget. Kunjungi Traveloka sekarang juga.

Cara KPI Software Mengukur Kinerja Karyawan

noreply@blogger.com (Bungfrangki) — Fri, 30 Jul 2021 10:59:00 +0000

Kinerja karyawan adalah salah satu faktor penting bagi perkembangan bisnis perusahaan. Maka dari itu, HRD selaku divisi yang bertanggung jawab untuk mengelola kinerja karyawan melakukan berbagai cara untuk mengembangkan kinerja karyawan lebih optimal. Salah satunya melalui KPI Software.

KPI atau kepanjangannya adalah Key Performance Indicator adalah sebuah parameter yang digunakan untuk mengukur atau meninjau seberapa jauh perkembangan suatu hal terhadap tujuan yang sudah ditetapkan perusahaan.

Bisa dikatakan KPI Software adalah salah satu cara modern untuk mengukur bagaimana perkembangan kinerja karyawan melalui teknologi.

Lantas, bagaimana sih cara kerja KPI Software tersebut?

Cara Kerja KPI Software

Sebenarnya, cara kerja KPI software cukup sederhana. HR admin terlebih dahulu akan menentukan parameter dari setiap divisi atau individu terkait pekerjaannya. Lalu, progress kinerja perusahaan juga akan terdeteksi secara otomatis melalui software.

Nantinya, manajer dan HRD dapat membandingkan antara kinerja tersebut dengan parameter yang sudah ditetapkan. Perbandingan data kinerja dan parameter yang sudah ditetapkan bersifat realtime, maka kinerja karyawan dapat terpantau saat itu juga.

Selain itu, HRD juga dapat memproses laporan kinerja karyawan secara otomatis menggunakan KPI Software. Tidak perlu lagi menggunakan cara manual untuk merekap dan memproses hasil kinerja karyawan.

Keuntungan Menggunakan KPI Software

Jika dilihat dari penjelasan di atas, salah satu keuntungan dari KPI Software adalah mampu memproses data dan informasi kinerja karyawan menjadi laporan secara otomatis. Namun, ada keuntungan lain bila perusahaan memilih menggunakan KPI Software:

Menyimpan Informasi Lebih Sistematis

Biasanya, HRD akan kesulitan untuk memproses dan menyimpan informasi terkait kinerja karyawan dan pekerjaannya. Berkat adanya KPI Software, semua informasi dapat disimpan secara sistematis dalam satu pusat. Kemudahan ini juga akan membantu HRD dalam mengakses serta mencari informasi kinerja karyawan jika sewaktu-waktu dibutuhkan.

Aman dan Rahasia

Keamanan dan kerahasiaan data tentu menjadi aspek penting dalam pengelolaan karyawan. Tak jarang dijumpai berbagai kasus penyalahgunaan karyawan ketika data dan informasi tersebut jatuh ke oknum yang tidak bertanggungjawab. Untuk mengatasinya, KPI Software didukung cloud based server yang menjamin keamanan dan kerahasiaan data karyawan. Contoh KPI Software tersebut adalah software dari LinovHR.

Mudah Digunakan dan Fleksibel

Fleksibilitas tentu merupakan dambaan bagi para karyawan, tak terkecuali bagi HRD. KPI Software dapat membantu HRD dan manajer dalam memantau atau meninjau kinerja setiap karyawan karena software ini bisa digunakan di mana saja dan kapan saja.

Fitur dan tampilan yang tersedia di KPI Software pun umumnya cukup user friendly, membuat HRD tidak membutuhkan waktu lama dalam beradaptasi untuk menggunakan software.

Penutup

Demikianlah penjabaran singkat mengenai cara kerja KPI Software dan apa saja keunggulan utamanya. Bisa disimpulkan bahwa KPI Software merupakan salah satu sarana yang akan memaksimalkan pengelolaan karyawan di perusahaan. Jadi, tidak ada salahnya bila perusahaan Anda mulai beralih menggunakan KPI Software.

Inilah Cara Isi Saldo PayPal Dengan BCA, BNI, Mandiri, BRI Di ViaPayPal.id, Mudah, Cepat & Anti Ribet!

noreply@blogger.com (Bungfrangki) — Sat, 26 Jun 2021 22:29:00 +0000

Cara isi saldo PayPal - Seiring dengan semakin canggihnya teknologi saat ini, membuat segala hal menjadi lebih mudah dan cepat. Salah satunya seperti mengirimkan uang, saat ini anda tidak perlu lagi menggunakan jasa pos untuk mengirimkan uang. Terdapat beberapa layanan transaksi yang bisa anda pilih salah satunya yaitu melalui PayPal.

PayPal merupakan sebuah perusahaan dalam jaringan yang menawarkan jasa rekening online untuk mentransfer maupun menerima uang. Diantara sekian banyaknya rekening virtual yang saat ini tersedia, PayPal bisa dikatakan salah satu layanan yang paling mendominasi karena penggunanya dari tahun ke tahun terus naik.

Kini banyak sekali yang menggunakan PayPal untuk melakukan transaksi jual beli dan sebagainya. Apakah anda sudah memiliki akun PayPal? Dan sudahkan anda tahu bagaimana cara top up saldo PayPal? Banyak sekali yang memiliki akun PayPal namun mereka belum tahu bagaimana cara isi saldo PayPal bahkan masih bingung dimana bisa beli saldo PayPal.

Nah, dikarenakan masih banyak yang belum tahu, simak berikut cara isi saldo PayPal dengan BCA, BNI, Mandiri, BRI di ViaPayPal.id.

Mengapa Harus Isi Saldo PayPal Di ViaPayPal.id?

ViaPayPal.id merupakan sebuah situs jasa top up atau isi saldo PayPal balance. ViaPayPal.id juga tisa hanya melayani isi saldo PayPal saja melainkan juga menyediakan jasa pembayaran online dengan rate yang terjagkau, aman serta terpercaya.

Isi saldo PayPal di ViaPayPal.id merupakan salah satu keputusan terbaik yang anda lakukan. Hal ini tentu karena ViaPayPal.id selalu menjamin:

Transaksi Jual Beli Saldo PayPal Cepat Dan Mudah

ViaPayPal.id menggunakan akun PayPal bisnis yang sudah terverifikasi sejak tahun 2015 dan tentu saja sudah sangat berpengalaman dalam melayani berbagai transaksi online dalam negeri maupun luar negeri.

ViaPayPal.id menyediakan jual beli PayPal balance dengan pelayanan yang profesional dan ramah, rat terbaik serta cepat.

Cara Isi Saldo PayPal Tanpa Ribet!

Anda bisa melakukan top up saldo PayPal melalui semua bank lokal Indonesia seperti BCA, BNI, Mandiri, BRI baik itu via transfer dari ATM maupun mobile banking.

Free Biaya Admin

Pengisian saldo Paypal di ViaPayPal.id sudah pasti “Free Biaya Admin”. Anda tidak akan dikenakan biaya admin karena ViaPayPal.id menyediakan layanan free biaya admin atau bebas biaya admin untuk akun PayPal Indonesia.

Harga Bersaing

ViaPayPal.id memberkan harga saldo PayPal dengan rate kurs yang bisa bersaing dengan jasa lainnya sekaligus dari sumber saldo yang aman serta legal.

Layanan Terbaik

Admin ViaPayPay.id merupakan tim yang sangan profesional. Mereka akan selalu cepat tanggap dalam melayani semua calon pembeli saldo PayPal kapan saja.

Lalu, Bagaimana Cara Top Up PayPal Di ViaPayPal.id?

Nah bagi anda yang saat ini akan melakukan top up saldo Paypal di ViaPayPal.id tentu saja sangatlah mudah sekali dilakukan.

Berikut ini cara isi saldo PayPal dan bagaimana cara beli saldo Paypal di ViaPayPal.id:

Pertama, kunjungi website resmi ViaPayPal.id di https://viapaypal.id.
Sebelum beli saldo Paypal di ViaPalpay.id sebaiknya buka terlebih dahulu syarat dan ketentuan yang disediakan penyedia jasa Paypal terbaik tersebut agar tidak terjadi kesalahpahaman.
Jika anda sudah memahami syarat dan ketentuan yang ditetapkan. Untuk melanjutkan anda bisa klik “Beli Saldo PayPal Sekarang”. Maka secara otomatis anda akan langsung diarahkan ke halaman aplikasi whatsapps CS ViaPaypal.
Lakukanlah pemesan melalui chatting di whatsapp karena ViaPayPal.id hanya menerikan pesanan via whatsapp saja atau anda bisa menggunakan formulir order online yang tersedia di website.
Berkutnya beritatahu CS berapa nominal saldo uang akan anda ingin beli.
Tidak lama kemudian, CS akan memberi tahu berapa harga yang harus anda pesan. Anda juga perlu memberi tahu CS metode pembayaran yang akan anda pilih.
Setelah anda mengetahui harga dan nomor rekeningnya, lakukan pembayaran sesuai dengan metode pembayaran yang telah anda pilih.
Jika sudah selesai, anda hanya perlu menunggu sekitar kurang lebih 1 jam (namun bisa lebih cepat) hingga saldo masuk ke akun PayPal anda.
Apabila setelah 1 jam saldo tidak masuk, anda bisa langsung menghubungi CS kembali. Namun tentu hal ini akan sangat jarang sekali terjadi biasanya hanya butuh waktu 5 menit saja saldo sudah masuk.

Penutup

Nah itulah cara isi saldo PayPal dengan BCA, BNI, Mandiri, BRI di ViaPayPal.id. Sangat mudah bukan? Jadi anda tidak perlu bingung lagi mencari jasa yang menyediakan jual beli Paypal. Hanya cukup kunjungi situs resminya lalu klik beli maka permasalahan anda akan selesai. Selamat berbelanja!

Perbedaan Shared Hosting dan VPS, Mana yang Lebih Baik?

noreply@blogger.com (Bungfrangki) — Mon, 14 Jun 2021 08:01:00 +0000

Ketika hendak membuat sebuah website yang baru, mengetahui pilihan hosting website adalah hal yang cukup penting. Ya, dengan mengetahui jenis hosting website yang tersedia, nantinya Anda bisa memilih mana jenis hosting yang tepat dan sesuai dengan kebutuhan website Anda. Tentu, hosting yang tepat secara langsung akan berpengaruh pada kinerja website yang dikelola.

Berbincang tentang hosting website, dua jenis pilihan yang marak digunakan adalah beli shared hosting dan VPS. Keduanya dianggap memiliki fitur yang memadai untuk menghasilkan sebuah website dengan performa mengesankan. Nah, kali ini akan dibahas tentang perbedaan shared hosting dan VPS yang perlu diketahui.

Tentu, dengan mengetahui perbedaan kedua jenis hosting website tersebut, Anda akan memiliki pemahaman yang lebih baik diantara keduanya dan bisa memilih mana yang terbaik. Penasaran apa saja perbedaan dari shared hosting dan VPS? Simak ulasan selengkapnya!

Fakta Tentang Shared Hosting dan VPS

Sebelum mengecek beberapa hal terkait perbedaan dari shared hosting dan VPS, ada beberapa fakta menarik diantara keduanya yang tentu bisa menjadi patokan penilaian.

Fakta-fakta ini memberikan gambaran tentang bagaimana kedua jenis hosting tersebut bekerja dan digunakan.

Nah, adapun fakta mengenai shared hosting yang perlu diketahui adalah sebagai berikut:

Shared hosting merupakan jenis hosting paling murah yang tersedia
Dirancang untuk pemula yang baru mengenal dunia website dan teknologi yang berkaitan
Memiliki performa yang tepat untuk penggunaan pada website statis dengan lalu lintas traffic yang cenderung rendah
Tidak memiliki sumber daya khusus
Risiko keamanan hosting cenderung lebih tinggi
Situs yang digunakan untuk berbagi web server akan cenderung berpengaruh pada website yang dimiliki

Di sisi lain ada beberapa fakta terkait VPS yang juga harus dipahami dengan baik. Beberapa fakta terkait VPS diantaranya adalah sebagai berikut:

Hosting dengan kebutuhan pengetahuan teknis yang cenderung lebih besar
Cenderung lebih mahal dibandingkan dengan shared hosting
Dirancang secara khusus untuk website menengah yang sedang bertumbuh
Kontrol pada hosting cenderung lebih bisa disesuaikan
Cenderung lebih hemat jika dibandingkan dengan detail shared hosting, terutama dari segi kualitas.

Simak Juga: Mudahnya Membuat Website Ala DomaiNesia

Ragam Perbedaan Shared Hosting dan VPS dari Beberapa Sisi

Berbincang tentang perbedaan shared hosting dan VPS, ada beberapa poin yang bisa dijadikan penjelasan terkait perbedaan tersebut.

Tentu, dengan beberapa poin tersebut nantinya Anda akan memahami kedua hosting ini dengan lebih baik sebelum menentukan mana yang tepat untuk digunakan.

Adapun beberapa perbedaan tersebut ditinjau dari beberapa poin tertentu adalah sebagai berikut:

1) Alokasi sumber daya

Perbedaan antara shared hosting dan VPS bisa dilihat dari alokasi sumber daya. Dalam hal ini, jika Anda menggunakan shared hosting, maka Anda akan berbagi sumber daya dengan situs lain yang berbeda di server yang sama.

Jika salah satu website menggunakan banyak bandwidth, maka website lain akan terkena dampak berupa akses yang lambat.

Di sisi lain VPS cenderung lebih aman dalam hal sumber daya. Alasannya, pengguna akan memiliki lebih banyak sumber daya untuk digunakan.

Selain itu, setiap pengguna juga mendapatkan akses root yang akan memudahkan mereka untuk menambahkan file ataupun melakukan edit apapun di server untuk menjaga performa website.

2) Keamanan

Keamanan memang menjadi isu yang penting ketika membahas tentang hosting. Nah, lantas bagaimana detail shared hosting dan VPS ini jika dilihat dari sisi keamanan?

Sebenarnya, sebagian besar shared hosting memiliki keamanan yang cukup baik. Hanya saja, tidak ada jaminan yang mutlak untuk keamanan tersebut.

Perlu diingat, shared hosting berarti ada beberapa website dalam satu server. Nah, jika salah satu website melakukan kesalahan, tentu keamanan server tersebut bisa dikategorikan rentan.

Perihal keamanan, VPS memiliki nilai yang lebih baik. Hal ini dikarenakan setiap pengguna memiliki akses keamanan yang lebih luas untuk melakukan kontrol. Oleh karenanya, data yang tersimpan pada hosting dengan teknologi VPS akan cenderung lebih aman.

3) Performa

Anda tentu ingin memiliki website dengan performa yang maksimal, bukan? Oleh karenanya, memilih hosting yang tepat adalah hal yang perlu untuk dilakukan.

Telah disinggung sebelumnya bahwa ketika Anda menggunakan shared hosting, maka Anda akan berada di satu server yang sama dengan beberapa pengguna.

Oleh karenanya, akan terjadi semacam perebutan akses dalam server tersebut. Ketika salah satu website mendapatkan banyak traffic, bisa dipastikan jika website lain yang tergabung akan memiliki akses yang lambat.

Nah, jika Anda menggunakan VPS, hal di atas kemungkinan besar tidak akan terjadi. VPS memiliki teknologi yang bisa menangani gelombang traffic yang jauh lebih besar tanpa harus mengurangi kecepatan akses dan pemuatan informasi. Oleh karenanya, website Anda tentu akan tetap memiliki akses yang stabil dalam setiap penggunaannya.

Penutup

Itu dia perbedaan shared hosting dan VPS. Dari ulasan tersebut, bisa disimpulkan jika VPS cenderung lebih direkomendasikan dibandingkan dengan shared hosting.

Cara Custom Domain WordPress.com dengan Mudah

noreply@blogger.com (Bungfrangki) — Mon, 14 Jun 2021 07:13:00 +0000

WordPress merupakan salah satu platform yang digandrungi karena kemudahan dan -user-interface yang cukup simple. Selain itu, bagi Anda yang tidak suka ribet, maka WordPress menjadi pilihan terbaik karena menajemen situsnya yang mudah, jadi Anda tidak perlu khawatir mengenai pengelolaan teknis.

Namun, salah satu kelemahan yang dimiliki oleh platform ini adalah penggunaan subdomain sebagai alamatnya, sehingga nama terkesan terlalu panjang. Jadi, Anda perlu memahami cara custom domain WordPress.com supaya alamatnya bisa menjadi lebih singkat seperti domain yang digunakan pada platform lain.

Cara Custom Domain WordPress.com

Sebelum memulai langkah custom domain pada platform WordPress.com, Anda perlu mempersiapkan beberapa hal di bawah ini, seperti:

Membeli domain
Melakukan upgarde ke akun WordPress.com premium
Atur domain Anda
Ganti Nameserver.

Membeli Domain

Bagi Anda yang belum beli domain dan cek ketersediaan nama domain, maka langkah pertama yang harus dilakukan adalah membeli domain kepada layanan penyedia domain terbaik, yaitu DomaiNesia. Perlu Anda ketahui, memilih penyedia hosting tidak boleh asal-asalan, pastikan terlebih dahulu bahwa pihak penyedia berkualitas, terbaik dan dan memiliki rating yang bagus.

Nah, untuk membeli domain, maka Anda bida menerapkan tutorial di bawah ini:

Kunjungi website layanan penyedia hosting terbaik, misalnya DomaiNesia
Input nama domain yang Anda inginkan berikut ekstensinya. Selanjutnya pilih Cek Domain untuk memastikan nama yang diinginkan masih tersedia dan belum digunakan oleh pihak lain.
Apabila domain sudah dipastikan availabel, maka lanjutkan sesuai dengan petunjuk yang diberikan hingga penyelesaian pesanan dan pembayaran.

Jika Anda sudah memiliki domain, jangan lupa untuk memastikan bahwa domain tersebut masih aktiv dan siap untuk digunakan.

Upgrade Akun WordPress.com Premium

Langkah selanjutnya adalah upgarde akun ke WordPress.com premium, pasalnya untuk akun gratis tidak memiliki akses untuk mengganti subdomain menjadi lebih singkat. Adapun cara upgrade akun bisa dilakukan dengan:

Login akun WordPress.
Setelah berhasil masuk ke akun WordPress, pilih menu Plan pada sidebar Dashboard. Selanjutnya Anda akan dihadapkan pada beberapa pilihan member yaitu:
- Personal → Rp. 47.000 /bulan
- Premium→ Rp. 89.400 /bulan
- Business→ Rp. 298.000 /bulan
- eCommerce → Rp. 534.000 /bulan.
Jika Anda sudah memutuskan jenis akun premium yang pilih, lalu tap tombol Upgrade.
Kemudian Anda akan dibawa ke halaman baru, isi semua data yang dibutuhkan dan isi formulis kartu kredit ataupun debit yang ingin Anda gunakan sebagai pembelian akun premium. Setelah itu klik Pay pada bagian paling bawah jendela.

Atur Domain Anda

Untuk mengatur domain Anda, silahkan kembali ke Dashboard akun. Lalu pada menu sidebar pilih Manage lalu pilih Domains.
Pada bagian ini Anda akan disarankan untuk membeli domain dari pihak WordPress.com. Akan tetapi, karena Anda sudah memiliki domain aman scroll hingga ke bagian paling bawah dan pilih Use a domain I own.
Jika sudah berhasil sampai tahap ini, itu tandanya Anda akan semakin dekat ke domain WordPress yang lebih singkat. Nah, langkah selanjutnya adalah dengan memilih Map your domain pada halaman yang akan tampil berikutnya.
Sekarang Anda hanya perlu memasukkan nama domain yang diinginan pada kolom yang telah tersedia lalu tap Add untuk menyambukannya.

Mengganti Name Server

Setelah domain baru Anda sudah dihubungkan dengan situs yang Anda di WordPress.com, selanjutnya Anda juga harus mengganti name server supaya pengguna internet bisa mengakses website milik Anda melewati domain baru tersebut.

Adapun langkah-langkah yang perlu Anda lakuan untuk mengganti namse server yaitu:

1. Masuk Client Area Penyedia Hosting

Untuk mengganti name server, maka Anda perlu masuk terlebih dahulu ke client area dengan memasukkan username dan password yang tersedia.

2. Memilih Domains

Setelah berhasil masuk ke halam client area, silahkan klik menu Domains guna melakukan custom domain. Menu tersebut terletak pada sidebar. Selanjutnya cek list pada domain yang Anda pilih.

3. Lalu, pada halaman berikutnya tap Name Server, Anda akan menemukan empat field Name server dan kosongkan kolom tersebut dan ganti dengan name server berikut ini:

Ns1.wordpress.com
Ns2.wordpress.com
Ns3.wordpress.com

4. Jika sudah, kini Anda dapat memilih Update.

Akhir Kata

Cara custom domain WordPress.com cukup mudah, bukan? And for your info, lama waktu yang dibutuhkan untuk proses penyambungan dapat berlangsung hingga 72 jam atau 3 hari. Oleh sebab itu, Anda membutuhkan kesabaran yang ekstra hingga akhirnya domain tersebut dapat digunakan.

Meskipun WordPress.com menawarkan sederet kelebihan serta dapat melakukan custom pada domainnya, ternyata platform tersebut memilik kelemahan dalam hal badwidth dan storage. Jadi, kenali terlebih dahulu seluruh kelebihan dan kelemahannya ya!

Cara Mengganti Kolom Komentar Blogger ke Versi Terbaru (Contempo Skin)

noreply@blogger.com (Bungfrangki) — Fri, 05 Mar 2021 08:11:00 +0000

Kolom komentar Blogger terbaru ini disebut dengan Contempo Style atau Contempo Skin. Mengganti tampilan kolom komentar Blogger atau Blogspot ke veri terbaru ini sebetulnya sangat mudah.

Beberapa template di Themeindie.com yang sebelumnya menggunakan tampilan komentar versi lawas, kini telah diganti dengan tampilan komentar Blogger versi baru (Blogger v3).

Pada tutorial kali ini, saya akan coba tunjukkan langkah-langkah cara mengganti tampilan kolom komentar Blogger ke versi paling baru. Langkah tutorial juga dapat diikuti oleh siapapun yang hendak mengganti jenis komentar yang digunakannya. Baik itu pengguna komentar Facebook atau komentar Disqus yang hendak mengubahnya ke komentar Blogger versi terbaru.

Cara Mengubah Tampilan Komentar Blogger Versi Lama Menjadi Versi Baru

Berikut ini langkah-langkah cara mengubah tampilan komentar Blogger ke veri baru, biar tampilan kolom komentarnya macam komentar pada template Contempo, Soho, Emporio dan Notable.

Wajib menambahkan Variable Definitions

Untuk memulai pengerjaan, silahkan login ke Blogger, lalu buka Edit ��vlog�ٷ�� template yang ingin diubah tampilan komentarnya.

Langkah pertama yang wajib dilakukan adalah menambahkan beberapa baris Variable Definitons yang dibutuhkan.

Silahkan cari kode ]]></b:skin> lalu paste kode berikut ini di atasnya:

<!-- DO NOT Delete These Variable definitions -->
<Group description="Background, Font and Link Color for New Blogger Comment (Contempo Style)">
 <Variable name="body.background" description="Body Background" type="background" color="#F6F9FC" default="#F6F9FC none repeat scroll top left" value="#F6F9FC none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 15px 'Segoe UI', Roboto, sans-serif" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#2A2A2A" value="#2A2A2A"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="posts.background.color" description="2"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3"
  type="color"
  default="#0277D4" value="#0277D4"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#0277D4" value="#0277D4"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#2A2A2A" value="#2A2A2A"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="blog.title.color" description="7"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="tabs.color" description="10"
  type="color"
  default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 15px 'Segoe UI', Roboto, sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#2A2A2A"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="khaki"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="teal" value="teal"/>
</Group>

Mengganti semua kode `data:post.commentFormIframeSrc`

Temukan semua kode data:post.commentFormIframeSrc pada template, lalu ganti dengan kode komentar Blogger terbaru berikut ini:

data:post.commentFormIframeSrc appendParams {skin: "contempo"}

Untuk mempercepat pekerjaan, gunakan fitur Replace All dengan tekan tombol CTRL + Shift + R.

Sampai pada langkah Anda sudah bisa menyimpan perubahan pada template.

Bila kedua langkah di atas berhasil diterapkan tanpa kendala, maka dapat dipastikan tampilan kolom komentar Blogger sudah berganti menjadi kolom komnetar versi terbaru (Blogger v3).

Namun demikian, bila tidak ada perubahan pada tampilan kolom komentar, silahkan lanjutkan ke langkah berikut ini.

Memformat semua `b:includable` yang berkaitan dengan `comments`

Anggaplah format main section yang memuat widget Blog1 pada template Anda adalah seperti pada gambar berikut.

Pada gambar di atas terdapat sejumlah bari kode yang ditandai. Yaitu kode-kode `b:includable` dari komentar Blogger yang telah disusutkan. Daftarnya kurang-lebih seperti berikut ini:

<b:includable id='comment-form' var='post'>↔</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>↔</b:includable>
<b:includable id='comment_count_picker' var='post'>↔</b:includable>
<b:includable id='comment_picker' var='post'>↔</b:includable>
<b:includable id='comments' var='post'>↔</b:includable>
<b:includable id='iframe_comments' var='post'>↔</b:includable>
<b:includable id='threaded-comment-form' var='post'>↔</b:includable>
<b:includable id='threaded_comment_js' var='post'>↔</b:includable>
<b:includable id='threaded_comments' var='post'>↔</b:includable>

Silahkan hapus semua kode tersebut, lalu Simpan Template.

Setelah itu, Anda perlu refresh kembali halaman Edit ��vlog�ٷ��, dengan mengklik tombol F5 pada keyboard atau dengan mengklik ikon refresh pada browser.

Selanjutnya, lakukan kembali langkah 2 di atas.

Solusi bila halaman post menjadi blank atau komentar tidak muncul

Tidak perlu khawatir bila tiba-tiba halaman postingan menjadi blank, ataupun daftar dan kolom komentar tidak muncul.

Silahkan temukan kode <b:include data='post' name='post'/> lalu letakkan kode berikut ini di bawahnya:

    <!-- Comments -->
    <b:include cond='data:view.isSingleItem' data='post' name='comment_picker'/>

Atau, jika Anda pengguna template Blogger v3, gunakan kode berikut ini:

    <!-- Comments -->
    <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>

Sekarang simpan template, lalu lihat hasilnya.

Komentar sudah muncul dan tampilan kolom komentar sudah berubah jadi versi komentar Blogger terbaru, tetapi masih berantakan?

Berarti tinggal memperbaiki CSS-nya. Anda bisa menggunakan CSS berikut ini.

Menambahkan CSS komentar Blogger versi baru

Silahkan gunakan CSS berikut ini untuk memperbaiki tampilan komentar Blogger versi baru yang masih berantakan.

Anda bisa gunakan CSS komentar versi baru pada template SimpleON, dengan inspect element pada halaman postingan.

Atau, silahkan mengambil CSS berbeda dari source lain.

Silahkan simpan kembali template Anda, lalu lihat hasilnya.

Akhir Kata

Sebetulnya sudah sejak lama saya hendak menulis tutorial ini. Cuma seringkali lupa dan kalua ingat saya abai. Jadi mohon maaf bagi siapapun yang sempat menanyakan tutorial ini sejak lama. Mudah-mudahan masih relevan dengan kondisi Anda.

Bagi pengguna template Gampang, Takis dan Risen template yang ingin mencoba peruntungan dalam menggunakan tampilan kolom komentar Blogger versi baru, silahkan berlatih ngutak-ngatik kode pakai tutorial ini.

Demikian, sekian dan terima kasih!

Cara Membuat Read Time Otomatis di Blogspot atau Blogger

noreply@blogger.com (Bungfrangki) — Wed, 03 Mar 2021 01:52:00 +0000

Menampilkan perkiraan waktu membaca (reading time) di Blogspot atau Blogger secara otomatis kita bisa lakukan dengan mudah menggunakan JavaScript. Widget ini kurang lebih dapat memberi gambaran kepada pembaca terhadap berapa banyak estimasi waktu yang dibutuhkan untuk membaca konten tersebut.

Widget reading time Blogspot ini menjadi semacam hipnosis untuk membuat pembaca bertahan sedikit lebih lama saat sedang membaca sebuah konten blog.

Kira-kira begitulah fungsi reading time. Tujuannya, tentu saja fitur ini soal pengurangan poin (persentase) terhadap bounce rate blog. Dalam hal ini, widget read time dapat menjadi teknik terapan tambahan lainnya dalam mengembangkan blog menjadi user-friendly.

Cara Memasang Estimasi Reading Time di Blogger/Blogspot Secara Otomatis

Berikut ini cara menerapkan widget auto Reading Time di Blogspot atau Blogger:

Perhatikan Struktur PostBody

Pertama, silahkan perhatikan terlebih dahulu struktur halaman postingan PostBody (<b:includable id='postBody' var='post'>) di Blogger masing-masing.

Sederhananya, misalkan struktur PostBody template adalah seperti berikut ini:

        <b:includable id='postBody' var='post'>
          <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
            <data:post.body/>
          </div>
        </b:includable>

Yang perlu diperhatikan dari kode di atas adalah bagian <data:post.body/>. Dalam hal ini, kode tersebut hanya dibungkus oleh satu kode tag div, yaitu div class .post-body dan .entry-content.

Nah, selanjutnya salah satu tag div class tersebut akan kita gunaakan pada JavaScript nanti.

Display Estimated Post Reading Time in Blogger/Blogspot Posts Automatically with JavaScript

Dari struktur halaman postingan di atas, maka JavaScriptnya dapat disusun sebagai berikut:

<script>
/*<![CDATA[*/
function get_text(el) {ret = ""; var length = el.childNodes.length; for(var i = 0; i < length; i++) {var node = el.childNodes[i]; if(node.nodeType != 8) {ret += node.nodeType != 1 ? node.nodeValue : get_text(node);} } return ret;} var words = get_text(document.querySelector('.post-body')); var count = words.split(' ').length; var avg = 185; var counted = count / avg; var maincount = Math.round(counted); document.querySelector(".readTime").inner����vlog�ٷ���� = maincount + " min read";
/*]]>*/  
</script>

Keterangan:

Kode tag .post-body pada script dapat diubah sesuai struktur PostBody pada template masing-masing.
Angka 185 merupakan jumlah kata yang diestimasikan dibaca per menit.
Kode .readTime merupakan tag pemanggil widget Reading Time.

Jika terlalu khawatir dengan tag Class, sebaiknya pada bagian PostBody (langkah 1) membuat dan mengubahnya ke tag ID. Biar lebih spesifik.

Memanggil Widget Reading Time

Sekarang saatnya menampilkan widget Reading Time. Bagusnya, widget ini diletakkan pada bagian post meta, yaitu sejajar dengan post author, date published dan lainya. Atau dimana saja sesuai kebutuhan.

Adapun kode pemanggilnya menjadi seperti ini:

<div class='readingTime'><div class='readTime'</div></div>

Atau, jika kondisinya hanya ingin menampilkan di halaman postingan, maka kodenya bisa ditulis seperti ini:

<b:if cond='data:view.isPost'><span class='readingTime'><span checkelem='11' class='separatorReadtime'>&#183;</span><span class='readTime' id='readTime'/></span></b:if>

Letakkan kode tersebut di <b:includable id='postHeader' var='post'> jika ingin meletakkanya di bagian post meta.

Mengatur Tampilan Widget Reading Time dengna CSS

Sebelum ke langkah pamungkas, alangkah baiknya terlebih dahulu mengatur tampilan widget Reading Time dengan CSS. Contohnya dengan seperti ini:

.readingTime{display:inline-block;padding:0;margin:0 0 0 1rem}
.readingTime span{display:inline-block;float:left}
.separatorReadtime{font-size:30px;display:inline-block;padding:0 .35rem}

Jika langkah di atas sudah sesuai, silahkan save template.

Widget Reading Time Tidak Tampil?

Bila telah menerapkan langkah-langkah di atas begitu saja dengan tidak cermat, lalu ternyata widget Reading Time tidak tampil alias not working at all? Maka dapat dipastikan 2 hal ini yang menjadi kendalanya.

Kesatu, bahwa kode <data:post.body/> masih dibungkus oleh tag div yang lain. Kedua, tag div pada template Anda berbeda dengan tag div yang membungkus <data:post.body/>, yang mana tag tersebut digunakan pada JavaScipt widget Reading Time.

Dalam hal ini, penting untuk melihat kembali susunan struktur template. Mengingat setiap template html Blogger tersusun dengan kombinasi tag dan kondisi yang berbeda-beda.

Akhir Kata

demikian, sekian dan terima kasih!

Cara Mendapatkan Uang dari Internet Bagi yang Suka Berkomunikasi dan Menulis

noreply@blogger.com (Bungfrangki) — Wed, 10 Feb 2021 06:18:00 +0000

Tidak bisa dipungkiri bahwa saat ini internet sudah menjadi tempat tersendiri dalam hal mendapatkan banyak uang, bahkan dengan penghasilan yang tak terbatas. Meski demikian, masih banyak juga orang yang belum memahami seberapa besar peluang guna mendapatkan penghasilan dari internet ini. Singkatnya, banyak yang belum mengerti bagaimana cara menghasilkan uang dari internet.

Beberapa orang telah berhasil dengan berbisnis di internet, dengan penghasilan yang tidak sedikit. Mereka menjadikan internet sebagai pekerjaan utama. Beberapa pula memanfaatkan internet sebagai pekerjaan sampingan untuk mencari uang, yang bahkan pekerjaan sampingan tersebut lebih banyak memberikan pemasukan kepada mereka dalam hal financial, dibandingkan pekerjaan utamanya di dunia nyata.

Melalui artikel ini, akan dijabarkan beberapa cara yang dapat ditempuh untuk mendapatkan penghasilan dari internet. Khusus bagi anda yang suka berkomunikasi, punya pemahaman yang luas dalam bidang tertentu, menguasai bebeberapa bahasa di dunia, dan pandai dalam merangkai kata hingga melahirkan sebuah tulisan, maka kelebihan tersebut dapat anda ‘jual’ dalam dunia internet.

Banyak yang terjebak dengan pemahaman ‘untuk mendapatkan uang dari internet, setidaknya mempunyai blog, hingga website yang super terkenal’. Padahal, blog hanyalah sumber kecil dalam hal membuka potensi meraup pendapatan di internet. Cukup banyak cara lain yang bisa dilakukan dalam menghasilkan uang dari internet. Tentunya, hal ini tergantung dari keahlian dan kesukaan anda, serta seberapa besar niat dalam menjemput peluang tersebut.

Apa saja itu? Simak berikut ini.

Menjadi penulis artikel

Menjadi penulis artikel, yang biasa dikenal dengan sebutan online freelancer atau solopreneur adalah salah satu cara mendapatkan penghasilan yang berlimpah dari internet. Bagi anda yang punya kemampuan bahasa Inggris yang baik dan benar, maka menjadi penulis artikel berbahasa Inggris dapat anda jadikan sebagai peluang bisnis di interent.

Apa yang akan ditulis? Di internet cukup banyak webmaster yang membutuhkan artikel baru dan unik untuk mengisi website/blog mereka yang terbengkalai karena jarang mendapatkan postingan. Kontennya bisa berupa apa saja, mulai dari kesehatan, berita terkini, berita olahraga, artikel SEO dan lain sebagainya. Baik dalam bahasa Indonesia, maupun bahasa Inggris. Selain itu, anda juga dapat menulis tentang e-commerce yang membutuhkan jasa penulisan artikel terkait produk-produk yang mereka pasarkan.

Baca juga: Cara Dapatkan Penghasilan $100 Dollar di Internet dengan Hanya Menulis 1 Artikel

Bagaimana cara menjalankan bisnis ini? banyak cara yang dapat ditempuh untuk mendapatkan job sebagai penulis artikel. Antara lain, membuat sebuah blog khusus untuk memasarkan bidang jasa anda, promosi di media sosial, mempromosikan pada lapak-lapak tertentu, bisa pula dengan langsung memberi penawaran pada pihak perusahaan atau blogger yang membutuhkan jasa anda.

Menjadi penulis tamu (guest blogger)

Biasanya blog baru yang ingin cepat terkenal ataupun blog terkenal yang ingin mempertahakan ke-eksisannya, terkadang mereka membutuhkan seorang kontributor atau panulis tamu. Kontributor ini akan diberikan topik tertentu dengan bayaran yang cukup tinggi.

Lebih-lebih blog/website yang berbahasa Inggris, bayarannya sekitar 5-100 USD per artikel, bahkan beberapa situs memberi harga yang fantastis, sekitar $500 USD per artikel. Harga tergantung dari topik atau artikel yang ditulis.

Membuat VLOG (video blog) atau Photoblog

Pada dasarnya vlog dan photoblog hampir sama dengan blogging, hanya saja orientasinya lebih pada membuat konten dalam bentuk video atau gambar, alias bukan tertulis. Dalam hal ini, kemampuan dalam berkomunikasi, ide konten (ide kreatif) dan pembawaan adalah beberapa hal yang penting diperhatikan.

Untuk menjalankan hal ini anda perlu sebuah channel di Youtube jika anda sebagai penggian vlog, ataupun melalui blog gallery photo jika memilih sebagai penggiat photoblog.

Jangan lewatkan: Mendapatkan Penghasilan dengan Menjual Foto Secara Online

Lalu bagaimana mendapatkan uang dari vlog atau photoblog? Untuk meraup penghasilan online dari hal ini pada awalanya dari iklan (Google adsense). Selanjutnya, seiring dengan channel atau gallery photo anda telah mendapat cukup banyak subscriber dan viewer, maka pengiklan pun akan mulai berdatangan, dalam hal ini anda menjadi review produk yang dibayar.

Membuat buku dan ebook (buku digital)

Selain beberapa hal yang telah dijabarkan di atas, cara mendapatkan uang dari internet bagi yang suka berkomunikasi dan menulis ialah membuat buku dan ebook. Buku dan ebook yang dijual dapat berisi berbagai konten. Tergantung materi atau hal-hal yang anda kuasai dan bermanfaat bagi banyak orang.
Selanjutnya, buku atau ebook ini dapat anda jual secara online. Menjual buku dan ebook di internet dapat dilakukan dengan memasarkannya di media sosial, membuat lapak pada e-commerce yang terkenal, atau melalui platform khusus penjualan buku dan ebook.

Demikian dulu informasi tentang cara mendapatkan uang dari internet kali ini. Sebetulnya masih sangat banyak peluang bisnis online yang bisa digeluti. Cara mendapatkan uang dari internet lainnya akan di bahas pada artikel lainnya.

Bagi anda yang telah berhasil atau sedang menggeluti hal-hal baru dalam berbisnis di dunia internet, silahkan berpartisipasi dengan memberikan komentar di bawah ini. Semoga bermanfaat dan sukses selalu!

Mengintip 4 Alasan Mengapa Kamu Wajib Buat Website Di Sitebeat

noreply@blogger.com (Bungfrangki) — Tue, 19 Jan 2021 06:20:00 +0000

Saat ini website masih menjadi media yang mampu untuk menyampaikan beragam informasi. Bagi pemilik toko online, keberadaan sebuah situs tentu saja akan memudahkan pelanggan untuk mengetahui info terbaru.

Di dalam buat website, kamu tentunya tak bisa sembarangan. Untuk membuat situsmu menarik, Sitebeat akan memberikan banyak kemudahan.

Mengapa Harus Membuat Situs di Sitebeat?

1. Memiliki Template yang Beragam

Untuk membuat situs toko online atau web pribadi terlihat menarik, maka tampilan dari website tersebut adalah hal utama yang perlu kamu perhatikan. Ketika kamu memilih untuk membuat situs di Sitebeat, tentu saja hal tersebut akan sangat mudah untuk didapatkan. Sebab, disini tersedia ratusan template yang bisa kamu pilih.

Dengan adanya template yang menarik akan membuat pengunjung betah untuk mengunjungi situs yang kamu miliki. Tampilan user interface yang bagus, merupakan nilai tambah bagi pengunjung. Template yang kamu pilih juga terdiri dari berbagai macam tema. Banyaknya template yang bisa kamu pilih, maka kamu pun bisa menyesuaikannya dengan kebutuhan.

2. Dapat Membuat Situs Tanpa Ribet

Alasan lainnya mengapa kamu harus buat website di Sitebeat, disini kamu bisa membuat web tanpa perlu ribet. Bahkan apabila kamu tidak memiliki pengalaman dan tidak berbakat dalam mengelola website, hal tersebut bukan menjadi masalah. Sebab, kamu bisa memilih paket SitebeatPro.

Pasalnya, ketika kamu memilih paket SitebeatPro untuk website toko online maupun situs pribadi yang dimiliki, maka kamu hanya perlu duduk manis saja. Nantinya, tim profesional yang dimiliki oleh Sitebeat lah yang akan menggarap semuanya. Dengan begitu, kamu bisa menyerahkan pada tim yang ada di Sitebeat untuk membuatkan website sesuai dengan keinginan.

Bahkan kelebihan lain yang dapat kamu dapatkan dengan menggunakan paket ini adalah tim Sitebeat akan mengelola semuanya. Mulai dari desain sampai pengelolaan hingga selesai akan dilakukan oleh tim dari Sitebeat. Untuk itu, kamu pun tidak perlu ribet dan bisa lebih berfokus untuk memasarkan maupun mengembangkan toko online tersebut.

3. Tanpa Perlu Belajar Coding

Buat website di Sitebeat pastinya akan lebih mudah. Kamu tidak perlu harus belajar coding terlebih dahulu. Sebab, ketika kamu membeli paket yang ada di Sitebeat maka semua akan tersedia. Hal ini akan membuat kamu lebih nyaman untuk menggunakan website. Ditambah lagi lebih cepat, lebih mudah dan pastinya tanpa perlu belajar lagi untuk membuat web yang bagus.

4. Dapat Menunjukkan Brand Kepada Dunia

Seperti yang dikatakan di awal, bahwa website dapat menjadi salah satu langkah untuk memasarkan produkmu di kancah dunia atau internasional. Untuk itu, ketika ingin mengenalkan brand yang kamu miliki tentu saja tidak boleh asal asalan. Kamu bisa memulainya dengan membuat situs yang memiliki tampilan menarik.

Dengan memiliki user interface dan juga fitur fitur yang membuat pelanggan nyaman, maka nantinya pengunjung pun akan lebih mudah untuk mengakses web yang kamu miliki. Cara paling mudah yang bisa kamu lakukan adalah dengan buat website di Sitebeat. Brand yang kamu miliki pastinya akan lebih dikenal karena mempunyai website yang menarik.

Beberapa alasan tersebut tentu saja akan membuat kamu semakin percaya untuk membuat website di layanan ini. Ditambah lagi, beragam paket yang ditawarkan memiliki harga yang ramah di kantong. Hal tersebut akan membuat kamu lebih nyaman menggunakannya. Tidak perlu lagi untuk membuat web dengan susah dan ribet, disini kamu akan dibantu hingga tuntas.

Mudahnya Membuat Website Ala DomaiNesia

noreply@blogger.com (Bungfrangki) — Thu, 10 Dec 2020 06:05:00 +0000

Hai DomaiNesians, sudah tahu belum kalau sekarang bikin website itu gampang banget? Kamu nggak perlu belajar soal coding dan teman-temannya. Jangankan blog pribadi, bikin online shop juga bisa.

Gimana tuh caranya? DomaiNesia adalah salah satu penyedia layanan domain dan hosting ternama di Indonesia, yang sangat mengutamakan kemudahan.

Oleh karena itu, DomaiNesia berupaya mengembangkan produk yang bertujuan membantu setiap pelanggan, baik yang pelanggan yang ahli, maupun pelanggan yang masih pemula. Produk tersebut biasa disebut dengan Instant Deploy DomaiNesia.

Pengertian Instant Deploy

Instant deploy adalah fitur instan yang akan membantu pelanggan membuat website yang diperlukan. Seperti yang sudah disebutkan di atas, kamu bisa membuat website untuk blog pribadi maupun online shop.

Tapi, Instant Deploy nggak cuma buat pelanggan yang masih pemula, ya DomaiNesians.

Karena Instant Deploy DomaiNesia juga bisa digunakan untuk membuat framework yang biasanya diperlukan oleh developer. Untuk setiap keperluan pun ada banyak pilihan.

Kalau kamu ingin membuat blog, ada berbagai pilihan CMS seperti WordPress, Joomla, Drupal, atau Ghost. Begitu pula jika kamu ingin membuat online shop, framework atau website pengetahuan seperti Wikipedia.

Instant Deploy DomaiNesia

Instant Deploy DomaiNesia bisa menjadi salah satu jalan pintas kamu dalam membuat website. Bukan soal bisa atau nggak bisa, banyak juga developer yang menggunakan fitur ini untuk lebih menghemat waktu. Kamu cuma perlu menyelesaikan pemesanan, lalu website siap digunakan.

Jadi nggak perlu waktu lama sampai kamu bisa menggunakan websitenya. Buat kamu yang ingin membuat online shop, ada empat pilihan yang bisa kamu coba, yaitu Prestashop, OpenCart, Magento, dan Lite Cart. Sementara buat para developer, ada empat pilihan framework, yaitu Laravel, Codeigniter, Yii, dan Bootstrap.

Selain memudahkan dalam membuat website, ada keuntungan lain yang akan kamu dapatkan. Manfaat ini mungkin memang akan lebih dirasakan oleh pelanggan yang masih pemula. Keuntungan tersebut meliputi:

Cepat dan mudah
Nggak memerlukan skill khusus
Website bisa langsung dipakai
Bisa disesuaikan dengan kebutuhan website
Banyak pilihan CMS
Aman
Didukung oleh Tim Support yang siap sedia 24 jam

Jangan ragu untuk bikin website menggunakan Instant Deploy DomaiNesia. Hasilnya nggak akan kalah bagus dengan website yang dibuat secara manual, karena ada banyak pilihan tema, plugin, warna, dan widget yang bervariasi.

Apalagi soal keamanan, fitur Instant Deploy DomaiNesia sudah dilengkapi dengan antimalware, antivirus dan patching. Jadi jangan bilang kamu nggak bisa bikin website.

DomaiNesia akan selalu mencari cara yang terbaik supaya kebutuhan pelanggan tetap terpenuhi. Kalau masih ragu-ragu atau takut salah dengan langkah-langkahnya, kamu bisa menghubungi Tim Support via chat, WhatsApp, atau telepon. Tim Support akan siap sedia membantu kamu menyelesaikan hambatan yang kamu temui.

Cara Membuat Website dengan Instant Deploy DomaiNesia

Terus, gimana sih caranya membuat website dengan Instant Deploy DomaiNesia? Hanya dengan 8 langkah sederhana ini kamu sudah bisa memiliki website mu sendiri.

Sebelum mengikuti langkah-langkah membuat website dengan Instant Deploy, ada baiknya kamu membuat akun DomaiNesia (khusus untuk yang belum punya akun). Cara mudah membuat website dengan Instant Deploy DomaiNesia:

Buka website domainesia.com
Login akun DomaiNesia
Pilih menu Web Apps
Pilih Apps untuk website
Pilih paket hosting
Masukkan nama domain
Masukkan Username dan Password website
Selesaikan dan bayar

Akhir Kata

Itulah langkah sederhana membuat website menggunakan Instant Deploy DomaiNesia. Untuk penjelasan lebih lengkap, kamu bisa buka blog DomaiNesia.

Di sana ada banyak panduan dan artikel yang bermanfaat. Punya website saat ini nggak perlu susah-susah belajar coding. Kamu cukup pakai Instant Deploy DomaiNesia.

Bukan developer pun nggak bakal jadi halangan buat kamu punya website. So, tunggu apa lagi? Yuk, chat Tim Support DomaiNesia untuk cari tahu lebih banyak tentang cara mudah membuat website.

Blog bungfrangki

Mengatasi Infinite Scroll Blogger yang Error di Mobile

Cara Mengatasi Infinite Scroll Blogger yang Error di Perangkat (URL) Mobile

Cara 1

Cara 2

Cara 3 (mempertahankan XMLHttpRequest)

Cara 4 (pakai Fetch)

Menampilkan Komentar Gambar di Blogger dengan JavaScript

Cara Menampilkan Komentar Berisi Link Gambar di Blogspot dengan JavaScript

Cara 1 (tanpa tombol, gambar langsung tampil)

Cara 2 (pakai tombol)

Blogger Conditional Tags URL Contains

Penerapan

Alternatif

Blogger Conditional Tags dengan data:view.pageId dan data:view.postId

Masalah dalam Penggunaan Conditional Tags pada Page / Post Tertentu

Cara Menerapkan Conditional Tags data:view.pageId dan data:view.postId

Page (Halaman)

Post (Postingan)

Cara Memasang ����vlog�ٷ���� Parse Codes di Blogger

Parse ����vlog�ٷ���� Blogger XML Templates

Cara pasang widget parse kode ����vlog�ٷ���� di blogspot/Blogger

Cara Memasang Google Analytics 4 (GA4) di AMP

Cara Pasang GA4 di Blog AMP

Buka Asisten Penyiapan GA4

Ganti Kode Google Analytics AMP yang Lama

Kode Script Google Analytics 4 (GA4) di AMP

Ganti G-XXXXXXXXXX dengan ID GA4 Blog Masing-masing

Bikin Forum, Lagi

Cara Redirect 301 ke Domain Baru di Blogger/Blogspot

Apa Itu Redirect 301?

Alasan Melakukan Redirect 301

Langkah-langkah Menerapkan Redirect 301 di Blogger atau Blogspot

Mengapa Ribet?

Membuat Table of Contents (ToC) Otomatis di Blogger

Apakah Table of Contents itu SEO Friendly?

Cara Memasang Table of Contents di Blogger

Kode JavaScript

Kode CSS

Simpan Tema

Setelan Table of Contents Otomatis di Blogger

Preview

Penutup

Merubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript

Mukaddimah

Cara Merubah Tag <blockquote> Menjadi Tag <pre> <code> dengan JavaScript

1. Langkah Awal

2. Kode JavaScript

3. Kode CSS (Opsional)

4. Terapkan Syntax Highlighter (Opsional)

5. Preview

Penutup

Cara Membuat Sitemap Blogger dengan Tag NEW Pada Label Artikel Baru

Cara Pasang Widget Daftar Isi di Blog

Penutup

Menggunakan Post Labels Sebagai Meta Data Keywords dan Property article:tag

Cara Membuat Post Labels Menjadi Meta Keywords dan Property article:tag

Schema Markup BlogPosting

Schema BlogPosting Markup

Masalah articleBody

Pengujian di Rich Results Test

Penutup

10 Bidang Pekerjaan Menarik Untuk Kamu yang Masih Muda

10 Bidang Pekerjaan dengan Penghasilan dan Jenjang Karir yang Menarik untuk Pemuda

10 Kesalahan Umum Saat Membuat Website

Kesalahan Saat Membuat Website yang Harus Dikenali

1. Mengaktifkan Menu “Open New Windows”

2. Tidak Mengaktifkan Tombol Kembali

3. Tidak Memperhatikan Broken Link

4. Desain Website yang Lambat

5. Tidak Mencantumkan Contact Person

6. Malas Update Konten

7. Sistem Navigasi Website yang Jelek

8. Terlalu Banyak Menggunakan Jenis Font dan Warna

9. Sulit Kembali ke Menu “Home”

10. Tidak Memasang Fitur Share ke Media Sosial

Kesimpulan

Tips Memilih Hotel Mewah Di Jakarta

Memilih Hotel Mewah Di Jakarta

1. Pilih Hotel Dengan View Mempesona

Cara Memasang ��vlog�ٷ�� Parse Codes di Blogger

Parse ��vlog�ٷ�� Blogger XML Templates

Cara pasang widget parse kode ��vlog�ٷ�� di blogspot/Blogger