Membuat Recent Post Efek Tooltips di Blog

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

Read More

Semester Baru, Semangat Baru

Masdiqkzone - Hari ini Senin 3 Maret 2014 aku memasuki semester 6. Pekan pertama kuliah seperti biasa masih diisi dengan perkenalan mata kuliah dsb. Di semester 6 ini aku diwajibkan untuk tak santai-santai seperti semester sebelumnya, tentu semester 6 akan jauh lebih sulit. Terlebih banyaknya amanah di luar kuliah mengharuskanku untuk pandai-pandai membagi waktu. 

Dosen di semester 6 ini banyak yang baru mengajarku selama kuliah. Aku sudah tak sabar bertemu dengan mereka dan menikmati cara mengajar mereka. Semoga aku betah hehe...

Semester baru, semangat baru.. yuk selalu semangat.. tahun depan optimis LULUS... ^.^

By: DDW On 3:03 PM

Read More

Membuat Video Menjadi Responsive di Blog

Masdiqkzone - Hmm.. baru bisa berbagi kembali tentang tutorial blog setelah insiden penghapusan blog. Semua tutorial yang aku bagikan juga terhapus. Aku sedang berusaha buat membagikannya lagi satu persatu. Yosh.. untuk tutorial pertama yaitu Cara Membuat Video Menjadi Responsive di Blog.

Seperti kita ketahui bersama bahwa sekarang blog sedang memasuki zaman responsive style berkat adanya perangkat mobile yang menjamur di pasaran. Alhasil hal tersebut berpengaruh terhadap tampilan web/blog agar sesuai dengan resolusi layar perangkat mobile. Inilah yang menjadi alasan para blogger beralih ke tampilan blog yang responsive.

Tutorial Cara Membuat Video Menjadi Responsive di Blog ini sangat sesuai dengan tampilan blog responsive. Sehingga video akan menyesuaikan layar pada gadget yang digunakan.

Caranya:

1. Log in ke blogger.com
2. Pilih Template, kemudian edit HTML
3. Cari kode </body>, dengan cara Ctrl+F
4. Masukan kode di bawah ini tepat di atasnya.

<script type='text/javascript'> 

//<![CDATA[ 

(function ( window, document, undefined ) {

 /* * Grab all iframes on the page or return */ 

 var iframes = document.getElementsByTagName( 'iframe' );

 /* * Loop through the iframes array */ 

 for ( var i = 0; i < iframes.length; i++ ) { var iframe = iframes[i],

 /* * RegExp, extend this if you need more players */ players = /www.youtube.com|player.vimeo.com/; /* * If the RegExp pattern exists within the current iframe */ if ( iframe.src.search( players ) > 0 ) {

 /* * Calculate the video ratio based on the iframe's w/h dimensions */ var videoRatio = ( iframe.height / iframe.width ) * 100; 

 /* * Replace the iframe's dimensions and position * the iframe absolute, this is the trick to emulate * the video ratio */ iframe.style.position = 'absolute'; iframe.style.top = '0'; iframe.style.left = '0'; iframe.width = '100%'; iframe.height = '100%';

 /* * Wrap the iframe in a new <div> which uses a * dynamically fetched padding-top property based * on the video's w/h dimensions */ var wrap = document.createElement( 'div' ); wrap.className = 'fluid-vids'; wrap.style.width = '100%'; wrap.style.position = 'relative'; wrap.style.paddingTop = videoRatio + '%'; 

 /* * Add the iframe inside our newly created <div> */ var iframeParent = iframe.parentNode; iframeParent.insertBefore( wrap, iframe ); wrap.appendChild( iframe ); } } 

 })( window, document ); 

//]]> </script>

5. Simpan

NB: Hanya support untuk video Youtube dan Vimeo

By: DDW On 7:39 PM

Read More