HeiBroku: Tutorial Blogger

Cara Mengatasi Icon Font Awesome Yang Corrupt

Posted by HeiBroku Posted on 4:01:00 AM

Unknown at 4:01:00 AM

Cara Memasang Link Video Dari Google Drive Pada VideoJS

Posted by HeiBroku Posted on 6:04:00 PM

Artikel ini adalah lanjutkan dari artikel saya yang sebelumnya yaitu "membuat web streaming dengan videojs di blogger" dan masih membahas mengenai topik tentang videojs player di blogger. Jika anda sudah memasang kode css dan javascript videojs pada template anda maka anda sudah bisa mengikuti tutorial kali ini, jika belum silahkan simak tutorial cara memasang videojs pada artikel saya yang sebelumnya.

Nah, untuk menjalankan sebuah video streaming menggunakan player videojs, tentu saja kita membutuhkan sebuah file video yang sudah diupload ke server, nah disini saya akan membagikan teknik/cara memasang link video dari google drive pada videojsplayer anda. Memasang hosting/server dari google drive memiliki trik khusus agar video yang anda upload dapat anda embed di videojs. Berikut ini adalah langkah-langkahnya:

Login ke google drive

Namun pertama-tema yang anda perlukan adalah sebuah akun google kemudian silahkan masuk pada halaman google drive di http://drive.google.com atau http://google.com/drive. Lalu pada beranda google drive silahkan klik new dan tambahkan sebuah folder baru, pada gambar di bawah saya membuat folder bernama K-ON:

Link Video Dari Google Drive Pada VideoJS

Lalu silahkan buka folder baru yang sudah anda buat tersebut, lalu upload sebuah video dengan format MP4 kedalam folder google drive tersebut:

Pada gambar di atas saya sudah mengupload beberapa video berformat MP4, lalu perhatikan gambar yang saya lingkari warna merah, silahkan klik nama folder anda kemudian pilih "bagikan" maka akan muncul menu seperti gambar di bawah, lalu klik lanjutan:

Lalu akan muncul menu di bawah lalu ubah menjadi publik lalu klik simpan:

Setelah anda mengklik simpan maka akan terdapat url sharing untuk folder anda, kurang lebihnya urlnya adalah seperti di bawah ini:

https://drive.google.com/folderview?id=0B22v4Upu7PNhYTdFVDNX&usp=sharing

Nah, yang berwarna merah di atas adalah id untuk folder yang sudah anda buat secara publik tadi, fungsinya adalah sebagai penanda atau adress untuk file di dalam folder tersebut, sekarang kita kembali pada pemasangan html videojs pada postingan/artikel anda, perhatikan kode di bawah:

<video id="my-video" class="video-js" controls preload="auto" width="570" height="320"
poster="URL GAMBAR SAMPUL VIDEO" data-setup="{}">
<source src="https://googledrive.com/host/0B22v4Upu7PNhYTdFVDNXT/K-ON! Episode 13 - Tanukinime.com.mp4" type='video/mp4'>
</video>

Pada url yang berwarna merah di atas adalah ID folder google drive anda sedangkan yang berwarna biru adalah nama file video di dalam folder drive anda, jadi struktur untuk URLnya adalah seperti ini:

https://googledrive.com/host/kodefolder/namafile.mp4

Untuk priview/demo hasil pemasangan video dari google drive dengan videojs silahkan lihat pada artikel saya yang sebelumnya, klik di sini. Itulah cara memasang embed file dari google drive di videojs blogger, ikuti langkah-langkah di atas dengan cermat pasti anda berhasil memasang video dari google drive, sekian artikel saya kali ini, semoga dapat berguna, jika ada pertanyaan atau saran silahkan berkomentar pada halaman ini, terima kasih.

Unknown at 6:04:00 PM

Membuat Web Streaming Dengan VideoJS Di Blogger

Posted by HeiBroku Posted on 5:28:00 PM

VideoJS adalah salah satu player video (pemutar video) yang cukup populer di kalangan develovers web, VideoJS adalah sebuah aplikasi media player (video audio) untuk halaman web yang dibuat menggunakan HTMl5, CSS, dan Javascript. VideoJS telah ada sejak tahun 2010 silam dan sampai saat ini telah digunakan lebih dari 100.000 website termasuk Twitpic, Vine, Instagram, Tumblr, Dropbox, 99designs dan web-web lainnya.

Bagi anda yang ingin membangun sebuah web streaming, videojs adalah salah tools yang bagus dan efektif untuk melaksanakannya. VideoJS terkenal dengan tampilan playernya yang sederhana namun elegant, mempunyai banyak variasi tema (tergantung pemakai), selain itu videojs juga tergolong player yang ringan dan userfriendly atau mudah untuk di gunakan.

Nah, pada artikel kali ini saya akan membagikan cara memasang aplikasi videojs di blogger (blogspot), cara yang saya bagikan ini tidak sulit untuk dipraktekan selain itu saya juga akan membagikan cara memasang script videojs di artikel sehingga bisa di gunakan untuk streaming dari server pilihan anda. Yap langsung saja saya bagikan cara dan langkah-langkahnya:

Langkah 1: Menyisipkan css dan javascript videojs pada template blogger

Silahkan login pada akun blogger anda di blogger.com, lalu masuk pada beranda blog anda, kemudian pilih menu template dan pilih edit html, setelah itu masukkan kode di bawah ini tepat di atas kode </head>

<link href='http://vjs.zencdn.net/5.4.6/video-js.css' rel='stylesheet'/>

Untuk contoh peletakkan kode silahkan lihat gambar di bawah ini:

Masih di dalam menu edit html, setelah itu silahkan copy kode di bawah ini lalu pastekan tepat di atas kode </body>

<script src="http://vjs.zencdn.net/5.6.0/video.js">

Untuk contoh peletakkan kode silahkan lihat gambar di bawah ini:

Pada gambar di atas, template yang saya gunakan memberikan keterangan bahwa kode yang di letakkan di atas </body> tidak valid, jika anda mengalami hal yang serupa silahkan gunakan kode yang sudah saya parse di bawah ini dan letakkan di atas kode </body>

