Latest Posts

View all

Cara membuat load more sebagai penganti pagination pada template blogger

Blog competition dengan tema pengalaman pribadiku dalam menumbuhkan minat baca anak

Lomba blog penyedia konten radio indonesia kbr.id dengan tema perubahan iklim

Mengenal bounce rate pada blogger adalah

Meta tag pada blogger yang wajib ada agar seo friendly

Cara membuat skill bar pada halaman blog

Cara membuat presentase scroll bar pada blog

Cara membuat tabel keren di blogger

Cara mendaptkan domain js.org secara gratis

cara membuat halaman partner keren untuk bertukar backlink

Lomba tulis artikel rumahweb terbaru berhadiah jutaan rupiah

Kode Iklan

Kode Iklan

Monday, June 8, 2020

Cara membuat load more sebagai penganti pagination pada template blogger

Gambar loadmore
Cara membuat load more sebagai penganti pagination pada template blogger

Halo sobat blogmania, kembali lagi kami akan berbagi tutorial cara membuat load more sebagai pengganti pagination.

Pagination ini hampir ada di semua jenis template blogger. Karena pagination ini adalah pemisah untuk menapilkan jumlah artikel yang di tampilkan di halaman hompage atau beranda.

Dan tombol load more sebagai pengganti pagination ini sekarang sudah banyak sekali digunakan terutama untuk website maupun blog dengan tampilan kekinian dan modern.

Manfaat menggunakan tombol load more sebagai penganti pagination ini sangat banyak. Diantaranya yaitu dapat mempercepat loading blog, ini sangat terasa sekali bahkan saya cek dengan google pagespeed insight skornya cukup bagus .

Selain mempercepat loading blog, load more ini juga bisa mengurangi skor bounce rate pada blog dan pastinya juga sebagi pemercantik tampilan blog agar kekinian.

Oke. Langsung saja kita mulai pemasangannya.

Yang pertama yaitu cari kode </b:skin> dan paste script ini diatasnya.

/* Tombol LoadMore Blogmania.my.id*/
.sedang-loading,.muatlagi{background-color:#fff;font-size: 16px;font-weight: bold;margin: 0px auto;padding: 7px 15px;text-align: center;white-space: nowrap;border-radius: 25px;box-shadow: 0 5px 4px rgba(0,0,0,0.05);border: 1px solid #00000012;} a.sedang-loading,a.muatlagi{color:#000} .sedang-loading:after{width: 14px;height: 14px;margin-left: 10px;vertical-align: -2px;display: inline-block;animation: aqilSpin .75s linear infinite normal;-webkit-animation: aqilSpin .75s linear infinite normal;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z' fill='%23aaa'></path></svg>") center no-repeat;content: '';} .muatlagi:hover,.sedang-loading:hover{box-shadow:-1px 9px 11px 0px rgba(0,0,0,0.05)} @keyframes aqilSpin {from {transform:rotate(0deg)}to {transform:rotate(360deg)}} @-webkit-keyframes aqilSpin {from { -webkit-transform: rotate(0deg)} to { -webkit-transform:rotate(360deg)}}

Untuk template viomagz, cari kode di bawah ini dan silahkan di hapus semua. Note: "Ini khusus template viomagz, jika kamu gunakan template selain viomagz, abaikan saja dan lanjut ke pemasangan kode js di bawah".

<b:if cond='data:blog.isMobile == &quot;false&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR --> <script> var perPage=8; var numPages=6; var firstText ='<b:switch var='data:blog.locale'><b:case value='id' />Pertama<b:default />First</b:switch>'; var lastText ='<b:switch var='data:blog.locale'><b:case value='id' />Terakhir<b:default />Last</b:switch>'; var prevText ='&#8250; <b:switch var='data:blog.locale'><b:case value='id' />Sebelumnya<b:default />Prev</b:switch>'; var nextText ='<b:switch var='data:blog.locale'><b:case value='id' />Selanjutnya<b:default />Next</b:switch> &#8250;'; var urlactivepage=location.href; var home_page="/"; </script> <script> //<![CDATA[ if(numberedPagination==1){ if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress} }; //]]> </script> </b:if> </b:if> </b:if>



Jika sudah, silahkan kamu cari kode </body> dan paste script ini di atas tag </body> tadi.

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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 c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=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].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!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){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)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0, target: { posts: '.blog-posts', post: '.post-outer', anchors: '.blog-pager', anchor: '.blog-pager-older-link' }, text: { load: '<a class="muatlagi" href="javascript:;">Muat Artikel Lainnya</a>', loading: '<a class="sedang-loading">Loading...</a>', loaded: '<span class="muatlagi">Sudah di halaman terakhir</span>', error: '<a class="muatlagi">error!</a>' } }); //]]></script> </b:if></b:if>

