Blog Jawa: Blogger

You are here: » Home » Posts filed under Blogger

Membuat Recent Post Bergerak di Blog

20.13 Unknown

Recent post yang akan kita buat ini adalah recents post thumbnail yang bergerak,jadi selain para pengunjung blog kita mudah dalam mengetahui postingan terbaru kita,blog kita pun akan terlihat bagus. Berikut Blog Tyo bantu untuk Membuat Recent Post Bergerak di Blog..

Membuat Recent Post Bergerak di Blog
<center><style type="text/css">silahkan ikuti beberapa langkah berikut

1.Login ke akun blogger sobat

2.Klik menu TATA LETAK (bagi sobat yang menggunakan antarmuka blogger yang lama,klik RANCANGAN)

3.Klik Tambah Gadget

4.Klik HTML/Javascript

5.Masukan kode berikut

<center><style type="text/css">

#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;

</script> <script src=" http://budihermanto123.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">

</script> </ul>
</center>

Perhatikan : Ganti tulisan yang saya beri warna biru dengan alamat blog kamu

6.Klik SIMPAN
7.Selesai

Bila berhasil, tampilan Recent Post nya akan sama dengan punya Blog Tyo yang ada di kanan blog ini. Sekian Tutorial Blog "Go Blog" Membuat Recent Post Bergerak di Blog.

[Read More...]

Efek Mengganti Template di mata Google

19.29 Unknown

Dalam dunia ngeblog, template sudah menjadi bagian yang tidak bisa di pisahkan, secara langsung sebab ini berhubunga dengan masalah tampilan dan kecocokan sama si pemilik Blog.
dan cara mengganti template untuk blogspot pun sangatlah mudah terlebih segudang aneka template tersedia di berbagai blog penyedia template, baik yang berbayar maupun yang gretongan alias free.

Dan pertimbangan untuk menggati template biasanya faktor utama adalah ketidak cocokan pemilik blog dengan tampilan yang sudah ada. atau karena melihat sebuah template baru yang lebih menarik.

Namun adakah resiko di mata google dengan merubah template kita?
1. pertama
masalah yang pertama muncul di mata google adalah mengenai Site Link, jika yang semula bot google sudah familiar dengan blog kita dan tiba2 kita rubah tentu akan sedikit memaksa "si robot gedeg" mengulangi pekerjaan barunya.
2.kedua
bukan hanya google, kita pun harus meluangkan kembali waktu untuk mengutak atik aneka link,widget sampai meta tag dan beberapa script yang mengharuskan untuk kita edit
3. ketiga
beruntung jika blog kita masih dalam tahap seumur jagung dan mash miskin visitor, namun jika sudah berumur bau tanah dan kaya akan visitor tentu bagi visitor loyal akan sedikit mempelajari lagi peta situs kita

[Read More...]

Cara Membuat Daftar isi atau Site Map berdasarkan Label

19.28 Unknown

Membuat daftar isi bisa dibilang perlu ndak perlu, untuk blog asal jadi widget semacam ini tidaklah diutuhkan namun untuk blog yang bertujuan agar di kunjungi halayak umum, navigasi ini sangat di anjurkan oleh eyan Google, agar memudahkan pengunjung untuk memilah dan memilih tema/artikel yang akan di baca.
banyak sekali tutorial mengenai tehnik ini namun kebetulan saja saya menemukan dari blog kawan dan ane pasang di blog kesayangan ane ini agar agan-agan juga mudah menyelami isi blog ane.

dan bagi sobat yang pengen memasang SiteMap ini bisa di pasang pada newpage / halaman khusus " daftar isi" atau "sitemap"
atau juga bisa di pasang pada sidebar seperti yang ane tempel di sidebar blog ini

dan seperti biasanya kalo sobat pengen naroh trik ini pada sidebar sobat ikuti lagkah berrikut ini

1. Masuk ke blogger.com
2. Pilih Rancangan
3. Pilih HTML/JavaScript
4. Copy kode Di bawah :

<div style="background: transparent url(#) no-repeat scroll 0 0; border:1px solid white; height:250px; overflow:auto; width:280px;text-align:left;float:center">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://eclopedia.googlecode.com/files/Daftarisi-hdx.js">

</script>
<script src="http://eclopedia.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500">

</script><div style="text-align:center">Cara membuat <a href="http://eclopedia.blogspot.com/2012/04/cara-membuat-daftar-isi-atau-site-map.html">ini</a></div></div>