<script src="http://vjs.zencdn.net/5.6.0/video.js">

Kemudian simpan template anda seperti biasa dengan mengklik tombol save template atau simpan. Jika sudah berhasil silahkan lanjutkan ke langkah selanjutnya:

Langkah 2: Memasang kode html videojs pada postingan/artikel

Silahkan buat postingan/artikel baru, kemudian masuk pada menu html postingan, lalu masukkan kode di bawah ini pada mode html postingan, ganti tulisan yang berwarna merah lalu publikasikan:

<video id="my-video" class="video-js" controls preload="auto" width="550" height="300"
poster="URL-SAMPUL-VIDEO-ANDA.JPG" data-setup="{}">
<source src="URL-VIDEO-ANDA.MP4" type='video/mp4'>
</video>

Perhatikan kode di atas, ganti tulisan yang berwarna merah sesuai dengan data anda misalnya url sampul untuk video anda, dan link video anda, contoh link video: http://video.com/animasi.mp4, nah gantilah url yang berwarna merah tersebut dengan url video anda. Untuk angka 550 dan 300 adalah lebar dan tinggi kotak video player. Untuk demo hasil pemasangan videojs silahkan lihat pada kotak videojs di bawah ini:

Nah, itulah cara memasang videojs di blogger (blogspot) dengan mudah, anda bisa menyimpan video dari yotube, maupun hosting anda sendiri pada videojs. Dengan videojs ini sekarang anda sudah bisa membuilding/membangun sebuah web streaming. Sekian tutorial kali ini, cara memasukkan link video dari google drive pada videojs akan saya bahas pada artikel selanjutnya. Selamat mencoba!

Unknown at 5:28:00 PM

Cara Membuat Auto Safelink Dengan Blogger

Posted by HeiBroku Posted on 4:52:00 PM

Hallo, pada kesempatan kali ini saya akan membagikan artikel tentang "Cara Membuat Auto Safelink Dengan Blogger". Beberapa waktu yang lalu saya baru selesai membuat sebuah blog berniche (bertema) anime, di blog tersebut saya membuat postingan download anime, dll. Sebagai optimasi untuk penghasilan akhirnya saya membuat sebuah fitur safelink di blog tersebut.

Sebelum saya membahas tentang bagaimana cara membuat safelink, saya akan menjelaskan secara garis besar apa itu safelink. Safelink adalah suatu halaman web yang mempunyai fungsi untuk menyimpan sebuah link dan meneruskan link tersebut, jadi ketika pengnjung mengklik link dari web/blog utama maka link tersebut akan di arahkan ke halaman safelink sebelum menuju link yang sebenarnya.

Safelink juga berguna untuk memproteksi link asli dari blog utama agar tidak di ketahui orang, selain itu jika orang ingin mengambil link asli juga harus melewati halaman safelink terlebih dahulu. Namun ada beberapa tipe safelink, ada safelink otomatis membuat link selain link utama, intinya selain link artikel domain utama akan menggunakan safelink. Contoh: link blog eris.web.id/xxx (maka tidak akan menggunakan safelink) jika url selain url blog maka tidak akan menggunakan safelink. Dan versi lainnya dari safelink adalah safelink manual dimana kita harus membuat manual url safelink sebelum di masukkan ke artikel blog utama. Pada artikel ini saya akan membagikan cara membuat safelink otomatis dan menggunakan media blogger.

Apa manfaat menggunakan safelink?

Mungkin penjelasan singkat mengenai safelink di atas belum anda pahami sepenuhnya, namun secara umum manfaat/fungsi penggunaan safelink adalah sebagai berikut:

1. Halaman untuk menempatkan iklan

Safelink adalah halaman yang cocok untuk menempatkan iklan seperti adsense, dll. Selain itu jika anda mempunyai blog/web download otomatis tidak bisa menempatkan ads di blog utama, jadi dapat menggunakan safelink untuk menempatkan iklan adsense.

2. Agara link utama tidak di curi/di ambil

Jika anda mempunyai blog download otomatis anda tidak ingin agar link download anda di gunakan orang lain secara begitu saja bukan? nah inilah fungsi safelink, orang akan melalui halaman safelink sebelum sampai pada link utama.

3. Sebagai halaman tambahan untuk optimasi penghasilan

Dengan safelink anda bisa memaksimalkan penghasilan selain dari blog utama, tentu saja dengan menambahkan iklan pada halaman safelink, contoh iklan yang bisa anda tambahkan adalah iklan ppc (pay per click) atau iklan pop up, dan sebagainya.

Cara membuat safelink dengan menggunakan blogger

Sebelum membuat safelink pastikan anda sudah mempunyai blog utama dan blog kedua (blog yang dijadikan safelink). Anda bisa menggunakan blog dengan domain default (blogspot.co.id) atau tld (top lever domain), jika anda menggunakan domain default blogger pastikan anda menggunakan versi yang blogspot.co.id untuk digunakan untuk safelink ini.

Langkah 1: Membuat halaman artikel pada blog kedua (blog yang dijadikan safelink)

Buatlah sebuah halaman baru di blog safelink anda, kemudian berikan judul pada artikel tersebut. Contoh judul: "generate", "go" atau judul lain yang anda inginkan. Lalu masukkan kode di bawah pada bagian html artikel anda.

<div dir="ltr" style="text-align: left;" trbidi="on">
<center>
<h2 id="daplong" style="color: daplong;">
Please Wait...</h2>
<script src="KODE JAVASCRIPT"></script> <script type="text/javascript">
var currentURL=location.href;
var str = currentURL;
var res = str.replace("URL HALAMAN SAFELINK?url=", "");
document.write('<button id="download" class="Visit_Link" onclick="changeLink();" style="display: none;text-align:justify;margin-bottom:2px;">Klik Di Sini Untuk Melanjutkan Link</button>')
</script></center>

