Tips Tricks 888

Home All post with category Tips and Tricks Blogspot

Membuat Thumbnail Gallery CSS3

<div dir="ltr" style="text-align: left;" trbidi="on">
Setelah Googling sana sini eh ternyata saya dapatkan script css3 buatan Mas Andes Risky Nugroho tentang cara menerapkannya
Sumbernya disini saya lihat <a href="http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html" target="_blank">Membuat Thumbnail Gallery CSS3</a><br />
<br />
Adapun caranya adalah sebagai berikut :<br />
<br />
Copy kan saja script ini di postingan blogs sobat dengan mengganti gambar yang ada di dalamnya<br />
Login ke Blogger Anda<br />
Copykan Kode ini kedalam Postingan blogs sobat :<br />
<br />
<br />
<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;">
<style>
#thumbgallery { overflow: visible; }
#thumbgallery ul li { list-style:none; display:inline-table; padding:5px; }
#thumbgallery ul li .pic{
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
opacity:0; visibility:hidden; position:absolute; border:1px solid #52e052;
-webkit-box-shadow:#272229 2px 2px 10px;
-moz-box-shadow:#272229 2px 2px 10px;
filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
box-shadow:#272229 2px 2px 10px;}
#thumbgallery ul li .mini:hover { cursor:pointer; }
#thumbgallery ul li:hover .pic { width:550px; height:350px; opacity:1; visibility:visible; float:right; }
</style><br />
<br />
<div id="thumbgallery"><br />
<ul>
<li><br />
<img alt="" class="mini" src="http://4.bp.blogspot.com/-c7OrTNmHvP0/U6TzLvMUM8I/AAAAAAAAFVI/3bLENyG3h8k/s1600/vanessa08_a5b5244.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://4.bp.blogspot.com/-c7OrTNmHvP0/U6TzLvMUM8I/AAAAAAAAFVI/3bLENyG3h8k/s1600/vanessa08_a5b5244.jpg" /><br />
<br />
</li>
<li><br />
<img alt="" class="mini" src="http://1.bp.blogspot.com/-x03PqouwEEs/U6TzMWO1BTI/AAAAAAAAFVQ/jE6VoMuxnXM/s1600/vanessa13_a61ddc3.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://1.bp.blogspot.com/-x03PqouwEEs/U6TzMWO1BTI/AAAAAAAAFVQ/jE6VoMuxnXM/s1600/vanessa13_a61ddc3.jpg" /><br />
<br />
</li>
<li><br />
<img alt="" class="mini" src="http://3.bp.blogspot.com/-6boOwfgMDmM/U6TzHgALryI/AAAAAAAAFUw/fwo5ooNivvU/s1600/vanessa-sc1_9ccd449.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://3.bp.blogspot.com/-6boOwfgMDmM/U6TzHgALryI/AAAAAAAAFUw/fwo5ooNivvU/s1600/vanessa-sc1_9ccd449.jpg" /><br />
<br />
</li>
<li><br />
<img alt="" class="mini" src="http://3.bp.blogspot.com/-ri3pvq0luzQ/U6TzIS0Z7wI/AAAAAAAAFU0/us1L7MQX5Wc/s1600/vanessa-sc2_9d2fd27.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://3.bp.blogspot.com/-ri3pvq0luzQ/U6TzIS0Z7wI/AAAAAAAAFU0/us1L7MQX5Wc/s1600/vanessa-sc2_9d2fd27.jpg" /><br />
<br />
</li>
<li><br />
<img alt="" class="mini" src="http://1.bp.blogspot.com/-Zhgrvi9Uvls/U6TzGpf3cGI/AAAAAAAAFUo/S9tRcIad4zE/s1600/vanessa-sc3_9cdc2d9.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://1.bp.blogspot.com/-Zhgrvi9Uvls/U6TzGpf3cGI/AAAAAAAAFUo/S9tRcIad4zE/s1600/vanessa-sc3_9cdc2d9.jpg" /><br />
<br />
</li>
<li><br />
<img alt="" class="mini" src="http://4.bp.blogspot.com/-2tb3x8i-73Y/U6TzJtALPII/AAAAAAAAFVA/0J83GaEMuww/s1600/vanessa-sc5_9cbcaf9.jpg" height="100" width="100" />
<img alt="" class="pic" src="http://4.bp.blogspot.com/-2tb3x8i-73Y/U6TzJtALPII/AAAAAAAAFVA/0J83GaEMuww/s1600/vanessa-sc5_9cbcaf9.jpg" /><br />
<br />
</li>
</ul><br />
</div>

