Code Efek zoom pada gambar postigan blog saat di sentuh mouse

Cara pasang code css efek zom pada gambar postingan,Gambar tersebut akan memunculkan efek zoom atomatis saat mouse di arahkan pada gambar (img).

Codenya seperti brikut:

1.login ke akun blogger anda
2.Masuk dhosbor blog anda
3.Klik edit html
4.Masukan code css berikut tepat di atas ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

5.Kemudian save template anda.
6.setelah tersimpan silahkan buka blog anda dan arahkan mouse ke gambar posting di homepage anda jika tidak ada efek zoom mungkin ada kesalahan pada penerapan code css,Silahkan ulangi kembali. Semoga sukses

11:07 PM | 0 komentar |

Pasang iklan di kiri atau di kanan blogspot

Banyak cara untuk memasang iklan pada blog kita salah satunya trik berikut ini,Iklan yang cocok untuk ini adalah ikan yang berukuran 120 x 600,Diantaranya iklan kliksaya,mini barner kumpul blogger,adsensecamp,google adsense,dan lain sebagainya,Khususnya iklan adsense selama ini saya pakai trik berikut tidak terbukti adanya pelangaran Tos dari adsense support itu berati trik berikut efektif juga untuk iklan adsense ( GA ),Danjika anda merasa ragu sebaiknya jangan di pakai trik berikut kalau takut iklan GA anda terbanned.

Pasang code di bawah ini tepat di atas code ]]></b:skin>

#iklanku{position:fixed;_position:absolute; top:0px;right:0px;clip:inherit;_top:expression(documentElement.scrollTop+document.documentElement.clientheiht-this.clientheight);_leftexpression(document.documentelement.scrollleft+documen.documenelement.clientwidth-offsetwidth);}

Selanjutnya pasang kode berikut ini tepat di atas code </body>

<div id='iklanku'>
Pasang script iklan anda di sini
</div>

Keterangan: Iklan yang di sarankan berukuran 120 x 600 dalam bentuk barnner gambar dengan format GIF,JPG,PNG,Dan jika anda memasangnya di kanan atau di kiri silahkan ganti positon RIGHT/LEFT yang saya kasih tanda merah

Sekian dulu tutorial pasang iklan di top right/top left kali ini semoga anda bisa menerapkan code di atas,Jika ada keluhan tenyang code di atas silahkan comment di bawah ini semoga saya bisa membantu.Terima kasih

2:54 PM | 0 komentar |

Ceck kualitas template blog dan template blog error validation

Buat sobat blogger yang ingin ceck kualitas blog sobat atau ceck error pada template yang anda pakai,bisa di cek di sini,Pada website ini kita bisa cek berbagai element pada blog kita hanya dengan satu kali tekan saja,semple dan kualitas template sudah bisa langsung di ketahui.

Bukan hanya kualitas template saja yang bisa di ceck di antaranya:

1.Kualitas Template
2.W3C Html Validator
3.W3C Css Validator
4.Index Blog by google,Bing
5.Back link blog
6.Trafict Analistic
7.Speed Blog
8.Dan Lain-Lain

Itu saja sedikit ulasan tentang isi blog ini,Jika anda ingin ceck berbagai isi blog anda bisa ceck di sini ( http://www.seoanalyser.net/ ),Selain 8 content di atas anda bisa juga ceck isi blog yang covas atau tidak,Jika isi blog sobat isinya covas maka akan muncul alamat alamat blog yang atau tulisan blog sobat yang sama dg bloa orang lain,Itu kenapa blog sobat yang covas tidak langsung terindex google.

Sekian dulu cerita saya kali ini lain waktu akan saya lanjut lagi.Terima Kasih

1:53 PM | 0 komentar |

Css untuk menampilkan judul blog di hompage blog

Fungsi dari pada code Css di bawahini adalah untuk menampilkan "judul postiangan/entry saja"pada homepage blog atau halaman utama,jadi jika blog anda di pasang code ini maka halaman utama anda tidak ada file gambar/video yang anda posting melainkan hanya judul blog saja.

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3.Centang EXPAN WIDGET
3. Kemudian cari kode </head>
4.Copy code di bawah ini dansimpan code Css ini tepat di atas code </head>
5.Save tamplate anda dan lihat hasilnya

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.post-body{display:none;}
</b:if>
</b:if>
</style>

6:32 AM | 0 komentar |

Cara pasang tombol ( BACK TO TOP ) di blogspot

Buat anda yang mau pasang tombol back to top di bagian potter blog sobat bisa ikuti trik brikut ini...

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3.Centang EXPAN WIDGET
3. Kemudian cari kode </body>
4. Vaste code css di bawah ini tepat di atas code </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/BackToTop.js' type='text/javascript'/>
<!-- Back to top by tutorial-onlineku.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-l9TYQZNcgJnGIQcbcVcMO167Gn4Z3WehoHa8FZTQS2Z0x8wL6svH3EpUeeq3ZG266r2vkCO9tY6aRS6dEkN1hdbjL4kdt716TbU_VKEXyUjqrVEcL4HEuiUzTsmNMeX3_ChWNpJNTp_/s1600/navigate-up-icon.png'/></a>

Kemudian save tamplate anda dan lihat hasilnya...

5:53 AM | 0 komentar |

Cara bikin menu multi collom ( tiga collom )

Buat anda yang mau pasan menu multi collom untuk menghemat tempat pada homepage blog silahkan pakai trik berikut ini:

Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. Silahkan copy kode dibawah ini dan vaste di atas code </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6.Save tamplate anda
7.Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Kemudian save gadget dan lihat hasilnya.Silahkan ganti link yang saya kasih tanda merah..

5:15 AM | 0 komentar |

CSS untuk mempercantik tampilan wedget ( LABEL ) blogspot

Berikut adalah css untuk mempercantik tampilan wedget LABEL blogspot sepetri screenshot berikut ini.

Caranya sebagai berikut:

1.loggin ke akun blogger anda

2.Tambahkan wedget label dan save wedget anda

3.Klik Edit HTML

4.Cari code ]]</b:skin> Lalu copy code css di bawah ini dan vaste tepat di atas code ]]</b:skin>

