Cara Membuat Widget Popular Posts Warna-Warni Di Blog

Sebenarnya Cara Membuat Widget Popular Posts Warna-Warni Di Blog tidak sulit kok, kamu cukup pasang widget Entri Populer yang sudah disediakan oleh blogger (setting sedikit), kemudian tambahkan kode widget atau kode CSS pada template blog kamu.

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget Entri Populer.

Cara Setting Widget Entri Populer :

• Pada bagian Paling banyak dikunjungi, silahkan kamu tentukan sendiri apakah ingin menampilkan artikel populer Setiap saat, 30 hari terakhir, atau 7 hari terakhir.
• Pada bagian Tampilkan judul entri dan, ada bagian thumbnail gambar, cuplikan, serta Tampilan hingga [...] entri.
• nah pada bagian Tampilan hingga [...] entri, silahkan kamu tentukan sendiri berapa Entri Populer yang mau kamu ditampilkan. sedangkan pada thumbnail gambar dan cuplikan = Jangan Diberi Centang.
• Setelah itu silahkan Simpan.

Lanjut...

» Di sini saya akan menuliskan 2 Versi, kamu tinggal pilih Versi yang mana yang kamu inginkan.

Versi Pertama Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).
5. Simpan Pengaturan.

Versi Kedua Melalui Edit HTML :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

Ingat : Sebelum kamu mengedit HTML, sebaiknya BACKUP dulu template blog kamu.

1. Klik Template.

2. Klik Edit HTML.

3. Klik Di Dalam Kotak Template Kamu.

4. Cari Kode (agar lebih mudah mencari kode di kotak template kamu, gunakan tombol ctrl+f  » jika berhasil maka akan terlihat Di Dalam Kotak Template Kamu).

» Cari kode : ]]></b:skin>
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di atasnya.

5. Sebelum Kamu Klik Simpan Template, sebaiknya kamu klik Pratinjau Template terlebih dahulu untuk memeriksanya.
6. Jika Sudah Oke » Klik Simpan Template.

█████████████████████████████████████████████████████████████████

Ini Dia "Kode" Tersebut :

<style type='text/css'>
/*----- WIDGET POPULAR POSTS WARNA-WARNI -----*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px;  margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#df01d7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#b041ff;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#f52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
</style>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-popular-posts-warna-warni-di-blog.html" target="_blank">Cara Membuat Widget Popular Posts Warna-Warni Di Blog</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini

Catatan :

• Sebelum kamu menggunakan Cara Membuat Widget Popular Posts Warna-Warni Di Blog ini, entri/artikel kamu harus sudah ada yang "Populer".
• Jika entri/artikel kamu tidak ada yang "Populer" maka Cara Membuat Widget Popular Posts Warna-Warni Di Blog ini tidak bisa digunakan alias Tidak Ada Efeknya.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Teks Animasi Tulisan Berwarna Di Blog

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<div style="-moz-box-shadow: inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #00ff00; box-shadow: inset 0 1px 5px 0 #555; font-family: Cataneo BT; font-size: 21px; font-weight: bolder; padding: 5px 20px; text-align: center;">
<script type="text/javascript">
var message="Selamat Datang Di Tutorial Blog Eno"
var bgsGR1color="#ffffff" /* Warna teks utama */
var bgsGR2color="#ffff00" /* Warna teks flash pertama */
var bgsGR3color="#00ff66" /* Warna teks flash kedua */
var flashspeed=100 // kec. ganti warna (1/1000 dt)
var flashingletters=15 // jumlah teks pertama (tips / hiting jumlah text, kemudian bagi 2)
var flashingletters2=18 // jumlah berwarna teks ke dua (tips / hiting jumlah text, kemudian bagi 2)
var flashpause=1 // waktu jeda pergantian warna (1/1000 dtk)
var n=0
if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')}else
document.write(message)
function crossref(number){var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)
crossref(m).style.color=bgsGR1color}
crossref(n).style.color=bgsGR2color
if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color
if (n<message.length-1)
n++
else{n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return}}
function beginneon(){if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)}
beginneon()
</script>
</div>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-teks-animasi-tulisan-berwarna-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• Warna red adalah teks, silahkan kamu ganti dengan selera yang kamu mau.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Recent Posts Bergerak Di Blog

