Trik Ricky: Widget
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

18/12/17

Membuat Back To Top Button Di Tengah Footer

Membuat Back To Top Button Di Tengah Footer

Tombol Back To Top adalah sebuah tombol kecil yang kembali ke atas ketika di klik, tombol ini merupakan salah satu fungsi yang diperlukan oleh sebuah blog atau website. Tombol kali ini dibuat dengan gambar dan tanpa menggunakan font awesome.

Tombol back to top memiliki peranan yang sangat penting untuk sebuah blog atau website dengan konten yang berat, memiliki halaman yang memanjang kebawah dan memiliki banyak informasi pada halamannya. Jika tidak maka akan membuat konten-konten lain terlewati.

Tombol ini akan melompat ke atas dengan mudah dan singkat, tanpa menggerakanya dengan mouse pada komputer atau dengan menggesernya untuk penggunaan pada smartphone. Ini adalah salah satu cara untuk mendorong pengguna menjelajahi lebih banyak konten di blog anda.

Jika saja sebuah blog sangat sulit untuk dijelajahi, maka akan membuat pengunjung segera berpindah kepada blog lainnya. Tombol back to top ini tidak mempengaruhi loading blog dan kompatibel untuk semua browser/peramban.

Nah untuk membuatnya anda bisa terapkan beberapa langkah di bawah ini

Membuat Tombol Back To Top


Buka template editor, tambahkan CSS, Javascript dan HTML Berikut:

