Cara Membuat Popular Post Animasi 3D Di Blog

Cara membuat Popular Post animasi 3D di Blog:
1.Login ke blog anda - Design - kemudian Add gadged baru pada elemen, jangan lupa pilih HTML / Javascript ( bebas dimana saja, karena hanya untuk penempatan Css dan koda javascript saja )
2.Copy kode atau script berikut dan paste pada gadget tadi kemudian save ( tanpa judul )

<style type="text/css">
.cube { width: 250px; height: 250px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/popularcube.js"></script>

3.Sekarang masih pada halaman Design
4.Silahkan add Gadged baru lagi dan pilih gadget popular post ( penempatannya terserah anda, bisa pada sidebar kanan atau kiri dan bawah ) kemudian save dan lihat hasilnya.

5. Selamat mencoba...

READ MORE - Cara Membuat Popular Post Animasi 3D Di Blog

Cara Membuat Widget Subscribe Mashable Style Pada Blog

Cara membuat widget Subscribe ala Mashable:
1. Langkah pertama silahkan login blog anda kemudian ke halaman edit Design
2. Selanjutnya silahkan add gadged baru dan pilih HTML / Javascript
3. Kalau sudah silahkan paste kode barikut ke dalam widget baru tersebut:

<style>
/* Social Widget */
#B-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
border-bottom:0;
}
.googleplus {
background: #fff;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 80px;}
.g-plusone { float: left;}
.twitter {
background: #fff;
padding: 5px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: #ff9b00;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:5px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
backfround: #ff9b00;
-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 260px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSuoePQRdXYxqshg5-Ll5OntXZ_QRSqoYfVgMhOuuFU1g7_cmYRJKXw2VjGuwf3LM2bGZmsCDhxF5Kwq4IXcsj9KbpibvrdtAwTpXylFcJCmEa86xG8h2D3ScDpF2-kIjk9lq-5y_5Lpc/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-fb { background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCOSVoPFU4fLdVXrskDvNie8xi2K9pfqxYqgG-0EF7eMeGOBJmKEDwYULadI1rmB7wHgiFJtgXjFbDojMQpSBLCXIo2sobqiqM_ZCnGJw_fy7RCB2mgtI2hp258h-El1RbE7FYoKp6JHc/s400/facebook.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSB3TkZOLIGHO_NeDNUlzkvPRDRT_741LBUm8kQYSvzbJE0S6_sPA06jDoGF9saFNg_0D_FYLRS_xLpjO6vGUjlMpjhr2kR59a1eZEDPILPhBNvmREkkxo_COFrIgP3ZQ68UTGAaBrFuY/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->

<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("");</script>
<fb:fan profile_id="265570443512043" stream="0" connections="18" width="300px" height="170px" header="0" logobar="0" css="http://script-bamz-us.googlecode.com/files/facebook.js"></fb:fan> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=Rizky10_&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">
<!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=RizkyDorkNeverSayDie', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if (this.value==&#39;&#29;)this.value=this.defaultValue;" />
<input type="hidden" value="RizkyDorkNeverSayDie" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/RizkyDorkNeverSayDie" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/rizky.vanhalen" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/113084964376315314193" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"></span></div></div>
<!-- End Widget --> </div>

Keterangan :
<fb:fan profile_id="265570443512043" : ganti kode merah dengan Id fan Page facebook anda
screen_name=Rizky10_ : Ganti dengan username twitter anda
http://feedburner.google.com/fb/a/mailverify?uri=RizkyDorkNeverSayDie : isi dengan Feedburner anda
http://feeds.feedburner.com/RizkyDorkNeverSayDie : id Feedburner anda
http://www.facebook.com/rizky.vanhalen : Id fans page facebook
http://plus.google.com/113084964376315314193 ganti ID google Plus anda

Selamat mencoba....

READ MORE - Cara Membuat Widget Subscribe Mashable Style Pada Blog

Cara Membuat Popular Post Dengan Animasi Gambar Berputar

Cara membuat Popular Post dengan Animasi gambar berputar tahap 1
1.Login ke Blog anda - Design - Pada page lemen silahkan add gadget
2.Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
3.Centang image thumbnail
4.Pada bagian snipet tidak perlu di centang
5.Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
6.Save

Pada Tahap Ke 2:
1.Pada menu design - Edit HTML (tidak perlu centang expand widget templates)
2.Cari kode ]]></b:skin> dan paste Css berikut diatas kode ]]></b:skin>

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

3.Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
4.kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

5.Simpan template.

Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yang berwarna merah kadang ada yang kodenya PopularPost2. Jika kodenya PopularPost2 yah anda tianggal mengganti kode yang saya berikan (yang warna biru) menjadi PopularPost2 juga. Okee, Good luck..

READ MORE - Cara Membuat Popular Post Dengan Animasi Gambar Berputar

Efek Animasi Dengan Css

Trik Pertama
CSS dibawah ini (Taruh di atas ]]></b:skin> )

#infotips-muter{
width:140px;
height:80px;
border:1px solid #999;
box-shadow: 5px 3px 5px #aaa;
margin:5px auto;
padding:5px;
background:#9bbddd;
font-size:12px;
font-weight:bold;
background-color: yellow;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}

#infotips-muter:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
}

Nah, terakhir kode pemanggilannya. (Letakkan kode dibawah ini dimana saja: halaman posting, sidebar. Terserah kalian)

<div id="infotips-muter">
Ganti teks ini dengan teks kalian. :)
<div>

Trik Kedua:
CSS (Taruh di atas ]]></b:skin> )