Widget Recent Posts atau posting terbaru merupakan wiget penting karena berfungsi sebagai penunjang navigasi blog. dengan adanya daftar posting terbaru, pengunjung yangg masuk tidak dari halaman utama (homepage) dapat langsung mengetahui beberapa posting terbaru dari sebuah blog. selain itu, widget recent posts dapat menjadi sebuah tawaran bagi pengunjung blog untuk mengetahui isi posting-posting lain dari blog tersebut.

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#3eb5da;
    border:solid 1px #00ff00;}
    #rp_plus_img a{color:#000000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #000000;width:55px;height:55px;}

</style>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-1.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-2.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });

</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;

</script>     <script src="http://tutorial-blog-eno.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-recent-posts-bergerak-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• {height:377px;}adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• Warna orange adalah link kode "JavaScript" blog.
• var numposts = 5; adalah jumlah posting, silahkan kamu ganti dengan selera yang kamu mau.
• Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Cara Membuat Widget Random Posts Di Blog

Melalui HTML/JavaScript :

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).

<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #00ff00;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 80;
var numofpost=5;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write('<div>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item ="";
var posttitle = entry.title.$t || "[Untitled]";
"[Untitled]"
for(k=entry.link.length -1; k >= 0 ; k--){
if(entry.link[k].rel=='alternate'){
item +="<a class='rp-post-link' href='" + entry.link[k].href + "'>" + posttitle + "</a>";
break;
}
}
item += "<br"
item += "/>"

if('media$thumbnail' in entry)item += "<img class='rp-thumbnail' src='" + entry.media$thumbnail.url + "'>"
var summary = "";
if ("content" in entry) {
summary = entry.content.$t;
}
else if ("summary" in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, "");
item += "<p class='rp-summary'>" + summary.substring(0,lengthsummary) + " ...</p>";
document.write(item);
}
document.write('</div>');
}
</script>
<script src="http://tutorial-blog-eno.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-random-posts-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>

Keterangan :

• Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
• Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
• var lengthsummary = 80; adalah jumlah huruf yang akan ditampilkan pada deskripsi posting, silahkan kamu ganti dengan selera yang kamu mau.
• var numofpost=5; adalah jumlah posting, silahkan kamu ganti dengan selera yang kamu mau.
• Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.

Catatan :

• Jika blog kamu tidak ada artikel yang di publikasikan/kurang dari jumlah posting yang di tentukan untuk di publikasikan, kemudian kamu menggunakan Cara Membuat Widget Random Posts Di Blog ini, maka blog kamu akan "ERROR, Debug Script" (saat kamu/pengunjung blog melihat blog kamu).

5. Simpan Pengaturan.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]

Kumpulan Gambar Animasi Bergerak Ragnarok "Job Class"

Artikel Ini Rekomendasi Dari :

• Cara Membuat Widget Gambar Animasi Bergerak Melayang Di Blog
• Cara Membuat Widget Gambar Animasi Bergerak Melayang Di Pojok Blog
• Cara Membuat Widget Link Pada Teks Dan Gambar Berjalan Melayang Di Bawah Blog

Lanjut...

Bagi Kamu Yang Belum Tahu Cara Menyimpan Gambar Atau Cara Copy URL Gambar, Ikutilah Cara Di Bawah Ini :

» Cara Menyimpan Gambar :
1. Klik "kanan" pada kursor » pilih Save Image As...
2. Dan kemudian pilih Lokasi Penyimpanan Gambar.

» Cara Copy URL Gambar :
1. Klik "kanan" pada kursor » pilih Copy Image URL (Google Chrome) atau Copy Link Location (Mozilla Firefox).
2. Dan kemudian, Paste-kan (ctrl+v) ke Artikel atau Browser kamu.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

[Baca Selengkapnya]