<style type="text/css">
/*<![CDATA[*/
#twitplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}.twitplbadge {background-color:#1E90FF;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Asn3Y2TaZleIJlXLWlVFMVBDS6RZTwfjI6sEpQbgU_NG7bBOKrgzMrOXhGp22sD3JQ3zEet_3foi4Ozjrt9KBG0U0k0D65HuZa5Z3Q5v8FXW2ATElNgXaEPfxOc-QJaYwWoZcVLw5WGM/s1600/md_vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}.mdtwitplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdtwitplikebox span a{color: #808080;text-decoration:none;}.mdtwitplikebox span a:hover{text-decoration:underline;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(makingdifferent){
makingdifferent(document).ready(function(){
var $dur = "medium"; // Duration of Animation
makingdifferent("#twitplikebox").css({right: -300, "top" :100 })
makingdifferent("#twitplikebox").hover(function () {
makingdifferent(this).stop().animate({
right: 0
}, $dur);
}, function () {
makingdifferent(this).stop().animate({
right: -300
}, $dur);
});
makingdifferent("#twitplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div class="mdtwitplikebox">
<div id="twitplikebox" style="display:none;">
<div class="twitplbadge"></div>
<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://moopz.com/connect.php?user=lindamarlina40" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial;"></iframe>
<span></span></div></div>
<style>
#PTTHOME img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#PTTHOME img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center><p id="PTTHOME">
<a href="https://www.facebook.com/arieadie30 "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif5ZFsAVQfW8MAjPsOsQEkNGBufK4zOszw2VAb7lh88cUYtDJOzofSXXFVTpyEY0KzkYNgLG-sST_0ArGnmDPzZBOMAfRpcQgcSp2kfIDf8FfnfVzRGa-FX_49ZuroX3TgthFsCklgsGA/h120/Facebook-Home.png" title="Like Our Facebook Page" /></a>
<a href="https://www.twitter.com/lindamarlina40"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEjscxKYXFhjCvvXrtDxOWcaouJka5y8IEmLbUkr14MIu_pm8_SLUpBb-z_CiI2VSygVlS_dJ2LGP8xJ3Ol89nbnssIj9EsZeQhjJpwhJ7BIbkbDKJmbevhy8GhecciOLSaoHwiWmWX-g/h120/Twitter-Home.png" title="Follow Our Updates On Twitter" /></a>
<a href="https://plus.google.com/u/0/112756918350798570373"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyF31DCG2kyxOjfIs1azbzeR8sCpVGH65WgBqsOvCv2kkU62gmHILFDkywRU3k6M5n4WG-gMAPNmh-z5FyFPMTG8smhty_do3_iEC0Cv3IIGKqZymUJp8hYs6EUnzj0bOn1qURxvEQ3cU/h120/Google-Social-store.gif" title="Follow Us On Google+" /></a>
<a href="http://www.feeds.feedburner.com/pengembarabiru"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvEHKuezOulVPffBFB6YQvwcABqm8FC-G60QRNMOYLIKQWpgB0xp8Di7g43XrwDHaelAPwO_E60B_L72VMSykLkEP4pO__sqsdltFUvTzVyOUWWW8UlWsvdsQdDakS47SvekInegPYiVQ/h120/RSS-Home.png" title="Grab Our Rss Feed" /></a>
</p></center>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:Darkred;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd7nPLxfYFxq15uMefCSzQP9tgi-vOpQ8pJ5bDBD_qDzelm_znDgSZyTFhZTO4fFBEQ04xPJWG2nNLvh2OGx6mPn4pHWam_1_3IrIa3qlChSzWWsD4_KaRMP5nzE66FeSiHxmZYBFYDdQ/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:Darkred;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: Darkred url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP4queF0EN6W1boO1C05wZgAF7iQpSHEUy08wrAVyHmW98ckTW6ycXY7J9bZoAIk1OmD8t9nLCWm0JZmWLA5w4v0bryXSI4MP9vtrOvdO7t4OYKTppUvr7qUMCyxjqXAPFHUrJyjMFiB4/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbz4nzzdU3WU8OxJXMDLmgqz9hcBbGFin5jxLfKI6CaS0-5gQ7nBHNrPG0X-OmLWV2La3SivxZPwd_KvUOmsha7KJ8ocoP8qwBGVrVWe-cQQj0JjZJJWc4-YhCRHySJ3NYUwvhVaf0Lvs/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBUGjdwR8BsPZ5gTu7zYgWxvpvK1QiC-vossTqX2ZionVUB6U1Q0dTig1SM4kH5ql4nCNni_DAr0Emd3T0i5awnOsJu-XPIMsbSVsJ72zHQ4TPTZif_U7e9OlmU8C4enAaGS8ACRO88es/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggv5F6SVQLGjH7bkVmIwsHJZdW2KowqszUbRc8iubZOseWNA2baa588LLEtKp9wO0h8K3ULEJBC6cTIjRQ9woku2DzOgkHF7mZmp9QJ2CY4ejEV6iFhAlx0CfacLAiMLwcfTo11jBbE0s/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="https://farhanshare-blogspot-com.googlecode.com/files/sitemap%20%281%29.js" type="text/javascript"></script><script src="http://ngeblogbarengbareng.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
</div>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://ngeblogbarengbareng.blogspot.com";
var charac = 100;
var urlprevious, urlnext;
function dhffeed(dharla, banget) {
var showfeed = dharla.split("<");
for (var i = 0; i < showfeed.length; i++) {
if (showfeed[i].indexOf(">") != -1) {
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">") + 1, showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0, banget - 1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) {
break;
}
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogakWc4hXhDWY5l4BSA-Nl6xAomnJ4vY4gQlOimoBxJNSB54_K-cZf3rrkevQ0Ss0tbNe7C6-8fWAsArQNEldlUELXr4_k44vuH5280rrgDTorzNXGFUWrF9XPmvOVsOlZ4_nR5X-gZU/s1600/no+image.jpg";
}
showblogfeed += "<div class='dhf-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + dhffeed(postcontent, charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if (urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if (urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("dhf-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url) {
var p, parameter;
if (url == -1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url == 1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if (startfeed == 1) {
removerscript();
}
document.getElementById("terbaru").innerHTML = "<div id='dhf-loading'></div>";
document.getElementById("dhf-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default" + parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'DHFLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("DHFLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload = function () {
navigasifeed(0);
}
//]]>
</script>
#dhf-terbaru {
border: 1px solid #585858;
width: 100%;
margin: 0 auto;
}
#terbaru {
margin: 0px;
}
.dhf-elemen {
border: 1px solid #ccc;
margin: 5px 0;
padding: 5px;
height: 79px;
}
.dhf-elemen img {
background: #999;
padding: 4px;
float: left;
height: 70px;
margin-right: 8px;
width: 70px;
}
.dhf-elemen h6,.dhf-elemen h6 a {
font-size: 12px!important;
font-weight: 700!important;
margin: 0;
color: #111;
}
.dhf-elemen:hover {
background-color: #c3c3c3;
}
.dhf-elemen p {
font: 14px PT Sans Narrow;
text-align: justify;
color: #555;
line-height: 14px;
margin: 5px 0;
}
#dhf-loading {
color: #888;
font-family: Tahoma;
font-size: 100px;
letter-spacing: -10px;
text-align: center;
text-shadow: -5px 0 1px #444;
background: #141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwi3F8ZJ8yOKtvEBVoIh0ci87CY0nPPWRSLrVQb1sr69eZGiILTQfuuY2qDP-B0kwKMy1ZWTqtCZZ8wLmfb0XKoeKfYlpCZCtwYXYDNBPv5uL0BTBWrCZOJuIL5ZqDwRrw5Dtbcrj3kyg/s1600/loading.gif) no-repeat 50% 50%;
height: 470px;
border: 1px solid #c3c3c3;
}
#dhf-navigasifeed {
border: 1px solid #c3c3c3;
color: #bbb;
font-family: Verdana;
font-size: 12px;
text-align: center;
margin: 0px;
}
#dhf-navigasifeed:hover {
background-color: #c3c3c3;
}
#dhf-navigasifeed a {
color: #141414!important;
font-family: Tahoma!important;
font-size: 12px!important;
font-weight: 400!important;
display: block;
padding: 5px 10px;
}
#dhf-navigasifeed span {
padding: 5px 10px;
}
#dhf-navigasifeed .next {
float: right;
}
#dhf-navigasifeed .previous {
float: left;
}
#dhf-navigasifeed .home {
text-align: center;
}
#dhf-navigasifeed a:hover,#dhf-navigasifeed span.noactived {
color: transparant!important;
}
<div id="terbaru"></div>
<div id="dhf-navigasifeed"></div>
<style>
.techprevue-fb-like-box-pure{width:280px;height:160px;border-radius:3px;position:relative;background:#FFF;padding:10px}.techprevue-fb-like-box-pure,.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{background:#FFF;border:1px solid #0072C4}.techprevue-fb-like-box-pure:before,.techprevue-fb-like-box-pure:after{position:absolute;content:"";bottom:-3px;left:2px;right:2px;height:1px;border-top:none}.techprevue-fb-like-box-pure:after{left:4px;right:4px;bottom:-5px;box-shadow:0 0 2px #0072C4}
</style>
<div class="techprevue-fb-like-box-pure">
<div style="height:155px;overflow:hidden">
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/112756918350798570373" data-source="blogger:blog:followers" data-width="300">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<div id="spoiler" style="display:none">
Kode yang ingin disembunyika
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button>
input.trigger {
display:inline-block;
margin:0;
padding:0;
}
.spoiler {
overflow:hidden;
background-color:white;
margin:10px 0 0;
padding:0 30px;
height:0;
visibility:hidden;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
input.trigger:checked + .spoiler,
input.trigger:checked + br + .spoiler {
padding:15px 30px;
visibility:visible;
height:300px;
overflow:auto;
}
<input type="checkbox" class="trigger"/> Buka/Tutup Spoiler
<div class="spoiler">
Letakan Konten/kode di sini.....!!!
</div>
#Label1 ul{
list-style:none outside none;
margin:0 auto;
padding:0;
width:98%;
}
#Label1 ul li{
padding:5px 0;
}
#Label1 ul li a{
background:url('https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/flag-icon-label.png') no-repeat scroll left center transparent;
display: inline-block;
padding-left: 20px;
transition:0.5s ease;
-o-transition:0.5s ease;
-ms-transition:0.5s ease;
-moz-transition:0.5s ease;
-webkit-transition:0.5s ease;
}
#Label1 ul li a:hover{
margin-left:20px;
}
<style type="text/css">
.urbangreymenu{
width: 190px; /*width of menu*/
}
.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}
.urbangreymenu ul li a:visited{
color: black;
}
.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
</style>
<div class="urbangreymenu">
<h3 class="headerbar">arieadie</h3>
<ul>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Tutorial Blogger</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Template</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Tips and Trik</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Widged</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Komentar</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Animation</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Download</a></li>
<li>
<ul>
<li><a href="http://ngeblogbarengbareng.blogspot.com/" >lainnya</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Kode Warna</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Tukar Link</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Back Link</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Sitemap</a></li>
<li><a href="http://ngeblogbarengbareng.blogspot.com/">Disclaimer</a></li>
</ul>
</li></ul></div>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
<center><ul class="bubblewrap">
<li><a href="Kode agan disini "><img src="http://img42.imageshack.us/img42/7086/stumbleuponlj.png" title="Add to Stumbleupon" /></a></li>
<li><a href="Kode agan disini "><img src="http://img253.imageshack.us/img253/835/facebookv.png" title="Add to Facebook" /></a></li>
<li><a href="Kode agan disini "><img src="http://img832.imageshack.us/img832/5893/twittermx.png" title="Add to Twitter" /></a></li>
<li><a href="Kode agan disini "><img src="http://img4.imageshack.us/img4/2004/rssqn.png" title="Add RSS Feed" /></a></li>
</ul>
</center>
]]></b:skin>. Kode XML bisa Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini karena posisinya yang mudah ditemukan dan lebih minim resiko:<div class='post-footer'>| Opsi | Keterangan |
|---|---|
| widgetStyle | Kode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator. |
| homePage | Digunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <data:blog.homepageUrl/> |
| widgetTitle | Markup HTML untuk judul/kepala widget. Bisa digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget. |
| numPosts | Digunakan untuk menentukan jumlah posting yang ingin ditampilkan. |
| summaryLength | Digunakan untuk menentukan panjang karakter ringkasan posting. |
| titleLength | Digunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan karakter pada judul posting. |
| thumbnailSize | Digunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak. |
| noImage | Isi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar. |
| containerId | ID elemen HTML untuk menampung daftar posting yang berhasil terpanggil. |
| newTabLink | Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik. |
| moreText | Teks “Baca Selengkapnya”. |
| callBack | Fungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah. |
callBack Widgetvar relatedPostConfig = {
callBack: function() {
alert('Widget successfully loaded.');
}
};var relatedPostConfig = {
...
widgetStyle: 4,
containerId: "random-post",
callBack: function() {
$('#' + this.containerId + ' li').hover(function() {
$('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
marginBottom: -5,
opacity: "show"
}, 400);
}, function() {
$('.related-post-item-tooltip', this).animate({
marginBottom: 10,
opacity: "hide"
}, 200);
}).find('.related-post-item-tooltip').css('margin-bottom', 10);
}
};:focus dan :hover pada CSS:.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}var relatedPostConfig = {
...
widgetStyle: 5,
titleLength: 50,
thumbnailSize: 130,
containerId: "random-post",
callBack: function() {
$('#' + this.containerId + ' li').hover(function() {
$('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
marginTop: "50%"
}, 400);
}, function() {
$('.related-post-item-tooltip', this).animate({
marginTop: "100%"
}, 200);
}).find('.related-post-item-tooltip').css('margin-top', '100%');
}
};display:none pada selektor tooltip widget, hapus juga efek :focus dan :hover pada CSS:.related-post-style-5 .related-post-item-tooltip {
display:block;
background-color:black;
background-color:rgba(0,0,0,.9);
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
padding:10px;
line-height:normal;
font-style:italic;
color:white;
overflow:hidden;
display:none;
}.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}var relatedPostConfig = {
...
numPosts: 10,
widgetStyle: 2,
containerId: "random-post",
callBack: function() {
var $container = $('#' + this.containerId + ' > ul'),
$list = $container.find('li'),
innerHeight = $list.first().height(),
outerHeight = $list.first().outerHeight(true);
// Container & list height setup
$container.css({
"height": outerHeight * $list.length / 2,
"overflow": "hidden"
});
$list.css({
"height": innerHeight,
"overflow": "hidden"
});
// Animation
function newsTicker() {
window.setTimeout(function() {
$container.find('li:last').stop().animate({
opacity: 0
}, 1000, function() {
$(this).hide().prependTo($container).slideDown(1000, function() {
$(this).stop().animate({
opacity: 1
}, 1000, newsTicker);
});
});
}, 3000);
} newsTicker();
}
};callBack.callBack dengan komentar CDATA seperti ini:var relatedPostConfig = {
callBack: function() {
//<![CDATA[
Tuliskan fungsi di sini...
//]]>
}
};
<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$('#dte-masonry-container').bloggerMasonry({
// JSON Configuration
viewMode: "summary", // Widget mode? "summary" || "thumbnail"
homePage: "http://nama_blog.blogspot.com", // Your blog homepage
numPosts: 10, // Number of posts to display per request
numChars: 270, // Length of summary post
squareImage: false, // Set thumbnail mode to square
newTabLink: false, // Auto open links in new window/tab?
columnWidth: 200, // Width of the image (also will resize the brick item width)
subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR`
monthNames: [ // Month array
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
commentLabel: " ", // Label text after total comments
navText: {
prev: "Sebelumnya", // Previous navigation label
next: "Berikutnya", // Next navigation label
disabled: "×", // Disabled navigation label
data: ["Halaman ", " dari "] // `Halaman # dari #`
},
postCategory: null, // Change to a label name to sort posts by specific label
fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images
loadingText: "Loading...", // `Loading...` text for loading indicator
loadedText: "Loaded.", // `Loaded.` text for loading indicator
infiniteScroll: false, // Enable infinite scroll?
bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll
// Shortcuts for Masonry Plugin Configuration (And Some Local Configuration)
masonryConfig: {
itemSelector: '.json_post',
fadeSpeed: 400, // Speed of thumbnail fading effect
resizeSpeed: 1000, // Speed of thumbnail resizing effect
isAnimated: false,
animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`?
animationOptions: {
queue: false,
duration: 1000,
easing: null
},
isFitWidth: true,
gutterWidth: 0,
isRTL: false
}
});
//]]>
</script>
/*----------------------------------------------------
{--------} Menu {--------}
----------------------------------------------------*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 10px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#navigation li {
width: 100px;
}
ul#navigation li a {
display: block;
margin-left: -2px;
width: 100px;
height: 70px;
background-color:#CFCFCF;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #AFAFAF;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
/*-moz-box-shadow: 0px 4px 3px #000;
-webkit-box-shadow: 0px 4px 3px #000;
*/
opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);
}
ul#navigation .about a {
background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);
}
ul#navigation .search a {
background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a {
background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a {
background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a {
background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a {
background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}
<script type="text/javascript">
$(function() {
$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
},
function () {
$('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
}
);
});
</script>
<ul id="navigation">
<li class="home"><a href="Kode anda disini" title="Home"></a></li>
<li class="about"><a href="Kode anda disini" title="About"></a></li>
<li class="search"><a href="Kode anda disini" title="Search"></a></li>
<li class="photos"><a href="Kode anda disini" title="Photos"></a></li>
<li class="rssfeed"><a href="Kode anda disini" title="Rss Feed"></a></li>
<li class="podcasts"><a href="Kode anda disini" title="Podcasts"></a></li>
<li class="contact"><a href="Kode anda disini" title="Contact"></a></li>
</ul>