Tempat Eksperimen

Cara lain menyembunyikan navbar blogger

2009-09-08T07:51:00.000-07:00

Pada sebagian besar blog baru di Blogger berdasarkan platform (baik dengan. BlogSpot atau kustom domain), Anda akan mengamati bahwa puncak-navbar yang hilang, tetapi Blogger tidak menyarankan Anda untuk menghapus navbar.

Baik Blogger maupun Google akan mempenalti Anda untuk menghapus / menyembunyikan navbar, tapi untuk menyediakan platform yang hebat untuk blogging, menurut saya setiap blogger harus menunjukkan rasa terima kasih mereka ke Blogger, baik dengan menunjukkan Button Blogger kecil, atau dengan menunjukkan navbar.

Jika navbar tidak cocok dengan template Anda sekarang, maka di sini cara yang sederhana untuk menyembunyikan navbar, tapi akan ditampilkan kepada pengunjung begitu mereka mengarahkan mouse mereka di atasnya.

Untuk mengaktifkan toggle navbar-fitur di blog Anda, ikuti petunjuk berikut ini:

Login ke Blogger -> Layout -> Edit HTML

Download dan simpan template Anda sekarang.

Kemudian cari (CTRL + F) yang mirip dengan kode dalam template ini:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Mungkin juga kode dalam template Anda, dengan class = 'navbar' dan visibilitas = 'hidden' menyembunyikan navbar sepenuhnya, sehingga Anda harus menghapus kode ini.

Dan ganti kode di atas dengan yang satu ini:

/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}
/*Blogger-Help-http://bloggerstop.net*/

Selamat mencoba

Sexy Social Bookmark V.2 for Blogger

2009-08-28T23:36:00.000-07:00

Setelah sexy social bookmark V.1 dibahas sebelumnya, maka kali ini akan dibahas sexy social bookmark V.2 dengan tampilan yang lebih elegan dan kompleks

Sekarang, Mari kita mulai.

CATATAN:! Sebelum mengubah template Anda, jangan lupa untuk mem-backup template dan widget Anda!

1. Pertama, tentu saja pergi ke template editor dan centang "Expand Template Widget".
2. Masukkan kode berikut sebelum </ head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>

Dan yang dibawah ini juga

<style type="text/css">
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img512.imageshack.us/img512/3131/sexysprite.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>

3. Sekarang letakkan kode dibawah ini setelah <data:post.body/>

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a></div>

Selesai jangan lupa disave, lalu lihat hasilnya...

Random Post Horizontal

2009-08-28T01:43:00.000-07:00

Yah ini adalah gadget baru khusus untuk pengguna blogger. Gadget ini akan menampilkan posting blog Anda secara acak satu demi satu dengan kutipan. Anda dapat dengan mudah menginstalnya dengan 3 langkah dan dapat menempatkannya di atas posting atau di tempat lain.

Sekarang saya ceritakan tahap-tahap penerapan dari fitur-fitur ini...

1. Menunjukkan salah satu judul posting pada suatu waktu.
2. Link ke posting.
3. Menunjukkan kutipan posting juga.
4. Setiap 5 detik menunjukkan posting baru.
5. Siklus melalui semua posting dalam blog.
6. Memulai siklus baru di akhir daftar.
7. Setelah dimuat terus berotasi bahkan ketika tidak terhubung ke Internet.
8. Menggunakan teknologi AJAX Google Resmi.
9. Dapat digunakan pada platform blogging lainnya (tidak diuji).
10. Melayang dengan kursor mouse di atas judul posting perhentian rotasi sampai mouse bergerak dari gadget.

Bagaimana Cara Kerjanya?

Untuk menghemat ruang dan belum menunjukkan semua posting satu demi satu gadget ini resmi menggunakan Google AJAX Feed API teknologi dan Dynamic Feed Control. Pos itu mengambil judul dan data dari blog Anda dan menampilkannya dalam gadget.

Instalasi

Seperti yang saya katakan dalam memulai, menginstal gadget ini mungkin hanya dalam 3 langkah yang adalah sebagai berikut:

1. Pergi ke Blogger Account> Blog> Layout. Klik di tab Elemen Halaman, klik pada tambahkan gadget dan kemudian gulir ke bawah untuk mengklik Add Html / Javascript gadget.

