` Cara Halal: Blogging | Internetan Gratis Beserta Triknya Cara Halal: Blogging

Cara menggunakan google analystics untuk memantau trafik blog secara detail

Cara menggunakan google analystics

Mungkin bagi blogger baru masih bingung tentang trafik blog, yang di bagi dalam bermacam macam kategori, seperti page viuw, page, visitor.
Kalu dalam dashboard blog hanya ada satu ikhtisar kita gak akan tahu dalam kategori yang mana pengunjung blog kita, mungkin bagi kalian yang memakai histat bisa mengetahuinya?

Namun kami tidak akan membahas tentang histat, seperti dalam judul kita akan bahas sebuah applikasi dari google untuk memantau data visitor blog kita yang bernama google analystics.

Tentu sebagian dari kalian pasti sudah banyak yang mengetahui tentang applikasi ini, dan untuk yang belum tau apa itu google analistic, fungsi dan bagaimana cara menggunakanya  mari kita bahas bersama techno update

Apa itu Google Analystics


Google Analystics adalah sebuah applikasi dari google llc yang berguna untuk memantau data - data pengunjung situs website kita, dengan menggunakan google analystics kita bisa mengetahui pengunjung situs web kita secara detail, juga bisa pantau akun adsense yang sudah di tautkan.

Apa fungsi Google Analystics


Seperti yang sudah saya ulas di atas fungsi dari google analystics, sebagaimana yang sudah saya ambil dari deskripsi applikasi sebagai berikut


  • Periksa metrik kunci dalam built-in laporan
  • Detail membandingkan rentang tanggal dan menerapkan segmen
  • Memantau data secara real-time
  • Jelajahi untuk membangun laporan Anda sendiri dengan kombinasi metrik, dimensi, dan segmen.
  • Laporan data bisa di simpan di dashboard applikasi sehingga Anda dapat dengan mudah melihat kembali.


Bagaimana cara menggunakan Google Analystic


Untuk menggunakan google analystics ini kalian hanya perlu menautkan situs blog kalian dengan cara memasang kode java script dalam templat, untuk lebih jelasnya lihat langkah - langkah menggunakan google analystics di bawah


  1. Dalam browser anda kunjungi situs Google Analystics di link ini
  2. Akan terbuka jendela pendaftaran dan lengkapi semua data yang di sediakan.
  3. Setelah semua data sudah di lenkapi pilih dapatkan id.
  4. Akan terbuka jendela baru dan di situ kalian harus copy kede html yang di berikan dan letakan di bawah kode <head> dalam templat kalian.
  5. Setelah semua langkah di atas kalian hanya perlu refres google analystick untuk mulai memantau data - data anda


Begitulah cara memantau situs web anda dengan mudah

Gunakan applikasi Google Analystics untuk mempermudah mengecek data - anda dan gunakan akun google untuk masuk ke applikasi.

Bisa download di playstore
Atau di link ini

Cara membuat related post / baca juga di templat bawaan blogspot

Related post.jpg
Related post(baca juga)

Masih tentang modifikasi templat bawaan blogspot supaya makin seo, setelah membahas tentang cara membuat breadcrumbs di postingan sebelumnya, kali ini admin akan bagikan sebuah tutorial tentang cara menambahkan related post di templat bawaan blog.

Sudah pada tahu kan apa itu related post? Yang belum tahu nih admin jelaskan!
Related post atau tulisan baca juga dalam sebuah blog adalah link yang menuju ke postingan dalam label kategori terkait dengan postingan yang sedang di buka atau lebih jelasnya adalah postingan terkait di dalam label kategori tersebut.

Apa penting related post dalam sebuah blog? Kalau menurut admin sih penting!! Kenapa? Contoh mudah seumpama kita mencari sebuah artikel yang membahas tentang breadcrumbs nah dalam post tersebut tersemat artikel tentang cara buat blog lebih seo kira2 apa yang kalian pikirkan? kalau aku sih akan mengintipnya hehe, ok lanjut......

Untuk membuat related post dalam templat bawaan blogspot cukup mudah dengan kalian memahami id tata letak widget post untuk lebih jelasnya ikuti tutorial di bawah

Pertama edit html dan cari kode </head> biar lebih mudah gunakan ctrl+f dan taruh kode berikut di atasnya


  <b:if cond='data:blog.pageType == &quot;item&quot;'> <script type="text/javascript"> //<![CDATA[ var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');} //]]> </script> </b:if>

Kedua ganti kode <data:post.body/> ke dua atau ketiga dan ganti dengan kode berikut

  <div expr:id='&quot;post1&quot; + data:post.id'/> <div class='post-terkait'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/> </b:if> </b:loop> </b:if> <h4>Baca Juga</h4> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div> <script type='text/javascript'> var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); var s=obj1.innerHTML; var t=s.substr(0,s.length/3); var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} </script>

Dan supaya tampilan nya cantik letakan css berikut di atas kode ]]<b:skin> atau </style>

  .post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc} .post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important} .post-terkait ul {margin:0;padding:0} .post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important} .post-terkait ul li:last-child{border:none !important} .post-terkait a {color:#1b71bc;font-size:13px !important} .post-terkait a:hover {text-decoration:underline}

Di coba ya hasilnya komen di bawah untuk penampilanya seperti punya saya.

Semoga berhasil ya kalau kalian teliti pasti sukses ??????

Cara membuat breadcrumbs di templat bawa'an blogspot

Breadcrumbs.jpg
Breadcrumbs

Templat bawa'an blogspot ini memang keren2 dan cantik2 namun templat bawaan masih standar dalam hal fitur.

Tapi kalian tetap bisa buat templat bawa'an blog lebih menarik.
Seperti tutorial kali ini admin akan bagikan cara membuat breadcrumbs di templat bawaan blogspot.

Sebelum kita lanjut ke tutorial alangkah baiknya kita mengetahui apa itu breadcrumbs?

Breadcrumbs adalah navigasi pada sebuah blog yang berisi lokasi kategori blog yang sedang di buka.dengan mata lain kita bisa msngetahui jalur blog yang kita buka

Untuk membuat breadcrumbs di templat bawaan blogspot kalian bisa ikuti tutorial di bawah, ikuti sampai akhir artikel supaya tidak ada kesalahan dalam memasang breadcrumbs ini

Pertama
Pada edit html, cari code ini <b:incudable id='main' var='this'> Lalu hapus ganti dengan kode dibawah ini

 <b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.searchQuery'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='this'> <b:include data='posts' name='breadcrumb'/>


Kedua

Cari kode ]]><b:skin> dan tambahkan css berikut di atasnya


  body.item-view .Blog .post-title-container{ padding-top: 0px; } .breadcrumbs { padding-left: 140px; padding-top: 50px; background: #25a186; font: 400 14px Open Sans, sans-serif; color: rgba(255, 255, 255, 0.25); } .breadcrumbs span { font-style: italic; color: rgba(255, 255, 255, 0.50); } @media screen and (max-width: 1168px){ .breadcrumbs {padding: 62px calc((100% - 920px) / 2) 1px;}} @media screen and (max-width: 968px){ .breadcrumbs {

Dan kalian bisa sesuaikan backgroundnya dengan templat kalian dengan cara mengganti kode yang berwarna biru dengan warna kalian.
Jika ingin background breadcrumbs transparan kalian tinggal ganti kode tersebut dengan #

Terakhir simpan templat kalian.


Dan ada satu lagi yang penting agar breadcrumbs bisa muncul di templat bawa'an blog, karna kode <b:incudable id='main' var='this'>  lebih dari satu seperti templat yang saya pakai, kalian bisa meletakan kode breadcrumbs di <b:incudable id='main' var='this'> pada halaman utama supaya bisa muncul yaitu dengan cara

  • Masih pada edit html
  • Dan cari kode blog1 ini kode widget halaman 
  • Dan letakan kode bredcrumbs di kode  <b:incudable id='main' var='this'> di blog1 ini selesai

Cara edit templat blogspot via android

Cara edit templat xml via smartphon


Tutorial edit templat blog lewat android paling mudah sekalipun untuk pemula.

Desain templat menjadi hal yang sangat penting di sebuah blog !!!, jelas saja orang akan tertarik liat desain tampilan blog yang menarik.
Untuk membuat templat yang menarik kita bisa tambahkan fitur-fitur tertentu seperti
  • Menambahkan breadcrumb.
  • Membuat menu media sosial.
  • Membuat menu navigasi.
  • Membuat credit link footer.
  • Membuat related post/ baca juga.
  • Menambahkan back to top.
Dan untuk menambahkan itu semua kita harus tau bahasa pemograman seperti css,java script,html,dan sebagainya.

Untuk menempatkan kode-kode agar tampilan templat menarik kita harus sisipkan kode tersebut di templat kita,dan kita perlu edit html di dalam dashboard blog kita, hal ini akan sangat mudah kalau kita pakai pc, tapi sulit kalau kita edit templat di dashboard blog pakai android.

Lalu bagaimana cara edit templat via android????

Dalam kesempatan kali ini admin akan share tutorial edit templat.xml via android ikuti tutorial sampai selesai ya !!!

#1.unduh applikasi Quick edit di playstore

kenapa menggunakan applikasi ini?
Karena QuickEdit adalah penyunting teks yang cepat, stabil dan memiliki fitur lengkap untuk Android. Telah dioptimasi untuk penggunaan di ponsel dan tablet!
Fitur-fitur:
? Aplikasi notepad dengan banyak perbaikan.
? Penyunting Kode dan sorot sintaks untuk lebih dari 50 bahasa pemrograman yang berbeda (C++, C#, Java, HTML, CSS, XML, JavaScript, PHP, ...).
? Kinerja tinggi dan umpan balik waktu sebenarnya pada file teks besar (lebih dari 10.000 baris).
? Tampilkan dan  sembunyikan nomor baris.
? Undo dan Redo modifikasi tanpa batas.
? Tampilan, peningkatan dan penurunan indentasi baris.
? Temukan Cepat dan penyuntingan.
? Geser halus di kedua arah vertikal dan horisontal.
? Langsung menuju nomor baris tertentu.
? Cepat mencari dan mengganti.
? Mudah masukan hex warna.
? Secara otomatis mendeteksi pengkodean karakter.
? Mampu mengubah pengkodean teks.
? Buka berkas dari berkas yang baru dibuka dan tambahkan berkas.
? FTP, FTPS, SFTP; Google Drive, Dropbox, OneDrive.
? Mendukung tema terang dan gelap.
? Dioptimasi untuk ponsel dan tablet.
QuickEdit Text Editor memiliki banyak optimasi pada kinerja dan pengalaman pengguna yang sangat baik, kecepatan dan umpan balik jauh lebih baik daripada aplikasi editor teks lain yang ada saat ini di Google Play. Anda dapat menggunakannya sebagai penyunting teks atau penyunting kode untuk berkas teks biasa dan berkas pemrograman.


#2.Download templat xml

Kenapa harus di download?
Kita harus download templat blog kita terlebih dulu karena kita tidak bisa edit templat secara online di dashboard blog seperti memakai pc, makanya kita harus mendownload templat kita agar kita bisa edit secara offline.
Caranya untuk blogspot di dashbord blog kalian
  • Pilih tema ->
  • Pilih back up di pojok kanan atas->
  • Lalu pilih Download tema.

#3.Edit templat.xml

Cari templat hasil download tadi lalu pilih pilihan dan buka dengan Quick edit, di sini kalian bisa mulai otak atik templat kalian, supaya lebih seo friendly

Untuk membuat templat seo friendly kalian bisa cari artikel di kabar techno ini berikutnya

#4.Dan terahir simpan templat kalian.


Note!!!
Sebaik nya kalian salin templat xml kalian, jika ada kesalahan dalam mengedit templat kita masih punya salinanya.

Cukup mudah kan untuk edit templat blog lewat android, untuk pemula ketelitian yang paling penting.

Untuk praktek
anda bisa gunakan tutorual di bawah :


Back To Top