</div>
Note:<br />
Ganti URL gambar diatas dengan gambar sobat<br />
<br />
Sumber dan DEMO nya ada disini :<br />
<br />
http://mas-andes.blogspot.com/2013/06/membuat-thumbnail-gallery-photo-css3-di.html  </div>

Setelah Googling sana sini eh ternyata saya dapatkan script css3 buatan Mas Andes Risky Nugroho tentang cara menerapkannya Sumbernya disini...

Kotak Script di Postingan Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCczwWus0lcJmDBEI5xmfOGmXAfBxaw4ImJBLuLbiK1Dz1_PtjhyA2TDjKs-hXcyI48SlSiul8i-fLZEWcqiV4YMoBMJ1f0FlPkoAhEwvR1U27b6sOJB30K11-mxHjTHklebCLWu2AC0oC/s1600/Untitled-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="129" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCczwWus0lcJmDBEI5xmfOGmXAfBxaw4ImJBLuLbiK1Dz1_PtjhyA2TDjKs-hXcyI48SlSiul8i-fLZEWcqiV4YMoBMJ1f0FlPkoAhEwvR1U27b6sOJB30K11-mxHjTHklebCLWu2AC0oC/s1600/Untitled-1.jpg" width="200" /></a></div>
<br />
Langsung Saja Copy Script ini di BLOG SOBAT | <b>Cara Kotak Script di Postingan Blog</b><br />
<b> </b>

<br />
<div style="background-color: #57aa52; border: 2px #610B38 dashed; padding: 10px; t-align: left;">
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini</div>

</div>
<b> </b>
<br />
<div style="background-color: #c2c2c2; border: 2px #1B1A76 dotted; padding: 10px; text-align: left;">
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>

</div>
<b> </b>
<br />
<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;">
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>

</div>
<b> </b>
<br />
<div style="background-color: #d5839f; border: 2px #006400 inset; padding: 10px; text-align: left;">
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>

</div>
<b> </b>
<br />
<div style="background-color: #c2c2c2; border: 2px #006400 ridge; padding: 10px; text-align: left;">
<div style="border: 2px #006400 ridge; padding: 10px;
background-color:#c2c2c2; text-align: left;"> Kode Script
Anda Disini</div>

</div>
<b> </b>
<br />
<div style="background-color: #d9da81; border: 2px #5f200e solid; padding: 10px; text-align: left;">
<div style="border: 2px #5f200e solid; padding: 10px;
background-color: #d9da81; text-align: left;">Kode Script
Anda Disini</div>

</div>
<b> </b>
</div>

Langsung Saja Copy Script ini di BLOG SOBAT | Cara Kotak Script di Postingan Blog <div style="border: 2px #610B38 dashed...

Cara Membuat Iklan Teks Google Adsense Seperti Blognya Kang Ismet

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj9ddXclk4HNfWcSLSc20BJORHyof2hZFJdddbhxCFQ9G3zF5KaTzMy4X5tLtFGyn3cY5D0FEzK4G-laoUCqQt0vPRqPK80TjGEIqDu9mlhW1to4WJRxRDM3BQMUH6umMUe3l_ZPFB_hC/s1600/iklan.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj9ddXclk4HNfWcSLSc20BJORHyof2hZFJdddbhxCFQ9G3zF5KaTzMy4X5tLtFGyn3cY5D0FEzK4G-laoUCqQt0vPRqPK80TjGEIqDu9mlhW1to4WJRxRDM3BQMUH6umMUe3l_ZPFB_hC/s1600/iklan.jpg" width="187" /></a></div>
Setelah Melihat <a href="http://blog.kangismet.net/2013/11/membuat-iklan-teks-ala-google-adsense.html" target="_blank">Blognya Kang Ismet</a> , ada yang menarik dari blog tersebut yang dapat saya pelajari khusunya <b>Cara Membuat Iklan Teks Google Adsense Seperti Blognya Kang Ismet</b><br />
<br />
Oke Langsung Saja Kita Buat Bagaimana Caranya :<br />
<br />
1. Masuk ke blogger.<br />
2. Dari dasbor => template => edit html.<br />
3. Cari kode </head>.<br />
4. Salin kode dibawah ini letakkan diatasnya.<br />
<br />
<div style="background-color: #57aa52; border: 2px #610B38 dashed; padding: 10px; t-align: left;">
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