2. Sekarang di ruang kosong isilah dengan kode berikut.
<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 20px;
border: 1px solid #BCCDF0;
}

.gfg-title {
font-size: 24px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
}

.gfg-title a {
color : #3366cc;
}

.gfg-subtitle {
font-size: 20px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-bottom : 0px;
}

.gfg-subtitle a {
color : #3366cc;
display:none !important;
}

.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 3px;
}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : auto;
height : 100%;
padding-left : 20px;
padding-right : 5px;
}

.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}

.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 5px;
margin-left : 5px;
margin-right : 5px;
}

.gfg-listentry-odd {
background-color : #F6F6F6;
}

.gfg-listentry-even {
}

.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}

/*
* FeedControl customizations.
*/

.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin-bottom : 2px;
}

.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}

/*
* Easy way to get horizontal mode, applicable via js options to gadget.
*/

.gfg-horizontal-container {
position : relative;
}

.gfg-horizontal-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}

.gfg-horizontal-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}

.gfg-horizontal-root .gfg-title a {
color : #444444;
text-decoration : none;
}

.gfg-horizontal-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}

/* To allow correct behavior for overlay */
.gfg-horizontal-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}

.gfg-horizontal-root .gfg-list {
display : none;
}

/*
* FeedControl customizations.
*/

.gfg-horizontal-root .gfg-entry .gf-result .gf-snippet,
.gfg-horizontal-root .gfg-entry .gf-result .gf-author {
display : none;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer {
float : left;
}

.gfg-horizontal-root .gfg-entry .gf-result .gf-spacer,
.gfg-horizontal-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}

.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}

.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}

.gfg-collapse-open {
background-image : url('arrow_open.gif');
}

.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}

.gfg-collapse-href {
float : left;
}

