Cara Membuat Widget Popular Post Menjadi Berwarna

Cara Membuat Widget Popular Post Menjadi Berwarna

Widget Popular Post adalah widget yang berfungsi untuk menampilkan artikel yang paling sering di baca oleh pengunjung. Untuk lebih mempercantik tampilan blog, ada baiknya widget tersebut diberi sedikit polesan agar lebih berwarna.

Widget popular post yang satu ini memiliki background yang berwarna-warni seperti pelangi dan sudutnya sedikit melengkung mirip ketupat. Lihat screenshootnya di bawah ini:

Tertarik untuk memasangnya? Bagaimana caranya?

Cara Memasang Widget Popular Post Menjadi Berwarna:

1. Login ke akun Blogger
2. Pilih Template >> Edit HTML
3. Kemudian copy-paste script berikut di atas kode  ]]></b:skin>

#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: 12px; 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 +li +li{background:#F200FF;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 + li + li +li{background:#FF9100;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 {background:#E6FF00;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{background:#0073FF;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 +li{background:#FF0080;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#00FFFB;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#B300FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#007902;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#006579; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#9E9BD1;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:3px 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}

4. Selanjutnya masuk ke Tata Letak >> pilih widget Popular Post.
5. Lalu hilangkan tanda checklist seperti gambar dibawah ini





6. Simpan Template
7. Cek tampilannya di halaman utama blog untuk memastikan Widget Popular Postnya sudah berubah.

Itulah sekilas pemahaman saya tentang Cara Membuat Widget Popular Post Menjadi Berwarna. Semoga artikelnya bermanfaat. Jika mencari artikel lain yang serupa silahkan cek di bawah ini:

Read More

Cara Membuat Banner Iklan Melayang di Kanan dan Kiri Blog

Cara Membuat Banner Iklan Melayang di Kanan dan Kiri Blog

Banner adalah sebuah gambar yang dipasang untuk mempromosikan suatu produk/ acara tertentu. Bisa berupa iklan, informasi, maupun media promosi lainnya. Kali ini saya akan membahas cara penempatan banner di halaman blog. Karena seperti kita ketahui kadang karena keterbatasan ruang, kita bingung untuk menempatkan banner tersebut. Terlebih jika ukuran banner tersebut terbilang cukup besar.

Namun kita bisa memaksimalkan penempatan banner tersebut dengan memasangnya di samping kanan atau kiri halaman blog kita. Keuntungannya memakai banner dengan cara seperti itu adalah, pengunjung akan selalu melihat banner tersebut dan akan terus mengikuti ruang halaman meskipun pengunjung menggeser scrollnya ke atas ataupun ke bawah. Biasanya penempatan banner seperti ini dipakai untuk memasang iklan atau advertising, meskipun cara tersebut sebenarnya melanggar kebijakan program PPC. Namun untuk iklan iklan mandiri yang berani membayar mahal, penempatan iklan seperti itu tidak dipermasalahkan.

Ini adalah contoh banner iklan melayang yang ada di samping kanan kiri blog Endolita:

Lalu bagaimana cara memasang Banner Iklan Melayang tersebut?

Cara Memasang Banner Melayang di Kanan dan Kiri Blog:

1. Login ke akun Blogger
2. Pilih Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
3. Copy Paste script berikut ini:

<script type='text/javascript'>
    $(document).ready(function() {
    $('img#closed').click(function(){
    $('#btm_banner').hide(90);
    });
    });
    </script>
    <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+i;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)};
    </script><script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>
    <!--start: floating ads-->
    <div id="teaser2" style="width:auto; height:auto; text-align:left; display:scroll;position:fixed; top:20px;left:10px;">
    <!--Mulai-->
<a href='URL-Tujuan' title='Judul Iklan'><img src='URL-Gambar/banner'/></a>
    <!--Akhir-->
    </div>
    <!--end: floating ads-->
    <!--start: floating ads-->
    <div id="teaser3" style="width:auto; height:auto; text-align:right; display:scroll;position:fixed; top:20px;right:0px;">

    <!--Mulai-->
<a href='URL-Tujuan' title='Judul Iklan'><img src='URL-Gambar/banner'/></a>
    <!--Akhir-->
    </div>
    <!--end: floating ads-->

Catatan:

• Ganti tulisan berwarnaBirudengan script banner gambar/ iklan yang mau dipasang.
• Ganti tulisan berwarnaHijauadalah jarak banner dengan sisi kiri kanan halaman blog.

Simpan Template, kemudian cek di halaman utama blog untuk memastikan bannernya sudah muncul di samping kiri kanan.

Itulah sekilas pemahaman saya tentang Cara Membuat Banner Melayang Kanan dan Kiri Blog. Semoga bermanfaat. Jika mencari artikel lain yang serupa silahkan cek di bawah ini:

Read More