</div>
<br />
5. Kemudian cari kembali kode ]]></b:skin> dan letakkan diatasnya .<br />
<br />
<div style="background-color: #57aa52; border: 2px #610B38 dashed; padding: 10px; t-align: left;">
/* Iklan Teks
----------------------------------------------- */<br />
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}<br />
<br />
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}<br />
<br />
#iklan-teks h2.active {
  display: none;
}<br />
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

</div>
<br />
6. Simpan kode ini pada Widget HTML / JavaScript<br />
<br />
<div style="background-color: #57aa52; border: 2px #610B38 dashed; padding: 10px; t-align: left;">
<div id="iklan-teks"><br />
<br />
<div data-header="Blogger Tutorial" style="border-top:none"><br />
<span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a><br />
<a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a><br />
<span class='isi'>Blogger Tutorials and Free Blogger Templates.</span><br />
<a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJETdMbDVTqbm28FGS1jkVQkAuBFIaSszl9TnazuKcnM4Q54S2MI7LpUTW2aq21aLbQPq-JDTIPP_K3WkrxZLE5dAw42DPgpC9pv9PAO_ei3u5I6lpesb_NpSHeUsBRRy7uUckje26jzA/s1600/icon_chevron_white.png'/></a>
        </span>
    </div><br />
<br />
<br />
<div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJETdMbDVTqbm28FGS1jkVQkAuBFIaSszl9TnazuKcnM4Q54S2MI7LpUTW2aq21aLbQPq-JDTIPP_K3WkrxZLE5dAw42DPgpC9pv9PAO_ei3u5I6lpesb_NpSHeUsBRRy7uUckje26jzA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div><br />
<br />
<br />
 <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJETdMbDVTqbm28FGS1jkVQkAuBFIaSszl9TnazuKcnM4Q54S2MI7LpUTW2aq21aLbQPq-JDTIPP_K3WkrxZLE5dAw42DPgpC9pv9PAO_ei3u5I6lpesb_NpSHeUsBRRy7uUckje26jzA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div><br />
<br />
<br />
<div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJETdMbDVTqbm28FGS1jkVQkAuBFIaSszl9TnazuKcnM4Q54S2MI7LpUTW2aq21aLbQPq-JDTIPP_K3WkrxZLE5dAw42DPgpC9pv9PAO_ei3u5I6lpesb_NpSHeUsBRRy7uUckje26jzA/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div><br />
<br />
<br />
<span class='info-iklan'>Iklan oleh Kang Ismet</span>
    <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1QIsr-7jck544o7G-cvYCDeIWEoejTJ5K5JVzIjCXxkRuc-tyUZZ4vun1SxhC5KUESQe0eXo3PY9gNBuQDfbepZe_fCZmd7YWoagDztA4qBaIuv-SSeNT0gVGPz2K4RrIvZVSWNle98/s1600/info-iklan.png'/></a></span>     
</div>

</div>
<br />
Note : Ganti Link dan Judul Link yang ada di HTML/JAVA SCRIPT

</div>

Setelah Melihat Blognya Kang Ismet , ada yang menarik dari blog tersebut yang dapat saya pelajari khusunya Cara Membuat Iklan Teks Googl...

Cara Memasang Iklan Kiri Kanan Blog Dengan Tombol Close

<div dir="ltr" style="text-align: left;" trbidi="on">
Langkahnya adalah Sebagai Berikut :<br />
<br />
Klik Layout >> Add widget >> Html/Java Script<br />
<br />
Dan tempatkan code dibawah ini didalamnya :<br />
<br />
<span style="color: blue;"> <script type='text/javascript'>