/* Back To Top */
#backtotopid {position:relative;display:table;clear:both;text-align:center;margin:20px auto;}
.backtotopid {color:#fff;}
#backtotopid span {display:block;background:#4b5862;width:48px;height:48px;line-height:45px;border-radius:100%;cursor:pointer;transition:all .3s}
#backtotopid span:hover {background:#5c6b77;}
#backtotopid img{text-align:center;line-height:normal;vertical-align:middle;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user2-select:none;pointer-events:none;}

<script type='text/javascript'>
// Back to Top
$('.backtotopid').click(function(){$('html,body').animate({scrollTop:0},600);return false;});
//]]>
</script>

<div class='backtotopid' id='backtotop' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>

Keterangan:
1. CSS letakan diatas </style>
2. JavaScript letakan diatas </body>
3. HTML letakan antara tag footer

Jika anda bingung dengan peletakan kode HTML nya, anda bisa lihat contoh dibawah ini:

<div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div id='footer'>
<div class='footer-navigation'><ul>
<li><a href='#' title='Formulir Kontak'>Contact</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
</ul>
</div>
<div class='backtotopid' id='backtotopid' title='Back to top'><span><img alt='Back To Top' height='14' src='http://3.bp.blogspot.com/-3uiiau4bwvs/VdEDQ2MVImI/AAAAAAAAK3s/xPhBH9BAJnI/s1600/btp.png' title='Back To Top' width='22'/></span></div>
Copyright &#169; <span id='current-year'/> <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a><br/>
</div></div>

Dengan kode diatas anda pun dapat mengubah url gambar diatas sebagaimana mestinya sesuai keinginan.

Demikian Tutorial Membuat Back To Top Button Di Tengah Footer Kali ini, Selamat siang & Happy lunch.

27/09/17

Cara Sederhana Membuat Widget Fanspage Facebook

Cara Sederhana Membuat Widget Fanspage Facebook

Facebook adalah salah satu sarana yang umum di gunakan para blogger untuk mempromosikan blog mereka. Selain lebih mudah, aplikasi facebook salat lekat kaitannya dengan gaya hidup orang diseluruh dunia, dari mulai anak-anak hingga orang dewasa. Oleh sebab itu maka facebook adalah sarana yang tepat untuk mempromosikan sebuah blog baru untuk menambah jumlah visitor di blog.

Mengingingat pentingnya aplikasi facebook ini, maka disini saya akan share rangkaian kode simpel untuk menambahkan akun fanspage facebook ini di bagian sidebar. Jadi anda tidak perlu lagi menambahkan kode CSS ke dalam template, anda cukup menambahkan kode berikut ke dalam widget baru di sidebar kemudian simpan.

<div style="display:block;text-align:center;margin:0 0 10px 0;">
<div class='fansgue' id='fansgue'> <div class="fb-page" data-href="https://www.facebook.com/trikricky/" data-width="300px" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div></div>
</div>

Untuk review nya anda bisa lihat di bagian sidebar blog ini (jika masih di gunakan).

Demikian dan semoga dengan adanya Widget Fanspage Facebook ini dapat menambah jumlah visitor blog anda kedepannya. Salam hangat.

28/08/17

Cara Simple Pasang Iklan Baris Mirip Adsense Di Blog

Cara Simple Pasang Iklan Baris Mirip Adsense Di Blog

Iklan Baris juga merupakan cara promosi yang biasanya sering ditemukan dan dimuat pada blog atau website. Beda dengan iklan biasanya yang menggunakan desain grafis, iklan baris lebih menggunakan tampilan teks yang lebih terperinci untuk informasinya, sehingga tampilan iklan ini lebih sederhana dan tidak memakan banyak ruang pada blog. Dan biasanya iklan baris berisi tidak lebih dari 2 hingga 3 baris teks.

Karena menggunakan teks, harga pemasangan iklan baris diblog umumnya juga relatif lebih murah dibandingkan dengan iklan grafis yang menggunakan gambar dan desain grafis. Karena hal inilah mengapa iklan baris lebih banyak diminati oleh penyedia barang dan jasa, selain isi lebih terperinci, iklan jenis ini terbukti ampuh menarik banyak peminatnya.

Iklan baris memang relatif lebih kecil sehingga para penyedia pemasang iklan baris ambil saja contoh blog atau website, dapat menerima aplikasi pemasangan iklan baris lebih banyak. Selain itu dalam pemasangannya pun lebih simple dengan atau tampa CSS dan JavaScript

Biasanya pada pihak penjual jasa akan menautkan nomor telepon, email, atau bahkan website mereka pada laman iklan baris yang ditawarkan. Cara ini digunakan sebagai sarana termudah untuk saling berhubungan antara penjual dengan target iklan atau calon pembeli mereka.

Nah jika anda Tertarik untuk membuat Iklan baris di blog anda, anda dapat cukup menambahkan kode berikut di dalam Widget baru dengan cara Buka Tata Letak dan Tambahkan Gadget Baru > Pilih HTML/Javascript, letakan kode dibawah ini didalamnya:

<div id='ricky_ppc'>
  <a style="text-decoration:underline; padding:15; font-size:13px; color:#43a1a0;" href="http://www.trikricky.com/2017/06/pasang-iklan-banner-gratis.html" target="_blank" title="Iklan Teks Murah"><strong>Pasang Iklan Banner Gratis 1 Minggu</strong></a>
  <br/>
  <span style="font-size:12px"> Pasang 1 Bulan Gratis Pemasangan Selama 1 Minggu, Ayo Pasang Iklan Banner Anda Disini Sekarang Juga!</span>
  <br/>
  <a style="font-size:10px;color:#43a1a0;" href="#" target="_blank" title="Trik Ricky">http://www.trikricky.com</a>
  <br/>
  <br/>
  <a style="text-decoration:none;padding:15;font-size:12px;float:right;color:#43a1a0;" href="http://www.trikricky.com" target="_blank" title="Pasang Iklan Murah di Trik Ricky"><small>Ads by trikricky.com</small></a>
  <br/>
</div>

Dengan Pemasangan widget iklan baris diatas diharapkan jangkauan blog anda dan iklan si para advertiser juga akan lebih luas, pada akhirnya calon pelanggan akan dapat dipastikan bertambah secara signifikan.

Hal ini juga apat dipastikan kalau iklan baris akan lebih menemukan targetnya karena informasi langsung terperinci pada iklan. Jadi dapat dipastikan calon pembeli akan lebih mengerti akan informasi jasa yang ditawarkan.

Demikian Semoga Artikel Tentang Cara simple Membuat Iklan Mirip Adsense Diblog. Semoga dapat menjadikan inspirasi dan bermanfaat untuk anda.

12/08/17

Membuat Widget Artikel Terbaru Tanpa Thumbnail Valid HTML5

Membuat Widget Artikel Terbaru Tanpa Thumbnail Valid HTML5

Widget Artikel Terbaru adalah widget yang menampilkan postingan terbaru dari dari blog. Dengan memasang widget ini juga merupakan salah 1 optimasi seo yang menjadikan blog menjadi seo friendly. Diluar sana berserakan kode2 dan jenis widget recent post/artikel terbaru, dengan beragam jenis, baik dengan Thumbnail maupun tanpa thumbnail, seperti widget recent post yang hanya menampilkan judul artikel terbaru saja yang akan saya bagikan kali ini.

Karena widget recent post kali ini tidak menggunakan gambar, tanggal posting dan snippet dari sebuah artikel. Sehingga loading blog atau website tetap ringan ketika pengunjung mengklik salah satu judul artikel yang ada di widget recent post ini.

Untuk anda yang tertarik menggunakan recent post tanpa gambar dan sangat valid HTML5 ini, silahkan ikuti langkah-langkah berikut:

Cara Membuat Widget Artikel Terbaru Tanpa Gambar


Langkah 1


Letakan CSS berikut dan sesuaikan dengan warna template anda

/* CSS Artikel Terbaru */
#sidebar3 h4, #sidebar3 h3, #sidebar3 h2{background:#D91E18;color:#fff;text-transform:capitalize;font-family:Arial, Sans-Serif;font-size:135%;font-weight:400;position:relative;padding:12px 0 15px;text-align:center;margin:0}
#sidebar3 .widget-content{background:#fff;padding:0 0 0 10px}
#sidebar3 a:link, #sidebar3 a:visited{font-weight:normal}
#sidebar3 ul li {margin:0 5px 0 0 !important;padding:6px 0 !important;position:relative;border-bottom:1px dashed #d5d5d5 !important}
#sidebar3 ul li:last-child{border:none !important}
#sidebar3 ul li a {font-size:14px !important;font-weight:normal !important;color:#333 !important;text-decoration:none;transition: all 0.3s ease-out 0s !important;line-height:1.4em !important}
#sidebar3 ul li a:hover {color:#6aba82 !important;}

Langkah 2


Tambahkan Script berikut kedalam Gadget baru, masuk ke Dashboard > Tata Letak, pada sidebar blog klik Tambah Gadget > 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><ul>
<script type="text/javascript">var numposts = 10;var standardstyling = true;</script><script type="text/javascript" src="http://www.trikricky.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script></ul>

Catatan:
Perhatikan kode yang ditandai, itu adalah jumlah artikel terbaru yang ingin ditampilkan. ganti www.trikricky.com dengan url blog anda

Tambahan:

Tambahkan tag kondisional di bawah ini klik Template pada dashboard blog lalu klik lagi Edit HTML jika hanya ingin menampilkan widget tersebut pada postingan penuh saja (untuk blogspot).

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Jangan lupa tambahkan tag penutupnya </b:if> seperti screenshoot berikut:

Tag Kondisional Widget Artikel Terbaru Hanya dihalaman Postingan Penuh

Simpan kembali Template

Demikian Cara membuat widget artikel terbaru tanpa gambar kali ini, semoga widget ini dapat mempercantik tampilan blog anda.

24/07/17

Membuat Widget Hitung Mundur Menyambut Idul Adha 2017

Widget hitung mundur hari besar

Assalamualaikum... Hari raya Idul Adha atau biasa disebut hari Kurban karena identik dengan penyembelihan hewan kurban dirayakan umat Islam setiap tanggal 10 bulan Dzulhijjah. Dalam kalender masehi, perayaan Idul Adha tahun ini diperingati pada hari Jumat tanggal 1 September 2017.

Sejarah Idul Adha


Perayaan Idul Adha berawal dari cerita Nabi Ibrahim yang kala itu berkurban hewan-hewan peliharaannya yaitu domba, sapi, dan unta dengan jumlah yang banyak. Namum nabi Ibrahim merasa itu belum seberapa, bahkan beliau berjanji pada diri sendiri bahwa beliau akan rela menyembelih anaknya sendiri andai dikaruniai seorang anak. Sumpah ini diucapkan karena istrinya saat itu, Sarah, belum juga memiliki anak meskipun sudah lama menikah dengan Ibrahim. Kemudian Ibrahim diperintah untuk menikahi Siti Hajar. Itulah awal mula sejarah Idul Adha.

Tidak lama setelah menikah dengan Hajar, kemudian beliau dikaruniai anak yang bernama Ismail. Sampai pada suatu malam, nabi Ibrahim bermimpi mendapat perintah dari Allah untuk memenuhi nadzarnya yaitu menyembelih anaknya. Meskipun sempat bingung, akhirnya Ibrahim menaatinya. Ismail yang kala itu berusia 7 tahun pun ikhlas menerimanya. Namun, pisau yang hendak digunakan untuk menyembelih Ismail ternyata tidak cukup kuat untuk menyembelihnya. Maka selamatlah Ismail.

Pada beberapa riwayat, disebutkan juga bahwa Allah mengganti Ismail dengan seekor domba hingga akhirnya muncullah perintah kurban pada Idul Adha dengan domba ataupun hewan kurban lain. Karena itu juga Idul Adha sering disebut sebagai hari Qurban atau Kurban karena identik dengan penyembelihan hewan kurban.

Tradisi Idul Adha Di indonesia


Di Indonesia, Idul Adha biasanya diperingati dengan Sholat Id. Meskipun beberapa kelompok kadang memiliki perbedaan hari dalam menentukan tanggal hari raya, tetapi tidak ada perbedaan tata cara pelaksanaan Sholat Id. Biasanya, Sholat Id dilakukan di Masjid. Tetapi, banyak juga yang melakukannya Mushola, lapangan, bahkan alun-alun.

Jika jumlah jamaah banyak, biasanya Sholat Id dilakukan di lapangan atau alun-alun. Meskipun kebanyakan orang mengikuti pemerintah dalam penetapan hari raya ini, banyak juga yang memperingatinya lebih awal ataupun lebih akhir.

Setelah melaksanakan sholat Id, biasanya dilanjutkan dengan penyembelihan hewan kurban. Meskipun ada juga yang menyembelih hewan kurban pada hari berikutnya sampai batas maksimal penyembelihan hewan kurban. Di beberapa daerah, warga mengumpulkan hewan kurbannya di masjid tempat mereka melaksanakan sholat Idul adha. Tetapi banyak juga yang menyembelih di rumah mereka masing-masing. Tak lupa, takbir terus berkumandang dengan merdu dan lantang.

Mengingat Pentingnya Idul Adha sudah semakin dekat ditahun ini yaitu tepatnya jatuh pada tgl 10 Dzullhijjah 1438 H atau bertepatan dengan tanggal 1 September 2017, disini saya akan berbagi Tutorial Cara membuat widget hitung Mundur Idhul adha 2017 yang bisa anda terapkan diblog.

Widget Hitung mundur Idul Adha 2017


Untuk membuat widget ini anda cukup menambahkan kode berikut di dalam widget baru, bebas mau disidebar maupun di tempat lain:

<style type="text/css" scoped="scoped">
#iduladha2017 {background:#2C3E50;color:#5CAAFF;font-family:'Roboto', Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
  .teks {color:white}
</style>
<div id="iduladha2017">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Sep 01, 2017").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
  countdown.innerHTML = days + " <span class='teks'>hari</span> " + hours + " <span class='teks'>jam</span> "
  + minutes + " <span class='teks'>menit</span> " + seconds + " <span class='teks'>detik menuju hari raya idul adha</span> 10 Dzulhijjah 1438 H/2017";
}, 1000);
//]]>
</script>