Setelah itu publikasikan postingan anda, perhatikan kode merah di atas, kode javascript akan anda dapatkan pada langkah kedua nanti sedangkan url halaman safelink adalah url postingan yang anda buat tadi contoh: http://namablog.blogspot.co.id/generate.html (mohon perhatikan jika anda menggunakan https atau http karena itu akan mempengaruhi).

Langkah 2: Membuat dan mengupload javacript safelink

Selanjutkan kita akan membuat javascipt dan mengupload javascipt tersebut, silahkan copy kode javascript di bawah ini dan masukkan kedalam notepad:

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(input){var output="";var chr1,chr2,chr3,enc1,enc2,enc3,enc4;var i=0;input=Base64._utf8_encode(input);while(i<input.length){chr1=input.charCodeAt(i++);chr2=input.charCodeAt(i++);chr3=input.charCodeAt(i++);enc1=chr1>>2;enc2=((chr1&3)<<4)|(chr2>>4);enc3=((chr2&15)<<2)|(chr3>>6);enc4=chr3&63;if(isNaN(chr2)){enc3=enc4=64;}else if(isNaN(chr3)){enc4=64;}
output=output+ this._keyStr.charAt(enc1)+ this._keyStr.charAt(enc2)+ this._keyStr.charAt(enc3)+ this._keyStr.charAt(enc4);}
return output;},decode:function(input){var output="";var chr1,chr2,chr3;var enc1,enc2,enc3,enc4;var i=0;input=input.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(i<input.length){enc1=this._keyStr.indexOf(input.charAt(i++));enc2=this._keyStr.indexOf(input.charAt(i++));enc3=this._keyStr.indexOf(input.charAt(i++));enc4=this._keyStr.indexOf(input.charAt(i++));chr1=(enc1<<2)|(enc2>>4);chr2=((enc2&15)<<4)|(enc3>>2);chr3=((enc3&3)<<6)|enc4;output=output+ String.fromCharCode(chr1);if(enc3!=64){output=output+ String.fromCharCode(chr2);}
if(enc4!=64){output=output+ String.fromCharCode(chr3);}}
output=Base64._utf8_decode(output);return output;},_utf8_encode:function(string){string=string.replace(/\r\n/g,"\n");var utftext="";for(var n=0;n<string.length;n++){var c=string.charCodeAt(n);if(c<128){utftext+=String.fromCharCode(c);}
else if((c>127)&&(c<2048)){utftext+=String.fromCharCode((c>>6)|192);utftext+=String.fromCharCode((c&63)|128);}
else{utftext+=String.fromCharCode((c>>12)|224);utftext+=String.fromCharCode(((c>>6)&63)|128);utftext+=String.fromCharCode((c&63)|128);}}
return utftext;},_utf8_decode:function(utftext){var string="";var i=0;var c=c1=c2=0;while(i<utftext.length){c=utftext.charCodeAt(i);if(c<128){string+=String.fromCharCode(c);i++;}
else if((c>191)&&(c<224)){c2=utftext.charCodeAt(i+ 1);string+=String.fromCharCode(((c&31)<<6)|(c2&63));i+=2;}
else{c2=utftext.charCodeAt(i+ 1);c3=utftext.charCodeAt(i+ 2);string+=String.fromCharCode(((c&15)<<12)|((c2&63)<<6)|(c3&63));i+=3;}}
return string;}}
var encode=document.getElementById('encode'),decode=document.getElementById('decode'),output=document.getElementById('output'),input=document.getElementById('input');var User_ID="";var protected_links="";var a_to_va=0;var a_to_vb=0;var a_to_vc="";function auto_safelink(){auto_safeconvert();}
function auto_safeconvert(){var a_to_vd=window.location.hostname;if(protected_links!=""&&!protected_links.match(a_to_vd)){protected_links+=", "+ a_to_vd;}else if(protected_links=="")
{protected_links=a_to_vd;}
var a_to_ve="";var a_to_vf=new Array();var a_to_vg=0;a_to_ve=document.getElementsByTagName("a");a_to_va=a_to_ve.length;a_to_vf=a_to_fa();a_to_vg=a_to_vf.length;var a_to_vh=false;var j=0;var a_to_vi="";for(var i=0;i<a_to_va;i++)
{a_to_vh=false;j=0;while(a_to_vh==false&&j<a_to_vg)
{a_to_vi=a_to_ve[i].href;if(a_to_vi.match(a_to_vf[j])||!a_to_vi||!a_to_vi.match("http"))
{a_to_vh=true;}
j++;}
if(a_to_vh==false)
{var encryptedUrl=Base64.encode(a_to_vi);a_to_ve[i].href="URL HALAMAN SAFELINK?url="+ encryptedUrl;a_to_ve[i].rel="nofollow";a_to_vb++;a_to_vc+=i+":::"+ a_to_ve[i].href+"\n";}}
var a_to_vj=document.getElementById("anonyminized");var a_to_vk=document.getElementById("found_links");if(a_to_vj)
{a_to_vj.innerHTML+=a_to_vb;}
if(a_to_vk)
{a_to_vk.innerHTML+=a_to_va;}}
function a_to_fa()
{var a_to_vf=new Array();protected_links=protected_links.replace(" ","");a_to_vf=protected_links.split(",");return a_to_vf;}

Silahkan ganti url halaman safelink pada kode di atas dengan url postingan yang anda buat tadi, pastikan sama dengan url pada langkah 1 lalu save kode tersebut dengan all files type dan gunakan akhiran .js contoh nama file: safelink.js

Jika anda sudah membuat file js lalu buka website http://yourjavascript.com/ lalu upload file js anda, masukkan email anda agar kode javascript akan di kirimkan lewat email. Kemudian buka email anda maka akan ada email dari yourjavascipt (cek folder spam juga) lalu copy kode javascript anda.

sekarang kembali ke langkah 1, silahkan masukkan link javascipt anda pada artikel yang sudah anda buat tadi (pada mode html).

Langkah 3: Mengubah template safelink