$(document).ready(function() {

$('img#closed').click(function(){

$('#btm_banner').hide(90);

});

</script>

</script><script type="text/javascript">

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script> </span><br />
<span style="color: blue;"> </span><br />
<span style="color: blue;"><div id="teaser2" style="width:autopx; height:0; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

</span><br />
<br />
 <span style="color: red;">LETAKKAN IKLAN ANDA DISINI 160X600 </span><br />
<br />
<span style="color: blue;"> </span><br />
<span style="color: blue;"></div> </span><br />
<span style="color: blue;"> </span><br />
<br />
<span style="color: blue;">  </span><br />
<span style="color: blue;"><div id="teaser3" style="width:autopx; height:600; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

<div><a id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHit8e4G5-2wYhiTMbmyfRTbhKjYVGATPMyPuA2o585DHtoR040MbCTXQ0ZVuJJ2Scji6S6W1Qyrx4OgSIuwaSsEc76vHw74_nVu2GhKN-JmOCkxkj53DwkYC3InPfF8imy6md3OVOAKkT/s1600/close3.png' alt='close' title='close button'/></center></a></div> </span><br />
<span style="color: blue;"> </span><br />
<br />
<span style="color: red;">LETAKKAN IKLAN ANDA DISINI 160X600 </span><br />
<br />
<span style="color: blue;"> </span><br />
<span style="color: blue;"></div> </span><br />
<span style="color: blue;"></span><br />
<br />
<span style="color: blue;"><span style="color: black;">Selesai.</span></span><br />
<br />
<span style="color: blue;"><span style="color: black;">Note :</span></span><br />
<span style="color: blue;"><span style="color: black;">Letakkan Script/Iklan Anda di Tulisan <span style="color: red;">Yang bewarna MERAH</span> </span> </span></div>

Langkahnya adalah Sebagai Berikut : Klik Layout >> Add widget >> Html/Java Script Dan tempatkan code dibawah ini didalamnya...

Cara Meletakkan "Link to This Post" dibawah Blogger Post

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7-lyYzy5j3KVGetB5z9LZrV6yX_P-Pf-I7etYaYpcttmYL7uc_U6avxpOucS6Abt38yh52EJGH9fzXHhHNtkVuSI66Xp6D2SSgOy9gfHVVxCZQ6KDLo9DBFnjDOff30ZENYK-AD0afQn/s1600/Link+to+This+post.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja7-lyYzy5j3KVGetB5z9LZrV6yX_P-Pf-I7etYaYpcttmYL7uc_U6avxpOucS6Abt38yh52EJGH9fzXHhHNtkVuSI66Xp6D2SSgOy9gfHVVxCZQ6KDLo9DBFnjDOff30ZENYK-AD0afQn/s1600/Link+to+This+post.jpg" width="320" /></a></div>
Salah satu cara yang mudah untuk mendapatkan link back adalah dengan meletakkan <b>Link To This Post</b> di Blogger Sobat, ini sangat berguna untuk dan sangat informatif bagi para Blogger dan dapat di Copy paste di Blogspot Sobat<br />
<br />
Caranya adalah sebagai berikut :<br />
<br />
Pergi ke Template Sobat ->> Edit HTML ->> Kemudian cari <span style="color: blue;"><data:post.body/></span><br />
dan letakkan dibawahnya<br />
<br />
 Codenya adalah:<br />
<br />
<span style="color: blue;"><b:if cond='data:blog.pageType == &quot;item&quot;'>
<p>Do you like this post? Please link back to this article by copying one of the codes below.</p>
URL:
<textarea id="url" onclick="this.focus();this.select()" readonly="readonly" rows="2" style="background:#eee; height: 2.6em; width: 100%;" title="Click to highlight"><data:post.url/></textarea>
HTML link code:
<textarea id="HTML-code" onclick="this.focus();this.select()" readonly="readonly" rows="2" style="background:#eee; height: 2.6em; width: 100%;" title="Click to highlight">&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>
BB (forum) link code:
<textarea id="BB-code" onclick="this.focus();this.select()" readonly="readonly" rows="2" style="background:#eee; height: 2.6em; width: 100%;" title="Click to highlight">[url=<data:post.url/>]<data:post.title/>[/url]</textarea>
</b:if></span></div>

Salah satu cara yang mudah untuk mendapatkan link back adalah dengan meletakkan Link To This Post di Blogger Sobat, ini sangat berguna u...

Create a Spoiler SHOW-HIDE EFFECT

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtn-sX2PHLAIPXK4sn2_9oxMvY8zr_JK-Xx46oFIoNi0HdiYDP97xkaum3-G3f8RCh0dP2-REyLgBUMXMQGuz6slva-Nr4qtkDPlCl5L-CDClrYe9WnhTdttVxy95kfTYmvytxX9cRPCg/s1600/membuat+Spoiler.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmtn-sX2PHLAIPXK4sn2_9oxMvY8zr_JK-Xx46oFIoNi0HdiYDP97xkaum3-G3f8RCh0dP2-REyLgBUMXMQGuz6slva-Nr4qtkDPlCl5L-CDClrYe9WnhTdttVxy95kfTYmvytxX9cRPCg/s1600/membuat+Spoiler.PNG" width="200" /></a></div>
Letakkan Konten Gambar atau Tulisan di Hidden/Sembunyikan di Phrase <b>HIDDEN CONTENT HERE </b><br />
 HTML nya adalah :<br />
<br />
<span style="color: blue;">VISIBLE CONTENT HERE
<div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE 
</div> 
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button></span><br />
<br />
<span style="color: blue;"><span style="color: black;">Contoh : klik button :</span></span><br />
<span style="color: blue;"></span><br />
<pre>
</pre>

VISIBLE CONTENT HERE
<div id="spoiler" style="display:none"> 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Rl9MGiN_E_UZt60cmxH21N2PNRqLY3KaT9s3zo7EC-wK3KinCCiWuz9box4E3RP40kd7Dn7emrbke6SDw91-bx-Mq7z1AoAG64hz1_RRIUB5RMpbsV69rODlOZVlpeBLQBHJn_N138Wt/s1600/membuat+Spoiler.PNG" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Rl9MGiN_E_UZt60cmxH21N2PNRqLY3KaT9s3zo7EC-wK3KinCCiWuz9box4E3RP40kd7Dn7emrbke6SDw91-bx-Mq7z1AoAG64hz1_RRIUB5RMpbsV69rODlOZVlpeBLQBHJn_N138Wt/s320/membuat+Spoiler.PNG" /></a>
</div> 
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
</div>

Letakkan Konten Gambar atau Tulisan di Hidden/Sembunyikan di Phrase HIDDEN CONTENT HERE HTML nya adalah : VISIBLE CONTENT HERE <di...

Menu Breadcrumb Metro Style

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzqtxn3rLNQoi9cakwmv-lOSKgwnCT5Qrt2eVNzWjhK_RbyPLGRaWWYJYfxVy9kfCK7R2uNmFoa-_98mXwkHTEatjoE20Dh8AnPi1fM2bfb7JaMv0IUYs5mhhoNHhlby-PjzU7f63SW_c/s1600/Metro+breadcrumb.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzqtxn3rLNQoi9cakwmv-lOSKgwnCT5Qrt2eVNzWjhK_RbyPLGRaWWYJYfxVy9kfCK7R2uNmFoa-_98mXwkHTEatjoE20Dh8AnPi1fM2bfb7JaMv0IUYs5mhhoNHhlby-PjzU7f63SW_c/s320/Metro+breadcrumb.JPG" width="194" /></a></div>
cara pemasangan  <b>Menu Breadcrumb Metro Style</b> di blog, masuk Edit HTML >> Expand Template.<br />
Kemudian masukkan kode css dibawah ini sebelum kode <span style="color: blue;">]]><b:skin></span><br />
<br />
CSS nya adalah :<br />
#vn-brcmb{
  background: #02ab68;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:&#39;Oswald&#39;, Arial, Helvetica, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#vn-brcmb  li{
  float: left;
}
#vn-brcmb  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ff8c00;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#vn-brcmb  li:first-child a{
  padding-left: 1em;
}
#vn-brcmb  a:hover{
  background: #ff8c00;
}
#vn-brcmb  a::after,
#vn-brcmb  a::before{
  content: &quot;&quot;;
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#vn-brcmb a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#vn-brcmb  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#vn-brcmb  a:hover::after{
  border-left-color: #ff8c00;
}
#vn-brcmb  .current,
#vn-brcmb  .current:hover{
  font-weight: bold;
  background: none;
}
#vn-brcmb  .current::after,
#vn-brcmb .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#vn-brcmb .current,
#vn-brcmb .current:hover{
  font-weight: normal;
  background: none;
}
#vn-brcmb .current::after,
#vn-brcmb .current::before{
  content: normal; 
}<br />
<br />
<br />
Kemudian cari Code <span style="color: blue;"><div class='blog-posts hfeed'> </span><br />
<br />
Dan copykan di bawahnya :<br />
<br />
<span style="color: blue;"><b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<ul id='vn-brcmb'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>
</span></i>
</div>
</div>