Simpan Widget dan lihat hasilnya dengan Me-reffress kembali halaman blog anda.

Anda juga dapat mengganti warna widget sesuai dengan warna blog anda dengan mengganti kode yg ditandai.

Bagaimana mudah bukan? Mudah-mudahan dengan adanya widget ini di blog anda dapat mengingatkan pengunjung blog khususnya umat islam agar dapat mempersiapkan diri untuk melaksanakan perintah allah SWT untuk berkurban di jalannya.

Demikian Pembahasan Artikel Mengenai idul adha dan Cara membuat widget hitung mundur Idul Adha tahun ini.

Akhir kata, Assalamualaikum Warrahmatullahi Wabarakatuh.

28/06/17

Membuat Sidebar Widget Recent Post Pelangi (Warna-warni)

Membuat recent post warna-warni

Seperti gambar diatas, recent post pelangi ini tampil dengan berbeda warna di tiap judul artikel. Recent post pelangi ini sangatlah sederhana, tidak mencantumkan gambar artikel namun hanya menampilkan judul artikel tidak seperti artikel Recent Post with Thumbnail yang sudah saya posting sebelumnya.

Jika anda tertarik membuatnya anda bisa menerapkannya dengan mengikuti langkah-langkah di bawah ini:

Membuat Recent Post Pelangi


