Cara Memasang Widget Alexa Rank di Blog

Cara Memasang Widget Alexa Rank di Blog - Setelah sebelumnya saya share tutorial tentang cara pasang widget contact form dan jam di Blog, kali ini saya ingin share tentang tutorial cara pasang widget Alexa Rank. Bagi yang belum tahu apa itu Alexa Rank, akan saya jelaskan sedikit saja.

Alexa Rank adalah fasilitas yang berfungsi untuk memonitor dan menunjukkan ranking dari blog sobat berdasarkan kualitas dari blog itu sendiri. Semakin kecil Alexa Ranknya maka makin populer rangking sobat di mata Google. Untuk tutorial cara selengkapnya monggo disimak baik-baik :

Langkah-langkahnya :

1. Kunjungi website www.alexa.com, terus sorot tombol Create Account di pojok kanan atas

2. Isi form sesuai data diri sobat, dan konfirmasi sekalian lewat link Alexa Rank yang dikirim ke email sobat.

3. Tentukan password sobat

4. Masuk ke Dashboard dan Klik Tombol Add it Now

5. Sign Up pilih yang gratis saja :D

6. Isi kolom dengan alamat blog sobat

7. Copy kode verifikasi lalu paste dibawah Tag Title <title>Judul Blog</title> pada menu Template > Edit HTML Kemudian klik Verify my ID

8. Isi form registrasi blog sobat

9. Masuk ke Menu Product kemudian klik tombol See Other Tools for Site Owners

10. Pilih Alexa Site Widgets

11. Masukkan URL blog sobat dan klik Build Widget

12. Terakhir sobat tinggal copy paste saja kode HTML yang ada ke menu Tata Letak > Tambahkan Gadget > HTML/Javascript.
13. Selesai sudah. Semoga bermanfaat, bagi yang masih bingung bisa komentar di bawah.

Continue reading →

Cara Membuat Related Post / Artikel Terkait di Bawah Postingan Blog

Cara Membuat Related Post / Artikel Terkait di Bawah Postingan Blog - Penggunaan link related post / artikel terkait ini sangat diperlukan untuk para blogger semuanya. Kenapa begitu?? Dikarenakan, dengan adanya link artikel terkait ini dapat memudahkan bagi pengunjung untuk membaca postingan lainnya dari suatu blog. Dengan begitu pengunjung blog sobat akan betah di blog sobat. Paling tidak baca 2-3 artikel lah. Hehehe..

Langkah-langkah cara membuat related post / artikel terkait bisa dibaca di bawah ini :

1. Sobat login dulu ke akun bloggernya

2. Kemudian klik menu Template > Edit HTML

3. Sobat search kode (gunakan Ctrl+F untuk memudahkan)

<data:post.body/>

Kalo ada beberapa yang semacam itu, sobat pilih yang paling bawah. 

4. Setelah ketemu kode di atas tadi letakkan script kode ini di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post | Artikel Terkait</h3>
<div style='border: 2px solid rgb(230, 230, 230); width:100%; height:300px; overflow:auto;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 50;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div></div>
<small>Get this widget [ <a href='http://oplosanblog.blogspot.com/2014/03/cara-membuat-related-post-artikel.html' target='new'>Here</a> ]</small>

</div>
</b:if>

5. Kemudian klik Simpan. Sobat tinggal lihat hasilnya. 

Demikian postingan saya mengenai Cara Membuat Related Post / Artikel Terkait di Bawah Postingan Blog, kalau ada yang bingung bisa berkomentar di bawah. Good Luck.

Continue reading →

Cara Memasang Widget Jam di Blog

Cara Memasang Widget Jam di Blog - Sobat blogger, untuk kali ini Oplosanblog akan memberikan tutorial mengenai Cara Memasang Widget Jam di Blog. Caranya simpel dan mudah kok, gak perlu ribet untuk memasangnya. Hehe,.. Penasaran gak sobat blogger cara memasangnya bagaimana?? Kalau iya, sobat bisa ikutin tutorial saya di bawah ini :

Cara Memasang Widget Jam di Blog :

1. Sobat coba kunjungi website http://www.clocklink.com/

