Random Post Lebih Fresh Dengan Hover Function Untuk Widget Blog

Hey guys, kali ini kita akan membuat widget random post yang lebh fresh buat blog kamu, dengan tampilan yang stylist pasti akan membuat blog anda makin cool dan makin manis.

Cara menambahkan widget ini cukup ditambahkan langsung ke Layout blog anda. Anda harus tau bahwa random post akan memilih artikel atau postingan blog anda secara acak dan hal ini tentunya akan sangat berguna bagi variasi informasi yang diperlihatkan ke pengunjung blog anda.

Widget ini tentunya bisa ditempatkan di mana saja tergantung dari anda, dan thumbnails dari postingan akan menyesuaikan posisinya tergantung dari lebar ataupun tinggi widget yang anda inginkan.

Contoh 1 widget random post di atas atau di bawah postingan

Contoh 2 widget random post di samping atau di sidebar

Langsung saja ya Guys, kita buat tutorialnya

Step 1# Masuk Ke Blogger
Step 2# Pilih Layout atau Tata Letak
Step 3# Pilih Tambahkan Gadget/Widget

Step 4# Pilih Widget HTML/Javascript, dan copy paste Kode di Bawah Ini.

<style type="text/css">
#post-gallery {
  width:100%px;
  margin:0px auto;
  font:normal 11px Arial,Sans-Serif;
  color:#FFFFFF;
  padding:8px;
  background-color:#FFFFFF;
  -webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
#post-gallery h2 {
  font:20px Arial,Sans-Serif;
  color:white;
  text-shadow:0px 3px 2px black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#48D;
  text-align: center;
}
#post-gallery .bgt-item {
  float:center;
  display:inline;
  position:relative;
  margin:2px;
  padding:0px 0px;
  background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPeoPRrOaSDxHdBWvHLYj9RkaZobw2vaIaR1COLpUNCOGrkYKysmUB5jzcqYZivRDRlb8kkuLyInDjMHk5XGRIFzYr8aqczfcVMAY-N9WGWXy2nmnJeo_vMcvxVnA1RV_0CfBrLSyXdM/s1600/395.GIF') no-repeat 50% 50%;
  width:71px;
  height:71px;
}
#post-gallery .bgt-item img {
  width:102px;
  height:102px;
  border:none !important;
  margin:0px 0px !important;
  padding:0px 0px !important;
  background:transparent !important;
  display:none;
}
#post-gallery .bgt-item .bgt-child {
  position:relative;
  top:10%!important;
  left:10%!important;
  z-index:1000;
  width:400px;
  background-color:white;
  border-top:5px solid #FFFFFF;
  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
  opacity: 0.9;
}
#post-gallery .bgt-item .bgt-child h4 {
  font-size:12px;
  margin:0px 0px 5px;
  color:#FFFFFF;
}
#post-gallery .bgt-item:hover .hidden {display:block;}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bgtTitle     = "Latest Posts",
    numposts    = 14,    
    numchar     = 190,    
    rcFadeSpeed = 610,  
    pBlank      = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKI2t3MClZaS6tex8UgtRywNND4YXAQcKtT3N6GSPljtSdVLfgqNeV-NdMs8_bx47AND32S_2r-H40iArMA5sBWG8vVX61FKVopyFZ92-sMwqIEZgMQZbPBcj3ZbU7laFl6520NdX7UgA/s1600/no-image-ava.jpg",
    blogURL     = "http://www.banguet.blogspot.com";
</script>
<script src="https://googledrive.com/host/0B43vwjPtKakCSWx2MEtSRFEzQUk" type="text/javascript"></script>

Note : Ganti text atau angka warna biru sesuai warna background yang anda inginkan, warna kuning untuk lebar dan tinggi gambar, warna merah ganti dengan URL blog anda. serta warna hijau sesuaikan jumlah postingan sesuai keinginan anda.

Step 5# Klik Simpan Setelan dan lihat hasilnya

Gampang khan guys, untuk melihat-lihat trik linked post anda bisa scroll di full content blog ini, disini banyak jenis trik dan jenis linked post yang bisa anda pilih untuk mempercantik blog. 

Share this Post :

Related Posts