Buka template editor dan tambahkan CSS berikut tepat diatas </style>, Umumnya ada beberapa kode </style>. Pilih kode yang pertama (paling atas)

/* Recent Post Pelangi By TrikRicky */
#recent-wrapper {display:block;position:relative;overflow:hidden;font-size:15px}
#recent-wrapper ul {margin:0;padding:0;list-style-type:none;}
#recent-wrapper ul li {position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
#recent-wrapper ul li:first-child {background:#E11E28;width:100%}
#recent-wrapper ul li:first-child:after {content:"01";}
#recent-wrapper ul li:first-child + li {background:#FD3C03;width:97%}
#recent-wrapper ul li:first-child + li:after {content:"02";}
#recent-wrapper ul li:first-child + li + li {background:#FECB09;width:94%}
#recent-wrapper ul li:first-child + li + li:after {content:"03";}
#recent-wrapper ul li:first-child + li + li + li {background:#6EBE27;width:91%;}
#recent-wrapper ul li:first-child + li + li + li:after {content:"04";}
#recent-wrapper ul li:first-child + li + li + li + li {background:#149A48;width:88%;}
#recent-wrapper ul li:first-child + li + li + li + li:after {content:"05";}
#recent-wrapper ul li:first-child + li + li + li + li +li {background:#15d3c3;width:85%}
#recent-wrapper ul li:first-child + li + li + li + li +li:after {content:"06";}
#recent-wrapper ul li:first-child + li + li + li + li + li +li {background:#288abb;width:82%}
#recent-wrapper ul li:first-child + li + li + li + li +li +li:after {content:"07";}
#recent-wrapper ul li:first-child + li + li + li + li + li + li +li {background:#863e86;width:79%}
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after {content:"08";}
#recent-wrapper ul li:first-child:after,
#recent-wrapper ul li:first-child + li:after,
#recent-wrapper ul li:first-child + li + li:after,
#recent-wrapper ul li:first-child + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li + li + li:after,
#recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after,
{position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700}
#recent-wrapper ul li a {color:white;text-decoration:none}