2. Pada menu gallery sobat coba klik. Dan pilih kategori sama bentuk jam yang sobat inginkan.

3. Setelah dapat bentuk jam yang diinginkan, sobat klik view html tag pada kotak di bawah jam yang kita pilih lalu akan timbul halaman baru di window baru. Nanti ada persetujuan dalam bahasa inggris, sobat tinggal pilih accept saja.

4. Selanjutnya sobat diminta memilih warna yang diinginkan, {time zone untuk Waktu Indonesia Bagian Barat sebaiknya memilih JOG : Jogyakarta Indonesia Time (GMT + 07.00)} serta jangan lupa tuliskan ukuran (size) jam agar sesuai dengan sidebar tempat meletakan jam itu nantinya. Dapat juga diatur kemudian.

5. Tinggal copi aja kode HTML yang diberikan.

Langkah selanjutnya masuk ke blog sobat.

6. Log in dulu ke akun blogger sobat

7. Pilih menu Tata Letak dan kemudian sorot tab Tambah Gadget

8. Sobat masukkan copian kode HTML tadi pada pilihan HTML/Javascript.

9. Selesai.

Kalo berhasil nanti jadinya kurang lebih seperti ini :

Website penyedia widget jam lainnya bisa kunjungi:

http://www.mytictac.com/

http://localtimes.info/getwidget/

http://www.clocktag.com/

http://www.widgetbox.com/tag/clocks

http://www.al-habib.info/islamic-clock/index_id.htm

http://adesyams.blogspot.com/2009/06/cara-memasang-jam-di-blog.html

Continue reading →

Cara Membuat Menu Scroll di Blog

Cara Membuat Menu Scroll di Blog - Bagi sobat yang memiliki banyak postingan, saya sarankan buat menu scroll di sidebar sobat. Karena dengan menu scroll ini memudahkan pengunjung dalam melihat-melihat semua postingan sobat. Hehe,

Selain itu juga penggunaan menu scroll ini membuat praktis bila ingin memasang widget-widget di dalamnya. Dan tentunya bisa menghemat space di blog sobat. Untuk membuat menu scrollnya simpel kok, tidak butuh banyak script. Cukup copi paste aja script ini :

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee"> 

Isi Apa aja Boleh
 
</div>

 Keterangan :

• Width --> lebar menu
  
• Height --> tinggi menu
  
• Padding --> jarak antar tulisan dengan garis pinggir
  
• Border --> ketebalan garis pinggir

Tinggal sobat kreasikan sendiri sesuai dengan keinginan sobat :D

Cukup segitu saja tutorial kali ini, semoga bermanfaat......

Continue reading →

Cara Membuat Spoiler di Postingan Blog

Cara Membuat Spoiler di Postingan Blog - Bagi sobat yang sudah pernah main ke forum-forum pasti sudah tidak asing sama yang namanya spoiler. Sering dipakai disana untuk menyembunyikan gambar, tulisan, ataupun video di dalamnya.

Lalu bagaimana kalau ingin menerapkannya di blog, bisa tidak?? Jawabannya adalah bisa. Menarik bukan, dengan adanya spoiler ini maka tampilan blog sobat jadi keren, bisa buka / tutup suatu tulisan, gambar ataupun video. Selain itu juga untuk menghemat space yang digunakan apabila sobat menulis artikel yang lumayan panjang.

Oke, tanpa perlu panjang lebar, saya akan jelaskan urutan cara bikin spoilernya :
1. Login ke akun Blogger sobat
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Di halaman entri sobat pilih mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

 <div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (gambar atau video) di sini

 <br>
</div>
</div>
</div>

Hasilnya nanti seperti ini :

Judul Spoiler:

Letakkan teks atau kode script (gambar atau video) di sini

atau bisa spoiler model satunya lagi sob :

<div id="spoiler" style="display:none">
konten yang disembunyikan
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>

Hasilnya nanti seperti ini :

konten yang disembunyikan

5. Ganti kode yang berwarna Merah Tebal sesuai dengan keinginan sobat.
6. Selamat mencoba, semoga bermanfaat. 

Continue reading →

