Cara Mengatasi Munculnya "Google Code Subversion Repository" Pada Blog

Hai gan kali ini say akan membagikan bagaimana Cara Mengatasi Munculnya "Google Code Subversion Repository" Pada Blog. Ini merupakan pengalaman yang saya dapatkan selama berkecimpung di dunia maya ya salah satunya ngeblog, munculnya masah ini disebabkan karena saya ingin Membuat Widget Headline News pada blog saya, dan ini tidak berhasil dikarenakan mungkin ada kesalahan pada kode htmlnya.Oleh sebab itu saya selalu direbetkan dengan munculnya pesan: A username and password are being requested by http://copycat91.googlecode.com. The site says: "Google Code Subversion Repository" 

 

Tentu saja munculnya pesan seperti ini sangat mengganggu kenyamanan pengunjung yang pada akhirnya dihawatirkan akan membuat jengkel dan enggan membuka kembali blog yang pernah dikunjunginya. Hal yang sama mungkin juga dirasakan oleh para pemilik blog itu sendiri. Karena dengan munculnya pesan tersebut, pemilik blog juga khawatir para pengunjung akan mengabaikan blognya. Sehingga pengunjung akan menurun. 

Hal inilah yang menjadi kehawatiran saya. Untuk itu saya berusaha sekuat tenaga, mencari penyebab munculnya pesan tersebut saat memasuki blog yang saya miliki. Dalam hati saya bertanya, Apakah pesan tersebut dapat dihilangkan, terus terang saya tidak ingin gara-gara munculnya pesan tersebut pengunjung akan meninggalkan blog saya. 

Beberapa cara sudah kami tempuh, mulai dari bertanya pada teman, mengisi User name dan passwood dengan email maupun blog yang saya miliki, menghapus tambahan fasilitas yang kami masukkan melalui tambah gadget di pengaturan (Tata letak; red) sampai saya cari di website yang muncul di kotak dialog saat memasuki blog http://copycat91.googlecode.com tetap saja pesan tersebut masih muncul. 

Meskipun demikian, kami tetap tidak putus asa. kami terus berusaha agar pesan tersebut hilang dan tidak muncul lagi. Alhamdulillah akhirnya usaha yang saya lakukan tidak sia-sia. Betapa senangnya, saat kami menghapus sisa fasilitas tambahan HTML/JavaScript yang tidak berfungsi yang kami masukkan melalui tambah gadget di pengaturan (Tata letak; red) pesan tersebut tidak muncul lagi. Dan sekarang blog saya sudah terbebas dari pesan: A username and password are being requested by http://copycat91.googlecode.com. The site says: "Google Code Subversion Repository" 

Mungkin teman-teman ada yang mengalami hal seperti ini, pengalaman ini mungkin dapat bermanfaat. Anda tidak perlu lagi menghapus seluruh fasilitas tambah gadget di Pengaturan (Tata letak). Anda cari saja fasilitas tambah gadget “HTML/JavaScript” di pengaturan (Tata Letak) di blog anda yang tidak berfungsi, setelah itu hapus fasilitas tersebut dan coba lihat hasilnya. Selamat mencoba, Semoga Cara Mengatasi Munculnya "Google Code Subversion Repository" Pada Blog  bermanfaat. 

 http://majalah-gempur.blogspot.com

Membuat Comment Facebook di Blog

Kali ini kita akan membahas tentang Membuat comment facebook di blog, untuk membuat comment facebook ini tidak terlalu membutuhkan banyak script untuk membuatnya, ada cukup mengcopy script dibawah ini : 

 

  

    <b:if cond="data:blog.pageType == &quot;item&quot;"> <div id='fb-root'/>

    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

    <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

    </b:if>

• Template ==> Edit HTML ==> Expand Template Widget
• Cari kode <b:includable id='status-message'> dengan menekan ctrl + f 
• Diatas kode tersebut ada </b:includable> 
• Paste script tadi di atas kode </b:includable>
  
  Jika kode di atas gk ada di template anda,carilah kode yang hampir mirip dengan kode tersebut:) 
  
  Selamat mencoba..
  
  
  http://ramdani-tkr.blogspot.com

Cara Membuat Slide Show II

Hai Gan....!!!

Hari ini  share Cara Membuat Slide Show II, slide show ini sangat menarik dengan tampilan Thumbnail di samping kanan, Cara Membuat Slide Show II  bisa kita gunakan untuk menampilkan gambar dan link produk, jasa dari web/blog kita.
Ya kira-kira contohnya seperti gambar di bawah ini...:

Untuk membuatnya mari kita ikuti tutorial berikut ini :