.clearFloat {
clear : both;
}
body {
background-color: white;
color: black;
font-family: Arial;
font-size: small;
margin: 0;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">

function showGadget() {
var feeds = [
{title:'title',
url:'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},

];

new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BLOG_TITLE ~ Random Posts."});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading...</div>
<div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a> and <a href="http://tempateksperimen.blogspot.com" target="_blank">TempatEksperimen!</a>.</div>

Dalam kode berikut di atas, Anda harus terlebih dahulu mengedit hal-hal yang ditandai dengan huruf tebal Jika tidak, tidak akan bekerja untuk Anda.

Ubah "myblog" untuk aktual subdomain blog yang terdaftar dan "BLOG_TITLE" sebenarnya judul untuk blog Anda. Dan setelah itu Klik Simpan Button.

Optimalkan

Mengubah warna dan ukuran widget ini sangat sederhana .. Coba lihat kode dengan tepat, dan Anda akan menjadi ahli dalam hal ini

Credits

Gadget yang bagus ini diciptakan oleh Vin dari BlogDoctor. Jadi berterima kasih kepadanya untuk membuat widget ini untuk pengguna blogspot.

Membuat Readmore dengan buton

2009-08-28T00:50:00.000-07:00

Ada beberapa model 'readmore' yang dikembangkan oleh para blogger, baik itu model standar ataupun menggunakan javascript.

Berikut ini readmore yang saya kembangkan dari help google, yang menurut saya lebih mudah diterapkan:

1. Buka Edit HTML
2. Masukan script berikut di diatas </head> :

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

3. Kode link readmore

Memasukan kode link readmore berikut ini persis dibawah kode <data:post.body/> :

<b:if cond='data:blog.pageType != "item"'><div class='readmore'>
<a expr:href='data:post.url' target='_parent' title='Readmore'>Read more!</a></div>
</b:if>

kemudian masukan kode CSS berikut diatas kode ]]></b:skin> :

/* readmore */
.readmore a {
float : right;
font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: #fff;
background : #505050;
margin-top: 10px;
padding : 2px 15px; }

.readmore a:hover {
color:#fff;
background: #B13E2C; }

.readmore a:link { border-bottom:none; }

background : #505050; bisa anda rubah warnanya atau juga anda dapat ganti dengan menggunakan image.

5. Klik save template, tahapan di Edit HTML selesai.

6. Selanjutnya modifikasi readmore, saat melakukan posting:

Disini bagian awal postingan...........
<span class="fullpost">
dan ini penggalan postingan............
</span>

---
Berikut ini alamat artikel Readmore versi lain dengan menggunakan javascript:
- Cara pasang Auto Read More terbaru (Part 2)
- Read More Versi baru
- How can I make show/hide links for my posts?

Artikel ini diambil dari blognya choen....

Widget : Animated Tag Clouds

2009-08-22T21:48:00.000-07:00

blogger blogging platform default sudah memberikan kita kemudahan untuk menampilkan label post pada blog kita yang bisa kita letakkan di sidebar blog.

Tapi kita bisa merubah label tersebut dengan tampilan yang lebih baik lagi agar mata pengunjung bisa tertuju ke label kita..

Jadi kita akan berusaha menampilkan sesuatu yang sedikit berbeda dalam hal menampilkan label widget cloud ini dalam bentuk animasi.

Kita mulai saya cara pemasangannya.

1. Login dulu ke blogger account.

2. Pergi ke dashboard >> tata letak >> Edit HTML

3. temukan kode dibawah ini

<b:section class='sidebar' id='sidebar' preferred='yes'>

Kalau agak susah nyarinya tekan aja ctrl+f lalu cari kodenya.

Lalu letakkan kode dibawah ini diatas kode tadi.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

4. Klik save template dan cek hasilnya.

Jquery : Trik membuat Tooltip

2009-08-22T00:50:00.000-07:00

Maksud dari tooltip itu ialah sejenis title pada link yang kita sorot baik berupa banner atau link biasa. contoh di blog ini bisa anda sorot tombol Home yang ada diatas.

Ide ini saya ambil dari blog bookmarknya Choen..

Begini caranya Trik Membuat ToolTip di Blogger:

1. ToolTip ini menggunakan Jquery, untuk itu anda perlu memasang script berikut (jika memang belum anda miliki), diatas </body>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. Masukan javascript berikut, di dibawah script jquery diatas.

<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>

3. Selanjutnya masukkan code css, code css ini dapat anda modifikasi, seperti warna, atau juga anda dapat menggunakan background image(seperti aslinya dari script ini).

#easyTooltip{
padding:5px 10px;
border:1px solid #EF6D21;
background: #181C18;
color:#E0EFE0;
}

4. Ini tahap terakhir untuk mengaktifkan fungsi Tooltips, yaitu masukan code berikut, disetiap link yang anda inginkan.

class='tooltip' title='isi sesuai yang anda inginkan'

contohnya penerapannya seperti berikut:

<a class='tooltip' href='/' title='Beranda'>
Beranda
</a>

>> demikian keseluruhan tahapan tersebut, semoga berhasil.

Navbar dibawah ala Wibiya

2009-08-20T19:51:00.000-07:00

Wibiya adalah widget interaktif multi-fungsi berupa toolbar yang bisa dengan mudah digunakan untuk blog berplatform WordPress, Blogspot dan TypePad. Di dalam widget Wibiya, Anda bisa menemukan 11 fitur bagus yang akan membantu Anda meningkatkan interaksi dengan pengunjung blog Anda. Dan semuanya tentu saja GRATIS.

Apa saja fitur Wibiya yang bisa Anda manfaatkan?

1. Posts Navigator (Artikel Terkini dan Artikel Acak)

Dengan fitur ini pembaca blog Anda bisa menyimak kembali artikel-artikel yang telah Anda tulis, baik secara runtut ataupun acak. Hasilnya, jumlah page views blog Anda pasti akan meningkat.

2. Community via Facebook (Komunitas Facebook)

Membangun komunitas kini semakin mudah dengan fitur bagus menggunakan Facebook yang diberikan oleh Wibiya. Selain mempermudah cara membangun komunitas, fitur ini juga memampukan Anda untuk mengirim pesan kepada anggota komunitas Anda.

3. Twitter Widget (Widget Twitter)

Ingin meningkatkan jumlah followers Twitter Anda? Cukup gunakan Wibiya dan Anda telah memberi kemudahan kepada para pengunjung blog Anda untuk mengikuti Anda di Twitter.

4. RSS Subscribers Bar (Tombol Berlangganan RSS)

Fitur penting ini nyaris selalu ada di setiap widget interaktif. Dengan memanfaatkan Wibiya, setiap pengunjung blog Anda bisa berlangganan artikel-artikel blog Anda secara gratis melalui RSS Feed.

5. Sharing Bar (Tombol Berbagi Konten)

Ingin mempromosikan blog Anda? Dengan fitur Sharing Bar ini pembaca blog Anda tidak akan lagi kesulitan untuk mengirimkan artikel Anda ke situs-situs social bookmarking semacam Digg, Delicious ataupun StumbleUpon. Semakin banyak yang "menyebarkan" artikel Anda, maka semakin tersebar juga kabar mengenai blog Anda.

6. Blog Searches (Kotak Pencari)

Widget Wibiya dilengkapi dengan fitur penting kotak pencari yang bisa dimanfaatkan oleh pengunjung blog Anda untuk mencari kata kunci tertentu, baik yang ada di halaman pencari Google maupun di blog Anda sendiri.

7. Translation Bar (Tombol Penerjemah)

Fungsi fitur ini mudah ditebak: memampukan penerjemahan artikel Anda ke dalam bahasa yang lain. Dengan menggunakan Wibiya, pengunjung blog Anda bisa menerjemahkan artikel di blog Anda hingga ke 20 bahasa.

8. Photo Gallery (Galeri Foto)

Ingin berbagi cerita melalui foto? Jangan khawatir. Dengan fitur ini Anda bisa menampilkan foto-foto pribadi ataupun keluarga di blog Anda.

9. Live Notifications (Kabar Berita)

Fitur ini unik dan inovatif. Dengan fitur Live Notifications, Anda bisa menulis pesan singkat 140 karakter yang bisa dibaca oleh para pembaca Anda dengan meng-klik ikon bergambar "orang" di bagian kanan widget Wibiya. Anda juga menyisipkan link dalam pesan yang Anda tulis.

10. Facebook Fan Page (Penggemar Facebook)

Siapa yang tidak kenal Facebook? Siapa yang tidak punya akun Facebook? Dengan fitur ini, Anda bisa memaksimalkan manfaat Facebook untuk membangun jaringan dengan para pengunjung blog Anda.

11. Games (HeyZap) (Permainan)

Jika Anda ingin memanjakan pengunjung blog Anda dengan sesuatu yang berbeda, tidak ada salahnya memanfaatkan fitur Game dari Wibiya. Game yang didukung oleh HeyZap ini pasti akan membuat pengunjung blog Anda betah berlama-lama di blog Anda.

------------------------------------------------------------------------------------

Selain multi-fungsi, widget Wibiya juga bisa dikustomisasi. Misalnya, Anda bisa memilih fitur apa saja yang akan Anda tampilkan di widget Wibiya di blog Anda. Atau, warna toolbar Wibiya yang bisa Anda sesuaikan dengan tema background blog Anda, mulai Pure White hingga Red Touch. Atau logo widget yang bisa Anda ganti dengan logo blog Anda sendiri (seperti widget Wibiya di blog ini). Atau Anda bisa menggunakan kotak pesan untuk mengirimkan pesan massal kepada anggota komunitas Anda.

Selain bermanfaat bagi pengunjung blog, widget Wibiya juga bermanfaat bagi pemilik blog. Pasalnya, Wibiya juga menyediakan toolbar statistic yang memberikan informasi lengkap mengenai data pengguna widget Wibiya. Misalnya, berapa banyak pengunjung yang telah menggunakan kotak pencari, berapa pengunjung yang telah membaca artikel acak, berapa pengunjung yang telah berlangganan RSS Feed, berapa jumlah anggota komunitas Facebook (yang mendaftar via Wibiya) hingga berapa jumlah pengikut Twitter yang bergabung melalui Wibiya.

Asyiknya lagi, widget Wibiya sudah mendukung bahasa Indonesia. Artinya, pengunjung blog Anda yang kesulitan berbahasa Inggris tidak akan mengalami masalah untuk memanfaatkan Wibiya. Selain bahasa Indonesia, Wibiya juga memberikan layanan dalam 20 bahasa yang lain, yaitu: Spanyol, Perancis, China, Jerman, Italia, Jepang, Portugis, Rusia, Turki, Yunani, Belanda, Arab, Polandia, Rumania, Bulgaria dan Bengali.

Sayangnya, setidaknya hingga hari ini, tidak semua blogger bisa memanfaatkan layanan Wibiya. Hanya blogger-blogger tertentu yang telah mengajukan invitation dan diterima oleh pihak Wibiya yang bisa memasang widget Wibiya. Namun toh tidak ada salahnya mencoba. Anda bisa mengisi form invitation di halaman homepage Wibiya, mengirimkannya, dan jika Anda dianggap memenuhi syarat, Anda bisa memasang widget Wibiya di blog Anda.

Tertarik mencoba menggunakan Wibiya?

Langsung aja berkunjung ke wibiya [dot] com

Artikel ini diambil langsung dari www.blogguebo.com.

Stripe Ad

2009-08-20T09:13:00.000-07:00

Sekali lagi Stripe Ad ini terinspirasi dari wordpress yang diciptakan MaxBlogPress, tapi lagi-lagi Stripe Ad akhirnya diadaptasi juga untuk blogspot.

Tujuan dari stripe ad adalah kamu bisa meletakkan link yang kamu anggap berguna bagi pembaca untuk mengkliknya, cuma stripe ad pada blogspot sifatnya statis, tidak seperti pada wordpress yang diciptakan MaxBlogPress. But, never mind toh nanti pasti ada jalan keluarnya...

Berikut tahapan-tahapannya.

1. Pilih Template > Edit Html (klik pada Expand Widget Template).

2. Cari kode ini.

]]></b:skin>