cara pemasangan Menu Breadcrumb Metro Style di blog, masuk Edit HTML >> Expand Template. Kemudian masukkan kode css dibawah ini ...

Permalink blogspot yang cantik untuk meningkatkan seo on page blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) . Contohnya bisa sobat lihat<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzI-m5rb46HgjyAONIO9qtQIYTYiHce5lXQuP28p5ioF7pqD-oVoT9eAQyjDtXUN4nY7dAJv9ukwAxKYHhpNbKsKj_vxSJyKrjNjaMaxZZ2Eh7KPESTPVf8YY5TWCFlaNUFgjJpTnF6sLW/s1600/permalink.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzI-m5rb46HgjyAONIO9qtQIYTYiHce5lXQuP28p5ioF7pqD-oVoT9eAQyjDtXUN4nY7dAJv9ukwAxKYHhpNbKsKj_vxSJyKrjNjaMaxZZ2Eh7KPESTPVf8YY5TWCFlaNUFgjJpTnF6sLW/s640/permalink.jpg" width="640" /></a></div>
<br />
Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.<br />
<br />
<b>Cara Membuat Permanen Link di Blog</b><br />
<br />
1. Login ke akun blog sobat.<br />
<br />
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget<br />
<br />
3. Letakkan kode berikut di atas kode <span style="color: blue;">]]></b:skin> </span><br />
<br />
<span style="color: blue;"> .admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
} </span><br />
<br />
 4. Cari kode <span style="color: blue;"><data:post.body/></span> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.<br />