Nah, jika sudah selesai. Silahkan di simpan dan jika tampilannya seperti warna font atau background kurang sesuai dengan keinginan kamu, silahkan cari .sedang-loading,.muatlagi { dan ganti warna background dan color nya sesuai keingian.

Dan simpan. Semoga bermanfaat.



Monday, May 18, 2020

Blog competition dengan tema pengalaman pribadiku dalam menumbuhkan minat baca anak


Halo sobat blogmania. Kembali lagi, kamu akan membagikan informasi tentang lomba tulis artikel blog atau ( blog competition ) yang diselenggarakan oleh bloggerperempuan.co.id dengan tema "pengalaman pribadiku dalam menumbuhkan minat baca anak"

Informasi :

Periode: 17mei - 17juni 2020 
Tema: "pengalaman pribadiku dalam menumbuhkan minat baca anak" 
Penyelenggaraan: bloggerperempuan.co.id 
Hadiah: tunai dengan total
Rp6.000.000 (Enam Juta Rupiah) dan 5 Voucher Belanja sebagai hadiah hiburan.

Syarat dan ketentuan lomba :

* Peserta adalah Warga Negara Indonesia (WNI). 
*Orisinalitas blog sangat diutamakan. Artinya tulisan blog adalah milik sendiri dan bukan diambil dari tulisan blog lain ataupun situs lainnya (copy paste). 
*Tulisan dalam blog belum pernah diikutsertakan pada lomba serupa yang diselenggarakan pihak lain. 
*Tulisan tidak boleh melanggar hak kekayaan intelektual pihak manapun juga.
*Tulisan ditulis dalam bahasa Indonesia.
*Tulisan tidak boleh bermuatan politik dan SARA dan pornografi. 
*Peserta wajib mendaftarkan diri dengan mengisi form Registrasi di halaman ini. 
*Peserta wajib mengikuti akun media sosial Let’s Read Indonesia:
Facebook: Blogger Perempuan Network
Instagram: @letsread.indonesia dan Blogger Perempuan Network 
* Peserta wajib mengunduh aplikasi Let’s Read 
* Pengumuman pemenang akan diumumkan melalui website https://bloggerperempuan.co.id/ dan media sosial @bloggerperempuan 
* Pertanyaan dapat dilayangkan melalui email kontak@bloggerperempuan.com dengan subject Let’s Read Blog Competition.

Untuk informasi lebih lenkapnya, kalian bisa mengunjungi link aslinya di:
https://bloggerperempuan.co.id/lets-read/

Thursday, May 14, 2020

Lomba blog penyedia konten radio indonesia kbr.id dengan tema perubahan iklim



Ketentuan lomba:

Deadline 22mei 2020

- Follow akun media sosial KBR: Facebook Kantor Berita Radio-KBR , Twitter @halokbr @beritaKBR serta Instagram @ kbr.id

- Platform blog bebas, panjang tulisan tidak dibatasi.

- Blogger boleh mengirimkan lebih dari 1 tulisan selama periode penyiaran talkshow. Semakin banyak mengim tulisan, tentu semakin besar peluang untuk menang.

- Posting tulisan/link Anda di akun media sosial masing-masing, sertakan tagar #PerubahanIklimKBR disertai kalimat yang menarik serta jangan lupa mention akun media sosial KBR.

- Tulisan harus asli, bukan plagiat. Penulis wajib mencantumkan sumber untuk setiap data. atau gambar

- Di akhir artikel, wajib mencamtumkan tulisan:
Saya sudah berbagi pengalaman soal climate change. Anda juga bisa berbagi dengan mengikuti lomba blog "Perubahan Iklim" yang diselenggarakan KBR (Kantor Berita Radio) dan Ibu-Ibu Doyan Nulis (IIDN). Syaratnya, bisa Anda lihat di sini (beri link artikel persyaratan ini) 
- Kirim tulisan ke email:  ruangpublikkbr@gmail.com  dengan subyek “Lomba Blog (spasi) Perubahan Iklim (spasi) Nama (spasi) Judul Blog”.
- Di badan email, sertakan juga link artikel, data diri Anda yaitu nama lengkap, usia, domisili, nama akun media sosial (FB, Twitter, IG) dan nomor HP.

- Keputusan juri bersifat mutlak dan tidak dapat diganggu gugat. Hasil karya penulisan menjadi hak panitia.
Kami akan memilih 3 (tiga) pemenang per episode untuk mendapatkan hadiah uang tunai
yaitu:
Juara 1 Rp 800.000
Juara 2 Rp 400.000
Juara 3 Rp 300.000
Di akhir babak, ada grand prize untuk menentukan Juara 1, 2 dan 3 dari seluruh artikel yang masuk ke KBR, yaitu:
Juara 1: Rp 3.500.000
Juara 2: Rp 2.500.000
Juara 3: Rp 1.500.000

Baca selengkapnya di sini

Mengenal bounce rate pada blogger adalah

Bounce rate blog



Mengenal bounce rate pada blogger adalah......

Halo sobat blogmania. Buat kalian yang berkecimpung di dunia blogging, pasti tidak asing lagi dengan yang namanya bounce rate.

Tapi, buat teman - teman yang masih awam dan baru memulai jadi blogger, pasti asing dengan istilah ini.

Dan, dipostingan kali ini. Blogmania akan menjelaskan sedikit mengenai bounce rate ini, cara mengetahuinya, dan cara mengatasiantaya.

Baca sampai akhir ya, biar kalian tidak kelewatan informasi penting yang blogmania bagikan.

Kita mulai dengan mengenal apa itu bounce rate?
  Bounce rate, adalah istilah atau presentase dari lamanya pengunjung mengakses blog/website kita.

Jadi, bounce rate ini sederhananya yaitu sebuah metode pengukuran dari google untuk mengukur waktu pengunjung membaca artikel dari suatu blog/website.

Untuk mengetahui seberapa tinggi bounce rate rata - rata blogmu, kamu bisa menggunakan google analytic.

Nah, jika bounce ratenya rendah, nilai bounce rate nya misalnya saja 10%, maka semakin bagus lah kualitas artikel maupun blog/website tersebut.

Tapi sebaliknya, jika bounce rate nya tinggi sekali, misalnya saja 80-100%, maka menandakan bahwa blog atau website kamu tersebut buruk, karena pengunjung tidak betah berlama - lama di blogmu.

Penyebab umumnya biasanya adalah artikel yang kamu sajikan tidak berkualitas, jadi tidak enak untuk dibaca.

Atau mungkin banyaknya iklan, pemilihan font yang kurang sesuai, warna background dan warna font yang tidak nyaman untuk dibaca.

Ataupun banyaknya iklan yang menggangu. Sehingga, menyebabkan loading blog yang lama dan pengunjung lebih memilih membaca artikel di blog/website lainnya yang lebih ringan.

Jadi, intinya untuk mengurangi bounce rate pada blog kamu yaitu: sajikan artikel yang panjang tapi menarik dan enak untuk dibaca, gunakan font dan warna yang sesuai agar nyaman saat membaca, dan yang terkahir jika blog kamu di monetesasi dengan iklan, jangan pasang iklan berlebihan yang menggau kenyaman pembaca.

Nah, itu adalah penyebab dan cara mengatasi bounce rate ala blogmania.

Saturday, May 9, 2020

Meta tag pada blogger yang wajib ada agar seo friendly

Mata tag image



Halo sobat blogmania. Kembali lagi kali ini blogmania akan berbagi informasi mengenai meta tag.

Lalu meta tag itu apa sih?

Meta tag, adalah satu tag html yang berguna untuk mengidentifikasi sebuah website agar dapat di ketahui dan ditemukan oleh mesin pencari.

Jadi meta tag ini sangat penting sekali agar mesin pencari seperti google dapat mengindex dan mengidentifikasi situ/blog kita.

Lalu, cara memasang meta tag gimana?
Cara nya yaitu tinggal masuk ke tema, edit html, lalu disitu tambahkan tag meta tepat di bawah tag <head>.
Contohnya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css=''>
  <head>
<meta content=' ' name=' '/>
<meta content=' ' name='descriptian'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content=' ' property='og:image'/>

Nah, beberapa meta tag yang wajib kamu pasang biar blog kamu makin seo friendly
diantaranya yaitu:

1. Meta Description
Tag meta yang satu ini sangat penting sekali. Karena nantinya akan diisi dengan deskripsi dari situ/blog kamu.
<meta name="description" content="isi dengan deskripsi blog kamu" />

2. Meta Keyword
Tag meta keyword ini berfungsi untuk diisi dengan keyword atau kata kunci agar lebih mudah di cari di google.
Contohya:
<meta content=’droidriky, blogmania, tutorial blogger, informasi bermanfaat " name='keywords'/>

Note: ganti keyword di atas dengan keyword yang sesuai dengan bulog kamu, dan jangan lupa pasang di bawah head seperti contoh di atas tadi ya.

3. Meta google verifikasi
Meta tag ini wajib ada bila bulog kamu ingin muncul dan dapat di temukan di google. Caranya pasang tag di ini dan ganti 12345 dengan id yang kamu dapatkan saat kamu mendaftarkan google search consol.
<meta content='12345' name='google-site-verification'/>
4. Meta bing dan alexa
Agar blog kaum terindah oleh mensin pencari lain selain google. Kamu juga bisa mendaftarkan di salah satu search engin yang populer selain google, yaitu bing. Dan tambahkan meta tag ini yang kalian dapatkan saat pertama kali daftar.
<meta content='id bing' name='msvalidate.01'/>
Dan jika kamu ingin mengetahui rangking alex bulog kami secara akurat. Kamu memerlukan daftar alexa rank dan dipasang meta tag di bawah ini
<meta content='id alexa rank' name='alexaVerifyID'/>
5. Meta tag author
Yang terakhir adalah meta author, Meta tag ini nantinya akan bersisi nama si pembuat blog/website tersebut agar bisa dikenali siapa nama pemiliknya.
<meta content='riky setiomulyo' name='Author'/>
Nah, dari beberapa meta tag diatas agar blog makin seo friendly. Jika di gabungkan seperti ini.

<meta name="description" content="isi dengan deskripsi blog kamu" />
<meta content=’droidriky, blogmania, tutorial blogger, informasi bermanfaat " name='keywords'/>
<meta content='12345' name='google-site-verification'/>
<meta content='id bing' name='msvalidate.01'/>
<meta content='id alexa rank' name='alexaVerifyID'/>
<meta content='riky setiomulyo' name='Author'/>
Nah, jika kamu memasang mata tag di atas. Di butuhkan tinggal 1-2hari agar google dapat mengcrawling nya dan lihat perubahannya.

Semoga artikel tutorial ini dapat mudah untuk dipahami dan jangan lupa untuk mampir juga ke droidriky untuk updat dan tambah pengetahuan seputar dunia it dan internet.

Thursday, April 30, 2020

Cara membuat skill bar pada halaman blog


Progress bar


Halo sobat blogmania, kembali lagi admin akan berbagi tutorial cara membuat porgress skill bar pada halaman blog.

Proggres skill bar ini biasanya digunakan untuk mengukur seberapa jauh artikel yang di baca, atau ilmu yang di pelajari. Jadi sekain tinggi nilai skill bar nya, semakin tinggi pula kesulitan yang akan di pelajari.

Skill bar ini digunakan pada blog droidriky, untuk menampilkan seberapa jauh dan sulit artikel tentang pemrograman php yang di bagikan.

Nah, jika kamu ingin membuatnya, silahkan ikuti langkah - langkah di bawah ini.

Masuk ke blogger.com dan pilih bagian tema, lalu pilih edit html dan cari kode </style> atau jika tidak ada silahkan cari kode</b:skin> .

Jika sudah, paste script Css di bawah ini.

.skills{
  width: 100%;
  max-width: 400px;
  padding: 0 0px;
}
.skill-name{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 20px 0;
}
.skill-bar{
  height: 20px;
  background: #cacaca;
  border-radius: 8px;
}
.skill-per{
  height: 20px;
  background-color: #0fbcf9;
  border-radius: 8px;
  width: 0;
  transition: 1s linear;
  position: relative;
}
.skill-per::before{
  content: attr(per);
  position: absolute;
  padding: 4px 6px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  top: -35px;
  right: 0;
  transform: translateX(50%);
}
.skill-per::after{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  top: -10px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
  border-radius: 2px;
}


Selanjutnya, masih di edit html dan cari lagi kode </body> dan paste javascript di bawah ini.

<script>
      $('.skill-per').each(function(){
        var $this = $(this);
        var per = $this.attr('per');
        $this.css("width",per+'%');
        $({animatedValue: 0}).animate({animatedValue: per},{
          duration: 1000,
          step: function(){
            $this.attr('per', Math.floor(this.animatedValue) + '%');
          },
          complete: function(){
            $this.attr('per', Math.floor(this.animatedValue) + '%');
          }
        });
      });
    </script>

 
Lalu cari script untuk memanggil jquery, di blog kamu sudah ada apa belum. Jika belum ada script untuk memanggil jquery, silahkan paste script di bawah ini tepat di atas kode </head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Jika sudah, silahkan di simpan tema nya. Dan jika ingin menampilkan skill barnya, silahkan paste script di bawah ini pada bagian yang kamu inginkan di halaman postingan lalu klik compose, dan paste script ini pada bagian paling bawah.

<div class="skills">
<div class="skill">
<div class="skill-name">
HTML</div>
<div class="skill-bar">
<div class="skill-per" per="90">
</div>
</div>
</div>
<div class="skill">
<div class="skill-name">
CSS</div>
<div class="skill-bar">
<div class="skill-per" per="70">
</div>
</div>
</div>
<div class="skill">
<div class="skill-name">
Javascript</div>
<div class="skill-bar">
<div class="skill-per" per="60">
</div>
</div>
</div>
</div>

Jika sudah selesai, silahkan di simpan dan lihat hasilnya.  Semoga membantu dan bermanfaat.

Cara membuat presentase scroll bar pada blog


Progress scroll bar


Halo soba blogmania, tutorial blogger kali ini, blogmania akan berbagi tutorial cara membuat presentase scroll bar.

Apa itu presentase scroll bar?
Presentase scroll bar yaitu jika halaman blog di scroll, makan nanti di samping akan menunjukkan progress berapa persen kamu menscroll nya.

Biasanaya para blogger mesang presentase scroll bar ini digunakan untuk menamilkan sebaerapa jauh para pembaca membaca artikelnnya, misal sudah 50%, maka nanti presentase scroll bar akan tampil di sebelah kanan.

Nah untuk memasangnya cukup mudah, silahkan ikuti tutorialnnya di bawah ini.
Masuk ke blogger.com dan pilih bagian tema dan pilih edit html, lalu cari kode </b:skin> dan paste css di bawah ini.

/* Persentase Scrollbar */ #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px} #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

Jika sudah selesai, silahkan kamu simpan dan masuk ke bagian tata letak dan tambahakan gadget lalu pilih html/javascript dan paste kode html di bawah ini.

<div id='scrollPersentase'/>

Lalu yang terakhir cari kode </body> dan paste script ini di atas kode </body> tersebut.

<script type='text/javascript'> /*<![CDATA[*/ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2; $('#scrollPersentase') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scrollPersentase').fadeOut(); }, 1500); }); /*]]>*/ </script>

Jika sudah, silahkan di simpan dan lihat hasilnnya.

Nah, jika ingin menyembunyikan scroll bar tadi pada home page dan hanya ingin menampilkan scroll bar di halaman artikel saja, silahkan edit lagi pada tema dan edit html.

lalu cari kode untuk menamilkan widget scroll bar yang kamu buat di tata letak tadi lalu tambahakan !data:view.isPost di bagian widget cond=' ' seperti di bawah ini

<b:widget cond='!data:view.isPost' id='HTML1' locked='false' title='Author' type='HTML' version='2' visible='true'><div id='scrollPersentase'/></b:widget>

Semoga membantu dan bisa bermanfaat dan jangan lupa untuk berkomentar jika ada yang salah.

Cara membuat tabel keren di blogger

Tabel


Cara membuat tabel keren di blogger

Halo sobat blogmania, kembali lagi blogmania kali ini akan berbagi tutorial cara membuat tampilan tabel yang keren pada blog.

Tabel ini biasanya digunakan untuk untuk menamilkan data - data dalam bentuk tabel seperti, nama dan nomor, keterangan, layanan dan lainnya.

Nah, untuk membut tampilan tabel yang keren pada template blogspot. Silahkan masuk ke tema, lalu pilih edit html, dan cari kode </style> atau </b:skin>, lalu paste script di bawah ini, tepat di atas kode </b:skin> tadi.

/* Tabel Blogger Responsive */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}


