Membuat Widget Popular Post Berwarna

Membuat Widget Popular Post Berwarna - Popular post  merupakan widget yang menunjukkan beberapa artikel yang paling sering dikunjungi atau dibaca oleh para pengunjung blog. Salah sati fungsi lain dari widget ini adalah sebagai pemiat pengunjung yang lagi berkunjung untuk meng-klik atau membaca popular post yang ada di blog kita.

Untuk menarik pengunjung  lebih banyak untuk membaca popular post di blog kita, maka sebaiknya kita membuat widget popular post yang beda dengan yang lainnya. Salah satunya dengan Membuat Widget Popular Post Berwarna.


Langkah-langkah untuk Membuat Widget Popular Post Berwarna adalah sebagai berikut.
  1. Pertama yang harus di pasang adalah widget popular post (Tata Letak => Tambahkan Gadget=> Entri Populer => Simpan, lebih baik kutipan dan tumbnail tidak dicentang.
  2. Kemudian pilih menu  Template => Edit HTML
  3. Kemudian Masukkan kode berikut tepat diatas kode ]]></b:skin> atau </style>
/* Modifikasi Widget Popular Post Warna Warni */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 &quot;Arial Narrow&quot;,Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:2%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:2%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:2%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:2%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:2%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:2%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:2%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:2%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:2%}
  •  Terakhir klik Simpan Template 
Selesai deh membuat tampilan widget berwarnanya dan sekarang lihat tampilan widget popular post anda. Pasti sudah berwarna-warni seperti pelangi yang indah dilangit biru, hahaha.

Johny See Book Sekali Template untuk Blogger

 
Template blog merupakan wajah dari blog kita, hal pertama yang dilihat oleh user ketika mengunjungi blog adalah dari tampilannya. Jika tampilannya bagus, maka kemungkinan besar user dapat betah berlama-lama mengunjungi blog kita.

Bicara soal template, ini saya akan share tentang sebuah template yang sangat bagus menurut saya. Karena saya sendiri sudah pernah pakai di blog ini.
Nih penampakannya :
Sumber Gambar : www.mastemplate.com

Nama Template : Jhony See Book Sekali
Lisence : www.creativecommons.org

Fitur yang bisa dinikmati
  1. Template Blogger yang simple
  2. Template ini termasuk salah satu template yang responsive
  3. SEO Friendly
  4. Terdapat Manu Navigasi yang sangat mudah
  5. Ads ready (Bisa diletakkan Adsense)
  6. Serta Template ini Auto Readmore
Happy Blogging

Cara Memberikan Tombol Back to Top di BLOG

Tombol Back to Top, mungkin tidak asing lagi bagi kita para blogger yang tiap harinya selalu bermain-main di dunia blogging. Dari namanya saja "Back to Top" atau "Kembali ke Atas", ini merupakan salah satu fitur yang memanjakan kita sebagai pengunjung untuk kembali ke pagian atas halaman yang sedang kita buka tanpa melakukan scrolling menggunakan mouse atau yang lebih sulit pake tanda panat keatas di keyboard. Efek dari back to top ini sangat terasa sekali jika kita mampir di sebuah halaman yang isinya amat sangat panjang sehingga untuk kembali keatas membutuhkan waktu untuk scrolling.

Biasanya di kebanyakan blog yang sudah sayan kunjungi, peletakan tombol Back to Top ini ada di bagian kanan bawah, sehingga user tidak susah untuk mencari tombol ini.

Ah, jangan lama-lama bahasnya. Langsung aja yuk cara memberikan tombol Back to Top di blogger.

Pertama dan yang pasti harus login dulu ke blogger Anda.
Masuk ke template, dan edit HTML.
Silahkan cari code tag </body> (pake ctrl + F biar lebih cepat)
Lalu Masukkan script berikut tepat diatas </body>

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='alamat url gambar Back to Top-mu'/></a>

Silahkan ganti "Back to Top" sesuai dengan keinginan anda.
Tidak usah diganti juga tidak apa-apa, karena tulisan itu hanya akan tampil jika browser gagal untuk memuat gambar back to top.

terus "alamat url Back to Top" silahkan diganti dengan url gambar yang anda sukai. contoh "http://2.bp.blogspot.com/-MzZd1JN1xqE/TaPbTItjVyI/AAAAAAAAAak/81lZyfdXRpE/s1600/bttp-14.png" diletakkan di url.

Atau bisa juga anda mencari gambar sendiri di Google yang sesuai dengan keinginan Anda.
Ini saya kasih contoh :

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='http://2.bp.blogspot.com/-MzZd1JN1xqE/TaPbTItjVyI/AAAAAAAAAak/81lZyfdXRpE/s1600/bttp-14.png'/></a>

