<b:if cond='data:blog.pageType == "item"'>
<div class='vcard' id='hcard-Riswan-Sucess' style='margin-top: 30px; padding: 10px; font-size: 12px; font-family: Arial; background: #dcdcdc; line-height: 1.3em; color: #777'>
<span style='color:#777; font-size:18px; margin-top:10px'>Terima Kasih Telah Berkunjung</span><br/>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br/>
Ditulis Oleh <span class='fn n'><span class='given-name'><span itemprop='reviewer'><data:post.author/></span></span></span><br/>
<span style='text-align: justify'>Jika mengutip harap berikan link DOFOLLOW yang menuju pada artikel <b><a expr:href='data:post.url'><data:post.title/></a></b> ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatian anda</span>
</div>
</b:if>
<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/AVvXsEgiuMXHFUSgfBsHLu-Bl8VzolELDx6s4kSmrrSjzxF4IRqxMWp1gC9U0XwgZ0fqmAj7KMfid1L2Po76BABYgXSHeujNJb1CrK5wfkn4ClKJU0TwbtRavGWVzywrKGXkcJVX0P0_5kzCRLo/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/AVvXsEieSR73y7EI3CmAXBHPAmKMfF2RlwItRLOzKiq8MJOfjyV9Mpn1hMWwC7EyMLdSfZpnEwXOTg0ZY4pMYL1GVvKmbN-8hol2MtnD4bZGg4LY5F7XRrpFFPlYYrd4-ZT9vZSnzZYQIwhcUXs/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/AVvXsEjwsxRwf87IKIgiyzt0gBscagEqWKVnCpO91hcQZrsH-uHXzwzN_ulhiYQPM3rnP5LNLDSTBFY4e1fi84HaHckh80aDqJQCAJRmZw3MhFEXhqWqiq00IMdZHEhtYPyWjl1oG5m4bdHMQH8/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/AVvXsEiL6rUOr_-8wqPClwBtDpDKqE2v_11ehQd7nYtw_ebxn7UumobNckt3GAvXSFjWQIbUlxd858dgDv55W4C2spZAqTZ1FRYfmKGlsrYWDV4pEogx2MRr532vQ8PKFPdwrBkV-8OW950cRpo/h120/RSS-Home.png" title="Grab Our Rss Feed" /></a>
</p></center>
<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>
]]></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...
//]]>
}
};
/*----------------------------------------------------
{--------} 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>
<div style="overflow:auto;width:auto;height:234px;border:2px solid #none; padding:15px; margin:0 auto;background:#000000;"> <style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #c1bebe;display: block;font-size: 12px;font-style: Courier;line-height: 1.4;} </style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 25,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://reoa-dam-newcoment.googlecode.com/files/newcomment.js"></script> <script type="text/javascript" src="http://ngeblogbarengbareng.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script></div>
.bgboxgandaluar {
margin: 20px auto;
padding: 5px;
width: 350px;
border: 2px solid #999;
border-radius: 10x;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-webkit-transition: all 1.5s ease-in;
background: #888;
opacity: 0.6;
filter: alpha(opacity=60); /* for IE */
}
.bgboxgandaluar:hover {
box-shadow: 1px 1px 18px #000;
-moz-box-shadow: 1px 1px 18px #000;
-webkit-box-shadow: 1px 1px 18px #000;
background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgFadeBlackV411H1.gif) bottom left repeat;
border: 2px solid #43b1fd;
opacity: 1.0;
filter: alpha(opacity=100); /* for IE */
}
.bgboxgandadalam {
background: #111;
border: 1px solid #666;
padding: 15px 10px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;
color: #eee;
}
.bgboxgandadalam:hover {
background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackH1V300.gif) top left repeat;
border: 1px solid #777;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 1px 1px 8px #fff;
-moz-box-shadow: 1px 1px 8px #fff;
-webkit-box-shadow: 1px 1px 8px #fff;
}
<div class="bgboxgandaluar">
<div class="bgboxgandadalam">
Letakan kode yang ingin diberi efek disini !
</div>
</div>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/18.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/16.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/20.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/15.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/12.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/13.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/14.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/15.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/6.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/7.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/8.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/9.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/10.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/1.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/2.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/3.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/4.gif" border="0" alt="blog-indonesia.com"/></a>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/5.gif" border="0" alt="blog-indonesia.com"/></a>
/* Panel Comments */
a.openpanel {
display:block;
width:auto;
padding:0px 0px;
text-align:center;
font-weight:bold;
line-height:32px;
background-color:#000;
color:white;
text-decoration:none;
margin:0px 0px;
-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px rgba(0,0,0,0.2);
position:relative;
}
a.openpanel em {
width:0px;
height:0px;
display:block;
position:absolute;
top:15px;
right:15px;
border:6px solid transparent;
border-top-color:white;
}
a.openpanel.active {background-color:#303030;}
a.openpanel.active em {
top:6px;
border-color:transparent transparent white transparent;
}
div.paneline {
height:0px;
border-bottom:4px inset #1a1a1ab;
}
div.hompiPanel {
padding:10px 20px 20px;
-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2);
margin:0px 0px !important;
}
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Open Comment",
closePanelText = "Close Comment",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<!-- KakiNetwork.Com Likebox Pro FBFan Code Start -->Catatan : ganti kode warna merah dengan nama dari fans page anda
<script type='text/javascript'>KNFBFansPRO="Nama Fans Page Anda"</script>
<link href='http://kakinetwork.com/sources/fbfans-pro/kakiblogger.css' rel='stylesheet' type='text/css'/>
<script src='http://yourjavascript.com/0143115100/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://yourjavascript.com/5400531110/likeboxfbfan-pro.js' type='text/javascript'/>
<script language='javascript'>
$(document).ready(function() {
$('body').KNFBFansPRO( {
url: "URL Fans Page Anda",
tunggu: 15,
wait: 1440,
tutup: false
} );
});
</script>
<div id='fbtpdiv'/>
<!-- KakiNetwork.Com Likebox Pro FBFan Code End -->
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
-moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;}