Jika sudah, silahkan di simpan. Dan jika ingin menampilkan hasilnnya, silahkan klik entri baru>edit html> paste script di bawah ini.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Keterangan</th> </tr>
<tr><td>Nama1</td><td>Nilai1</td> </tr>
<tr><td>Nama2</td><td>Nilai2</td> </tr>
<tr><td>Nama3</td><td>Nilai3</td> </tr>
<tr><td>Nama4</td><td>Nilai4</td> </tr>
</tbody> </table>


Nah, jika kamu ingin menampilkan tabel di halaman artikel kamu, kamu juga cukup memangil dengan <tabel> seperti di atas.

Wednesday, April 29, 2020

Cara mendaptkan domain js.org secara gratis



Halo sobat blogmania. Kembali lagi blogmania akan berbagi tutorial cara mendapatkan domain js.Org secara gratis.
Sebenarnya domain js.org ini tidak bisa digunakan atau dihubungkan ke blog blogspot ataupun website yang di hosting di luar github.

Domain js.org ini memang khusus untuk domain blog statik yang di buat di github.

Tetapi, meskipun kita membuat blognya dari github, tapi hasilnya juga tidak kalah dengan blog yang di host di hosting berbayar lainnya, lihat saja blog blogzen.js.org.

Blog yang kita buat di github ini hanya bisa memakai bahasa pemrograman css,html, dan javascript, karena blog yang akan kita buat bersifat statik atau tetap.

Cara membuatnya gimana?
Cara membuat blog di github yaitu, silahkan buat akun github, klo udah punya silahkan login aja. Jika sudah selesai, silahkan mencari theme Jekyll yang gartis di kotak pencarian.

Atau bisa juga gunakan tema di bawah ini.
https://github.com/wowthemesnet/mundana-theme-jekyll

Sesudah ketemu, silahkan klik tombol fork di sebelah kanan atas. Dan tunggu hingga selesai.

Setelah selesai di fork, nanti kamu akan di bawa ke bagian setting. Disitu silahkan ganti repostiory name dengan nama reposti yang kamu inginkan, misal: riky.github.io dan silahkan di simpan.

Belum selesai disini, silahkan cari file config.yml . Di reposit tadi, dan cari dan kosongkan tulisan base url nya ("kosongkan bas url").