<br />
 <span style="color: blue;">
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Romi Fransisca' src='</span><span style="color: red; font-size: xx-small;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKUoOJ6-JePNWGHNLEsrliYNjRW4stmH8f-r1D5gij0uFIO7WMJYAhYQbNH9-ymaCsu6LGHo6FErfM62SH3_t1cDojU6HkEIkCAwy1pzy4CRSRpqGSM9BTG1mpvWELKdiNHo7BZY8_7m7/s1600/168557_615786695102730_1951750680_n.jpg</span><span style="color: blue;">'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='</span><span style="color: magenta;">50</span><span style="color: blue;">' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='</span><span style="color: magenta;">1</span><span style="color: blue;">'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='</span><a href="http://tipstricks888.blogspot.com/2013/07/permalink-blogspot-yang-cantik-untuk.html">http://tipstricks888.blogspot.com/2013/07/permalink-blogspot-yang-cantik-untuk.html</a><span style="color: blue;">' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if></span><br />
<span style="color: blue;"> </span><br />
<br />
 5. Klik save dan lihat hasilnya.<br />
<br />
Tambahan :
Ganti kode yang berwarna<span style="color: blue;"> </span><span style="color: red;">merah</span><span style="color: blue;"> </span>dengan Url foto / gambar milik sobat
Sesuaikan angka yang berwarna<span style="color: red;"> </span><span style="color: magenta;">pink</span><span style="color: red;"> </span>dengan ukuran template blog sobat ( ukuran textarea )
</div>

Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi...