Template bawaan atau template default blogger tidak cocok untuk dijadikan safelink jadi gunakan template ini. Template ini adalah hasil redesign dan saya bagikan secara gratis, silahkan download templatenya pada link download di bawah ini:

Download Via Tusfiles

Kemudian ubah template anda dengan mengupload lewat menu template pada halaman blogger anda. Setelah itu anda cari kode di bawah ini pada edit html template:

<script type='text/javascript'>
var currentURL=location.href;
var str = currentURL;
var res = str.replace("http://link.tanukinime.com/2016/06/generate.html?url=", "");

Ubahlah tulisan link yang berwarna merah di atas dengan link url postingan yang sudah anda buat pada langkah 1 tadi kemudian save template anda.

Langkah 4: Memasang script pada blog utama

Safelink hampir selesai di buat, langkah ke empat ini adalah langkah terakhir, silahkan copy kode di bawah di bawah ini:

<script type="text/javascript" src="KODE JAVASCRIPT"></script>
<script type="text/javascript">
protected_links = "URL HALAMAN SAFELINK";
auto_safelink();
</script>

Ubahlah tulisan berwarna merah di atas dengan link javacript dan url halaman postingan yang sudah anda buat pada langkah 1 dan 2 tadi. Kemudian masukkan kode di atas pada widget blog utama anda kemudian save. Lalu pindahkan widget html tersebut tepat di bawah postingan blog, contoh penempatan widget lihat pada gambar di bawah:

Lalu selesai sudah proses membuat safelink. Silahkan coba buka postingan pada blog utama dan coba klik link pada artikel blog utama tersebut. Untuk demo safelink silahkan anda lihat pada blog download anime milik saya, silahkan klik link di bawah ini:

Demo Safelink

Itulah cara membuat auto safelink dengan blogger, ikutilah langkah 1 sampai 4 di atas dengan benar pasti anda akan berhasil membuat safelink sendiri karena saya sudah berulang kali membuat safelink dengan kode di atas dan works sampai sekarang ini.

Bagi anda yang mempunyai blog download sangat cocok sekali menggunakan safelink ini karena external link di blog anda akan mengarah ke menu safelink. Jika ada pertanyaan atau gagal dalam membuat safelink silahkan berkomentar pada halaman ini atau hubungi saya lewat facebook atau anda juga bisa menghubungi saya lewat sms di 082242340555, selain itu saya juga menawarkan jasa pembuatan web streaming dengan engine wordpress, script player pro untuk membangun web streaming dengan blogger yang cocok untuk memutar video dari google drive, picasa, dll, untuk masalah harga silahkan hubungi saya. Sekian dan terima kasih, semoga berhasil membuat safelinknya.

Unknown at 4:52:00 PM

Cara Membuat Tombol Dengan Css Dan Font Awesome

Posted by HeiBroku Posted on 8:21:00 AM

Pada kesempatan kali ini saya akan membuat sebuah tutorial tentang "Cara Membuat Tombol Dengan Css Dan Font Awesome Di Blogger" tombol ini berbentuk atau berdesign flat ui jadi sangat cocok digunakan untuk tombol link download, tombol demo, ataupun untuk tombol link, tentu saja bisa anda gunakan sesuai keinginan anda.

Dengan memasang tombol ini tidak akan mempengaruhi loading halaman karena hanya meload css dan icon kecil dari font awesome. Selain itu tombol dengan css ini juga berguna untuk mempermudah dan memperindah postingan blog. Untuk priview tombol dengan css ini bisa anda lihat di bawah ini:

Tombol 1 Tombol 2

Nah tombol seperti di ataslah yang akan kita buat, icon pada tombol di atas bisa anda ganti saat memasang script untuk tombolnya nanti, namun ada satu hal yang perlu diperhatikan, sebelum memasang script css untuk tombol ini pastikan bahwa anda sudah memasukkan kode css untuk font awesome.

Cara Membuat Tombol Dengan Css Dan Font Awesome

Tujuannya agar icon muncul saat memasang tombol nanti, jika pada template anda belum terdapat kode css untuk font awesome, anda dapat menambahkan kode di bawah ini kemudian letakkan kodenya di bawah <head> ataupun di atas </head>, sebenarnya kode ini dapat dipasang dimana saja di atas </body> juga bisa.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika anda sudah memasang kode di atas kemudian cari kode ]]></b:skin> kemudian letakkan kode di bawah ini tepat di atas kode ]]></b:skin> atau kode <style>

/* CSS Simple Button Flat UI */
#wrap {
margin:20px auto;
text-align:center;
}
#wrap br {
display:none;
}
.btn {
display:inline-block;
position:relative;
font-family:'Source Sans Pro', Helvetica, sans-serif;
background:#3b3f48;
padding:6px 14px;
font-size:14px;
margin:0 3px;
color:#fff!important;
border-radius:3px;
border:none;
text-transform:uppercase;
text-decoration:none;
transition:all 0.3s ease-out;
}
.btn.down {
background:#3b3f48;
color:#fff!important;
}
.btn.down:hover,.btn.down:active,.btn:hover,.btn:active {
background:#fc4f3f;
color:#fff;
}
a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {
color:#fff;
}
.btn i {
margin-left:10px;
font-weight:normal;
font-family:FontAwesome;
}

Memasang Tombol Dengan Css dan Font Awesome

Jika kode di atas sudah anda pasang, silahkan save template anda, kemudian anda tinggal memasang kode di bawah ini pada artikel anda, namun gunakan mode html atau tempatkan kode di bawah pada html agar tombol muncul pada artikel anda, silahkan buat postingan baru/entri baru lalu masukkan kode di bawah pada bagian html:

<div id="wrap">
<a class="btn down" href="#" rel="nofollow" target="_blank">Tombol 1<i class="fa fa-paper-plane"></i></a>
<br />
<a class="btn down" href="#" rel="nofollow" target="_blank">Tombol 2<i class="fa fa-download"></i></a>
</div>