Nah, untuk mengatur halaman dashboard, untuk mengedit, mempublikasikan, atau menghapus dan mengelola postingan. Kamu membutuhkan ditus forestry.
Carannya, silahkan signup di link ini.
https://app.forestry.io/signup

Saat register, langaung aja via email, jangan yang sync github, biar ngak ribet.
Setelah login, klik add site lalu pilih Jekyll, dan masuklah ke dashboard forestry seperti gambar.

Nah, jika blog sudah berhasil di build, untuk mendapatkan domain js.org , silahkan  buat file dengan nama CNAME dan masukkan nama domain yang kamu inginkan, misal riky.js.org .

Setelah selesai, silahkan masuk ke https://github.com/js-org/js.org/blob/master/cnames_active.js dan masukkan nama domain yang kamu inginkan berdasarkan alfabet.

Setelah itu, tunggu 24jam untuk mendaptkan konfirmasi email dan nanti domain akan otomatis aktif.


cara membuat halaman partner keren untuk bertukar backlink

Backlink


Halo sobat blogmania. Kembali lagi blogmania kali ini akan berbagi tutorial cara membuat halaman partner yang keren untuk bertukar backlink.

Lalu halaman partner itu apa sih?
Halaman partner, atau blogmania sering menyebutnya dengan media partner, yaitu sebuah halaman pada blogspot yang digunakan untuk mrnrmpatkan link menuju blog/website orang lain, blog yang di tuju pun juga wajib memasang link menuju blog kita.

 Atau sering di sebut dengan bertukar backlink. Tapi backlink dalam bentuk media partner ini lebih sederhana.

Gunanya halaman partner ini untuk apa?
Halaman media partner ini biasanya di gunakan oleh para blogger - blogger yang da/pa nya masih kecil.

 Jadi tujuan utamanya halaman partner ini untuk menaikkan skor DA/PA blog yang sangat berpengaruh sekali terhadap seo.

Jadi, semakin banyak backlink yang menuju blog kamu, semakin tinggi pula skor DA/PA dan semakin naik juga kualitas seo blog kamu, yang akan mendongkrak agar blog kamu bisa munjul di laman pertama gogle search.

Cara membuatnnya gimana?
Carannya cukup masuk ke akun blogger kamu, klik pada bagian halaman dan tambah halaman baru dan beri nama sesuai keinginan kamu (ex. Halaman-partner)

Setelah itu, pilih edit html atau compose dan paste script di bawah ini.



Jika sudah, silahkan pubikasikan.

Lalu masuk ke bagian tema, dan pilih  edit html, lalu cari kode </head> dan paste script di bawah ini.



Jika sudah selesai, silahkan di save. Dan cek halaman yang telah kamu buat tadi.

Dan untuk menambahkan partner, silahkan paste script ini di bawah script terakhir pada halaman yang kamu buat tadi.



Demikian tutorial cara membuat halaman media partner yang keren, semoga bisa bermanfaat.

Tuesday, April 14, 2020

Lomba tulis artikel rumahweb terbaru berhadiah jutaan rupiah



Halo sobat blogger dan pembaca setia blogmania.my.id. Ada info terbaru nih dari rumahweb. Rumahweb sekarang mengadakan blog competition lagi nih, dengan mengusung tema " Website vs Marketplace: Pilihan atau Sinergi? ".

Rumahweb, adalah salah satu layanan penyedia hosting di indonesia , domain maupun vps dengan harga yang sangat terjangkau dan sudah cukup banyak dikenal. Menurut saya pribadi rumahweb adalah layanan penyedia domain dan hosting terbaik, karena fitur - fiturnya mudah banget dipahami meskipun baru pertama kali pasang domain. Selain itu, custer service yang cukup ramah dan cepat mersepon kita untuk membantu setiap kendala seputar pemasangan domain maupun hosting.

Nah, kini rumahweb kembali lagi menyelengarakan lomba menulis artikel dengan tema "Website vs Marketplace: Pilihan atau Sinergi? ", setealah beberapa bulan yang lalu juga sukses mengadakan lomba blog dengan tema "pentingnya email profesional".

Terus, periode lombanya kapan nih?
Lomba blog ini dimulai dengan regristrasi dan pengiriman artikel pada tanggal 1 april 2020 sampai dengan 20 juni 2020. Disusul dengan penjurian pada 21-25 Juni 2020 dan Pengumuman Pemenang pada 27 Juni 2020, sedangkan Pengiriman Hadiahnya pada tanggal 1 Juli 2020.

Syarat dan ketentuannya apa aja?
1. Tema artikelnya yaitu: " Website vs Marketplace: Pilihan atau Sinergi? "
2. Artikel yang dibuat terdiri dari minimal 500 kata.
3. Artikel berisi tentang pengalaman, hasil riset atau ide kreatif sesuai tema yang dilombakan. Contohnya domain dimanfaatkan untuk nama website, domain forwarding ke social media, marketplace atau tuangkan ide kreatifmu dalam pemanfaatan domain untuk bisnis.Artikel dilengkapi dengan gambar atau video atau animasi lainnya.
4. Gunakan gambar yang telah disediakan untuk nilai tambah.
5. Artikel yang dibuat harus unik dan original.
6. Artikel tidak mengandung unsur SARA, perjudian, pornografi, atau konten yang melanggar undang-undang Republik IndonesiaApabila ada artikel yang sama, maka artikel yang digunakan adalah artikel yang di-submit pertama.

Terus tata caranya gimana ?
1. Peserta mendaftar dan mengirim URL artikel (disini)
2. Data yang diinputkan pada saat registrasi harus sesuai dengan KTP/SIM.
3. Peserta wajib mengikuti fanspage Rumahweb Indonesia di Facebook, Twitter, atau Instagram.
4. Share tulisan yang dilombakan di akun media sosial dan tag salah satu akun media sosial Rumahweb dengan hastag #rumahweb dan #blogcompetitionPada artikel yang dibuat harus ditambahkan backlink do follow ke website https://www.rumahweb.com dengan atribut title Domain murah, Hosting Indonesia, Hosting murah, Hosting unlimited, Email Domain (pilih salah satu).
5. Pada blog yang digunakan, peserta diperbolehkan untuk memasang banner lomba yang telah disediakan, klik (disini) untuk mendownload-nya.

Terus, hadiahnya apa saja ?
1. Juara 1 berhak mendapatkan uang senilai Rp. 3.000.000
2. Juara 2 berhak mendapatkan uang senilai Rp 2.000.000
3. Juara 3 berhak mendapatkan uang senilai Rp 1.000.000 dan untuk juara terfavorit mendaptkan hadiah senilai Rp.500.000 untuk 3 orang yang terpilih.

Eits, jangan khawatir, buat kamu yang nggak mendapatkan juara 1,2,3 maupun terfavorit, semua perserta berhak mendaptkan hadiah domain .com dan .my.id gratis selama 1tahun. Untuk informasi lebih jelasnya, silhkan klik disini

selamat berkompetisi bagi kalian para blogger, tunggu informasi lainnya tentang blog competition yang pastinya akan selalu kami posting di blog ini. Semoga bisa membantu dan bermanfaat untuk teman2 blogger semua.


Monday, June 8, 2020

Cara membuat load more sebagai penganti pagination pada template blogger

Gambar loadmore
Cara membuat load more sebagai penganti pagination pada template blogger

Halo sobat blogmania, kembali lagi kami akan berbagi tutorial cara membuat load more sebagai pengganti pagination.

Pagination ini hampir ada di semua jenis template blogger. Karena pagination ini adalah pemisah untuk menapilkan jumlah artikel yang di tampilkan di halaman hompage atau beranda.

Dan tombol load more sebagai pengganti pagination ini sekarang sudah banyak sekali digunakan terutama untuk website maupun blog dengan tampilan kekinian dan modern.

Manfaat menggunakan tombol load more sebagai penganti pagination ini sangat banyak. Diantaranya yaitu dapat mempercepat loading blog, ini sangat terasa sekali bahkan saya cek dengan google pagespeed insight skornya cukup bagus .