#infotips-membesar {
width:140px;
height:100px;
border:1px solid #999;
box-shadow: 5px 3px 5px #aaa;
margin:5px auto;
padding:5px;
background:#9bbddd;
font-size:12px;
font-weight:bold;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#infotips-membesar:hover {
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
}

Dan untuk pemanggilannya taruh seperti yang sudah saya jelaskan di atas:

<div id="infotips-membesar">
Ganti teks ini dengan teks kalian. :)
<div>

Dan simpan...

Good Luck...

READ MORE - Efek Animasi Dengan Css

Cara Membuat Efek Bunga Sakura Berjatuhan Di Blog

1. Login ke akun blogger
2. Masuk ke Rancangan dan tambahkan widget HTML/JavaScript
3. Copy kode hujan bunga sakura berikut:

<script type="text/javascript" src="http://naughtyric.googlecode.com/files/SakuraRain.js"></script>

4. Simpan dan selamat mencoba.

READ MORE - Cara Membuat Efek Bunga Sakura Berjatuhan Di Blog

Cara Membuat Hujan Bintang J-rock Berjatuhan Di Blog

Cara Mudah Membuat Hujan Bintang J-Rocks di Blog:

1. Login ke akun blogger
2. Masuk ke Rancangan dan tambahkan widget HTML/JavaScript
3. Copy kode hujan bintang J-rocks berikut

<script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>

4. Simpan dan lihat hasilnya.

Good Luck...

READ MORE - Cara Membuat Hujan Bintang J-rock Berjatuhan Di Blog

Cara Membuat Menu Horizontal Di Blog

1.Login ke Blogger
2. Klik "Page Element" & Klik "Edit HTML"
3. Centangkan "Expand Widget Templates"
4. Cari kode ]]></b:skin> dan letakkan Kode dibawah ini tepat diatas kode ]]></b:skin>