Setelah anda menempatkan kode di atas pada halaman html artikel silahkan publikasikan artikel anda dan lihatlah artikel anda maka akan muncul tombol dengan icon font awesome. Itulah sekilas tutorial tentang "Cara Membuat Tombol Dengan Css Dan Font Awesome" semoga artikel ini dapat berguna dan bermanfaat, sekian dan terima kasih.

Unknown at 8:21:00 AM

Cara Menambahkan Admin Atau Penulis Di Blogger

Posted by HeiBroku Posted on 8:18:00 AM

Pada suatu situs web atau blog biasanya terdapat beberapa orang yang berperan dalam mengelola maupun mengembangkan web atau blog tersebut, misalnya ada yang bertugas menjadi administrator, penulis, penyunting dan sebagainya, namun masing-masing mempunyai perannya sendiri.

Namun berbeda dengan administrator (admin) fungsi admin adalah sebagai pengelola yang dapat melakukan tugas apapun, baik itu menyunting tema, script, sampai menambah atau menghapus konten, dalam arti administratorlah yang mempunyai kuasa penuh terhadap web atau blog tersebut.

Jika anda pengguna cms wordpress self host pasti anda sudah tidak asing lagi dengan istilah admin, penyunting, penulis, dll. Namun pada artikel ini kita tidak akan membahas wordpress, kali ini kita akan membahas tentang admin dan penulis di blogger.com. Blogger hanya memiliki 2 fungsi dalam moderatornya yaitu administrator (admin) dan pengarang (penulis). Lalu bagaimana cara menambah admin atau pengarang di blogger? yap, caranya tidaklah susah, baiklah langsung saja pada pembahasannya:

1. Silahkan masuk ke beranda blogger anda, kemudian masuk ke menu setelan dan pilih settingan dasar, contoh lihat kolom merah pada gambar di bawah:

Cara Menambahkan Admin Atau Penulis Di Blogger

2. Setelah itu scroll ke bawah di lihat pada bagian "izin" lalu tambahkan alamat email (gmail) yang akan anda jadikan pengarang (penulis) di blog anda lalu klik undang pengarang, contoh lihat gambar di bawah:

3. Silahkan buka email yang anda jadikan pengarang artikel, misalnya anda ingin mejadikan erislabs@gmail.com sebagai pengarang, maka bukalah email tersebut, lihat pada kotak masuknya, disana akan ada email berisi link undangan untuk menjadi pengarang, silahkan klik terima undangan, contoh lihat pada gambar di bawah:

4. Jika anda sudah klik terima undangan maka anda akan di arahkan ke halaman blogger, disana hanya akan ada tombol untuk membuat post baru, posisi pengarang (penulis) tidak di izinkan untuk menyunting artikel lain atau menyunting widget dan tema.

Catatan:

- Berhati-hatilah dalam menentukan administrator untuk blog anda, karena dapat mengakibatkan hilangnya akses untuk blog anda.
- Pangkat pengarang hanya bisa menulis artikel dan mengedit artikel miliknya saja, pengarang tidak bisa mengedit artikel milik administrator.
- Usahakan administator blog anda hanya 1 orang saja yaitu anda sendiri.

Itulah tips tentang "Cara Menambahkan Admin Atau Penulis Di Blogger", semoga artikel ini dapat bermanfaat dan berguna terutama untuk yang masih bingung dalam menambahkan pengarang (penulis) dan administrator di blogger. Sekian artikel ini saya buat, terima kasih.

Unknown at 8:18:00 AM

Cara Menambahkan Sub Domain Di Rumahweb

Posted by HeiBroku Posted on 8:17:00 AM

Jika anda membuka artikel saya kali ini berarti anda adalah salah satu pelanggan di rumahweb, yap pada kesempatan kali ini saya akan membagikan artikel tentang "Cara Menambahkan Sub Domain Di Rumahweb." Apa itu sub domain? sub domain adalah nama domain di depan nama domain utama, masih bingung? contoh sub domain: blog.erislabs.id, kata "blog" adalah sub domain, sedangkan erislabs.id adalah nama domain utamanya.

Apa gunanya membuat sub domain? jawabannya adalah tergantung kebutuhan anda, misalnya anda ingin membuat kategori/halaman web dengan kategori tersendiri namun masih dalam ruang lingkup domain utama, sebagai contoh: kesehatan.namadomainanda.com, nah dalam sub domain kesehatan, anda bisa membuat blog baru/halaman baru dengan sub domain kesehatan.

Nah, langsung saja pada topik pembahasannya, saya akan memberikan tutorial bagaimana cara membuat sub domain dan bagaimana cara merubah blogspot anda menjadi sub domain. Untuk domain erislabs ini saya menggunakan jasa dari rumahweb, baiklah silahkan buka halaman clientzone rumah web di clientzone.rumahweb.com, lalu klik login pada kanan atas halaman, perhatikan gambar di bawah:

Silahkan masukkan username dan password anda, kemudian klik login:

Pada halaman clientzone rumah web silahkan klik pada domain, contoh lihat kolom merah pada gambar di bawah:

Kemudian anda akan masuk pada daftar domain anda, lalu pilih domain yang akan anda tambahkan sub domain, klik pada icon setting, lihat kolom merah pada gambar di bawah:

Lalu klik pada manage dns, contoh lihat kolom merah pada gambar di bawah:

Setelah itu anda akan di arahkan ke halaman manage dns, kemudian klik pada add new record:

Isilah nama sub domain anda, pada kolom TTL isi dengan 14400, record type pilih "A" dan pada IP or Host nama gunakan 216.239.32.21 lalu klik pada add record, contoh lihat pada gambar di bawah:

Sampai saat ini anda sudah berhasil menambahkan sub domain untuk domain anda, dan sub domain anda sudah bisa di gunakan, silahkan login ke beranda blogger, lalu pilih menu setelan > dasar, gantilah nama domain seperti biasa, contoh lihat pada gambar di bawah:

Selamat kini anda sudah mempunyai blog dengan alamat dari sub domain yang sudah anda buat, kini anda bebas berkreasi dengan subdomain anda yang baru. Catatan:

Buatlah blog baru dengan email yang sama dengan domain utama blogger agar tidak perlu menambahkan kode record baru di settingan DNS domain.
Proses penambahan sub domain biasanya 5menit sampai paling lama 24jam
Jika dalam 24jam sub domain belum bisa digunakan silahkan ulangi atau cek konfigurasi
Jika diperlukan biasanya timbul dns record pada blogger dan tambahkan record seperti biasa pada settingan DNS domain di clientzone (member area)

Itulah artikel tentang "Cara Menambahkan Sub Domain Di Rumahweb" semoga artikel ini dapat berguna dan bermanfaat sebagaimana mestinya, jika ada pertanyaan seperti dns error, dll silahkan berkomentar pada halaman ini, sekian dan terima kasih.

Unknown at 8:17:00 AM

Cara Membuat Sticky Widget Di Sidebar Blogger

Posted by HeiBroku Posted on 8:05:00 AM

Optimasi pada tampilan blog adalah salah satu trik untuk memikat visitor, dengan kemudahan navigasi, tampilan blog yang elegant dan sidebar yang rapi membuat visitor merasa "nyaman" berkunjung di blog kita. Nah, pada artikel ini saya akan membagikan cara membuat sticky widget pada sidebar blog. Apa itu sticky widget? Sticky adalah efek yang dihasilkan oleh code css dan javascript sehingga membuat tampilan melayang pada sidebar widget, dengan sticky widget akan akan tetap pada posisinya meskipun halaman sedang di scroll (diarahkan) ke bawah.

Kode script yang akan saya bagikan ini adalah milik mbak arlina, saya hanya membagikan kode scriptnya saja. Fungsi ini juga dapat anda terapkan untuk berbagai jenis widget seperti popular post, arsip, html widget, dll. Nah, jadi bagi anda yang ingin memasang efek sticky pada sidebar blog anda, anda bisa mengikuti tutorial di bawah ini:

Cara Membuat Sticky Widget Di Sidebar Blogger

Demo Sticky

Login ke blogger lalu masuk pada menu template > edit html. Lalu copy kode javascript di bawah ini dan pastekan tepat sebelum </body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
var el = $('#sticky-sidebar');
var stickyTop = $('#sticky-sidebar').offset().top;
var stickyHeight = $('#sticky-sidebar').height();
$(window).scroll(function() {
var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
var windowTop = $(window).scrollTop();
if (stickyTop < windowTop) {
el.css({
position: 'fixed',
top: 20 // Jarak atau margin sticky dari atas
});
} else {
el.css('position', 'static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({
top: diff
});
}
});
}
});
//]]>
</script>

Ganti kode yang di tandai dengan warna merah dan biru di atas dengan kode anda. Kode yang berwarna merah adalah kode id widget anda sedangkan yang berwarna biru adalah kode footer atau batas untuk halaman paling bawah blog anda.

Selanjutnya tambahkan kode css di bawah ini pada blog anda, letakkan kode tersebut tepat di atas ]]></b:skin> atau <style>

#sticky-sidebar { width:100%;max-width:100%;
}

atau gunakan css di bawah untuk menentukan widget pada query tertentu:

@media only screen and (max-width:768px)
{
#sticky-sidebar {width:100%;max-width:100%}
}

Catatan:

- Jangan lupa mengganti id widget anda pada kode javascript
- Sesuaikan #footer-wrapper dengan id widget yang berada paling bawah blog anda
- Jangan lupa ganti id widget pada css, sesuaikan dengan kode javascript

Itulah tips tentang "Cara Membuat Sticky Widget Di Sidebar Blogger", untuk blog erislabs ini tidak saya aktifkan mode sticky pada widgetnya lagi karena blog ini sudah support untuk mobile, jika sticky saya aktifkan maka akan merubah susunan widget pada template mobile. Semoga cara ini dapat membantu anda, selamat mempraktekkan dan semoga berhasil. Terima kasih.

Unknown at 8:05:00 AM

Cara Memasang Efek Scroll Pada Widget Blogger

Posted by HeiBroku Posted on 8:00:00 AM

Unknown at 8:00:00 AM

Cara Memasang Kolom Komentar Disqus Di Blogspot

Posted by HeiBroku Posted on 7:52:00 AM

Menyesuaikan bentuk kotak/kolom komentar di blog adalah salah satu optimasi untuk blog dalam kategori desain. Salah satu tools untuk media sosial yang cukup populer adalah disqus, dengan memasang kotak komentar di blog mempermudah orang/pengunjung blog untuk berkomentar di blog kita. Dengan disqus pengunjung blog dengan mudah dapat berkomentar menggunakan akun facebook, twitter, google maupun akun disqus mereka.

Pada kesempatan kali ini saya akan share cara memasang atau menambahkan kolom komentar disqus di blogspot (blogger.com). Pada artikel ini saya akan membagikan cara yang otomatis dan manual. Jika anda menggunakan cara otomatis, anda tidak perlu otak-atik html, namun dengan cara manual anda perlu menambahkan kode script disqus ke html template anda.

Sebelum anda memasang kolom komentar disqus di blog anda, anda harus mendaftar di situs disqus terlebih dahulu. Cara mendaftar akun diskus dapat anda baca pada artikel di bawah ini.

Baca juga: Cara Membuat/Mendaftar Akun Disqus.

Cara 1: Memasang kolom komentar Disqus secara otomatis

Jika anda sudah selesai membuat akun disqus, silahkan login ke akun disqus anda di situs resmi disqus http://www.disqus.com, masukkan username dan password lalu login. Setelah anda berhasil login, anda harus mendaftarkan situs anda terlebih dahulu di disqus agar bisa memasang kotak komentarnya nanti. Pada halaman utama disqus silahkan klik admin, lihat kolom merah pada gambar di bawah:

Kemudian pilih new untuk menambahkan situs baru, jika anda sudah menambahkan situs sebelumnya anda tidak perlu menambahkan situs baru.