Selain mempercepat loading blog, load more ini juga bisa mengurangi skor bounce rate pada blog dan pastinya juga sebagi pemercantik tampilan blog agar kekinian.

Oke. Langsung saja kita mulai pemasangannya.

Yang pertama yaitu cari kode </b:skin> dan paste script ini diatasnya.

/* Tombol LoadMore Blogmania.my.id*/
.sedang-loading,.muatlagi{background-color:#fff;font-size: 16px;font-weight: bold;margin: 0px auto;padding: 7px 15px;text-align: center;white-space: nowrap;border-radius: 25px;box-shadow: 0 5px 4px rgba(0,0,0,0.05);border: 1px solid #00000012;} a.sedang-loading,a.muatlagi{color:#000} .sedang-loading:after{width: 14px;height: 14px;margin-left: 10px;vertical-align: -2px;display: inline-block;animation: aqilSpin .75s linear infinite normal;-webkit-animation: aqilSpin .75s linear infinite normal;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z' fill='%23aaa'></path></svg>") center no-repeat;content: '';} .muatlagi:hover,.sedang-loading:hover{box-shadow:-1px 9px 11px 0px rgba(0,0,0,0.05)} @keyframes aqilSpin {from {transform:rotate(0deg)}to {transform:rotate(360deg)}} @-webkit-keyframes aqilSpin {from { -webkit-transform: rotate(0deg)} to { -webkit-transform:rotate(360deg)}}

Untuk template viomagz, cari kode di bawah ini dan silahkan di hapus semua. Note: "Ini khusus template viomagz, jika kamu gunakan template selain viomagz, abaikan saja dan lanjut ke pemasangan kode js di bawah".

<b:if cond='data:blog.isMobile == &quot;false&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <!-- JAVASCRIPT NAVIGASI HALAMAN BERNOMOR --> <script> var perPage=8; var numPages=6; var firstText ='<b:switch var='data:blog.locale'><b:case value='id' />Pertama<b:default />First</b:switch>'; var lastText ='<b:switch var='data:blog.locale'><b:case value='id' />Terakhir<b:default />Last</b:switch>'; var prevText ='&#8250; <b:switch var='data:blog.locale'><b:case value='id' />Sebelumnya<b:default />Prev</b:switch>'; var nextText ='<b:switch var='data:blog.locale'><b:case value='id' />Selanjutnya<b:default />Next</b:switch> &#8250;'; var urlactivepage=location.href; var home_page="/"; </script> <script> //<![CDATA[ if(numberedPagination==1){ if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress} }; //]]> </script> </b:if> </b:if> </b:if>



Jika sudah, silahkan kamu cari kode </body> dan paste script ini di atas tag </body> tadi.

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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 c(){return L.innerHTML=p.text.loading,v=!0,M?(y.classList.add(p.state.loading),l("loading",[p]),void u(M,function(t,n){y.className=x+" "+p.state.load,h=e.createElement("div"),h.innerHTML=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].innerHTML:"",a.length&&s.length){var d=s[s.length-1];e.title=o,d.insertAdjacentHTML("afterend",'<span class="fi" id="#fi:'+q+'"></span>'),h=e.createElement("div");for(var c=0,u=a.length;u>c;++c)h.appendChild(a[c]);d.insertAdjacentHTML("afterend",h.innerHTML),f(),M=i.length?i[0].href:!1,v=!1,q++,l("load",[p,t,n])}},function(t,e){y.classList.add(p.state.error),v=!1,f(1),l("error",[p,t,e])})):(y.classList.add(p.state.loaded),L.innerHTML=p.text.loaded,l("loaded",[p]))}function f(t){if(L.innerHTML="",T){h.innerHTML=p.text[t?"error":"load"];var e=h.firstChild;e.onclick=function(){return 2===p.type&&(T=!1),c(),!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){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)}},o.open("GET",e),o.send()}},T=1!==p.type,v=!1,H=r(p.target.posts)[0],L=r(p.target.anchors)[0],M=r(p.target.anchor,L),m=e.body,y=e.documentElement,x=y.className||"",E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=0,b=null,q=1;if(M.length){M=M[0].href,H.insertAdjacentHTML("afterbegin",'<span class="fi" id="#fi:0"></span>'),h=e.createElement("div"),f();var w=function(){E=H.offsetTop+H.offsetHeight,j=t.innerHeight,A=m.scrollTop||y.scrollTop,v||E>A+j||c()};w(),0!==p.type&&t.addEventListener("scroll",function(){T||(b&&t.clearTimeout(b),b=t.setTimeout(w,200))},!1)}return p}}(window,document);var infinite_scroll = new InfiniteScroll({ type: 0, target: { posts: '.blog-posts', post: '.post-outer', anchors: '.blog-pager', anchor: '.blog-pager-older-link' }, text: { load: '<a class="muatlagi" href="javascript:;">Muat Artikel Lainnya</a>', loading: '<a class="sedang-loading">Loading...</a>', loaded: '<span class="muatlagi">Sudah di halaman terakhir</span>', error: '<a class="muatlagi">error!</a>' } }); //]]></script> </b:if></b:if>

