Oke Ketemu Lagi Sobat , Sekarang Mbill Mau Bagi-Bagi Tutorial
Cara Membuat Recent Post Tooltip Berdasarkan Label di Blogspot nihh ...
Silahkan Kalian Lihat-lihat Dulu .
Jika Sudah Melihat lihat Sekarang Kita Pasang Recent Post nya .
1.Login ke Blogger / Tata Letak / Add Gadget / Pilih Html/Javascript.
2.Lalu Masukkan Kode Di bawah Ini .
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
img#label_thumb {float:left;padding:3px;background:#CCC;border:1px solid #A4A4A4;width:100px;height:90px;margin-right:10px;
}.mbilltip {position: relative;display: block;font-size:20px;background:#f9f9f9;border-bottom:1px solid blue;padding:0 5px;}
.mbilltip:before{content:"\f0a4 ";font-family: FontAwesome;}
.mbilltip a{color:black;text-decoration:none;}
.mbilltip:hover{background:#ccc}
.mbilltip .mbilltiptext {visibility: hidden;min-width:250px;max-width:350px;width: auto;background-color: #555;color: #fff;text-align: left;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;bottom: 125%;left: 25%;margin-left: -60px;opacity: 0;transition: opacity 1s;display:block;}
.mbilltip .mbilltiptext::after {content: "";position: absolute;top: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;}
.mbilltip:hover .mbilltiptext {visibility: visible;opacity: 1;}
.mbillhead{background:#ccc;padding:15px 10px;font-size:20px;}
.date:before{content: "\f133 ";font-family: FontAwesome;}
</style>
<div class="mbillhead">Recent Post</div>
<script type="text/javascript" src="https://cdn.rawgit.com/shinchan791/recent/10ae6e48/mbill.js">
</script>
<script src="https://mbill791.blogspot.com/feeds/posts/default/-/Label?orderby=published&max-results=5&alt=json-in-script&callback=recentmbill"></script>
Keterangan :
- Jika Template Kalian Sudah Memasang Kode yang Berwarna merah (Jquery&Font Awesome), Gak Usah di copy saja.
- Setting Kembali Css Diatas Jika tidak Sesuai.
- Ganti Link Yang Berwarna
hijau Dengan url kalian.
-
Label Ganti dengan label kalian yang mau di tampilkan , jika tidak mau berdasarkan label hapus saja kode ini "/-/Label".
- 5 untuk menampilkan jumlah postingan.
3.Lalu Simpan/Save. Dan Lihat Hasilnya.
Oke Sudah Selesai
Cara Membuat Recent Post Tooltip Berdasarkan Label di Blogspot . "SELAMAT MENCOBA".
Jika ada pertanyaan/Error Silahkan Berkomentar.