.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-background-1.gif) repeat-x; /*tab background image path*/
height: 46px;
list-style: none;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
padding:0 0 0 16px; /*Jangan Dirubah kode Jarak ini*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 20px 0 8px;
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kiri.gif) no-repeat;
background-position: left;
}
.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(http://i730.photobucket.com/albums/ww306/gozhilaq/Menu-kanan.gif) no-repeat right top;
}

5. Lalu cari code <div id='content-wrapper'> dan letakkan code di bawah ini tepat di atas kode <div id='content-wrapper'>

<ul class='glossymenu'>
<li class='current'><a href='URL-Blog-Kamu'><b>Home</b></a></li>
<li><a href='URL-Link-Tujuan1'><b>Judul-Tujuan1</b></a></li>
<li><a href='URL-Link-Tujuan2'><b>Judul-Tujuan2</b></a></li>
<li><a href='URL-Link-Tujuan3'><b>Judul-Tujuan3</b></a></li>
<li><a href='URL-Link-Tujuan4'><b>Judul-Tujuan4</b></a></li>
<li><a href='URL-Link-Tujuan5'><b>Judul-Tujuan5</b></a></li>
</ul>

Keterangan:
URL Link Tujuan: ganti dengan link tujuan yang sobat inginkan
Judul Tujuan: Judul yang sobat inginkan

6. Simpan dan selesai.

Good Luck...

READ MORE - Cara Membuat Menu Horizontal Di Blog

Cara Mengganti Background Blog Otomatis

Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka

Bagaimana menurut Anda manarik bukan? Oke untuk menginstal widget ini caranya cukup mudah.
1. Login ke Blogger
2. Pilih Racangan
3. Tambah Widget Baru
4. Pilih HTML/Javascript
5. Copy-Paste kan kode di bawah ini :

<center><script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script>
Silahkan Pilih Warna Latar Blog ini Sesuai Dengan kenyamanan Yang Anda Suka <table border="1" width="660" height="20"> <tr> <td onclick="bgChange('#FFFFFF')" bgcolor="white"> <td onclick="bgChange('#000000')" bgcolor="#000000"> <td onclick="bgChange('#F0E68C')" bgcolor="#F0E68C">
<td onclick="bgChange('#E0FFFF')" bgcolor="#E0FFFF"> <td onclick="bgChange('#98FB98')" bgcolor="#98FB98"> <td onclick="bgChange('#B0E0E6')" bgcolor="#B0E0E6"> <td onclick="bgChange('#87CEFA')" bgcolor="#87CEFA"> <td onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9"> <td onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">
<td onclick="bgChange('#E6E6FA')" bgcolor="#E6E6FA"> <td onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">
</td></td></td></td></td></td></td></td></td></td></td></tr> </table>
<div class='clear'></div></center>

5. Silakan simpan dan lihat hasilnya!

Original Post:

READ MORE - Cara Mengganti Background Blog Otomatis

Cara Memasang Widget Headline News

Tertarik? Ikuti langkah-langkah berikut:

1. Login pada blog sobat
2. Tata Letak
3. Tambah Gadget
4. HTML/Javascript
5. copy kode di bawah ini:

<script type="text/javascript">
var hn_url_blog = "http://alamatblogsobat.blogspot.com";
var hn_jumlah_post = 8;
var hn_warna_latar = "#F5F5F5";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://www.geocities.ws/reggy/postnew.js">
</script>

Ket: ganti tulisan yang berwarna merah dengan alamat blog sobat
6. Simpan dan lihat hasilnya.

READ MORE - Cara Memasang Widget Headline News

Cara Memasang Widget Feedjit

Feedjit adalah situs penyedia widget live traffic otomatis dengan tidak dipungut biaya alias gratis!! Pasti sobat langsung masang kalau ada hal gratis wkwkwk...

Caranya mudah kok ikuti saja langkah - langkah di bawah ini:

1. Kunjungi situs Feedjit
2. Klik kota berwarna hijau bertuliskan Choose your Feedjit
3. Di halaman baru ada tiga pilihan pilih yang Free di paling kiri. klik Sign Up
4. Di halaman pengedit feedjitnya
5. Pilih warna, ukuran lebar widget, tinggi dan lain - lain
6. Di kotak Install Feedjit On pilih apakah sobat ingin memasang di Blogger atau yang lain
7. Klik Go!
8. Copy kode HTML nya dan pasang di blog sobat.
9. Selesai. Selamat mencoba...

READ MORE - Cara Memasang Widget Feedjit

Cara Memasang Meta Tag Di Setiap Halaman Blog

Sobat tertarik? Ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Cari kode <title><data:blog.pageTitle/></title>
5. Ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- berikut adalah Ini meta otomatis halaman utama -->
<title><data:blog.title/></title>
<meta expr:content='data:blog.title + &quot; Tutorial Blogspot | Games | Top rate.&quot;' name='description'/>
<meta expr:content='data:blog.title + &quot;, Tutorial Blogspot | Games | Top rate&quot;' name='keywords'/>
<b:else/>
<!-- Berikut adalah meta otomatis pada setiap halaman posting -->
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + &quot;, Tips n trick | Lirik lagu | Free template.&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Tips n trick | Lirik lagu | Free template&quot;' name='keywords'/>
</b:if>

Ket:
ganti tulisan yang berwarna orange dengan deskripsi blog sobat di halaman home
dan danti juga tulisan yang berwarna hijau dengan deskripsi blog sobat di halaman post
6. Simpan Template. Selamat mencoba.

READ MORE - Cara Memasang Meta Tag Di Setiap Halaman Blog

Cara Membuat Text Area

Text area itu apa sih? text area adalah sejenis kotak untuk memyimpan text / kode HTML agar bisa di copy secara langsung. Text area bisa di jadikan widget untuk menampilkan link exchange dan bisa juga di pasang di postingan. caranya gampang. copy saja kode dibawah ini:

<p align="center"><textarea name="code" rows="8" cols="30"> Letakkan text ataupun kode lainnya yang anda inginkan di sini </textarea></p>

Ket:
-Ganti tulisan yang berwarna kuning dengan text yang akdan anda tampilkan di text area
-anda bisa merubah ukuran text area tersebut dengan mengubah tulisan yang berwarna merah (rows itu untuk tinggi dan cols untuk lebar)

Good Luck...

READ MORE - Cara Membuat Text Area

Cara Membuat Efek Turun Salju Pada Blog

1. Login Blogger
2. Klik rancangan -- edit HTML -- centang pada Expand Template Widget
3. Cari kode <head>
4. Lalu masukkan kode dibawa ini ke atas kode <head>

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/vikry-Snow.js' type='text/javascript'/>

5. Simpan Templates.

Good Luck...

READ MORE - Cara Membuat Efek Turun Salju Pada Blog

Cara Membuat Efek Bintang Berjatuhan Dari Cursor

Mungkin efek ini sudah tidak asing lagi bagi kita, tapi kalau sobat-sobat tertarik untuk lebih mempercantik blog kita, mungkin tips ini patut unutk dicoba.

Ok langsung pada langkahnya :

1. login blog
2. Rancangan -- Edit HTML -- cari kode ]]></b:skin>

lalu copy kode dibawah ini dan taruh dibawah kode ]]></b:skin>

Untuk yang bintang berwarna Merah

<script src='http://vikrymadz.googlecode.com/files/Red.js' type='text/javascript'/>

Untuk yang bintang berwarna Biru

<script src='http://vikrymadz.googlecode.com/files/Blue.js' type='text/javascript'/>

3. simpan template.

Good Luck...

Sumber:

READ MORE - Cara Membuat Efek Bintang Berjatuhan Dari Cursor

Cara Memasang Permalink Di Bawah Postingan

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Expand template widget
5. Cari kode ]]></b:skin>
6. Copy kode di bawah ini dan paste di atas kode pada no 5

.permalink {border: 1px dotted #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

7. Setelah itu cari kode <div class='post-footer'>
8. Copy kode di bawah ini dan paste di atas kode pada no 7

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Sobat sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan sobat bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div></b:if>

9. Simpan Template dan lihat hasilnya

Good Luck...

READ MORE - Cara Memasang Permalink Di Bawah Postingan

Kode Warna HTML

READ MORE - Kode Warna HTML

Cara Memasang Read More Otomatis

Sedikit penjelasan, Read More adalah istilah lain 'Jump Break' yang berfungsi menyingkat post kita pada halaman Home Page agar tidak terlalu panjang. Cara masang Read More otomatis ikuti langkah - langkah di bawah ini..

1. Login pada blog anda
2. Rancangan
3. Edit HTML
4. Download dulu templatenya biar gak terjadi hal - hal yang tidak diinginkan dengan cara mengklik Download Template Lengkap
5. Centang kotak kecil di ujung script box Expand Widget Template
6. Cari kode </head> untuk mempermudah pencarian klik ctrl + f pada keyboard
7. Pastekan kode dibawah ini di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

8. Selanjutnya cari kode <data:post.body/>
9. Ganti kode <data:post.body/> dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

10. Simpan Template

Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

READ MORE - Cara Memasang Read More Otomatis

Cara Memasang Headline News Di Blog

Menambah Headline News di blogspot itu topik kita hari ini. sesuai dengan namanya widget headline news, ini adalah widget dengan bantuan javascript untuk menampilkan judul serta link artikel-artike terbaru dari update blog anda.

Nah untuk membuat nya sangat lah mudah anda cukup copy paste kode dibawah ini ke dalam elemen widget yang baru, Letakkan widget terserah anda.

<script type="text/javascript">
var hn_url_blog = "http://NAMABLOGANDA.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#333333";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://recent.googlecode.com/files/headlinenews.txt">
</script>

• kemudian simpan dan lihat hasilnya.

Catatan, perhatikan warna pada kode di atas :
hn_url_blog = URL blog anda (warna merah)
hn_jumlah-post = jumlah judul artikel yang di tampilkan (warna biru)
hn_warna_latar = kode warna untuk latar belakang headline news (hijau)
hn_warna-garis = kode warna garis bingkai (kuning)
hn-posisi = menentukan posisi letak headline news (biru)

Selamat mencoba.........

READ MORE - Cara Memasang Headline News Di Blog

Cara Memasang Tombol Back To Top

Tombol ini memiliki fungsi sebagai alternatif agar pengunjung blog tidak capek menggeser scroll ke atas.
Untuk memasangnya:

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Kemudian cari kode </body> dan pasang kode di bawah ini di atas kode </body>

<!-- Bact to top designed by syilpid - http://www.tips-fb.com/ -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i15.photobucket.com/albums/a398/syilpid/Backtotopmerah.png'/></a>

5. Simpan template

Ket:
Tulisan yang berwarna merah bisa anda ganti dengan alamat gambar anda sendiri
Good Luck...

READ MORE - Cara Memasang Tombol Back To Top

Cara Membuat Kotak Iklan (Banner Ads)

Pemasangan kotak iklan ini bermanfaat jika ada orang yang ingin memasang iklan di blog sobat. Si Advertiser itu akan mengklik iklan ini dan akan dialihkan ke halaman detail tentang pemasangan iklan di blog sobat. Oke deh, cara memasangnya sederhana kok sobat. Lihat di bawah:

1. Login pada blog sobat
2. Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin>
5. Pasang kode di bawah ini di atas kode ]]></b:skin>

#banner-ads {
margin: 0px;
padding: 5px;
text-align: center;
}
#banner-ads img {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #c0c0c0;
}
#banner-ads img:hover {
margin: 0px 4px 4px 0px;
padding: 3px;
text-align: center;
border: 1px solid #333;
}

Selanjutnya, untuk pemasangan iklan ikuti langkah ini:
1. Masuk ke halaman Tata Letak
2. Tambah Gadget
3. HTML/Javascript
4. Pasang kode ini:

<div id="banner-ads">

<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="Url gambar sobat"/></a>
<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="Url gambar sobat"/></a>
<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="Url gambar sobat"/></a>
<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="Url gambar sobat"/></a>

</div>

5. Simpan dan lihat hasilnya

Keterangan:
- Untuk kode yang berwarna Merah ganti dengan alamat iklan yang ditujur
- Untuk kode yang berwarna Biru, bisa sobat ganti dengan gambar sobat sendiri
- Untuk penambahan iklan sobat hanya tinggal mengcopy kode:

<a target="_blank" href="http://blog-anda.blogspot.com"><img
border="0" alt="ads" src="Url gambar sobat"/></a>

Di atas "</div>"

Good Luck...

Sumber:

READ MORE - Cara Membuat Kotak Iklan (Banner Ads)

Cara Memasang Widget Google Translate Bendera

Cara Memasang Widget Google Translate Bendera.

1. Login ke blog anda
2. Rancangan
3. Tambah gadget (letak widgetnya terserah anda)
4. HTML/javascript
5. Copy pastekan kode dibawah ini:

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgArHg6N6JpOQzyiefDhjShpaFL2fsVhOGM38qYRUzfTdJmCywhTVrXDP72rS-HW0IiyTQ6PAEz5KvTNLrCHr4h51nZLEuty48kM4ng9MKb5wIXutsyim99p9ifygLZoIvO98Wd6eIzhpk/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Q_bBTvRFO-PwmVpO05jmeC-CdmGkjA3kWE5SX1vo6GUmUUBkiIIUnyUv5zjcutmQka0TM0jFtlLfXXycMpDJScVmm6Mzf6Cm63CrZW1doSy2mAIQ_81sYcIj-JQ3XMWi5fZpX4pc87s/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvhY6G6S2biLM8RPxrUyNUpk6LN2mwtTqJnABY3T4PfTDuvMxZtZXIBRxmkKI0Sw_fp25wSUnXHqTEt7zvzBke36CGJwUFyDAMc6Zlv1N4dFh45oQp2xqE4IUvTIs_4yNidwFYt6ulAfJ/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyTx4790Abp5SvLqxfvhiA-j5aBAWycXf9CgvYKzcpdkM7TCvJ6Ox64i7AxWneBvXz1_ujZIvYuBeCKx3kl3Xh0emCqPkd8FeWwW3US9yWA429V_P9BqSh4ZkBSaiQ3RdaZ5ruH6ZWlTJ/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMzphw4gtUM0k2QUhg-eofkXOyjoVaGniXVMvvdHfywMHZKH3P8Tw2y8aCIW_NSMj6zLCIE3tTTUQCk_a-HgkNO_QV-M5Vpn5M_nPxDXETa-KdhjFXJTGURfnDKd66zZe-WUPBl8eHHKU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVWSTwNwdtKpGgrOUvST9S_Jme1Qv4bUTYB6a1L6ZOWJeqbRziu37m-wFQylBRC0m3hfXv_At6Pz0u_Eq_PwzrSZpvaNEcwJTj36LgAf39zdw1HRlrQqmFOAzz15H02VOb38F5a56zqHg/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOx1MISTQIA5wACzdxOS3okSjDNGf-fuhAHxN-PQqCpUQNEiRi5GB431XmaAnQ0WF89ZktPP1UTaKqhf4CGebwW2Yj-OlxJH0gwFQGJ8NQT9wLKHbtm3aRyPYpBs-wAK6F0pV-pqc7as/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgexZqL7DzsmXV8JQGtxePpxCrJ4Ktva1SaYlAWfiIO6ZN0LeNlYCuHqv_x14YkbXqPna5BMU6TKQAXCiQuht-qAHTiIJItBVqQZC7G_AMsSxefAddqCXTb-7SOhr5-YJa-m63sIp4ehDg/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXyQnXdMyU-QztihyphenhyphenY_rPSi41v0h66XNt7YBECuxMI-FMIcNdhyphenhyphenZMWfgQNdjRI89alibvr-KFE45QEJGOdJvec7ijQ0mM9QQSGglDhIL-PYQNbu4lQPf56ZuQ1ZnnMX44Fw5dUYpQ517nb/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-X1FcJaRb8yrzZTys8weci9nur3nw-hFyYioHcQVJdCCVxYxREv5SN2NIdmhTPg6qXl8USjIY5imPAaMDQnosFscP1SIzA6C4QaR2vL7IlZ28ZAlLIp3zx0aRVE2-8nffI1kzVqYojMY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4vVK_39GgsA2LTZJ1SsEd2UWQn8pPwYNrdBQow4FBckcrlTF2p7Aesiazyd1wF9NFUFsaLAN6G4Zmj2HJvb27Ym2JioOwmS_9hBT4uALVa6RGdfwieTfNeaVuDhvqyWWsQ11YTfZfEVM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9WRn3Em6Vu0DqDADr2RlHIFB68jLEYEpfo1lAgQ2TeDcCXKwirjgVlyiu2O_A3vwjmo_yKbGjwKD43wZfeZNElG5npp0c_wX37GZ7e0d0Z7_pfm_hN9-BH5SG_WyZ2g8LoLY_ZRH0FI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style=”font-size:10px;margin:8px 0px 3px 0px”> by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>

6. Simpan dan lihat hasilnya.. Good Luck...

READ MORE - Cara Memasang Widget Google Translate Bendera

Cara Membuat Scroll Box Pada Blog

kali ini kita akan membahas tentang bagaimna cara membuat scroll box pada blog. Scroll box ini bisa dipakai untuk menyimpan kode HTML, gambar, link dll. Caranyapun mudah sekali, copy saja kode di bawah ini untuk di pasang pada widget HTML/Javasript pada blog anda:

<div style="overflow:auto;width:100px;height:50px;padding:10px;border:1px solid #eee">

Isi Scroll Box

</div>

Keterangan:
-Tulisan berwarna ungu adalah isi scrollboxnya
-Anda bisa merububah tinggi kotak dengan mengubah tulisan yang berwarna merah
-Anda bisa mengubah lebar kotak dengan mengubah tulisan yang berwarna biru
-Jika anda tidak ingin kotaknya terlihat anda bisa merubahnya yaitu tulisan yang berwarna orange (tulisan #eee adalah warna kotaknya) kode warna disini..
-Selamat mencoba

READ MORE - Cara Membuat Scroll Box Pada Blog

Cara Membuat Related Post Di Bawah Post

Related post ini dilengkapi dengan fitur Scrolling. Fungsi dari widget ini adalah agar pengunjung dapat melihat artikel lainnya dari blog sobat. Berikut langkah-langkah memasang related post di bawah post:

1. login pada blog sobat
2. Rancangan
3. Edit HTML
4. Cari kode ]]</b:skin>
5. Copy kode di bawah ini dan pastekan di atas kode pada no 4 tadi:

/* Related post
----------------------------------- */
.rbbox{border: 1px solid #D8D8D8;
padding: 5px;
background-color: #E0F8E0;
-moz-border-radius:5px;
margin:5px;}
.rbbox:hover{background-color: #EFFBEF;}

6. Cari kode <p><data:post.body/></p>
7. Copy kode di bawah ini dan pastekan di bawah kode pada no 6

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0;
padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/><script type='text/javascript'>var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 50;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type='text/javascript'>RelPost();</script>
</div>
</b:if>

Tulisan yang berwarna merah bisa sobat ganti
8. Simpan Template

Selesai dan Lihat hasilnya

Good Luck...

READ MORE - Cara Membuat Related Post Di Bawah Post

Cara Membuat 3 Kolom Di Atas Footer

Cara membuat 3 kolom di atas footer. Mungkin pemasangan widget di sidebar sobat sudah penuh. Nah, alangkah baiknya untuk memasang 3 kolom di atas footer ini, yaitu seperti saya. Jadi sobat bisa memasang widget di 3 kolom ini. Cara memasangnya cukup mudah kok sobat, ikuti langkah - langkah di bawah ini ok?

1. Login pada blog sobat
2. Langsung ke halaman Template kemudian Edit HTML
3. Expand Template Widget
4. Cari kode ]]></b:skin> letakkan kode di bawah ini di atas kode tersebut:

#footer-bottom {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#left-bottom {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#center-bottom {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#right-bottom{
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

5. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut:

<div id='footer-bottom'>
<b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
</b:section>
</div>

6. Simpan dan lihat hasilnya

Keterangan:
Kode yang berwarna merah adalah ukuran masing - masing kolom, bisa sobat ganti dengan kemauan sobat sendiri
Kode yang berwarna biru adalah warna background nya bisa sobat ganti dengan kemauan sobat sendiri. Klik Disini untuk mengecek kode warna.

READ MORE - Cara Membuat 3 Kolom Di Atas Footer

Cara Membuat Breadcrumb SEO Friendly Di Blog

Berikut contoh Navigasi Breadcrumb:

Perhatikan tulisan Earn Free Money dan Tips Blog dipisahkan dengan tanda koma, itu karena Postinga Blog memiliki dua Kategori atau label. Sebanyak apa pun label dalam satu artikel selalu akan dipisahkan dengan tanda koma.

Jika Sobat tertarik untuk Memasang Navigasi Breadcrumb ini silahkan ikuti tutorial Membuat Navigasi Breadcrumb SEO Friendly Berikut:

1. Loggin Blog - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode <div class='post hentry'>
3. Copy Kode berikut dan Paste tepat dibawah kode <div class='post hentry'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Your Are Here</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-uISShoQIqoU4jjQSER0vuZVkBRclgZ_XukFTD6M_kG8_-WACLUwmtnd1u0xEJWjD_b7EsDOOCETQrH1aI7fD1HhzlN5h6xicjapK_NreQHlJ8uJeKFMZqahyphenhyphenO-Lmptof6N9EwHvSOE/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
<span class='Apple-style-span' style='font-family: Verdana, sans-serif;'>Browse</span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb-uISShoQIqoU4jjQSER0vuZVkBRclgZ_XukFTD6M_kG8_-WACLUwmtnd1u0xEJWjD_b7EsDOOCETQrH1aI7fD1HhzlN5h6xicjapK_NreQHlJ8uJeKFMZqahyphenhyphenO-Lmptof6N9EwHvSOE/s1600/kangsalman+crumb.gif'/> <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
&#187; Archives for <data:blog.pageName/>
</div>
</b:if>

