Masdiqkzone - Selagi ada waktu luang akhirnya bisa mengurus blog lagi. kali ini masdiqk ingin berbagi sebuah tutorial blog yaitu "Membuat Recent Post Efek Tooltips di Blog". Tentu sobat blogger sudah tak asing dengan widget recent post, yaitu widget yang menampilkan artikel terbaru yang telah diposting secara urut. Widget ini juga sangat sering dimodifikasi salah satunya yaitu dengan menambahkan efek tooltips saat cursor menyorot salah satu artikel. Penasaran dengan tampilannya..? sobat bisa melihat contohnya di bagian sidebar blogku ini.
Ini nih tutorialnya...
1. Log in terlebih dahulu ke akun blogger sobat di www.blogger.com
2. Pilih menu Layout/Tata letak
3. Klik add gadget
4. Pilih HTML/Javascript
5. Copy paste kode di bawah ini ke dalamnya
<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
padding:8px;
background-color:#17B986;
-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 .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('http://softglad.at.ua/images/loading.gif') no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #FA7C19;
-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 .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#FA7C19;
}
#post-gallery .rp-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 rpTitle = "Latest Post", // Widget Title
numposts = 20, // The number of thumbnail / posts to display
numchar = 200, // Number of characters in the description tooltip
rcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appears
pBlank = "http://softglad.at.ua/images/no-img.png", // Image that show up if the post doesn't have a image
blogURL = "http://masdiqkzone.blogspot.com"; // Your Blog Address
</script>
<script src="http://softglad.at.ua/widgets/post-gallery.js" type="text/javascript"></script>
6. Simpan
Catatan:
- Jika di blogmu sudah ada jquery library versi berapapun, hapus saja script jquery.min.js dalam kode tersebut.
- ganti http://masdiqkzone.blogspot.com dengan alamat blogmu.
Semoga bermanfaat
By:
DDW
On 7:23 PM
Masdiqkzone - Alhamdulillah punya aktivitas baru juga, yaitu belajar website e-learning. Tepat kemarin Jumat (28/3) pertemuan pertama kelas website e-learning pun dimulai. Bertempat di gedung Bina Insan Cendekia, 22 mahasiswa mengikuti kelas ini. Sekadar informasi bahwa kelas ini merupakan fasilitas yang diberikan Unnes kepada mahasiswa bidikmisi. Sebenarnya tak hanya kelas website e-learning saja yang ditawarkan kepada mahasiswa bidikmisi, melainkan ada juga kelas Bahasa Inggris, Bahasa Arab, hafalan al Quran, pemrograman web dll. Namun pilihanku tertuju pada kelas ini. Alasanku sebenarnya sederhana, ingin memperdalam ilmuku di dunia website dan ingin mengaplikasikan ilmu terkait website e-learning tersebut saat aku kelak menjadi seorang guru. 