5.pastekan lalu Save

[Read More...]

Menambah label animasi atau tag could 3D

19.27 Unknown

Menambah label animasi atau tag could 3D bisa menambah cantik blog kita, beberapa kali saya mencoba untuk membuat dengan memasang scriptnya selalu gagal, setelah saya nyasar pada blognya kawan "carapada.blogspot" baru tahu lah aku kalo tidak semua template support dengan widget yang satu ini dan untuk alasannya saya belum tahu sob..., masih belajar juga ;-)

dan di bawah ini ada script yang bisa sobat pasang, dan sebaiknya di pasang pada posisi sidebar ya biar nampak cantik.

Yuk kita praktekin pada blog kesayangan kita...!!

dan seperti biasanya langkhanya sebagai berikut :

1. Login ke blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,
3. Cari kode : <b:section class='sidebar' id='sidebar' preferred='yes'>
(biar cepet tekan Ctrl+F lalu paste kode di atas)
4. pasang kode di bawah ini di bawah kode di atas :

<b:widget id='Label99' locked='false' title='Tag Cloud Comulus Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "288", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Sebelum di save sebaiknya di preview dulu siapa tahu tidak support tinggal clear edt aja..., ;-)

Note :
1. Warna Merah : Ganti untuk merubah ukuran tag cloud
2. Warna Hijau : Ganti untuk merubah warna background tag cloud
3. Warna Biru : Ganti untuk merubah ukuran font
4. Tag Cloud akan berjalan apabila komputer sudah terinstal adobe flash player.

[Read More...]

Cara Membuat Daftar Isi Blog dengan Mudah

19.19 Unknown

Setelah kemarin ( kira kira 1 bulan yang lalu ) saya memposting tentang Cara Membuat Daftar Isi Blog dengan Mudah, kali ini saya akan membahas tentang daftar isi juga, tapi agak berlainan. di daftar isi ini merupakan daftar isi jQuery.
Untuk melihat langsung demonya, Klik Daftar isi blog.
Apabila tertarik, berikut langkah mudahnya :
1. Seperti biasa, silahkan login di akun blogger sobat, ( bukan punya saya )
2. Masuk ke Entri baru - Edit Laman - Laman Baru.
3. Masukkan Judul Daftar isi, boleh "Daftar Isi" atau "SiteMap" ( jangan dibuat "Cara Membuat Daftar Isi Blogger dengan jQuery" kan tidak nyambung )
4. Masukkan Kode dibawah ini :

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://budihermanto123.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>

5. Ganti tulisan budihermanto123.blogspot.com dengan URL blog sobat dan Simpan.
6. Masuk ke Edit Template HTML, cari kode </head> dan pastekan kode berikut diatasnya:

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

7. Simpan, dan lihat hasilnya.
Selesai.....
Silahkan tinggalkan komentar agar dapat berkunjung kunjungan antara sesama blogger.
Sumbernya saya lupa, tapi yang jelas, terima kasih buat abu-farhan.com udah buatin script daftar isi ini....

[Read More...]

Cara buat Show Hide Kotak Komentar dengan jQuery

19.17 Unknown

Langsung saja ke topik pembahasan. sebelum itu, silahkan geser ke bawah dan berhenti pada kotak komentar untuk melihat hasilnya atau klik disini.
kalau tertarik, silahkan baca sampai habis. tapi apabila tidak tertarik, silahkan keliling blog ini untuk mencari artikel menarik yang lain.
1. Seperti biasa, Login ke Blogger
2. Masukkan Email dan Password
3. Gerakkan Mouse ke arah Rancangan ( dalam bahasa kampung saya Design)
4. Pilih Edit HTML
5. Centang Expand Template Widget
6. Cari kode ]]></b:skin>
7. Paste kode berikut persis diatasnya

#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {padding: 5px;}

.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}

8. Cari kode </head> dan paste kode berikut diatas kode tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(".tombol-komentar").click(function(){
        $("#comments").slideToggle("slow");
        $(this).toggleClass("active");
        return false;
    });
});
</script>
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
jQuery('#bukakeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
   display: 'none'
});
jQuery('#tutupkeun').show();
jQuery.cookie('komen', 1);
return false
});
jQuery('#tutupkeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
   display: 'none'
});
jQuery('#bukakeun').show();
jQuery.cookie('komen', null);
return false
});
if (jQuery.cookie('komen') == 1) {
jQuery('#comments').show();
jQuery('#bukakeun').hide()
} else {
jQuery('#comments').hide();
jQuery('#tutupkeun').hide()
}
});
//]]></script>

