.jpg)
Jumat, 14 Juni 2013
Sekarang Saya mau posting tentang widget blogger yaitu widget recent post terbaru dengan thumbnail. Thumbnail itu sendiri dapat dipahami dengan sebuah gambar yang berukuran lebih kecil dari yang aslinya. Contohnya saja dalam widget, dalam posting anda ada gambar berukuran besar. Dengan widget ini , gambar ersebut akan ditampilkan lebih kecil dari ukuran sebelumnya. Untuk lebih jelasnya Anda bisa lihat pada gambar di atas.
Bentuk thumbnail ini biasanya banyak digunakan oleh para webmaste/blogger yang mempunyai sebuah web dengan tampilan gambar yang banyak dan untuk sebuah web toko online, agar gambar yang di posting dapat terlihat dengan berbagai variasi.
Jika Anda tertaring ingin mencoba widget ini, silahkan simak ulasan di awah ini:
1. Login ke Blogger
2. Pada laman dasbor, pilih Tata Letak => Tambahkan Gadget
3. Tambahkan Gadget dari HTML/JavaScript
4. Lalu copy kode di bawah ini kedalam kotak gadget tadi
KETERANGAN :
Ganti kode yang berwarna biru di atas dengan alamat blog Anda. Untuk warna, ukurannya dan lainnya silahkan edit sendiri!
5. Langkah terakhir, klik simpan pada gedget javascript tadi dan lihat hasilnya.
1. Login ke Blogger
2. Pada laman dasbor, pilih Tata Letak => Tambahkan Gadget
3. Tambahkan Gadget dari HTML/JavaScript
4. Lalu copy kode di bawah ini kedalam kotak gadget tadi
KETERANGAN :
Ganti kode yang berwarna biru di atas dengan alamat blog Anda. Untuk warna, ukurannya dan lainnya silahkan edit sendiri!
5. Langkah terakhir, klik simpan pada gedget javascript tadi dan lihat hasilnya.
<style type="text/css">
#post-gallery {
width:280px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
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 .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://fbstatic-a.akamaihd.net/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif') no-repeat 50% 50%;
width:52px;
height:52px;
}
#post-gallery .rp-item img {
width:52px;
height:52px;
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 = "Se-cara Blog", // 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://4.bp.blogspot.com/-egx5hydZZuI/UVrLlsxhX8I/AAAAAAAAAdI/SSH7CWqiwls/s175/SOME.png", // Image that show up if the post doesn't have a image
blogURL = "URL BLOG SOBAT"; // Your Blog Address
</script>
<script src="http://yourjavascript.com/01201910631/se-carablog.js" type="text/javascript"></script>
<span id=rcw-cr><a href='http://goo.gl/8BkeX' onmouseover='window.location=this.href'>Dapatkan Widgetnya di Sini</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 2px!important; padding-bottom: 2px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:2px;padding-top:2px;display:block;} </style>
#post-gallery {
width:280px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:#494848;
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 .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff url('https://fbstatic-a.akamaihd.net/rsrc.php/v2/yb/r/GsNJNwuI-UM.gif') no-repeat 50% 50%;
width:52px;
height:52px;
}
#post-gallery .rp-item img {
width:52px;
height:52px;
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 = "Se-cara Blog", // 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://4.bp.blogspot.com/-egx5hydZZuI/UVrLlsxhX8I/AAAAAAAAAdI/SSH7CWqiwls/s175/SOME.png", // Image that show up if the post doesn't have a image
blogURL = "URL BLOG SOBAT"; // Your Blog Address
</script>
<script src="http://yourjavascript.com/01201910631/se-carablog.js" type="text/javascript"></script>
<span id=rcw-cr><a href='http://goo.gl/8BkeX' onmouseover='window.location=this.href'>Dapatkan Widgetnya di Sini</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 2px!important; padding-bottom: 2px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:2px;padding-top:2px;display:block;} </style>
