Home  ·  About  ·  Privacy  ·  Contact  ·  Cbox

Cara Membuat Widget Artikel Terbaru di Blog Versi II

Pada artikel sebelumnya sudah pernah kita tuliskan cara membuat widget artikel terbaru di blog tetapi mungkin sudah terlalu lama artikel tersebut jadi beberapa kode sudah tidak berfungsi lagi. Nah, pada kesempatan ini kami akan mencoba menuliskan kembali artikel tersebut.

Langsung saja kita masuk ke langkah cara membuat widget artikel terbaru pada blog :


1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, kemudian + Tambahkan Gadget.
3. Cari dan pilih widget HTML/JavaScript.
4. Copy paste kode dibawah ini pada halaman HTML/JavaScript.
<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script>
<script type="text/javascript">var numposts = 9;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://id-pemula.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
Keterangan :
numpost = 9 : artikel yang akan ditampilkan pada widget.
http://id-pemula.blogspot.com : ganti dengan alamat URL blog Anda.
5. Kemudian Simpan.

Nah, kini sidebar blog Anda terpasang kembali widget artikel terbaru. Semoga berhasil dan bermanfaat!
Selengkapnya...

Cara Membuat Logo Header pada Blog Berputar

Logo pada header blog dapat kita buat berputar ketika kursor didekatkan pada area header blog. Untuk mengganti tampilan header blog berputar ketika kusrsor didekatkan, kita hanya menambahkan sedikit kode/script pada template blog dan tidak akan berpengaruh banyak pada loading blog Anda.


Berikut langkah cara membuat header pada blog bergerak berputar :

1. Login akun blogger Anda.
2. Pilih menu tab Tema, kemudian klik Edit HTML.
3. Cari kode </style>, letakkan kursor di area kode HTML gunakan Ctrl + F untuk mempercepat pencarian.
4. Kalau sudah ketemu kode tersebut, copy paste kode berikut tepat diatas kode </style>.
#header:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
5. Kalau kode diatas tidak berfungsi ganti kode dibawah ini :
#header-wrapper:hover {
-webkit-transition-duration: 3s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
Keterangan :
Kode 3s : kecepatan header bergerak berputar.
Kode 360deg : seberapa jauh sudut perputaran geraknya.

6. Kemudian Simpan tema.

Nah, sekian cara membuat header pada blog berputar. Sekarang header blog Anda bergerak berputar. Semoga bermanfaat.
Selengkapnya...

Cara Memasang dan Memindahkan Komentar Blog ke Disqus

Komentar Disqus mempunyai banyak fitur dan memiliki tampilan yang terlihat menarik. Disqus juga terintegrasi dengan social media seperti Google+, Facebook, dan Twitter. Selain itu kita juga bisa menyisipkan gambar pada komentar tanpa harus melakukan konversi pada gambar.


Disqus juga dapat memindahkan komentar blog Anda kedalam kolom komentar Disqus, untuk memasang kotak komentar Disqus juga tidak terlalu sulit. Berikut langkah cara memasang komentar Disqus pada blog :

1. Masuk halaman Disqus, kemudian klik GET STARTED.


2. Kemudian daftar Disqus terlebih dahulu, Anda juga dapat login langsung menggunakan social media tanpa harus melakukan registrasi terlebih dahulu.


3. Klik I want to install Disqus on my site.


4. Masukkan nama website dan kategori website Anda, kemudian klik Create Site.


5. Install Disqus kemudian klik platform Blogger.


6. Kemudian klik Add NAMA BLOG ANDA to my Blogger site.


7. Setalah itu akan muncul halaman akun blog Anda, kemudian klik Menambah Widget.



Kalau sudah berhasil semua cek kolom komentar blog Anda, kolom komentar akan digantikan dengan Disqus. Itu tadi cara memasang komentar Disqus pada blog, selanjutnya akan kita bahas cara memindahkan komentar blog ke Disqus :

1. Kembali ke halaman Install Disqus Instructions, kemudian pilih Import your existing Blogger comments into Disqus at Discussions > Import.


2. Pilih menu tab Blogger, kemudian Import comments from Blogger.


3. Kemudian Anda diminta untuk login ke akun blogger atau google Anda.


4. Kalau blog Anda lebih dari satu, maka Anda bisa memilih blog mana yang akan Anda pindahkan ke Disqus.



Kini komentar blogger Anda sudah berpindah ke kolom komentar Disqus. Setelah berhasil memasang komentar Disqus pada blog masih ada satu lagi yaitu memasang meta tag disqus ke blog agar komentar Disqus Anda compatible dengan Internet Explorer.

1. Pada halaman Install Disqus Instructions, pilih menu no. 3

2. Kemudian akan muncul kode meta tag Disqus, cari kode seperti no. 2 di template blog Anda.


3. Ganti kode tersebut dengan kode yang sudah disediakan di langkah no. 3
4. Atau jika Anda tidak menemukan kode tersebut saran kami copy paste saja kode di no. 3 tersebut antara kode <head>...</head>

Nah, sekian cara memasang dan memindahkan komentar Blog ke Disqus. Semoga bermanfaat!
Selengkapnya...

Membuat Iklan Adsense Melayang di Tampilan Bawah Handphone

Iklan melayang dibawah halaman blog tidak hanya bisa kita pasang pada tampilan desktop saja, tetapi bisa juga kita pasang pada tampilan handphone atau mobile.

Screenshoot : detik.com
Berikut langkah cara membuat iklan Adsense melayang pada tampilan bawah handphone atau mobile :