Jika anda sudah selesai menambahkan situs, silahkan masuk ke menu setting pada disqus anda lalu masuk ke menu instalation, kemudian pilih blogger, lihat pada gambar di bawah:

Setelah itu klik add to my blogger site:

Lalu anda akan diarahkan ke situs blogger anda, silahkan tambahkan widget disqus pada blogger anda dan tempatkan dibawah posting atau dimana saja. lihat gambar di bawah:

Setelah anda menambahkan widget di atas silahkan lihat halaman artikel anda apakah sudah terdapat kolom komentar disqus atau tidak, jika kolom komentar belum muncul coba pindahkan widget disqus ke bawah post pada settingan tata letak di blogger.

Cara 2: Memasang kolom komentar Disqus secara manual

Cara kedua ini mengharusnya anda untuk mengutak-atik html template agar kolom/kotak komentar disqus dapat terpasang, namun sebelum memasang kolom komentar disqus secara manual pastikan anda sudah menyembunyikan template standart blogger anda agar tidak tejadi kesalahan saat menambahkan css untuk komentar disqus nantinya.

Silahkan copy kode di bawah ini dan ganti yang berwarna merah dengan id disqus situs anda:

<script type='text/javascript'>
var disqus_shortname = "erislabs";
var disqus_blogger_current_url = "<data:blog.canonicalUrl/>";
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = "<data:blog.url/>";
}
var disqus_blogger_homepage_url = "<data:blog.homepageUrl/>";
var disqus_blogger_canonical_homepage_url = "<data:blog.canonicalHomepageUrl/>";
(function() {
var bloggerjs = document.createElement("script");bloggerjs.type = "text/javascript";
bloggerjs.async = true;
bloggerjs.src = "//"+disqus_shortname+".disqus.com/blogger_item.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(bloggerjs);
})();
(function() {
var bloggerjs = document.createElement("script");
bloggerjs.type = "text/javascript";
bloggerjs.async = true;
bloggerjs.src = "//"+disqus_shortname+".disqus.com/blogger_index.js";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body")[0]).appendChild(bloggerjs);
})();
</script>

Setelah itu login ke akun blogger anda, lalu masuk ke beranda blog dan buka halaman edit html, setelah itu copy kode di atas dan letakkan di tepat di bawah kode seperti berikut:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>

Setelah itu tambahkan kode css berikut tepat di atas ]]></b:skin> atau </style> namun sebelumnya anda harus menghapus css #comments beserta embel-embelnya.

#comments {display:none;margin-right:10px 0 15px 0;}
.post-comment-link { visibility: hidden; }

Jika sudah selesai, silahkan save template anda dan lihatlah hasilnya. Itulah tutorial tentang "Cara Memasang Kolom Komentar Disqus Di Blogspot" kelebihan cara yang kedua dibandingkan dengan cara pertama adalah dengan cara kedua anda bisa mengatur margin untuk komentar disqus anda. Sekian artikel ini saya buat, silahkan berkomentar pada halaman ini jika ada pertanyaan, terima kasih.

Unknown at 7:52:00 AM

Cara Mudah Membuat/Mendaftar Akun Disqus

Posted by HeiBroku Posted on 7:50:00 AM

Unknown at 7:50:00 AM

Cara Memasang SSL Cloudflare Di Blogger [Experiment]

Posted by HeiBroku Posted on 10:08:00 PM

Banyak pertanyaan yang beredar di grup-grup blogger, salah satunya adalah "bisakah blogger.com dengan costum domain menggunakan ssl?" jawabannya adalah bisa. Sebenarnya untuk blogger sendiri sudah menyediakan koneksi protokol https dari google namun hanya bisa di gunakan pada subdomain standar (blogspot.com) saja.

Yang menjadi pertanyaan besar para blogger adalah apakah bisa memasang protokol https pada blogger.com yang sudah dicostum dengan domain TLD (top level domain)? nah, pada kali ini saya akan ber-experiment pada blog baru saya, dan kita akan memanfaatkan ssl gratis dari cloudflare. Cara yang akan saya bagikan ini di jamin works 100% untuk merubah alamat blog dengan protokol https. Namun anda perlu memodifikasi template dan merubah semua yang masih mengandung http menjadi https agar ssl dapat terpasang dengan sempurna (secured). Tentu saja akan saya bahas cara merubah element-element http menjadi https.

Sebelum melanjutkan pada pembahasan, apakah anda serius merubah blog blogger.com anda menjadi protokol https? memang benar situs dengan koneksi https dipandang baik oleh serp google namun menurut argumen saya sendiri, pemasang https pada blogger.com tidak terlalu berpengaruh terhadap seo maupun keamanan blog, karena keamanan situs blogger.com saja sudah saat terjamin, berbeda jika anda menggunakan web server sendiri yang harus dilindungi dengan ssl agar proses enskripsi data berjalan dengan aman oleh protokol https.

Sebelum memasang SSL pada blogger.com, ada beberapa hal yang perlu anda persiapkan yakni:

- Anda harus mempunyai domain sendiri.
- Anda harus mempunyai blog.
- Anda harus sudah bisa bisa mengganti Name Server pada domain anda.
- Anda harus mendaftar pada situs cloudflare.com.

Cara mendaftar di cloudflare.com

Apa itu cloudflare? CloudFlare adalah sebuah CDN (Content Delivery Network) yang memiliki fitur lebih baik dari standar CDN yang ditawarkan. Ada banyak keuntungan dan juga beberapa kerugian dari CloudFlare. CloudFlare adalah sebuah CDN yang berada ditengah-tengah antara nama domain dan web hosting. Dengan cloudflare ini nanti anda bisa setting untuk SSL, dan Page Rules untuk https. Pertama-tama silahkan buka situs resmi cloudflare.com lalu pilih sign-up:

1. Isilah data-data anda denga lengkap, masukkan nama, email aktif, password, dll.

2. Kemudian next-next saja, lalu terakhir konfirmasi lewat email, silahkan buka email anda maka akan ada link untuk verifikasi pendaftaran.

Mesasukkan URL blog anda di cloudflare