Nah, jika sudah selesai. Silahkan di simpan dan jika tampilannya seperti warna font atau background kurang sesuai dengan keinginan kamu, silahkan cari .sedang-loading,.muatlagi { dan ganti warna background dan color nya sesuai keingian.

Dan simpan. Semoga bermanfaat.



Monday, May 18, 2020

Blog competition dengan tema pengalaman pribadiku dalam menumbuhkan minat baca anak


Halo sobat blogmania. Kembali lagi, kamu akan membagikan informasi tentang lomba tulis artikel blog atau ( blog competition ) yang diselenggarakan oleh bloggerperempuan.co.id dengan tema "pengalaman pribadiku dalam menumbuhkan minat baca anak"

Informasi :

Periode: 17mei - 17juni 2020 
Tema: "pengalaman pribadiku dalam menumbuhkan minat baca anak" 
Penyelenggaraan: bloggerperempuan.co.id 
Hadiah: tunai dengan total
Rp6.000.000 (Enam Juta Rupiah) dan 5 Voucher Belanja sebagai hadiah hiburan.

Syarat dan ketentuan lomba :

* Peserta adalah Warga Negara Indonesia (WNI). 
*Orisinalitas blog sangat diutamakan. Artinya tulisan blog adalah milik sendiri dan bukan diambil dari tulisan blog lain ataupun situs lainnya (copy paste). 
*Tulisan dalam blog belum pernah diikutsertakan pada lomba serupa yang diselenggarakan pihak lain. 
*Tulisan tidak boleh melanggar hak kekayaan intelektual pihak manapun juga.
*Tulisan ditulis dalam bahasa Indonesia.
*Tulisan tidak boleh bermuatan politik dan SARA dan pornografi. 
*Peserta wajib mendaftarkan diri dengan mengisi form Registrasi di halaman ini. 
*Peserta wajib mengikuti akun media sosial Let’s Read Indonesia:
Facebook: Blogger Perempuan Network
Instagram: @letsread.indonesia dan Blogger Perempuan Network 
* Peserta wajib mengunduh aplikasi Let’s Read 
* Pengumuman pemenang akan diumumkan melalui website https://bloggerperempuan.co.id/ dan media sosial @bloggerperempuan 
* Pertanyaan dapat dilayangkan melalui email kontak@bloggerperempuan.com dengan subject Let’s Read Blog Competition.

Untuk informasi lebih lenkapnya, kalian bisa mengunjungi link aslinya di:
https://bloggerperempuan.co.id/lets-read/

Thursday, May 14, 2020

Lomba blog penyedia konten radio indonesia kbr.id dengan tema perubahan iklim



Ketentuan lomba:

Deadline 22mei 2020

- Follow akun media sosial KBR: Facebook Kantor Berita Radio-KBR , Twitter @halokbr @beritaKBR serta Instagram @ kbr.id

- Platform blog bebas, panjang tulisan tidak dibatasi.

- Blogger boleh mengirimkan lebih dari 1 tulisan selama periode penyiaran talkshow. Semakin banyak mengim tulisan, tentu semakin besar peluang untuk menang.

- Posting tulisan/link Anda di akun media sosial masing-masing, sertakan tagar #PerubahanIklimKBR disertai kalimat yang menarik serta jangan lupa mention akun media sosial KBR.

- Tulisan harus asli, bukan plagiat. Penulis wajib mencantumkan sumber untuk setiap data. atau gambar

- Di akhir artikel, wajib mencamtumkan tulisan:
Saya sudah berbagi pengalaman soal climate change. Anda juga bisa berbagi dengan mengikuti lomba blog "Perubahan Iklim" yang diselenggarakan KBR (Kantor Berita Radio) dan Ibu-Ibu Doyan Nulis (IIDN). Syaratnya, bisa Anda lihat di sini (beri link artikel persyaratan ini) 
- Kirim tulisan ke email:  ruangpublikkbr@gmail.com  dengan subyek “Lomba Blog (spasi) Perubahan Iklim (spasi) Nama (spasi) Judul Blog”.
- Di badan email, sertakan juga link artikel, data diri Anda yaitu nama lengkap, usia, domisili, nama akun media sosial (FB, Twitter, IG) dan nomor HP.

- Keputusan juri bersifat mutlak dan tidak dapat diganggu gugat. Hasil karya penulisan menjadi hak panitia.
Kami akan memilih 3 (tiga) pemenang per episode untuk mendapatkan hadiah uang tunai
yaitu:
Juara 1 Rp 800.000
Juara 2 Rp 400.000
Juara 3 Rp 300.000
Di akhir babak, ada grand prize untuk menentukan Juara 1, 2 dan 3 dari seluruh artikel yang masuk ke KBR, yaitu:
Juara 1: Rp 3.500.000
Juara 2: Rp 2.500.000
Juara 3: Rp 1.500.000

Baca selengkapnya di sini

Mengenal bounce rate pada blogger adalah

Bounce rate blog



Mengenal bounce rate pada blogger adalah......

Halo sobat blogmania. Buat kalian yang berkecimpung di dunia blogging, pasti tidak asing lagi dengan yang namanya bounce rate.

Tapi, buat teman - teman yang masih awam dan baru memulai jadi blogger, pasti asing dengan istilah ini.

Dan, dipostingan kali ini. Blogmania akan menjelaskan sedikit mengenai bounce rate ini, cara mengetahuinya, dan cara mengatasiantaya.

Baca sampai akhir ya, biar kalian tidak kelewatan informasi penting yang blogmania bagikan.

Kita mulai dengan mengenal apa itu bounce rate?
  Bounce rate, adalah istilah atau presentase dari lamanya pengunjung mengakses blog/website kita.

Jadi, bounce rate ini sederhananya yaitu sebuah metode pengukuran dari google untuk mengukur waktu pengunjung membaca artikel dari suatu blog/website.

Untuk mengetahui seberapa tinggi bounce rate rata - rata blogmu, kamu bisa menggunakan google analytic.

Nah, jika bounce ratenya rendah, nilai bounce rate nya misalnya saja 10%, maka semakin bagus lah kualitas artikel maupun blog/website tersebut.

Tapi sebaliknya, jika bounce rate nya tinggi sekali, misalnya saja 80-100%, maka menandakan bahwa blog atau website kamu tersebut buruk, karena pengunjung tidak betah berlama - lama di blogmu.

Penyebab umumnya biasanya adalah artikel yang kamu sajikan tidak berkualitas, jadi tidak enak untuk dibaca.

Atau mungkin banyaknya iklan, pemilihan font yang kurang sesuai, warna background dan warna font yang tidak nyaman untuk dibaca.

Ataupun banyaknya iklan yang menggangu. Sehingga, menyebabkan loading blog yang lama dan pengunjung lebih memilih membaca artikel di blog/website lainnya yang lebih ringan.

Jadi, intinya untuk mengurangi bounce rate pada blog kamu yaitu: sajikan artikel yang panjang tapi menarik dan enak untuk dibaca, gunakan font dan warna yang sesuai agar nyaman saat membaca, dan yang terkahir jika blog kamu di monetesasi dengan iklan, jangan pasang iklan berlebihan yang menggau kenyaman pembaca.

Nah, itu adalah penyebab dan cara mengatasi bounce rate ala blogmania.

Saturday, May 9, 2020

Meta tag pada blogger yang wajib ada agar seo friendly

Mata tag image



Halo sobat blogmania. Kembali lagi kali ini blogmania akan berbagi informasi mengenai meta tag.

Lalu meta tag itu apa sih?

Meta tag, adalah satu tag html yang berguna untuk mengidentifikasi sebuah website agar dapat di ketahui dan ditemukan oleh mesin pencari.

Jadi meta tag ini sangat penting sekali agar mesin pencari seperti google dapat mengindex dan mengidentifikasi situ/blog kita.

Lalu, cara memasang meta tag gimana?
Cara nya yaitu tinggal masuk ke tema, edit html, lalu disitu tambahkan tag meta tepat di bawah tag <head>.
Contohnya:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css=''>
  <head>
<meta content=' ' name=' '/>
<meta content=' ' name='descriptian'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content=' ' property='og:image'/>

Nah, beberapa meta tag yang wajib kamu pasang biar blog kamu makin seo friendly
diantaranya yaitu:

1. Meta Description
Tag meta yang satu ini sangat penting sekali. Karena nantinya akan diisi dengan deskripsi dari situ/blog kamu.
<meta name="description" content="isi dengan deskripsi blog kamu" />

2. Meta Keyword
Tag meta keyword ini berfungsi untuk diisi dengan keyword atau kata kunci agar lebih mudah di cari di google.
Contohya:
<meta content=’droidriky, blogmania, tutorial blogger, informasi bermanfaat " name='keywords'/>

Note: ganti keyword di atas dengan keyword yang sesuai dengan bulog kamu, dan jangan lupa pasang di bawah head seperti contoh di atas tadi ya.

3. Meta google verifikasi
Meta tag ini wajib ada bila bulog kamu ingin muncul dan dapat di temukan di google. Caranya pasang tag di ini dan ganti 12345 dengan id yang kamu dapatkan saat kamu mendaftarkan google search consol.
<meta content='12345' name='google-site-verification'/>
4. Meta bing dan alexa
Agar blog kaum terindah oleh mensin pencari lain selain google. Kamu juga bisa mendaftarkan di salah satu search engin yang populer selain google, yaitu bing. Dan tambahkan meta tag ini yang kalian dapatkan saat pertama kali daftar.
<meta content='id bing' name='msvalidate.01'/>
Dan jika kamu ingin mengetahui rangking alex bulog kami secara akurat. Kamu memerlukan daftar alexa rank dan dipasang meta tag di bawah ini
<meta content='id alexa rank' name='alexaVerifyID'/>
5. Meta tag author
Yang terakhir adalah meta author, Meta tag ini nantinya akan bersisi nama si pembuat blog/website tersebut agar bisa dikenali siapa nama pemiliknya.
<meta content='riky setiomulyo' name='Author'/>
Nah, dari beberapa meta tag diatas agar blog makin seo friendly. Jika di gabungkan seperti ini.

<meta name="description" content="isi dengan deskripsi blog kamu" />
<meta content=’droidriky, blogmania, tutorial blogger, informasi bermanfaat " name='keywords'/>
<meta content='12345' name='google-site-verification'/>
<meta content='id bing' name='msvalidate.01'/>
<meta content='id alexa rank' name='alexaVerifyID'/>
<meta content='riky setiomulyo' name='Author'/>
Nah, jika kamu memasang mata tag di atas. Di butuhkan tinggal 1-2hari agar google dapat mengcrawling nya dan lihat perubahannya.

Semoga artikel tutorial ini dapat mudah untuk dipahami dan jangan lupa untuk mampir juga ke droidriky untuk updat dan tambah pengetahuan seputar dunia it dan internet.

Thursday, April 30, 2020

Cara membuat skill bar pada halaman blog


Progress bar


Halo sobat blogmania, kembali lagi admin akan berbagi tutorial cara membuat porgress skill bar pada halaman blog.

Proggres skill bar ini biasanya digunakan untuk mengukur seberapa jauh artikel yang di baca, atau ilmu yang di pelajari. Jadi sekain tinggi nilai skill bar nya, semakin tinggi pula kesulitan yang akan di pelajari.

Skill bar ini digunakan pada blog droidriky, untuk menampilkan seberapa jauh dan sulit artikel tentang pemrograman php yang di bagikan.

Nah, jika kamu ingin membuatnya, silahkan ikuti langkah - langkah di bawah ini.

Masuk ke blogger.com dan pilih bagian tema, lalu pilih edit html dan cari kode </style> atau jika tidak ada silahkan cari kode</b:skin> .

Jika sudah, paste script Css di bawah ini.

.skills{
  width: 100%;
  max-width: 400px;
  padding: 0 0px;
}
.skill-name{
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 20px 0;
}
.skill-bar{
  height: 20px;
  background: #cacaca;
  border-radius: 8px;
}
.skill-per{
  height: 20px;
  background-color: #0fbcf9;
  border-radius: 8px;
  width: 0;
  transition: 1s linear;
  position: relative;
}
.skill-per::before{
  content: attr(per);
  position: absolute;
  padding: 4px 6px;
  background-color: #000;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  top: -35px;
  right: 0;
  transform: translateX(50%);
}
.skill-per::after{
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  top: -10px;
  right: 0;
  transform: translateX(50%) rotate(45deg);
  border-radius: 2px;
}


Selanjutnya, masih di edit html dan cari lagi kode </body> dan paste javascript di bawah ini.

<script>
      $('.skill-per').each(function(){
        var $this = $(this);
        var per = $this.attr('per');
        $this.css("width",per+'%');
        $({animatedValue: 0}).animate({animatedValue: per},{
          duration: 1000,
          step: function(){
            $this.attr('per', Math.floor(this.animatedValue) + '%');
          },
          complete: function(){
            $this.attr('per', Math.floor(this.animatedValue) + '%');
          }
        });
      });
    </script>

 
Lalu cari script untuk memanggil jquery, di blog kamu sudah ada apa belum. Jika belum ada script untuk memanggil jquery, silahkan paste script di bawah ini tepat di atas kode </head>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Jika sudah, silahkan di simpan tema nya. Dan jika ingin menampilkan skill barnya, silahkan paste script di bawah ini pada bagian yang kamu inginkan di halaman postingan lalu klik compose, dan paste script ini pada bagian paling bawah.

<div class="skills">
<div class="skill">
<div class="skill-name">
HTML</div>
<div class="skill-bar">
<div class="skill-per" per="90">
</div>
</div>
</div>
<div class="skill">
<div class="skill-name">
CSS</div>
<div class="skill-bar">
<div class="skill-per" per="70">
</div>
</div>
</div>
<div class="skill">
<div class="skill-name">
Javascript</div>
<div class="skill-bar">
<div class="skill-per" per="60">
</div>
</div>
</div>
</div>

Jika sudah selesai, silahkan di simpan dan lihat hasilnya.  Semoga membantu dan bermanfaat.

Cara membuat presentase scroll bar pada blog


Progress scroll bar


Halo soba blogmania, tutorial blogger kali ini, blogmania akan berbagi tutorial cara membuat presentase scroll bar.

Apa itu presentase scroll bar?
Presentase scroll bar yaitu jika halaman blog di scroll, makan nanti di samping akan menunjukkan progress berapa persen kamu menscroll nya.

Biasanaya para blogger mesang presentase scroll bar ini digunakan untuk menamilkan sebaerapa jauh para pembaca membaca artikelnnya, misal sudah 50%, maka nanti presentase scroll bar akan tampil di sebelah kanan.

Nah untuk memasangnya cukup mudah, silahkan ikuti tutorialnnya di bawah ini.
Masuk ke blogger.com dan pilih bagian tema dan pilih edit html, lalu cari kode </b:skin> dan paste css di bawah ini.

/* Persentase Scrollbar */ #scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px} #scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

Jika sudah selesai, silahkan kamu simpan dan masuk ke bagian tata letak dan tambahakan gadget lalu pilih html/javascript dan paste kode html di bawah ini.

<div id='scrollPersentase'/>

Lalu yang terakhir cari kode </body> dan paste script ini di atas kode </body> tersebut.

<script type='text/javascript'> /*<![CDATA[*/ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scrollPersentase').height() / 2; $('#scrollPersentase') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scrollPersentase').fadeOut(); }, 1500); }); /*]]>*/ </script>

Jika sudah, silahkan di simpan dan lihat hasilnnya.

Nah, jika ingin menyembunyikan scroll bar tadi pada home page dan hanya ingin menampilkan scroll bar di halaman artikel saja, silahkan edit lagi pada tema dan edit html.

lalu cari kode untuk menamilkan widget scroll bar yang kamu buat di tata letak tadi lalu tambahakan !data:view.isPost di bagian widget cond=' ' seperti di bawah ini

<b:widget cond='!data:view.isPost' id='HTML1' locked='false' title='Author' type='HTML' version='2' visible='true'><div id='scrollPersentase'/></b:widget>

Semoga membantu dan bisa bermanfaat dan jangan lupa untuk berkomentar jika ada yang salah.

Cara membuat tabel keren di blogger

Tabel


Cara membuat tabel keren di blogger

Halo sobat blogmania, kembali lagi blogmania kali ini akan berbagi tutorial cara membuat tampilan tabel yang keren pada blog.

Tabel ini biasanya digunakan untuk untuk menamilkan data - data dalam bentuk tabel seperti, nama dan nomor, keterangan, layanan dan lainnya.

Nah, untuk membut tampilan tabel yang keren pada template blogspot. Silahkan masuk ke tema, lalu pilih edit html, dan cari kode </style> atau </b:skin>, lalu paste script di bawah ini, tepat di atas kode </b:skin> tadi.

/* Tabel Blogger Responsive */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
.post-body table th {background:#747d8c;}
.post-body table tr th:hover{background:#57606f}
.post-body table.tr-caption-container {border:1px solid #f6f8f9;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
.post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}
.post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
table tr:nth-child(odd):hover td {background:#b0b1b4;}


Jika sudah, silahkan di simpan. Dan jika ingin menampilkan hasilnnya, silahkan klik entri baru>edit html> paste script di bawah ini.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr><th>Nama</th><th>Keterangan</th> </tr>
<tr><td>Nama1</td><td>Nilai1</td> </tr>
<tr><td>Nama2</td><td>Nilai2</td> </tr>
<tr><td>Nama3</td><td>Nilai3</td> </tr>
<tr><td>Nama4</td><td>Nilai4</td> </tr>
</tbody> </table>


Nah, jika kamu ingin menampilkan tabel di halaman artikel kamu, kamu juga cukup memangil dengan <tabel> seperti di atas.

Wednesday, April 29, 2020

Cara mendaptkan domain js.org secara gratis



Halo sobat blogmania. Kembali lagi blogmania akan berbagi tutorial cara mendapatkan domain js.Org secara gratis.
Sebenarnya domain js.org ini tidak bisa digunakan atau dihubungkan ke blog blogspot ataupun website yang di hosting di luar github.

Domain js.org ini memang khusus untuk domain blog statik yang di buat di github.

Tetapi, meskipun kita membuat blognya dari github, tapi hasilnya juga tidak kalah dengan blog yang di host di hosting berbayar lainnya, lihat saja blog blogzen.js.org.

Blog yang kita buat di github ini hanya bisa memakai bahasa pemrograman css,html, dan javascript, karena blog yang akan kita buat bersifat statik atau tetap.

Cara membuatnya gimana?
Cara membuat blog di github yaitu, silahkan buat akun github, klo udah punya silahkan login aja. Jika sudah selesai, silahkan mencari theme Jekyll yang gartis di kotak pencarian.

Atau bisa juga gunakan tema di bawah ini.
https://github.com/wowthemesnet/mundana-theme-jekyll

Sesudah ketemu, silahkan klik tombol fork di sebelah kanan atas. Dan tunggu hingga selesai.

Setelah selesai di fork, nanti kamu akan di bawa ke bagian setting. Disitu silahkan ganti repostiory name dengan nama reposti yang kamu inginkan, misal: riky.github.io dan silahkan di simpan.

Belum selesai disini, silahkan cari file config.yml . Di reposit tadi, dan cari dan kosongkan tulisan base url nya ("kosongkan bas url").

Nah, untuk mengatur halaman dashboard, untuk mengedit, mempublikasikan, atau menghapus dan mengelola postingan. Kamu membutuhkan ditus forestry.
Carannya, silahkan signup di link ini.
https://app.forestry.io/signup

Saat register, langaung aja via email, jangan yang sync github, biar ngak ribet.
Setelah login, klik add site lalu pilih Jekyll, dan masuklah ke dashboard forestry seperti gambar.

Nah, jika blog sudah berhasil di build, untuk mendapatkan domain js.org , silahkan  buat file dengan nama CNAME dan masukkan nama domain yang kamu inginkan, misal riky.js.org .

Setelah selesai, silahkan masuk ke https://github.com/js-org/js.org/blob/master/cnames_active.js dan masukkan nama domain yang kamu inginkan berdasarkan alfabet.

Setelah itu, tunggu 24jam untuk mendaptkan konfirmasi email dan nanti domain akan otomatis aktif.


cara membuat halaman partner keren untuk bertukar backlink

Backlink


Halo sobat blogmania. Kembali lagi blogmania kali ini akan berbagi tutorial cara membuat halaman partner yang keren untuk bertukar backlink.

Lalu halaman partner itu apa sih?
Halaman partner, atau blogmania sering menyebutnya dengan media partner, yaitu sebuah halaman pada blogspot yang digunakan untuk mrnrmpatkan link menuju blog/website orang lain, blog yang di tuju pun juga wajib memasang link menuju blog kita.

 Atau sering di sebut dengan bertukar backlink. Tapi backlink dalam bentuk media partner ini lebih sederhana.

Gunanya halaman partner ini untuk apa?
Halaman media partner ini biasanya di gunakan oleh para blogger - blogger yang da/pa nya masih kecil.

 Jadi tujuan utamanya halaman partner ini untuk menaikkan skor DA/PA blog yang sangat berpengaruh sekali terhadap seo.

Jadi, semakin banyak backlink yang menuju blog kamu, semakin tinggi pula skor DA/PA dan semakin naik juga kualitas seo blog kamu, yang akan mendongkrak agar blog kamu bisa munjul di laman pertama gogle search.

Cara membuatnnya gimana?
Carannya cukup masuk ke akun blogger kamu, klik pada bagian halaman dan tambah halaman baru dan beri nama sesuai keinginan kamu (ex. Halaman-partner)

Setelah itu, pilih edit html atau compose dan paste script di bawah ini.



Jika sudah, silahkan pubikasikan.

Lalu masuk ke bagian tema, dan pilih  edit html, lalu cari kode </head> dan paste script di bawah ini.



Jika sudah selesai, silahkan di save. Dan cek halaman yang telah kamu buat tadi.

Dan untuk menambahkan partner, silahkan paste script ini di bawah script terakhir pada halaman yang kamu buat tadi.



Demikian tutorial cara membuat halaman media partner yang keren, semoga bisa bermanfaat.

Tuesday, April 14, 2020

Lomba tulis artikel rumahweb terbaru berhadiah jutaan rupiah



Halo sobat blogger dan pembaca setia blogmania.my.id. Ada info terbaru nih dari rumahweb. Rumahweb sekarang mengadakan blog competition lagi nih, dengan mengusung tema " Website vs Marketplace: Pilihan atau Sinergi? ".

Rumahweb, adalah salah satu layanan penyedia hosting di indonesia , domain maupun vps dengan harga yang sangat terjangkau dan sudah cukup banyak dikenal. Menurut saya pribadi rumahweb adalah layanan penyedia domain dan hosting terbaik, karena fitur - fiturnya mudah banget dipahami meskipun baru pertama kali pasang domain. Selain itu, custer service yang cukup ramah dan cepat mersepon kita untuk membantu setiap kendala seputar pemasangan domain maupun hosting.

Nah, kini rumahweb kembali lagi menyelengarakan lomba menulis artikel dengan tema "Website vs Marketplace: Pilihan atau Sinergi? ", setealah beberapa bulan yang lalu juga sukses mengadakan lomba blog dengan tema "pentingnya email profesional".

Terus, periode lombanya kapan nih?
Lomba blog ini dimulai dengan regristrasi dan pengiriman artikel pada tanggal 1 april 2020 sampai dengan 20 juni 2020. Disusul dengan penjurian pada 21-25 Juni 2020 dan Pengumuman Pemenang pada 27 Juni 2020, sedangkan Pengiriman Hadiahnya pada tanggal 1 Juli 2020.

Syarat dan ketentuannya apa aja?
1. Tema artikelnya yaitu: " Website vs Marketplace: Pilihan atau Sinergi? "
2. Artikel yang dibuat terdiri dari minimal 500 kata.
3. Artikel berisi tentang pengalaman, hasil riset atau ide kreatif sesuai tema yang dilombakan. Contohnya domain dimanfaatkan untuk nama website, domain forwarding ke social media, marketplace atau tuangkan ide kreatifmu dalam pemanfaatan domain untuk bisnis.Artikel dilengkapi dengan gambar atau video atau animasi lainnya.
4. Gunakan gambar yang telah disediakan untuk nilai tambah.
5. Artikel yang dibuat harus unik dan original.
6. Artikel tidak mengandung unsur SARA, perjudian, pornografi, atau konten yang melanggar undang-undang Republik IndonesiaApabila ada artikel yang sama, maka artikel yang digunakan adalah artikel yang di-submit pertama.

Terus tata caranya gimana ?
1. Peserta mendaftar dan mengirim URL artikel (disini)
2. Data yang diinputkan pada saat registrasi harus sesuai dengan KTP/SIM.
3. Peserta wajib mengikuti fanspage Rumahweb Indonesia di Facebook, Twitter, atau Instagram.
4. Share tulisan yang dilombakan di akun media sosial dan tag salah satu akun media sosial Rumahweb dengan hastag #rumahweb dan #blogcompetitionPada artikel yang dibuat harus ditambahkan backlink do follow ke website https://www.rumahweb.com dengan atribut title Domain murah, Hosting Indonesia, Hosting murah, Hosting unlimited, Email Domain (pilih salah satu).
5. Pada blog yang digunakan, peserta diperbolehkan untuk memasang banner lomba yang telah disediakan, klik (disini) untuk mendownload-nya.

Terus, hadiahnya apa saja ?
1. Juara 1 berhak mendapatkan uang senilai Rp. 3.000.000
2. Juara 2 berhak mendapatkan uang senilai Rp 2.000.000
3. Juara 3 berhak mendapatkan uang senilai Rp 1.000.000 dan untuk juara terfavorit mendaptkan hadiah senilai Rp.500.000 untuk 3 orang yang terpilih.

Eits, jangan khawatir, buat kamu yang nggak mendapatkan juara 1,2,3 maupun terfavorit, semua perserta berhak mendaptkan hadiah domain .com dan .my.id gratis selama 1tahun. Untuk informasi lebih jelasnya, silhkan klik disini

selamat berkompetisi bagi kalian para blogger, tunggu informasi lainnya tentang blog competition yang pastinya akan selalu kami posting di blog ini. Semoga bisa membantu dan bermanfaat untuk teman2 blogger semua.