1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML > Centang tanda Expand Widget Templates

3.    Cari kode ]]></b:skin>

4.     Copy code di bawah ini lalu pastekan tepat di bawah code ]]></b:skin>

<style type='text/css'>
/* Featured */
#featured{
  float:left;
  width:620px;
  height:292px;
  padding:0;
  margin-bottom:20px;
  position:relative;
  overflow:hidden;
}

#featured ul.ui-tabs-nav{
  position:absolute;
  top:0;
  left:415px;
  list-style:none;
  padding:0;
  margin:0;
  width:205px;
  height:292px;
  overflow:auto;
  overflow-x:hidden;
  z-index:100;
}

#featured ul.ui-tabs-nav li{
  padding:0 0 0 15px;
}

#featured ul.ui-tabs-nav li img{
  float:left;
  margin:0 5px 0 0;
  background:#fff;
  padding:3px;
  width:70px !important;
  height: 57px !important;
}

#featured ul.ui-tabs-nav li span{
  position:relative;
  left:0;
  top:13%;
  line-height:1.3em;
}

#featured li.ui-tabs-nav-item a{
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekti4-XRng38LBAY5TllYu5OzqFZXXP-GglI4pQxMKYRjwogbBjfOy7-ytt72-aqkLn8MDMmUFe_dA3G_CTSIaPwoSduOOY-0tDVq66M8qagcf7W8ulAwFzRkt-h03brZUQpY7DYaxKY/s1600/panel-bg.jpg) no-repeat;
  color:#fff;
  display:block;
  padding:5px;
  height:63px;
  text-decoration:none;
  line-height:1.2em;
  outline:none;
}

#featured li.ui-tabs-selected{
  background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9WrS-UFo3nGVMdG2ivzVBVu-UESgpzJ7jQLEx_UA45JH5u7x7UwNwC7-RN692kO47C-K5_oOW6eGAHAx6AaaDQ1IoZ_sTMVk4nVZ4FG4k4oC_Fhp7n-KxOHD6n7SGGnW0Gp4nD3H1a6Y/s1600/arrow.png&#39;) center left no-repeat;
  z-index:100;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a{
  background:#f8ac00;
  color:#333
}

#featured .ui-tabs-panel{
  width:430px;
  height:292px;
  position:relative;
  padding:0;
  margin:0;
  z-index:50;
}

#featured .ui-tabs-panel img{
  width:430px !important;
  height:290px !important;
  z-index:50;
}

#featured .ui-tabs-panel .info{
  position:absolute;
  padding:5px 10px;
  bottom:0;
  left:0;
  overflow:hidden;
  height:63px;
  width:410px;
  background:#111;
  opacity:0.85;
  filter:alpha(opacity=85);
  .width: 100%; /* IE */
  z-index:50;
}

#featured .info h3{
  font-size:20px;
  padding:0;
  margin:0;
  overflow:hidden
}

#featured .info p{
  margin:0;
  line-height:1.4em;
  color:#fff
}

#featured .info a, #featured .info a:visited{
  text-decoration:none;
  color:#f8ac00
}

#featured .info a:hover{
  text-decoration:underline;
}

#featured .ui-tabs-hide{
  display:none
}

</style>

5.    Kemudian cari lagi code <div id='main-wrapper'>

6.    Copy code dibawah ini dan pastekan tepat di bawah code <div id='main-wrapper'>

<!-- Featured Content Started -->
            <b:if cond='data:blog.url == data:blog.homepageUrl'>
            <b:if cond='data:blog.pageType != &quot;item&quot;'>
            <div id='featured'>
               <ul class='ui-tabs-nav'>
                   <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-4'><img alt='testing' height='60' src=' URL Gambar artikel 1 ' width='80'/><span>Judul Artikel 1</span></a></li>
                   <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-3'><img alt='testing' height='60' src=' URL Gambar artikel 2' width='80'/><span>Judul Artikel 2</span></a></li>
                   <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-2'><img alt='testing' height='60' src=' URL Gambar artikel 3' width='80'/><span>Judul Artikel 3</span></a></li>
                   <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-1'><img alt='testing' height='60' src='URL Gambar artikel 4' width='80'/><span>Judul Artikel 4</span></a></li>
               </ul>

               <!-- First Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt='testing' height='290' src=' URL Gambar artikel 1' width='430'/>
                   <div class='info'>
                       <h3><a href='URL Artikel 1'>Judul Artikel 1</a></h3>
                           <p>Isi keterangan artikel 1</p>
                   </div>
                </div>

               <!-- Second Content -->
                <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
                    <img alt='testing' height='290' src='URL Gambar artikel 2' width='430'/>
                    <div class='info'>
                       <h3><a href='URL Artikel 2'>Judul Artikel 2</a></h3>
                           <p>Isi keterangan artikel 2</p>
                    </div>
                </div>

                <!-- Third Content -->
               <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
                   <img alt='testing' height='290' src='URL Gambar artikel 3' width='430'/>
                   <div class='info'>
                      <h3><a href='URL Artikel 3'>Judul Artikel 3</a></h3>
                          <p>Isi keterangan artikel 3</p>
                   </div>
                </div>

                <!-- Fourth Content -->
               <div class='ui-tabs-panel' id='fragment-1' style=''>
                   <img alt='testing' height='290' src='URL Gambar artikel 4' width='430'/>
                   <div class='info'>
                       <h3><a href='URL Artikel 4'>Judul Artikel 4</a></h3>
                          <p>Isi keterangan artikel 4</p>
                   </div>
               </div>
            </div>
            </b:if>
            </b:if>
      <!-- Ends of Featured content-->
      <div class='clear'>&#160;</div>