Kalau sudah, tinggal save template dan jreng-jreng....
Silahkan lihat hasilnya di blog Anda

Happy Blogging.

Cara Membuat Komentar Facebook di BLOG

Gambar By : http://tukang-coding.blogspot.com
Saat sedang blogwalking ke blog orang lain komentar itu penting, karena dengan kita meninggalkan komentar disana kemungkinan blog kita untuk dikunjungi balik oleh orang lain atau si empunya blog itu bisa terjadi. Bayangkan ketika dalam sehari kita berkomentar di puluhan bahkan ratusan blog teman-teman, maka... Ah sudahlah bukan itu juga bahasan ku pada artikel kali ini.

Baca Juga : Jangan Mematikan Fungzsi Klik Kanan di BLOG

Pada saat ingin berkomentar di blog "Blogspot", kita diharuskan masuk dulu menggunakan akun gmail. Bisa juga pake Open ID dan lain sebagainya. Dan itu menurutku masih agak ribet sih, hehehe...

Namun ada cara komentar yang cukup mudah karena hampir setiap orang suday punya akunnya yaitu "Facebook". Yaitu melakukan komentar facebook di BLOG. Enak bukan? gak usah login pake gmail dulu.

OKE, langsung ke inti pembahasan, cara membuat komentar facebook di BLOG.
  • Pertama login dulu ke blogger.
  • Kemudian pilih template, lalu klik "Edit HTML"
  • Setelah halaman edit HTML sudah terbuka, lalu carilah code html berikut : (disarankan menggunakan ctrl + F biar lebih cepat)
<div class='comments' id='comments'>
  • Kemudian silahkan copy script dibawah ini, kemudian paste tepat dibawah "<div class='comments' id='comments'>" yang sudah anda cari tadi.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

  • Pada bagian IDFANPAGEFACEBOOK silahkan diganti dengan id Fan Page Facebook Anda.
  • Kemudian klik Simpan Template, kemudian liat perubahannya di blog Anda. Jika masih belum ada perubahan, silahkan cari lagi script "<div class='comments' id='comments'>" di Edit HTML nya. Kalo pengalaman pribadi sih aku menemukan 2 script <div class='comments' id='comments'>, jadi aku paste kode diatas dibawah keduanya.

Happy Blogging.....

Sumber Script : http://freezon88.blogspot.com/2013/12/komentar-facebook-dan-blog-model-tab.html

Jangan Mematikan Fungsi Klik Kanan di Blog

Sumber Gambar : google.co.id
Pernahkan artikel kita dicuri orang? atau istilahnya di copy paste blak-blakan tanpa izin atau mencantumkan link sumber? Kalo aku pribadi sih pernah, salah satu artikelku di copas seorang blogger tak bertanggung jawab yang seenaknya sendiri ngambil tulisan orang tanpa izin. Kesal juga sih sama orang itu.

Mengetahui hal itu langsung tanpa pikir panjang aku langsung browsing di internet caranya agar konten blog tidak di copy paste, ketemu deh dengan mendisable klik kanan, ctrl+C, ctrl+P dan lain sebagainya. Tanpa fikir panjang langsung aku terapkan di blogku.

Setelah agak lama menerepkan "Disable Righ Click" di blog, aku sempat mempir ke salah satu blog temen dan sempat membaca tulisannya ternyata men "Disable" klik kanan itu ada pengaruhnya juga buat blog kita. salah satunya dapat merusak kenyamanan pengunjung yang lagi mengunjungi blog kita dan menjadikan blog kurang userfriendly lagi.

Baca Juga : Cara Menampilkan Komentar Terbanyak di BLOG

Kutipan dari blog temenku :
Jika Anda berpikir disabling right-click itu akan melindungi sumber kode, posting, atau gambar (image, foto), pikirkan lagi! Selain merugikan diri sendiri, juga bisa dibobol dengan mudah oleh user, misalnya dengan mematikan kode javascript di web browser, CTRL+P, dan lainnya.

Bisa dibilang sih blogger yang mematikan fungsi klik kanan dan sebagainya itu "Amatiran" alias kurang profesional.
Jadi saranku mah jangan lah di disable klik kanannya, kalo emang masih ada yang copas, mending langsung aja laporkan ke Google DCMA (Digital Millenium Copyright Act) dan blog yang copas artikal Anda itu pun akan di-banned alias di-"black list" oleh Google.

Oke selamat berblog ria.
Support : Tukang Coding | Fadil Setup |
Copyright © 2014. Special Blog Effect - All Rights Reserved
Template Created by Creating Website Edited by @FadilSetup
Proudly powered by Blogger