Cara Memasang Widget Contact Form di Laman Blogger

Belum lama ini blogger menambahkan fitur Contact Form di widget bagian sidebar. Sayangnya hanya bisa dipasang di bagian sidebar. Padahal kan bagusnya Contact Form itu di halaman statis atau laman blog. Nah untuk itu kali ini saya akan share Cara Memasang Widget Contact Form di Laman Blogger yang saya dapat dari blog mas-sugeng.com.

Bagi yang penasaran pengen coba bikin, bisa ikutin tutorial saya ini :
1. Langkah Pertama, masuk ke tab Tata Letak, kemudian sorot ke bagian Tambahkan Gadget

Setelah widget ditambahkan, selanjutnya drag widget contact form tersebut ke bawah kotak postingan blog.

 2. Langkah Kedua, Menyembunyikan Widget Contact Form
copi kode di bawah ini :

.widget.ContactForm {
 display: none;
 }

kemudian masuk ke menu template dan kemudian klik pada tab Edit HTML, pastekan kode di atas tadi di atas kode :

]]></b:skin>

3. Langkah Ketiga, Buat Halaman Statis atau Laman Blog
masuk ke menu Laman, kemudian buatlah Laman Kosong baru:

di postingan blog, sobat pilih mode HTML dan copi pastekan kode di bawah ini:

<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>

setelah itu klik Publikasikan

4. Langkah Keempat, Selesai sudah sobat...
Hasil jadinya seperti ini :

http://www.mas-sugeng.com/2013/05/cara-memasang-widget-contact-form-di.html

Continue reading →

Cara Menyimpan File JavaScript dan CSS di Google Drive

Cara Menyimpan File JavaScript dan CSS di Google Drive - Seorang blogger pasti gemar utak-atik blognya hingga terlihat cantik. Dan untuk mempercantik blog tersebut biasanya ada file-file javascript yang harus ditambahkan. Kebanyakan dulu javascript-javascript itu disimpan di Google Code. Tapi seiring waktu berjalan, banyak dari para blogger mengeluhkan file-file javascriptnya pada dihapus sama Google tanpa alasan yang jelas... T_T

Oleh karena itu disini saya akan membagikan alternatif lainnya cara menyimpan file javascript via online selain menggunakan Google Code, yakni menggunakan Google Drive. Google Drive dan Google Code sama-sama merupakan produk dari Google cuma bedanya kalo Google Drive bisa menyimpan untuk file-file ukuran besar karena kapasitas maksimal yang dapat digunakan hingga 15 GB. Ini jelas berlebihan jika kita hanya menggukannya untuk menyimpan file yang ukurannya tidak lebih dari 1 KB.

Nah bagi sobat yang pengen tahu tutorialnya bisa mengikuti langkah-langkah di bawah ini :

1. Sobat masuk ke Google Drive,

2. Klik tombol Buat > Folder

3. Ketik nama folder sesuai keinginan sobat, terus klik Buat

4. Supaya file javascritpt sobat bisa diakses oleh publik, ikuti langkah ini. Centang nama folder tadi, klik Lebih Banyak dan kemudian klik Bagikan

5. Klik Ubah > pilih Publik di web > kemudian klik Simpan.

6. Setelah folder yang kita buat sudah bersatus publik, selanjutnya kita tinggal meng-upload file yang kita miliki ke folder tersebut. Caranya tinggal klik folder yang tadi kita buat, kemudian klik tombol upload/unggah di samping tombol Buat terus klik File. Kalo tidak yah tinggal drag saja filenya di tengah-tengah lingkaran yang tersedia. 

7. Setelah file sudah berhasil sobat upload untuk mengambil URL direct link dari file tersebut. Caranya cukup sobat centang file yang sudah sobat upload tadi, kemudian lihat link url di pojok bawah tab Detail sebelah kanan layar.

8. Terakhir sobat tinggal copas saja link url tersebut untuk dipasang di blog sobat.

Itu saja sekilas tentang tutorial Cara Menyimpan File JavaScript dan CSS di Google Drive, semoga bermanfaat. Dan jika ada yang kurang paham bisa berkomentar di bawah ini.

Continue reading →