Simpan template diatas dan tambahkan Kode Berikut didalam Gadget baru untuk memunculkan widget recent post di sidebar.

<div id='recent-wrapper' class='recent-wrapper'>
<ul id="recent-posts"></ul>
<script>
//<![CDATA[
numPosts = 8;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>
</div>

Didalam CSS diatas hanya terdapat 8 kode warna untuk menghiasi tiap warna tiap judul postingan pada widget ini, untuk menjaga keindahan warna tersebut, sebaiknya widget ini jangan menempatkan artikel lebih dari 8.

Namun jika anda ingin menempatkan Artikel Recentpost ini lebih dari 8, misalnya 10 artikel, anda bisa menambahkan kembali css tersebut dengan warna baru dengan menambahkan baris baru dengan menambahkan + li seperti kode yang ditandai merah diatas dan mengganti kode yang ditandai biru sesuai jumlah Artikel yang anda buat dalam CSS.

Sekian tentang Cara Membuat Recent Post pelangi kali ini, semoga bermanfaat.

24/06/17

Trik Membuat Popular Post With Thumbnail

Popular post widget

Widget ini adalah salah satu widget yang digunakan di template premium karya mbak Arlina yang di sisipkan di tempate terbarunya yaitu simplify.

Anda juga dapat menggabungkan widget popular post ini dengan template yang sedang anda gunakan saat ini.