7.    Cari code </body>

8.    Copy code di bawah ini dan pastekan sebelum code </body>

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

<script type='text/javascript'>
    $(document).ready(function(){
        $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 5000, true);
    });
</script>
<script src='http://dl.dropbox.com/u/14915514/JavaScript/codejquery-1.2.6.min.js' type='text/javascript'/>

9.    Ganti tulisan URL Gambar dengan gambar artikel

       Ganti tulisan Judul artikel dengan judul artikel yang ingin kamu tampilkan

       Ganti URL artikerl dengan url artikel yang ingin kamu tampilkan

10.    Setelah selesai simpan template dan lihat hasilnya.

Selamat Mencoba..!!!

http://www.tutorial-4u.com

Cara Membuat Slide Show Photo Pada Blog

Siang gan, kali ini saya mau posting tentang Cara Membuat Slide Show Photo Pada Blog. Widget ini terkesan lebih professional membuat saya ingin membagikan informasi ini pada teman-teman.
Bentuk fisiknya sobat bisa lihat di bawah ini..

Nah,ini juga salah satu penerapan bahasa jQuery pada blogger yang mana menampilkan slideshow pada gambar / image secara otomatis (jadi tak perlu menggunakan tombol geser,etc). Ok gan langsung saja K'TKP...

Pertama,sobat pergi ke pasar (hush!!!!) maksud kami pergi ke Dashboard > Tata Letak > Edit HTML > Contreng Expand Widget Templates

Kedua Cari kode <head> (gunakan Ctrl+F pada keyboard untuk memper mudah pencarian),setelah menemukan kode tersebut tepat dibawahnya letakkan kode script berikut ini: 

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

<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

//Execute the slideShow, set 6 seconds for each images
slideShow(3000);

});

