minkgo

Sabtu, 28 September 2013

Cara Membuat Efek Berputar Pada Setiap Gambar Di Blog

langsung saja........

[1]. Pertama, pastinya LogIn dulu

[2]. Kemudian dari Dasbor, cari Template --> Edit HTML.

[3]. Lalu tekan Tombol CTRL + F atau F3 pada Keyboard, dan cari Code ]]></b:skin>.

[4]. Kemudian CoPas Code di bawah tepat di ATAS Code ]]></b:skin>.

.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}}

[5]. Terakhir tinggal di SIMPAN dan lihat hasilnya.

Cara Menghilangkan Tulisan "Diposkan Oleh , Waktu Postingan dan Label" Pada Blog

[1]. Login dulu ke Blog Kalian.

[2]. Dari Dasbor, cari Rancangan --> Edit HTML.

[3]. Kemudian centang kotak " Expand Template Widget".

[4]. Cari Code2 di bawah.

Untuk Tulisan "Diposkan Oleh", Cari Code Di Bawah.

<span class='post-author vcard'>

Kira-kira Codenya seperti di bawah.

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>
      </span>

atau kode berikut seperti punya saya

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<b:if cond='data:post.authorProfileUrl'>

</a>

</span>

<b:else/>

</span>

</b:if>

</span>

- Lalu hapus Code tersebut.

Untuk Tulisan "Waktu Postingan", Cari Code Di Bawah.

<span class='post-timestamp'>

Kira-kira Codenya seperti di bawah.

<span class='post-timestamp'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

atau kode berikut seperti punya saya

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

</b:if>

</span>

- Lalu hapus Code tersebut.

Untuk Tulisan "Label", Cari Code Di Bawah.

<span class='post-labels'>

Kira-kira Codenya seperti di bawah.

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</b:if>

</span>

[5]. Terakhir, tinggal di Save.

Selasa, 24 September 2013

cara membuat menu drop down horizontal di blogger

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

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 ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

Klik show untuk melihat

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkTdu_ptfvE6QI2MPSYweeoK7tsKF3vVHaawM6MMIazE4BkAJso0gMsaTZ_6pvaItFo3Lz9M_vXDsUWMTyXQoHsZO6txLGxxoFJ7UzQExAwSTTC9FTSQmn6IAIbwBdBy3nXJSAtUuldOc/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya sobat blogger cari kode berikut:

<header> : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat

<li><a href='http://munsypedia.blogspot.com/'>Munsypedia</a></li>

<li><a href='#'>Hubungi Kami</a>

<ul>

<li><a href='https://plus.google.com/106869168860336211678/about'>Google +</a></li>

<li><a href='http://www.facebook.com/pages/Sahabat-UN1X/470349262994047'>Contact on Facebook</a></li>

<li><a href='https://twitter.com/MunsyAfandi'>Contact on Twitter</a></li>

</ul>

</li>

<li><a href='http://beda-dunia.blogspot.com/'>Misteri Dunia</a></li>

<li><a href='http://boxriborn.blogspot.com/'>Boxriborn</a></li>

<li><a href='https://twitter.com/azmiel_boy/'>Follow Me</a></li>

<li><a href='http://padamaraa.blogspot.com/'>Padamara News</a></li>

<li><a href='http://vhiblues.blogspot.com/'>VHIBLUES</a></li>

<li><a href='#'>Menu Spesial</a>

<ul>

<li><a href='http://bozzkaf.blogspot.com/search/label/MISTERI'>Misteri</a></li>

<li><a href='http://bozzkaf.blogspot.com/search/label/KOMPUTER'>Komputer</a></li>

<li><a href='http://bozzkaf.blogspot.com/search/label/LEGENDA'>Legenda</a></li>

<li><a href='http://bozzkaf.blogspot.com/search/label/TOKOH'>Tokoh</a></li>

</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://zuazz.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://zuazz.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFKMRLhAChpPUW5_2HdoFUovDLD969HuNsIC8bz4uNTxrQBKXv7SrI3o8zf0119Qc92qUNEVYLYXdTQQbae5uO_oIV86jnW3KtQV3caq3O8M9nNdEKt6LG8R45jZ7dTUp6w_7qYZmqwU4/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-J4Q8g1xg-iiiEqtUtbZAineqLpXvFZeO-CQOU8JsWEL08CqegDrRm_GbsFBHNPxgvMK82VNYxioOT8pwevflloJjs39WKa9xGRnnreDGxDXdggP3DO-1wQzrFPtQQnZxJzCRwmNCls/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

Kode berwarna merah adalah Url tujuan, silakan sobat ganti dengan Url pada blog sobat
Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan sobat sesuaikan.