5.Kemudian save tamplate anda

6.Kemudian lihat hasilnya.

#Label1 a{
	color:#333;
	padding:2px 8px;
	line-height:24px;
	margin:0 2px;
	background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiekLlTLLI0HdL3s7CIeaGgbD7aiHQhqJWLPW61Ki_E_-GoVztL63ai0PF_iOMwRHHYJnq-W2h6kJIkbJkhFpJJ2bioDGux3loi0XkM9Y20CzICNOMZtP12xi97OOsqJiY3mWytG91kOXY/s1600/bricks.png) center center repeat-x;
	border:1px solid #ddd;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	font-size:10px !important;
	text-decoration:none;}
	#Label1 a:hover{
	color:#666;
	background:none #fff;
	text-decoration:none;}

Sekian dulu tutorial kali ini semoga bisa membantu.

6:52 PM | 0 komentar |

Script SEO Smart Link Di Blogspot ( Optimalisasi Seo Postingan Blogspot )

SEO Smart Link ini merupakan teknik optimasi SEO yang berfungsi untuk mengubah setiap kata yang ditentunkan menjadi sebuah link. Script SEO smart link ini bekerja di setiap postingan kita, secarah otomatis akan mengubah kata yang telah di tentukan menjadi sebuah link yang telah di tentukan juga. Misalkan di blog ini saya gunakan kata kunci ERCIRE maka setiap postingan yang bertuliskan kata ( ERCIRE ) akan tertanamkan sebuah link dengan sendirinya.

1.Login ke blogger dengan ID anda. 

2.Klik Tata Letak. 

3.KLik tab Edit HTM/Rancangan. 

4.Cari code </body>

5.Copy code di bawah ini tepat di atas code </body> lalu simpan tamplate anda

<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>
function autoLink(){
    this.keywdHref = new Object();
    this.add = function(keyword, href){
        if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
        this.keywdHref[keyword] =  href;
    }
    this.createAnchor = function(){
        var objs = document.getElementsByTagName(&quot;div&quot;);
        for(var i=0; i&lt;objs.length; i++){
            var obj = objs[i];
            if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
                var content = obj.innerHTML;
                for(var keyword in this.keywdHref){
                    var href = this.keywdHref[keyword];
                    var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
                    obj.innerHTML = newstr;
                    content = newstr;
                }
            }
        }
    }
    this.startScript = function(){
        var onLoad = window.onload;
        window.onload = function(){
            if(onLoad){onLoad();}
            setTimeout(&quot;f.createAnchor()&quot;, 100);
        }
    }
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;Tutorial-Onlineku&quot;, &quot;http://tutorial-onlineku.blogspot.com/&quot;);
f.startScript();
</script></b:if>

KET:Silahkan ganti kata kunci ( ERCIRE ) dengan kata kunci yang sesuai dg tema blog sobat dan ganti juga alamat ( http://ercire.blogspot.com ) dg alamat blog sobat.

Terima kasih postingan kali ini dan semoga bisa membantu menaikan trafict link blog anda.

12:47 AM | 0 komentar |

Script Slider Entri Populer ( slider entri popular )

Script slider entri populer atau posting popular
berikut cara pasangnya

==== DEMO ====

1.Login ke blogger dengan ID anda. 
2.Klik Tata Letak. 
3.KLik tab Edit HTM/Rancangan. 
4.Klik tambah gadget Entri pupuler lalu save
5.Klik Tambah gadget pilih HTML/javascrip
6.Copy code di bawah ini lalu vaste pada gatget HTML/javascrip dan simpan wedget anda

<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
 
}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}




#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;  
}

#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Sehingga posisinya seperti screensho berikut ini:

Sekian semoga bisa membantu,Jika kurang jelas silahkan cooment pada form comment di bawah ini....

6:29 PM | 0 komentar |

Cara pasang Alert Di Blog (kata sambutan sebelum masuk web)

Bagi anda yang mau pasag kata sambutan sebelum pengunjung masuk ke blog anda dg mengunakan Scrip Alert Spt screen shot berikut:

Caranya loggin ke dhosbor blog anda klik edit HTML-centang expand wedget-Copy scrip di bawah ini lalu simpan kode tersebut di atas Code </HEAD>

<script language='JavaScript'>alert("Selamat datang di bolg tutorial-onlineku,semoga anda senang dengan artikel-artikel tutorial-onlineku,silahkan lanjut browsing anda untuk berselancar pada artikel tutorial-onlineku-KLIK OK untuk melanjutkan browsing anda")</script>

Silah kan ganti tuliasan yang warna merah pada script di atas sesuai keingginan anda,semoga artikel ini bisa membantu anda dan saya uncapkan terima kasih

4:26 PM | 0 komentar |