Cara Mempercepat Loading Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
Dengan memasang script ini di blog ini di blog anda, loading blog memang sedikit lebih ringan karena script ini akan membantu meringankan gambar-gambar yang ada di blog sobat sehingga loading nya lebih cepat.<br />
<br />
<b>Dengan loading blog yang cepat, tentu akan membuat pengunjung senang dan betah begitu juga dengan sobat sendiri. Bagi yang tertarik untuk memasang nya, silahkan ikuti langkah-langkah di bawah. Berikut cara menambah kecepatan loading blog dengan script Load sistem - Membuat loading blog cepat</b> -<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwMk6OfV4lii0nKoQ0SGU9TCA_G0_DwjbCUz4QHdTB27cy5suMEFpOF3c7EBCnPmTZHO0Bq4WuLEFJrhxVI1teBuo9yuaeCVX_qki5lsF9zeULRKsgzrE3cwsq1W1BWmrL8DOGQ9DxQUj-/s259/images.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwMk6OfV4lii0nKoQ0SGU9TCA_G0_DwjbCUz4QHdTB27cy5suMEFpOF3c7EBCnPmTZHO0Bq4WuLEFJrhxVI1teBuo9yuaeCVX_qki5lsF9zeULRKsgzrE3cwsq1W1BWmrL8DOGQ9DxQUj-/s259/images.jpg" /></a></div>
<br />
Cara loading blog Cepat<br />
<br />
1. Login ke akun Blogger anda.<br />
<br />
2. Klik Template 
>> Edit HTML 
>> Lanjutkan (jangan lupa centang Expand Template Widget).<br />
<br />
3. Cari kode<span style="color: red;">  </head></span> di template sobat (Untuk mempermudah pencarian, gunakan Ctrl+F atau      F3).<br />
<br />
4. Letakkan kode di bawah ini tepat di atas kode nomor 3 tadi :<br />
<br />
<span style="color: blue;"><script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://amronbadriza.googlecode.com/files/Lazyload%20Script.js' type='text/javascript'/>
<script>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIdzm5PItbYm3ZI-2Wyl8DeTohAkL7JgW6dZhpJ6mgmo8TzcJPDKvzMMw4l0vA-N62Jj-Y8Ud0dwkJLdWRxQUkqf3C6eDZCdJExS_GK859AMoOPSdKHh0VzobaVWG-uN9Vc9LtoQGN-0/s1600/loading.png&quot;,threshold : 200});
});
</script> </span><br />
<br />
 5. save/simpan template anda<br />
<br />
 Kalau sebagian blog post anda tidak jalan hapus saja kode ini :<br />
<br />
<span style="color: blue;"><script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></span><span style="color: red;"> </span><br />
<br />
 NB: <b>Loadsytem script ini tidak bekerja pada semua blog. Ada kalanya blog yang dipasangi memang bisa bertambah cepat loading nya, tapi ada kala nya juga malah bertambah berat. Oleh karena itu sobat perlu mencoba dan mengamati nya dulu. Bila memang bisa bermanfaat buat blog sobat berarti silahkan dipasang, tapi kalau malah menjadikan loading blog tambah berat silahkan dihapus saja.</b><br />
<br />
<span style="font-size: xx-small;"> Sumber : http://www.seowaps.com/2013/04/cara-mempercepat-loading-blog_20.html</span></div>

Dengan memasang script ini di blog ini di blog anda, loading blog memang sedikit lebih ringan karena script ini akan membantu meringankan g...

Membuat Halaman Muka Blog Tersendiri (Tanpa Posting)

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRGr-4sqGlhSf5BZvKGUxcYJzZ4aQauh-0M9SeEpjU62ikHSIH8tfMqDoLIrDo6gLIuTwVBk4rttrSG7YTPeOj5MDx-yzXmOZj6WiLboDmotq-cv45Wu9d-hy-nTpCBaRdKy36_edqtGGy/s400/making-homepage-on-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRGr-4sqGlhSf5BZvKGUxcYJzZ4aQauh-0M9SeEpjU62ikHSIH8tfMqDoLIrDo6gLIuTwVBk4rttrSG7YTPeOj5MDx-yzXmOZj6WiLboDmotq-cv45Wu9d-hy-nTpCBaRdKy36_edqtGGy/s320/making-homepage-on-blogger.jpg" width="320" /></a></div>
<br />
<br />
Caranya adalah sebagai berikut :<br />
<br />
 Log in ke <a href="http://blogger.com/" target="_blank">blogger.com</a><br />
<br />
 Masuk ke menu template dan klik edit html