Keterangan:
-Sobat bisa mengganti tulisan yang berwarna merah dengan tulisan yang anda suka.

4. Apabila Sobat ingin menambahkan Kotak (Border) pada tampilan Breadcrum, silahkan Copy kode dibawawah ini, paste kode tepat di atas kode ]]></b:skin>:

.breadcrumbs {
padding:8px 0px 10px 5px;
margin: 0px 0px 5px 0px;
font-size:88%;
border:1px double
#e6e4e3;
}

5. Simpan dan lihat hasilnya.

READ MORE - Cara Membuat Breadcrumb SEO Friendly Di Blog

Cara Membuat Efek Zoom Pada Gambar Di Blog

Sulitkah Membuat Efek Zoom pada Gambar di blog? Tidak. Justru sangat mudah. Semudah memasang kancing baju loh. wkwk

Penting : Untuk berjaga-jaga blog anda akan kacau ketika menerapkan tips Membuat Efek Zoom pada Gambar di blog ini maka saya mewajibkan anda untuk memback up data template anda terlebih dahulu.

Baiklah berikut tipsnya :

1. Login ke blogger.com
2. Lalu klik Tata Letak/Rancangan/Design ( tergantung setting bahasa blogspot anda
3. Klik Edit HTML, jangan lupa centang pada bagian Expand Template Widget.
4. Cari kode ]]></b:skin>, gunakan shortcut keyboard Ctrl + F untuk lebih mudah mencarinya.
5. Jika anda sudah menemukannya, masukkan kode CSS berikut ini tepat di atas kode nomor 4 tadi

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }

6. Simpan Template anda. Sekarang coba lihat perubahannya.

Good Luck...

READ MORE - Cara Membuat Efek Zoom Pada Gambar Di Blog

Cara Merubah Tampilan Kursor Pada Blog

Tips ini ternyata bisa juga diterapkan ke blogspot atau ke blog WordPress. Yang jelas tidak akan memberatkan blog anda kok. Cara meletakkannyapun mudah. Bisa di side bar kanan, kiri atau footer. Yang tayang nanti tidak di side bar tersebut. Oke langsung ke pokok masalah yaitu Merubah Cursor pada blog. Berikut caranya :

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Elemen Laman/Tata Letak/Design.
4. Klik Tambah Gedget/add gadget.
5. Pilih HTML/Javascript.
6. Copy dan pastekan script dibawah ini ke dalam elemen HTML/Javascript tadi.

<style type=”text/css”>
body {
cursor:url(“http://i1003.photobucket.com/albums/af158/robotjapan/Kursor.png“)
,default}
</style>

7. Terakhir klik Save atau Simpan

Tampilan kursor blog bisa anda ganti dengan beberapa image berikut ini. Ganti http://i1003.photobucket.com/albums/af158/robotjapan/Kursor.png pada kode di atas dengan kode berikut ini :

http://i771.photobucket.com/albums/xx357/cebol_01/Kursor.png

http://i886.photobucket.com/albums/ac63/AdiSangPemimpi/kursor.png

http://i34.photobucket.com/albums/d132/JuL14_ok/pinkbutterflies.gif

http://i425.photobucket.com/albums/pp332/hippmibjkt/sym455.jpg

http://i340.photobucket.com/albums/o350/tomrat2212/emon.gif

http://i872.photobucket.com/albums/ab288/bebe_munya/kursor2.gif

Good Luck...

Sumber:

READ MORE - Cara Merubah Tampilan Kursor Pada Blog

Memasang Widget Sexy Sosial Bookmarks

Cara memasang widget sosial sharing bookmarks, sebagai aksesoris bisa juga sebagai tool untuk mempermudah dalam berbagi artikel di jejaring sosial..

Untuk cara membuatnya ikuti langkah-langkah berikut :
1.Login blogger
2.Rancangan, Edit Html
3.Centang menu Expand Template Widget
4.Simpan kode berikut diatas kode </head>

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
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(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTtPPOtcFFKMQyKacs75Dee4q74pAzXcLIrZSR6cc9ahu2vvQ7MYEzEsxz6fswAAmqm2O_CnGfVZPU0jBhhA7FAtg2f3FyCHUHeu0gW2rXBIUkyWiKjCBIK9bj-I61zvttq6V0wlCDMA/s1600/sexybookmarksbuttons.png&#39;) 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>

5. Simpan kode berikut dibawah kode <data:post.body/>

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/Indahnya-Berbagi' title='Subscribe to RSS' rel='nofollow'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>

6.Simpan Template.
Good Luck...

READ MORE - Memasang Widget Sexy Sosial Bookmarks

Magic Line Navigation Menu

Cara membuatnya :

1.Login blogger
2.Rancangan, Edit Html, Cari kode ]]></b:skin>
3.Dan Simpan kode berikut diatas kode nomor 2 :