9. Paste kode berikut dibawah kode
</b:includable>
<b:includable id='comments' var='post'>

<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Tambahkan Komentar<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>

10. Sisipkan kode <button class='tombol black' id='bukakeun'><b:if cond='data:post.numComments == 1'>1 Komentar</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> Komentar</b:if></button> diantara kode
<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
</div>
</b:includable>
hingga menjadi seperti ini.
<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + "_backlinks-container"'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
</div>
<button class='tombol black' id='bukakeun'><b:if cond='data:post.numComments == 1'>1 Komentar</b:if><b:if cond='data:post.numComments >= 2'><data:post.numComments/> Komentar</b:if></button>
</b:includable>

[Read More...]

CARA MEMBUAT TAG AWAN (CLOUDCULUMUS)

19.01 Unknown

Untuk blog yang ingin menggunakan gadget atau widget label Culumus, widget culumus ini biasa digunakan di WordPress, tetapi Gadget tersebut bisa diterapkan untuk Gadget Blogger, asalkan Anda tahu cara mengedit HTML untuk menerapkan widget ini. Gratis untuk menyalin contoh kode HTML berikut di Bawah ini, jangan lupa untuk mencari kode serupa, ingat sebelum Anda menerapkan widget ini, sebelum Sobat mengedit HTML, centang Expand Widget Templates agar tidak ada kesalahan. Untuk mencari kode yang dimaksud di bawah, tekan tombol (Ctrl + F) agar

mudah dalam pencarian.

Cari kode yang sama seperti di bawah

<b:section id=’sidebar’ preferred=’yes’>

atau

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

Setelah Anda copy dan paste kode di bawah seperti ini,

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

atau kode seperti ini,

<b:section id=’sidebar’ preferred=’yes’>

<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’>
<script src=’http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js’ type=’text/javascript’/>
<div id=’flashcontent’>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’http://create-freeblogs-n-widgets.blogspot.com/’>free widgets for blogs
</a></div>
<script type=’text/javascript’>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0×333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values=’data:labels’ var=’label’><a expr:href=’data:label.url’ style=’12′><data:label.name/></a></b:loop></tags>");so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

Ini hanya contoh saja, tidak masalah jika Sobat ingin bereksperimen silakan. Semoga widget ini bisa aktif, jika tidak aktif silakan Anda pergi ke halaman berikutnya untuk mendownload Tag CloudCulumus

[Read More...]

Cara Membuat Smooth Back To Top dengan jQuery

18.57 Unknown

Scroll to top, Istilah lain dalam blogger yang artinya sama dengan Back to Top yaitu, Sebuah Link yang menuju ke bagian atas halaman atau blog atau website. dan di kesempatan kali ini saya akan memberikan sebuah tutorial tentang membuat Smooth Back to top atau Scroll to top dengan menggunakan jQuery. seperti yang kita ketahui, jika kita membuat back to top dengan kode HTML biasa, seperti contoh, Klik disini jika ingin melihat hasil back top top biasa. dan bedakan dengan back to top yang akan kita buat nanti.

Langkahnya sangat mudah,
1. Masuk ke blogger, Rancangan, Edit HTML Template.
2. Cari kode </head>
3. Paste Kode berikut tepat diatasnya

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

<script src='//myhavies.jw.lt/js/ke_atas.js' type='text/javascript'/>

4. Cek, apakah kode yang berwarna merah ada dalam template sobat, jika ada tidak perlu ditambahkan lagi kode berwarna merah tersebut.
5. Simpan Template, dan lihat hasilnya

[Read More...]

Cara Memasang kotak admin di bawah postingan blog

16.18 Unknown

Apabila sobat sepert apa kotak admin di bawah postingan blog,

Contoh gambar berada di atas tuh.

So bagaimana cara membuatnya?

Begini:

1. Login blog

2. Rancangan

3. Edit html dan centang expand widget template

4. Letakkan kode berikut di atas ]]></b:skin>