<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDB7ikAqVogRURxOXGA3vPok-2WLAYmTC2lN9UQJ6jf-Ow0wBmi8e9LqO7Ls147ZI7A_YkhLsBwJr3m0prjkfSgn5Ls8yzIER4aW4wNibjW69twULKqQxXX7zJHQ6ApHjzrQeuj35hFyRj/s433/blogger-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDB7ikAqVogRURxOXGA3vPok-2WLAYmTC2lN9UQJ6jf-Ow0wBmi8e9LqO7Ls147ZI7A_YkhLsBwJr3m0prjkfSgn5Ls8yzIER4aW4wNibjW69twULKqQxXX7zJHQ6ApHjzrQeuj35hFyRj/s433/blogger-edit-html.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Cari kode dibawah ini :<br />
<br />
<span style="color: magenta;"><b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section> </span><br />
<br />
 Tepat di atas kode tersebut, letakkan kode ini: 
<br />
<br />
<span style="color: blue;"><b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/> </span><br />
<br />
 dan di bawahnya, letakkan kode ini:<br />
<br />
 <span style="color: blue;"></b:if> </span><br />
<br />
 hasilnya seperti ini :<br />
<br />
<span style="color: magenta;"> </span><span style="color: blue;"><b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:section class='main' id='homepage'></b:section>
<b:else/></span>
    <span style="color: magenta;"><b:section class='main' id='main' showaddelement='no'>
        <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section></span>
<span style="color: blue;"></b:if> </span><br />
<br />
Simpan template<br />
<br />
 Gambarnya seperti dibawah ini :

<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjGoGh7-aAvZUl9odOmBw0pg2r0C7QkGv5RzHoSbiXG6iQSn9KSiwU8XrpzJ0wanCSlWm_PK1f7Jc9WlipC4xIRhyphenhyphenINYRa8hiKz4dExzYxG3yE98mP5mMC2eA6M3BUEu0XbfwstZtDF8H/s609/tambah-gadget-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjGoGh7-aAvZUl9odOmBw0pg2r0C7QkGv5RzHoSbiXG6iQSn9KSiwU8XrpzJ0wanCSlWm_PK1f7Jc9WlipC4xIRhyphenhyphenINYRa8hiKz4dExzYxG3yE98mP5mMC2eA6M3BUEu0XbfwstZtDF8H/s609/tambah-gadget-blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
Sumber : <a href="http://www.dte.web.id/2012/03/tip-membuat-halaman-muka-blog.html#.Uc0YUjuBmRY" style="text-align: left;"><span style="font-size: xx-small;">http://www.dte.web.id/2012/03/tip-membuat-halaman-muka-blog.html#.Uc0YUjuBmRY</span></a></div>
</div>

Caranya adalah sebagai berikut : Log in ke blogger.com Masuk ke menu template dan klik edit html Cari kode dibawah ini : ...

Efek Zoom yang Bikin Pusing Postingan Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOyXAKZjHvZtXik1E_bEtrgRtXUO1xvaeqXYHEQXSapQZcXf18tGVkHirINpRXWuFDB43cHmq9FrwTuJQlSsKuT2IZiz79SgVUjCseppOhYxVQr5qmEJQ4_2i_smBf_DvF_ql2dKDR0SN/s1600/cooltext798191185.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXOyXAKZjHvZtXik1E_bEtrgRtXUO1xvaeqXYHEQXSapQZcXf18tGVkHirINpRXWuFDB43cHmq9FrwTuJQlSsKuT2IZiz79SgVUjCseppOhYxVQr5qmEJQ4_2i_smBf_DvF_ql2dKDR0SN/s1600/cooltext798191185.png" /></a></div>
Silahkan sobat ikuti tutorial di bawah ini ...!<br />
<br />
1.Login dulu dong ke <a href="http://blogspot.com/" target="_blank">Blogger</a><br />
<br />

2.Trus klik Edit HTMl<br />
<br />
 3.Cari kode <span style="color: #274e13;">]]></b:skin></span> dan pastekan kode dibawah ini diatasnya<br />
<br />
 4. lihat hasilnya OK KHANNNNNNNN.............<br />
<br />
 Kode HTML nya :<br />
<br />
<span style="color: red;"> .post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}} </span><br />
<br />
 5. Selesai BRO........</div>

Silahkan sobat ikuti tutorial di bawah ini ...! 1.Login dulu dong ke Blogger 2.Trus klik Edit HTMl 3.Cari kode ]]></b:ski...

Banner 468 x 60