/*----------------
Magic line navigation
--------------------------*/
.nav-wrapline{
background:-moz-linear-gradient(top, #051547, #888, #051547);
-moz-box-shadow:0px 2px 2px #111;
width: 500px;
border: solid 1px #FFF;
height: 30px;
-moz-border-radius:10px;
-khtml-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}

.group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both; height: 0;
margin: 50px auto;
background-color: rgba(0,0,0,0.6);
border-top: 2px solid #FFF;
border-bottom: 2px solid #FFF;
width: 500px;
}
*:first-child+html .group {
zoom: 1;
} /* IE7 */
#magic-line {
position: absolute; bottom: -2px; left: 0;
width: 100px; height: 2px;
background: #fe4902;
}

#magic {
margin: 0 auto;
list-style: none;
position: relative;
width: 500px;
}
#magic li {
display: inline;

}
#magic li a {
position: relative; z-index: 200;
color: #bbb; font-size: 14px;
display: block; float: left;
padding: 6px 10px 4px 10px;
text-decoration: none;
text-transform: uppercase;
}
#magic li a:hover {
color: white;
}
#magic #magic-line-two {
position: absolute; top: 0;
left: 0; width: 100px; background: rgba(220, 133, 5, 0.9); z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-left: solid 1px #fff;
border-right: solid 1px #fff; }

.current_page_item a, .current_page_item_two a {
color: white !important;
}

4.dan simpan kode ini diatas </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://kangdadang.googlecode.com/files/jcolor.js"></script>

<script type="text/javascript">
$(function(){

var $el, leftPos, newWidth,
$mainNav2 = $("#magic");

$mainNav2.append("<li id='magic-line-two'></li>");

var $magicLineTwo = $("#magic-line-two");

$magicLineTwo
.width($(".current_page_item_two").width())
.height($mainNav2.height())
.css("left", $(".current_page_item_two a").position().left)
.data("origLeft", $(".current_page_item_two a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current_page_item_two a").attr("rel"));

$("#magic li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr("rel")
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
});

</script>

5. Simpan template.
6.terakhir cara pemanggilannya: Tata Letak-HTML/Script

<div class="nav-wrapline">

<ul class="group" id="magic">
<li style=""><a rel="#fe4902" href="#">Home</a></li>
<li style=""><a rel="rgba(50,69,12,0.9)" href="#">Mobile Download</a></li>
<li style=""><a rel="rgba(113,116,0,0.9)" href="#">About</a></li>

<li style="" class="current_page_item_two"><a rel="rgba(220,133,5,0.9)" href="#">Facebook</a></li>
<li style=""><a rel="rgba(236,85,25,0.9)" href="#">Twitter</a></li>

</ul>
</div>

6.Simpan dan lihat perubahannya. Selamat mencoba...

sumber:

READ MORE - Magic Line Navigation Menu

Mempercantik Blockquote

Blockquote adalah kutipan dari artikel yang dianggap penting atau memiliki arti khusus. Namun pada prakteknya, ada juga yang menggunakan blockquote untuk menuliskan tag HTML, kode CSS atau script pada artikel-artikel tips blogging. Membuat blockquote yang bagus dan keren tentu saja sangat penting artinya untuk mempercantik tampilan dari kutipan artikel yang kita buat.

Letak kode blockquote dalam template biasanya ditandai dengan kode .post blockquote { atau kode .post-body blockquote {. Dibawah ini ada beberapa contoh blockquote berikut kode css-nya yang dapat sobat tempatkan pada template blog anda.

Kode blockquote 1 :
.post blockquote {
margin: 1em 3em; padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; } blockquote p { margin: 0; }

Kode blockquote 2 :
.post blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: #e0ffff;
border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

Kode blockquote 3 :
.post blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png)
no-repeat left top;
border-left: 10px solid #666666;
}

Kode blockquote 4 :
.post blockquote { background:#c5c5c5
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvf7O_exE0Fs9A270qj35EwIwTI9ZsPBG7lN2KtiYJSWI4G2gWqgcDgo8fTMRmYdsV29QwBq6F6h-JjbaQlFljBVWzvPJaTRIJAmzjYVd98-mI4Ml1Qq3fUvwyCKiELQitJA9CWFuQos3X/s320/blockquote.png) no-repeat top left;
padding:10px 20px 10px 45px;
font-style:italic;
border:1px solid #000000;}

Kode blockquote 5 :
.post blockquote { background: #F3F3F1
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-k_waCfqao8tbxUAs2ZRAjXKl2G7XFZVZ5ORQVUk6UkHsUtn3CjsCjav7Ct_F87xYcMnATLmYFJOdPACgboxHz68u2-gI0Q2iEH-KofTxtQfUvm_OzDImKBqKnDUwmyiSLoy-Bf_j82I/s1600/comma-side-orange1.gif) ;
background-position:; background-repeat:repeat-y;
margin: 0 20px; padding: 20px 20px 10px 45px;
font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; }
.post blockquote p { margin: 0; padding-top: 10px; }