function slideShow(speed) {

//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}

//]]>
</script>

<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

Ket: kode berwarna merah adalah kode yang sobat bisa ganti sesuai dengan keinginan untuk menentukan lebar,tinggi serta panjang dari gadget tersebut,sedang untuk yang lain sobat otak-atik aja sendiri ya :D

Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:

<ul class="slideshow">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv30osWk-BSECk9l8l4kX7Yu-XF2ZekpzDrPx6hSqg3eVEtm68uiTcesDQV-FwPX2xSKUKqCUS-zzc_KHI93J0BEo8_tO4xvwXeXaDdbpTPdEiFBkn9GW4pnVAz_ZM7RZzOEu838hf63M/s1600/1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv30osWk-BSECk9l8l4kX7Yu-XF2ZekpzDrPx6hSqg3eVEtm68uiTcesDQV-FwPX2xSKUKqCUS-zzc_KHI93J0BEo8_tO4xvwXeXaDdbpTPdEiFBkn9GW4pnVAz_ZM7RZzOEu838hf63M/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qe4jWjVL6zwYUY0FkrmvUE2RgHzurdkb4bvI1ep1vW5apWuwvLLXgzrB9yyBpxi6jdNuOtf1HF3YVxHjX-5fo1P4v8A4Cfz_aOP2xF4T_pfNOP-cobsUdwJEksCVA2nxTzqlbAC7kBY/s1600/2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_qe4jWjVL6zwYUY0FkrmvUE2RgHzurdkb4bvI1ep1vW5apWuwvLLXgzrB9yyBpxi6jdNuOtf1HF3YVxHjX-5fo1P4v8A4Cfz_aOP2xF4T_pfNOP-cobsUdwJEksCVA2nxTzqlbAC7kBY/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPIhmsgglig9SQUsvUI4Ft9gueosbWXKkbSSFBAbYiW7viw118hpRHlFrdpJI9TLDcRxXJQp9nER4NckKGwN58zNuXECxnnCtxxH5YAqJvQF3RsJsBbtld0qfyDh478nlFyrndLyQPoI/s1600/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwPIhmsgglig9SQUsvUI4Ft9gueosbWXKkbSSFBAbYiW7viw118hpRHlFrdpJI9TLDcRxXJQp9nER4NckKGwN58zNuXECxnnCtxxH5YAqJvQF3RsJsBbtld0qfyDh478nlFyrndLyQPoI/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>

<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPa-kmsPOalrLgnVbnZTXXrgRlu-MRAEPiLiLXiSFr3USIWgMAtHzYoujCEeq6PBR4ZAUF5_pbln8pQ2riCwmBeovBbjS8Y_lUi8ZOrdXhNWKp_IzocaxAxfEAjmH95FTnYDunvq8Yiow/s1600/4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPa-kmsPOalrLgnVbnZTXXrgRlu-MRAEPiLiLXiSFr3USIWgMAtHzYoujCEeq6PBR4ZAUF5_pbln8pQ2riCwmBeovBbjS8Y_lUi8ZOrdXhNWKp_IzocaxAxfEAjmH95FTnYDunvq8Yiow/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>

Perhatian : Ganti yang warna merah di atas dengan URL Photo kamu..dan titlenya ganti dengan tilisan yang kamu mau.ok

Simpan dan lihat hasilnya,..

http://pelajaran-blog.blogspot.com

Cara Membuat Background Blog Berubah-Ubah

Hai gan kali ini saya posting Cara Membuat Background Blog Berubah-Ubah, ya ini hasil dari merantau di dunia maya tadi malam hehehehe.. Biar gak lupa jadi saya bagikan saja buat teman-teman, ok kita langsung aja ke TKP...

Loggin ke blogger sobat, trus pilih template, edit html, centang expand Template Widget, Copas Script Berikut Diatas </Body>

<script type='text/javascript'>

var bg = [

&quot;URL Background 1&quot;,

&quot;URL Background 2&quot;,

&quot;URL Background 3&quot;,

&quot;URL Background 4&quot;,

&quot;URL Background 5&quot;,

&quot;URL Background 6&quot;

];

function gantiBg(){

  var bgLeng = bg.length-1;

  var i = Math.floor(Math.random()*bgLeng);

  document.body.style.backgroundImage=&#39;url(&#39;+bg[i]+&#39;)&#39;;

  setTimeout(&quot;gantiBg()&quot;,7500);

}

gantiBg();

</script>

Keterangan: 

Yang berwarna merah diganti dengan URL gambar sobat yang mau dijadikan background blog.

Yang Berwarna Biru adalah waktu ganti background, ganti sesuai keinginan sobat blogger, contohnya  7500 berarti backgroun berganti setiap 7,5 detik.

Semoga Bermanfaat Gan..

http://coretan-anak-pulau.blogspot.com

Cara Membuat Readmore Otomatis di Blogspot

Sebenarnya banyak blogger yang mempostingkan Tips ini, saya menulis ini juga supaya saya tidak lupa..
OK Langsung saja
1. Masuk Blogger pilih Template
2. Centang Expand Template Widget
3. Cari kode </head> Supaya cepat klik Ctrl F dan tuliskan </head>
4. Masukkan kode dibawah ini tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

5. cari kode <data:post.body/> dan Ganti dengan kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://s1167.photobucket.com/albums/q640/buana3/animasi4.gif" /></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :
READ MORE : bisa diganti sesuai selera
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera
summary_img = 340; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera
img_thumb_height = 100; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera
img_thumb_width = 120; adalah ukuran lebar thumbnail, bisa diganti sesuai selera

Save Template dan lihat hasilnya  seperti ini

 

http://riezaharrysetiawan.blogspot.com

Cara Membuat Gambar Berputar & Membesar

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basinya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="denzuaz"> sebelum url gambar  </div> 

   

Contoh seperti di bawah ini:

  

<div id="denzuaz"><a href="http://anak-rantau03.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk1bZL26vFFfnVoc1_ZMpcxKke6hJW_IEjToyGGtclrw48LdDzaZ3p_BQD_RvLiOXXiuG2wqd9fWJ9Bw422WSW01B1UFxXzzj1Z6iRxk56hZAmNACO2dhQoJQLt4hYrUs3sDb1huDdO4se/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Selamat mencoba, jangan lupa comentar_Nya... :D