3. Tambahkan kode berikut ini diatasnya.

#stripe-ad{
background:#f5f8fa;
border-bottom:1px solid #4db4e8;
left:0;
margin:0 0 3px 0;
padding:4px 0;
top:0;
overflow:auto;
position:fixed;
width:100%;
z-index:100;
}
* html #stripe-ad{ /*IE6 hack*/
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#stripe-ad .left{
color: #4db4e8;
width:80%;
float:left;
font-family:Arial;
font-size: 13px;
font-weight: bold;
font-style:normal;
text-align:center;
}
#stripe-ad .right{
float:right;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-weight:normal;
font-size:10px;
letter-spacing:0;
white-space:nowrap;
}
#stripe-ad .right a{
color: #4db4e8;
font-size:10px;
text-decoration:underline;
}
#stripe-ad .right a:hover{
color: #000;
font-size:10px;
text-decoration:none;
}
#left_bar a {
color:#4db4e8;
text-decoration: none;
}
#left_bar a:hover{
color:#ce1433;
text-decoration:underline;
}

4. Cari kode ini.

</head>

5. Tambahkan kode dibawah ini di atasnya.

<script type='text/javascript'>
//<![CDATA[
var mta_arr = new Array();
var mta_clear = new Array();
function mtaFloat(mta) {
mta_arr[mta_arr.length] = this;
var mtapointer = eval(mta_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
this.mtasrc.height = this.mtasrc.offsetHeight;
this.mtaheight = this.cmode.clientHeight;
this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
mtabar = mtabar;
eval(mtabar);
}
function mtaGetOffsetY(mta) {
var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
var parentOffset = mta.mtasrc.offsetParent;
while ( parentOffset != null ) {
mtaTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mtaTotOffset;
}
function mtaFloatInit(mta) {
mta.pagetop = mta.cmode.scrollTop;
mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
}
function closeTopAds() {
document.getElementById("stripe-ad").style.visibility = "hidden";
}
//]]>
</script>

6. Cari kode ini.

<body>

7. Tambahkan kode dibawah ini di bawahnya.

<div id="stripe-ad">
<div id="left_bar">
<span class="left">
<a href="http://rudyazhar.blogspot.com/" target="_blank">Tulis apa yang ingin kamu tulis disini!</a>
</span>
</div>
<span class="right" onmouseout="self.status=''" onmouseover="self.status='dilarangmelarang.com.com';return true;">
<a href="http://dilarangmelarang.com/" target="_blank">Powered by Rudy Azhar</a> <img onclick="closeTopAds();return false;" src="http://tinyurl.com/lmmkad" style="cursor: pointer;" align="absmiddle" border="0" />
</span>
</div>

8. Kalau udah kelar coba pratinjau terlebih dahulu, kemudian pilih Save.

Kalau untuk wordpress, ini saya kasih ada link downloadnya disini.

contoh stripe Ad bisa dilihat diblog saya rudyazhar.

Sumber dilarangmelarang.com

WP Greet Box untuk Blogspot

2009-08-20T08:23:00.000-07:00

Saya pernah liat di blognya Mas Habibie Reza ada plugin yang terpasang diatas postingan artikelnya, keren juga kelihatannya.

Lalu saya mencari tahu apakah plugin semacam itu bisa juga diterapkan di blogspot? dan akhirnya pencarian saya tidak sia-sia, saya mendapatkannya dari Marzuki temanku dari negeri jiran Malaysia disitusnya dilarangmelarang.com. Thanks Marzuki..

Gunanya apasih WP Greet Box itu?

Yang pasti WP Greet Box ini berfungsi sebagai pemberi ucapan yang berbeda bergantung dari mana pengunjung blog kamu datang.

Oke kita mulai aja ya...

1. Pilih Template > Edit Html (klik pada Expand Widget Template).

2. Cari kode ini : <p><data:post.body/></p>

3. Tambahkan kode dibawah ini di atas kode no.2 tadi.

<script src="http://files.dilarangmelarang.com/javascripts/TextToBeDisplayedDiv.js" type="text/javascript">
</script>
<div id="mainDisplayDiv" style="background:#f8f8ff;border:1px solid #b6afa9;display:none">
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "http://feeds2.feedburner.com/dilarangmelarang";
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML
= dynamicHTMLText;
</script>
</div>
<script src="http://files.dilarangmelarang.com/javascripts/HideShowDiv.js" type="text/javascript">
</script>
<script type="text/javascript">
//List your domains where you dont want to show up. Suppose
//when people navigate within your site and you dont want to
// show up. This is , seperated
var myRestrictedDomainList = "dilarangmelarang.com";
showHideDiv(myRestrictedDomainList);
</script>

Catatan : Tutorial ini sebaiknya digunakan bagi template yang sudah ada readmore nya.

4. Jangan lupa disave ya...

Nah kalau yang memakai blog wordpress tentu pasti ada panduannya karena ini terinspirasi dari blog wordpress.

kamu bisa install plugin WP Greet Box seperti biasa.

Sexy Social Bookmark

2009-08-20T05:23:00.000-07:00

Teman-teman udah pada tahu nggak tentang sexy social bookmark yang akan saya jelaskan berikut?? ini gambarannya...

udah ngerti kan? ya, seperti yang pernah dipasang pada blog saya dulu, sekarang kagak lagi...

sekarang saya akan memberikan panduannya supaya bisa diterapkan di blogspot,oke kita mulai saja.

berikut langkah-langkahnya:
1. Login ke blogger dengan ID kamu (jangan ID orang lain lho!!!)
2. Klik Tata Letak
3. Kemudian klik edit HTML
4. Klik downloan full template lalu save (jangan lupa!!!)
5. Centang expand template widget
6. Cari kode seperti ini : </head>
7. Copy dan paste kode dibawah sebelum kode : </head>

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

8. Lalu cari kode seperti dibawah ini:
<data:post.body/> (jika template kamu udah memakai readmore, ada dua kode seperti ini yang mirip, letakkan saja pada kode kedua)

9. Copy dan paste kode dibawah setelah kode <data:post.body/>

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

10. Ganti YOUR-FEEDBURNER-ID dengan ID Feedburner kamu

11. Setelah itu simpan template kamu, jadi deh..

Ohya hampir lupa, kalau untuk wordpress panduannya ada disini nich contohnyapun ada dibawah postingannya...

Salaam semuanya..

texture

2009-07-25T09:51:00.001-07:00

socialbookmarking icons

2009-07-23T05:44:00.001-07:00

Foto HERBALIFE

2009-06-21T07:13:00.000-07:00

Herbalife

2009-06-19T06:54:00.001-07:00

LOGO Ku

2009-06-17T19:15:00.000-07:00

banner

2009-06-10T05:38:00.000-07:00