.admin-tulisan{
display:block;
width:auto;
background:#1E1E1F;
border:2px solid #333;
box-shadow:0 1px 3px #000;-moz-box-shadow: 0px 0px 10px #292929;
-webkit-box-shadow: 0px 0px 10px #292929;
box-shadow: 0px 0px 10px #292929;;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#D9D9D9;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#4733FF;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#2E2E2E;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

Ganti warna kotak admin sesuai keinginan

5. Letakkan kode berikut di bawah <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ www.cybermig.com</h4>
<div class='kontainer'>
<img src='http://dl3.glitter-graphics.net/pub/1246/1246493ere9f5q4uj.gif'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<div style='clear:both;'/>
</div>
</div>
</b:if>

Ganti kode berwarna merah dengan gambar dan url sobat

6. Simpan template

Demikian cara membuat kotak admin di bawah postingan blog.

Semoga tutorialnya bermanfaat.

~~sumber:http://www.cybermig.com/2012/01/cara-membuat-kotak-admin-di-bawah.html~~

[Read More...]

Cara memasang sharing is sexy pada blog

16.13 Unknown

Memasang Social Bookmark adalah salah satu cara yang cukup mudah,
sebagai salah satu cara untuk melakukan promosi blog.
Bookmark sosial adalah metode untuk pengguna internet untuk berbagi, mengatur, mencari, dan penanda suatu web atau blog.
So bagaimana cara membuat share social bookmark sharing is sexy?
Simak langkah2nya:

1. Login blog
2. Rancangan
3. Edit html dan centang:expand widget template"
4. Letakkan kode di atas ]]></b:skin>

div.beauty-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmVrndovIej9knoIhRd08MLj6bMIZtJVY41ifGadDOtuVDnaOlW1soXIlo2YwXd7WiQijS6IbZMRAiiCCF1ifqW5rmof0luMIPhKoPOZY5A5ZvDObPbpMft4CdMoIro5HjCVma98oI-52/') no-repeat left bottom;
position:relative;
width:455px;
}
div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmVrndovIej9knoIhRd08MLj6bMIZtJVY41ifGadDOtuVDnaOlW1soXIlo2YwXd7WiQijS6IbZMRAiiCCF1ifqW5rmof0luMIPhKoPOZY5A5ZvDObPbpMft4CdMoIro5HjCVma98oI-52/') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.beauty-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.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdqiHFbSFDP6ihB0Zl5wpf7vz5Ov7bcnWQ0c_pyql_NxPnMjlHU94onIqB-Ho8w4XhikK9p8CcKkdoEX77pp3RyA9Vp45EwoCBERcSA_xvloPjSL-QQPeHV-RlI7AW351IBeFWQzuFuKP/') no-repeat !important;
}
.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}

5. Letakkan kode berikut di bawah <data:post.body> yang ke2

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>

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


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


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


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


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


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


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


<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>


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

</ul>
<span class='beauty-rightside'/>
</div>
</b:if>

6. Simpan template

[Read More...]

Download Tempelate

04.17 Unknown

Situs penyedia blog gratis dari Simbah Google “BLOGGER.COM” sudah lama saya kenal tetapi baru kali ini saya mencoba dan membuat blog dengan blogger alias blogspot. Ini dikarenakan situs blogger.com tidak menyediakan script cms yang bisa didownload sehingga harus online bila kita ingin membuat blog dengan blogger.com. Biasanya lebih sering menggunakan Joomla atau Wordpress yang dihosting sendiri.

Selama perjalanan berekspresi melalangbuana belajar menggunakan blooger.com alias blogspot, ada beberapa template yang menurut saya menarik. Template blogger yang memiliki desain sederhana, minimalis, elegan dan professional. Dan yang paling penting adalah template-template tersebut diberikan secara cuma-cuma alias gratis.

Siapa tahu ada diantara teman-teman yang yang tertarik, berikut template blogger gratis yang dimaksud:

- White Magic Blogger Template

- Espada Blogger Template

- Picture Line Blogger Template

- Queen Blogger Template

- Classic Blogger Template

- Capture Blogger Template

- Noise Light Blogger Template

- Snow Motin Blogger Template

- Hampir Putih Blogger Template

WHITE-MAGIC NEW GALLERY BLOGGER TEMPLATE

White Magic is a minimal gallery theme originally designed by Bloggerzbible keeping in mind maximum needs of the users. Its an simple design with cross-browser compatibility.This Blogger Layout is very simple and minimal template but very attractive ! why don’t you give it a try and download it while it’s available for free.

Tempalte Features:

Clean minimal design
Maximum feature that usually bloggers need
Clean Gallery view
Cross browser compatibility
Widget compatibilityPagination widget
Three column footer
Advertisement ready
Drop-Down menu
Title and Description compatibility
Flickr showcase compatible