1. Login akun blogger Anda.
2. Pilih menu tab Tema, kemudian klik Edit HTML.
3. Cari kode </style>, letakkan kursor di area kode HTML gunakan Ctrl + F untuk mempercepat pencarian.
4. Kemudian letakkan kode dibawah ini tepat diatas kode </style>
#id-pemula_mobile {
bottom: 0;
position: fixed;
width: 100%;height:50px;
opacity: 0.9;
left: 0;display:none
}
@media only screen and (max-width:400px)
{#id-pemula_mobile{display:inherit}}
5. Klik Simpan template.

Kini giliran memasang kode iklan pada blog Anda, siapkan kode iklan Anda terlebih dahulu. Kemudian ikuti langkah-langkahnya berikut ini :

1. Pilih menu tab Tata Letak, kemudian + Tambahkan Gadget.
2. Klik HTML/JavaScript, copy paste kode berikut pada HTML/JavaScript.
<div class='id-pemula_mobile' id='id-pemula_mobile' style='text-align:center; z-index: 9999;'>
Letakan Kode Iklan Adsense Disini
</div>
3. Kalau sudah klik Simpan.

Nah, sekarang Anda bisa mengecek tampilan blog di handphone Anda, iklan yang Anda pasang tadi akan tampil dibawah halaman blog. Semoga bermanfaat!
Selengkapnya...

Cara Memasang Fanspage Facebook di Widget Blog

Fanspage Facebook dapat dipasang dimana saja contohnya disamping blog dan melayang di halaman blog. Pada kesempatan ini kami akan menuliskan cara memasang atau membuat Fanspage Facebook pada widget blog.


Berikut langkah cara memasang fanspage facebook di widget blog :

1. Kunjungi website https://developers.facebook.com/docs/plugins/page-plugin
2. Kemudian isi data dan setting tampilan fanspage Anda, seperti lebar dan tinggi tampilan.


3. Kemudian kalau sudah klik Dapatkan Kode.


4. Copy paste kedua kode fanspage Facebook tersebut.

Selanjutnya adalah memasang fanspage Facebook pada blog. Ikuti langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, klik + Tambahkan Gadget pada kolom sidebar Anda.
3. Cari dan pilih widget HTML/JavaScript.
4. Copy paste kode fanspage Facebook tadi pada halaman HTML/JavaScript.
5. Kemudian Simpan.

Nah, Semoga bermanfaat!
Selengkapnya...

Cara Membuat Widget Blog Mengikuti Scroll Turun Ke Bawah

Widget pada blog dapat kita buat berjalan mengikuti scroll turun ke bawah, ini akan membuat blog Anda menjadi lebih variatif karena tidak ada kekosongan pada widget jika posting Anda cukup panjang dan widget yang Anda pasang sedikit. Kami sarankan untuk widget yang Anda ingin buat mengikuti scroll turun ke bawah sebaiknya widget diletakkan paling akhir/bawah karena akan menutup widget yang lain jika di scroll ke bawah.


Berikut langkah cara membuat widget blog mengikuti scroll turun ke bawah :

1. Login akun blogger Anda.
2. Pilih menu tab Tema > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode (gunakan Ctrl + F), cari kode ]]></b:skin>
4. Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>
.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}
5. Berikutnya cari kode </body> kemudian letakkan kode berikut diatas kode </body>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#ID_Widget').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#ID_Widget ').addClass('sticky');
} else {
$('#ID_Widget ').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>
Keterangan :
Ganti kode ID_Widget dengan ID Widget yang akan kalian gunakan.

6. Kalau sudah klik Simpan template.

Semoga bermanfaat!
Selengkapnya...

Link Blog Otomatis Terbuka Tanpa Harus di Klik

Link pada blog bisa Anda buat terbuka otomatis tanpa harus di klik, cara ini tidak kami sarankan karena seperti jebakan untuk pengunjung blog. Ketika kursor atau mouse didekatkan ke link akan terbuka otomatis tanpa harus di klik, ini akan membuat pengunjung blog tidak nyaman.


Jika Anda ingin tahu, berikut kode link blog otomatis terbuka tanpa harus di klik :
<a href="https://id-pemula.blogspot.co.id/search/label/Tutorial%20Blog?max-results=7" onmouseover="window.location=this.href" target="_blank">Tutorial Blog</a>
Keterangan :
Merah : Ganti dengan alamat URL yang akan dituju.
Biru : Teks yang akan ditampilkan

Contoh tampilannya, arahkan kursor pada link dibawah ini :

Tutorial Blog

Nah, sekian cara membuat link blog otomatis terbuka tanpa harus di klik. Semoga bermanfaat!
Selengkapnya...

Cara Mencari dan Menemukan ID Widget Blog

Jika Anda ingin memodifikasi widget blog biasanya Anda akan membutuhkan ID widget, bagaimana menemukan ID widget pada blog? Ada beberapa cara untuk menemukan ID widget blog.


Berikut langkah cara mencari dan menemukan ID widget Blog Anda :

Cara yang Pertama :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, kemudian arahkan kursor Anda pada Edit Gadget.


3. Akan muncul URL ID Widget pada halaman bawah blogger Anda.

Cara yang Kedua :

1. Pilih menu tab Tema, kemudian klik Edit HTML.


2. Letakkan kursor Anda pada area kode HTML.


3. Tekan Ctrl + F, kemudian ketikkan nama atau kata kunci widget yang Anda cari.

Nah, sekian cara mencari dan menemukan ID widget blog. Semoga bermanfaat!
Selengkapnya...
 
Copyright © . Info Blog Indonesia · Powered by Blogger