Yuk langsung aja ke TKP tapi sebelumnya jgn lupa backup dulu template anda sebelum menyisipkan widget popular post ini.

Berikut penerapannya


Tambahkan Kode berikut diatas ]]></b:skin> atau </style>

/* CSS Popular Post Thumbnail */
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;background:#dd8231;counter-reset:popcount}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img {
    width: 318px;
    height: auto;
}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {
    margin: 0px;
    width: 103%;
    height: 180px;
    overflow: hidden;
    display: block;
}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(44,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(44,62,80,1);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}
#PopularPosts1 ul li:hover .item-title:before{color:rgba(255,255,255,1)}

Kemudian cari kode </body> dan letakkan kode dibawah ini tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
// Popular Post Thumbnail
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,130)});
//]]>
</script>

Simpan Template.

Lanjut masuk ke Tata letak dan Tambahkan Widget Entri Populer dengan setelan seperti gambar berikut:

Setting widget

Simpan kemudian lihat hasilnya.

Demikian Trik Membuat Popular post dengan Thumbnail, sesuaikan warna dengan template anda masing-masing, untuk melihat kode warna anda silakan baca Artikel Tabel Warna HTML

11/06/17

Membuat Subscribe Box With Social Button

Membuat Subscribe Box With Social Button

Sama hal nya seperti subscribe box umumnya, widget subscribe box ini berfungsi agar pengunjung blog medapat informasi update setiap anda menerbitkan atau memposting artikel baru ke dalam blog anda.

Widget Subscribox yang kali ini saya share terdapat tombol sosial media diatasnya seperti facebook dan ke enam tombol sosial lainnya, anda juga dapat mengganti tombol sosial media ini sesuai keinginan anda dengan mengganti font awesome dan link ke arah sosial media yang anda inginkan.

Sebelum anda merubah semua itu alangkah baiknya kita terapkan dulu widget Subscribebox yang sudah saya rangkai ini ke dalam template untuk memastikan semua kode dibawah bekerja. Namun jika anda ragu tidak ada salahnya anda membackup template anda sebelum menerapkan kode di bawah ini.

Nah untuk membuatnya silakan buka template editor dan letakan kode CSS berikut diatas ]]></b:skin> atau </style>

/* CSS Subscribe Box With Social Button */
#subscribebox{background:#576269;padding:20px;font-family:'PT Sans',sans-serif;}
.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}
#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}
.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}
.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}
.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}
.follow-subscribe-social ul li:last-child{margin:0}
.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}
.follow-subscribe-social ul li a:hover{color:#fff}
form.subscribe{margin-top:-7px}
form.subscribe input{display:block;width:100%}
.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}
.subscribe-email:focus{outline:0}
form.subscribe .placeholder{color:#cacaca}
form.subscribe input:-ms-input-placeholder{color:#cacaca}
form.subscribe input::-webkit-input-placeholder{color:#cacaca}
form.subscribe input:-moz-placeholder{color:#fafafa}
form.subscribe input::-moz-placeholder{color:#fafafa}
.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
.subscribe-button:hover{background-color:#f1d640}
.subscribe-button:focus{outline:0}
.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

Kemudian letakan Layout > Add a gadget > HTML/Javascript dan tambahkan kode berikut didalamnya.

<div id="subscribebox">
<div class="follow-subscribe-social">
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<p>Subscribe our to Newsletter</p>
<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR-USER-NAME'/>
<input name='loc' type='hidden' value='en_US'/>
<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input class="subscribe-button" type="submit" value="Subscribe" />
</form>
</div>
<div class="creadit">
<a href="http://trikricky.com" rel="dofollow" target="_blank"> Get This Widget</a></div>

Ganti Tanda Pagar " # " dan link yang ditandai dengan link tujuan anda dan Ganti YOUR-USER-NAME Dengan Username anda kemudian simpan.

Lihat hasilnya...

Widget ini menggunakan Font Awesome, pastikan anda sudah menambahkan nya ke dalam template sebelum menggunakan kode ini

Demikian Cara membuat Widget Subscribe box with social button yang saya share kali ini. Kreasikan kembali kode CSS diatas sesuai warna template yang anda gunakan.