Setelah selesai melakukan proses pendaftaran, silahkan login ke situs cloudflare dengan memasukkan data-data anda tadi (email dan password), lalu klik login.

Kemudian jika sudah berhasil login silahkan pilih add sites, dan masukkan alamat blog anda seperti pada gambar di bawah (klik gambar untuk memperbesar):

Setelah itu akan muncul Name Server (NS) dari cloudflare, nameserver ini nanti yang harus anda tambahkan pada Name Server domain anda, sebenarnya lebih tepat mengganti Name Server domain anda dengan name server milik cloudflare. Di bawah ini adalah contoh name server dari cloudflare:

Mengganti name server domain menjadi name server dari cloudflare

Pada artikel ini saya menggunakan domain dari idwebhost, namun settingan name server pada tiap penyedia domain pada dasarnya sama. Silahkan login ke control panel domain anda, jika anda pengguna idwebhost silahkan login ke control panel domain di member.idwebhost.com, lalu masukkan email dan password lalu login.

Pilih domain yang sudah anda tambahkan ke cloudflare tadi, lalu masukkan name server dari cloudflare, jangan lupa untuk menyimpan name server default agar tidak lupa. Contoh memasukkan name server dari cloudflare dapat anda lihat pada gambar di bawah:

Setelah anda selesai mengganti name server 1 dan name server 2 pada settingan domain anda anda sudah menyelesaikan tahap ini. Silahkan lanjutkan pada tahap selanjutnya.

Setting SSL dan page rules di cloudflare

Setelah anda selesai mengganti name server domain, buka lagi situs cloudflare, lalu klik recheck name server, jika name server domain anda sudah aktif maka akan muncul pesan aktif seperti gambar di bawah:

Masih di situs cloudlfare, selanjutnya adalah settingan yang kita tunggu tunggu yaitu setting SSL dan page rules untuk koneksi dan pemasangan protokol https di blogger. Silahkan buka menu crypto dan pada menu SSL pilih flexible, lihat pada gambar di bawah:

Selanjutnya buka halaman page rules, pada halaman kita akan menyetting direct untuk domain anda, misalnya www.domainanda.com menjadi https://www.domainanda.com. Setelah halaman page rules terbuka silahkan pilih create page rules, lalu tambahkan alamat domain anda "http://www.domainanda.com/*" jangan lupa untuk menambahkan tanda bintang (*) pada akhir domain anda. Untuk lebih jelasnya silahkan lihat gambar di bawah ini:

Sampai pada tahap ini anda sudah menyelesaikan settingan SSL dan page rules di cloudlfare. Untuk settingan lain seperti page cache, dns, dll biarkan default saja. Tahap selanjutnya anda hanya perlu menunggu maksimal 24Jam untuk melihat perubahan pada blog anda.

Hasil akhir dari settingan SSL ini dapat anda lihat pada gambar di bawah, blog saya sudah memiliki protokol https dengan logo gembok berwarna hijau yang berarti sudah secure (pemasangan ssl sempurna).

Permasalahan yang muncul setelah settingan SSL dan page rules

Berikut adalah beberapa permasalahan yang muncul setelah anda melakukan settingan SSL dan page rules dan cara mengatasinya.

1. Blog menjadi error 404 atau 403 saat di akses melalui https

Tenang saja ini hal yang normal, mungkin name server domain dengan name server dari cloudflare belum terdirect dengan sempurna, ini butuh proses 24jam seperti yang tertera pada situs cloudlfare.

2. Situs tetap http://www

Situs anda belum terdirect ke https, coba ubah settingan di blogger dengan mencentang always direct to www pada settingan costum domain blogger anda.

3. Situs sudah berubah https namun tidak ada logo gembok hijau

Itu artinya blog anda memang sudah terdirect dan sudah terpasang protokol https, namun pada template blog anda masih anda element http, artinya anda harus merubah manual http dengan menambahkan huruf 's' sehingga menjadi https, misalnya favicon/header anda linknya masih menggunakan http maka anda perlu merubah depannya menjadi https. Ini adalah pekerjaan yang cukup melelahkan. Gunakan chrome untuk mendeteksi kesalahan-kesalahan elemen yang belum secure.

Apa manfaat untuk blog jika menggunakan https?

Fungsi khusus HTTPS adalah untuk menjaga kemanan data dari hacker yang berniat membajak sebuah dokumen secara ilegal. Sedangkan tujuan HTTPS adalah untuk mengantisipasi terjadinya eror program sebuah data dan kerusakan server akibat kegagalan koneksi yang disebabkan perusahaan yang di buat oleh pakar hacker yang tidak bertanggung jawab. Segala koneksi dari server akan di enskripsi oleh SSL sehingga muncul kode random pada web browser, hal ini membuat sulit untuk melihat data yang dikirimkan melalui web browser ke web server.

Sebenarnya saya hanya ber-experiment untuk merubah domain (TLD) blogger saya dan menjadikan nya protokol https sehingga terpasang comodo ssl dari cloudflare, saat ini saya sudah tidak menggunakan ssl tersebut, karena memang saya rasa blogger.com apalagi jika sudah menggunakan costum domain tidak perlu menggunakan SSL. Karena mengingat keamanan blogger.com sendiri sudah sangat maksimal dan ketat.

Anda hanya perlu menjaga email (gmail) anda agar tidak diketahui orang saja. Walaupun memang keren jika sebuah situs sudah menggunakan SSL namun apalah artinya keren jika hanya untuk iseng belaka. Jika ingin menggunakan SSL yang betul-betul SSL maka gunakan web server dan beli SSL yang bagus seperti Symantec SSL yang harganya mencapai 8juta/tahun :D

Akhir kata, itulah sekilas tutorial cara memasang SSL cloudflare di blogger.com, selamat mencoba dan semoga berhasil. Tekan CTRL + D untuk bookmark halaman ini. Silahkan tinggalkan komentar jika ada pertanyaan dan jangan lupa untuk membaca artikel menarik lainnya.

Unknown at 10:08:00 PM