Cara mempercantik blockquote pada template adalah sebagai berikut :
1. Login pada dashboard blogger anda.
2. Pilih Rancangan > Edit HTML, centang Expand widget template.
3. Carilah kode ]]></b:skin> pada template anda.
4. Copy kode css blockquote diatas dan paste tepat diatas kode ]]></b:skin>.
5. Save template anda.

Untuk cara membuat blockquote pada postingan sangat mudah, cara manualnya adalah teks yang dikutip harus diapit dengan kode blockquote pembuka <blockquote> dan kode blockquote penutup <blockquote>. Trus kalo mau yang otomatis, pada saat berada dalam panel postingan blogger tinggal diblok saja teks yang mau dijadikan blockquote kemudian klik simbol quotation atau tanda petik, maka teks yang dijadikan blockquote akan di-indentasi (menjorok kedalam) secara otomatis.

Original Post

READ MORE - Mempercantik Blockquote

Cara Mempercantik Komentar Blogger

Silahkan lihat beberapa contoh berikut:

Menggunakan background warna:

Menggunakan background image/ gambar:

Nah jika tertarik mencoba memodifikasi formulir komentar seperti beberapa contoh diatas silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat- pada dasbor- Klik Tata Letak- Edit HTML
2. Centang kotak kecil disamping kalimat "Expand Template Widget" di sudut kanan atas.
3. Cari kode seperti dibawah ini (Tips: - Tekan Ctrl + f untuk memudahkan pencarian)

<div class='comment-form'>

4.Ganti dengan kode berikut:

<div id='ib-form'>

5. Tambahkan kode CSS berikut diatas ]]></b:skin>

#ib-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCB2JnHjg9-EAXqj2Wc15R1TPBxkFmSxLz94xuZi5eATHGLs4UycVDehtDxkOIA7XsXytpug0f_k4-2bQJT2k1QvF0bkPBarDuSRSAL6KJ8Lf8jMIRC4jIrxgT2-2-uE4TRlQMSpir-jtv/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:95%;height:250px;}
#ib-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ25Y68dCOyWKPxE7-ccZaap12LLwCLOFO8OIqn-Q0chomJmf_jUkYemqVZ6nNpsFOOP_3ZRrWuOZ7aYmt_4Gi_HTLP2i1u3Z2rg8gXtFCWklxAh331NzbZ0jP4EVKDfIYvaMT-JXHsQcC/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;}
#ib-form a{
color:#7EB2AC;}

Sedikit penjelasan tentang bagian-bagian penting pada kode CSS di atas untuk membantu sobat menyesuaikan tampilan formulir komentar sesuai dengan keinginan sobat:

Ada tiga bidang penting, yaitu:
#ib-form iframe
#ib-form iframe: hover
#ib-form a

Berikut adalah rincian untuk setiap bagian dari kode CSS diatas
1. Kustomisasi Untuk Mode Aktif

#ib-form iframe
Bagian ini adalah tampilan formulir komentar blogger ketika mouse atau crusor tidak berada diatasnya.
* # FFFFFF: Ini adalah warna latar belakang. Sobat dapat mengubahnya dengan menggunakan bantuan tabel kode warna disini

* Url: Ini adalah URL untuk gambar latar belakang. Pada kode diatas saya gunakan image bayi, silahkan ganti dengan image sobat

* Border 7px solid # C7C7C7: Border dengan garis penuh setebal 7px, kalau ingin garis border putus-putus ganti solid dengan kata dotted, kode warna silahkan pakai bantuan tabel kode warna disini.

* padding: jarak antara border dan teks

* font:normal 12pt "ms sans serif", Arial; jenis huruf dan ukuran besar huruf teks "komentar sebagai"

* width:95%;height:250px; Lebar dan tinggi formulir komentar

2. Kustomisasi Untuk Mouse Hover Mode
Sekarang mari kita membahas properti CSS untuk tampilan form ketika kursor mouse melayang di atasnya, atau ketika crusor menyentuh formulir komentar
#ib-form iframe: hover
Hal ini hampir sama untuk penjelasan latar belakang dan batas seperti yang kita bahas sebelumnya. Pengaturan kedua sifat CSS akan berpengaruh hanya gambar kedua yang muncul pada mouse.


3. Kustomisasi Untuk Link Warna
#ib-form a

Bagian ini mendefinisikan warna dari kedua link -> "Sign out" dan "Berlangganan melalui email". Link-link ini muncul di sudut kanan bawah setiap Formulir Komentar Blogger.
warna: ini menentukan warna link. Mengatur warna link sebagai kontras dengan warna latar belakang.

Oke selesai ngedit jangan lupa simpan template. Eits... jangan lupa juga komentarnya!?

Original Post

READ MORE - Cara Mempercantik Komentar Blogger