Cara Membuat Navigasi Nomor Halaman di Blog

Cara Membuat Navigasi Nomor Halaman di Blog - Sobat blogger tahu tidak yang dimaksud dengan navigasi nomor halaman itu?? Bagi yang belum tahu, navigasi nomor halaman adalah navigasi yang berupa nomor-nomor biasanya berada di bawah sebuah page/halaman blog. Atau sering juga dinamain navigasi page number yang bahasa inggrisnya pages number navigation

Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation - See more at: http://www.seowaps.com/2013/07/cara-membuat-navigasi-nomor-halaman-di.html#sthash.c8sEvwAC.dpuf

Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation - See more at: http://www.seowaps.com/2013/07/cara-membuat-navigasi-nomor-halaman-di.html#sthash.c8sEvwAC.dpuf

Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation - See more at: http://www.seowaps.com/2013/07/cara-membuat-navigasi-nomor-halaman-di.html#sthash.c8sEvwAC.dpuf

Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation - See more at: http://www.seowaps.com/2013/07/cara-membuat-navigasi-nomor-halaman-di.html#sthash.c8sEvwAC.dpuf

Ada yang sudah tau apa itu navigasi nomor halaman? Itu lho navigasi yang berupa nomor-nomor di bawah sebuah page/halaman blog atau orang-orang sering menyebutnya sebagai navigasi page number atau pages number navigation - See more at: http://www.seowaps.com/2013/07/cara-membuat-navigasi-nomor-halaman-di.html#sthash.c8sEvwAC.dpuf

Dengan adanya navigasi nomor halaman tentunya akan memudahkan pengunjung untuk menjelajahi artikel-artikel sobat per halaman berdasarkan angka atau nomor. Beberapa template blogger mungkin tidak memiliki fasilitas navigasi nomor / angka halaman ini, jika template yang sobat blogger gunakan termasuk template yang tidak memiliki fasilitas tersebut, berikut akan saya jelaskan langkah - langkah untuk membuat navigasi nomor / angka halaman di blog.

Cara Membuat Navigasi Nomor / Angka Halaman di Blog :

1. Login dulu ke akun blogger sobat

2. Masuk ke menu Tata Letak > Tambahkan Gadget > HTML/Javascript

3. Copy paste kode berikut ini, judul gadget tidak usah diisi:

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=5;
var displayPageNum=4;var upPageWord="Previous";var downPageWord="Next";</script><a href="http://oplosanblog.blogspot.com/" style="font-size:0pt">Blogging, Tips, Trik, Free Software</a>
<script style='text/javascript' src='https://googledrive.com/host/0B9SBWEZ6FHqYOHc2dnI4bDBGSjg/Script Navigasi Halaman.js'></script>

Sobat bisa mengganti angka 5 untuk merubah jumlah postingan yang akan tampil di halaman utama dan angka 4 untuk menentukan banyaknya nomor halaman yang akan ditampilkan.

4. Terakhir klik Simpan. Selesai sudah, silahkan dicoba.

Continue reading →

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 →