Cara Membuat Efek Lipatan Kertas

Selamat malam sahabat blogger, ketemu lagi dengan saya Mata Kakul yang baru belajar ngeblog, kali ini saya kembali akan mencoba membagikan tutorial tentang cara membuat efek lipatan kertas di Pojok Kanan blog anda. Bagaimana ! Bagus kan sob ??? hehehe....

Oke!!! ga usah panjang lebar, mari kita sama - sama belajar untuk membuat efek lipatan kertas di pojok kanan atas blog, caranya ga begitu sulit kok.

Ikuti Langkah - langka berikut :

1. Login ke blog anda.

2. Masuk design Templete --> Edit HTML

3. Centang Expand Templete Widget.

4. Anda Cari </body>

5. Letakkan code dibawah ini tepat diatas code </body>

  

<script type='text/javascript'>var tujuan =&#39;http://de86nam.blogspot.com&#39;</script>
<script src='http://mata-kakul-projects.googlecode.com/files/matakakulproject.js.txt' type='text/javascript'/>

6. Klik Pratinjau dulu sob, kalo udah yakin baru di save.

Keterangan:

• Kode warna merah ganti dengan URL Feeds sobat
• Kode warna biru ganti apabila sobat ingin mengganti gambar sesuai selera sobat. 

----------------------------------------------------------------------------------------------------------

 Cara mengganti Gambar :

1. Download dulu Script ini klik
2. Buka Script hasil download tadi.
3. Cari script berikut :
    [ http://i1068.photobucket.com/albums/u459/de86nam/kecil-1.jpg ]
    ganti untuk merubah gambar yang ukuran kecil.
4. Script berikut :
    [ http://i1068.photobucket.com/albums/u459/de86nam/besar-1.png ]
    ganti untuk merubah gambar yang ukuran besar.
5. Save. Selanjutnya anda upload Script tersebut ke googlecode
    dan download kembali script hasil upload tadi.
6. Ganti URL ini :
    [ http://mata-kakul-projects.googlecode.com/files/matakakulproject.js.txt ]
    dengan Script hasil download tersebut.
7. Save. Done.

Sumber : denzuazz

Cara Membuat Permalink di Blog

Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan tentang cara membuat / memasang permalink di blogspot. Sedikit penjelasan, Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

Permalink ini 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 tepat di bawah artikel.

Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.

Cara Membuat Permanen Link di Blog

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>

Klik show untuk melihat

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

4. Cari kode <data:post.body/>  ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.

Klik show untuk melihat

<!-- Permalink Tatelu -->
<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='Christian angkouw' src='http://i1108.photobucket.com/albums/h405/christian410/269111_225685127450056_100000257112719_900053_7432574_n.jpg'/>
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='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&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='http://christiantatelu.blogspot.com/2012/03/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Tatelu -->

5. Klik save dan lihat hasilnya.

Tambahan :

• Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat
• Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )

Sumber : christiantatelu

Cara Mendaftar Chatbox

Salam Blogger, kali ini saya akan menjelaskan tentang bagaimana cara untuk mendaftar Chatbox untuk selanjutnya kita pasang di blog kita sendiri. Tutorial seperti ini sudah banyak kita temukan pada blog - blog lainnya, namun apa salahnya kita kembali mencoba untuk membahas tentang bagaimanan cara mendaftar Chat Box.

 Langsung aja ya Sobat :

1. Silahkan masuk cbox.ws 
2. Klik Sign Up.
3. Isikan data anda pada kolom ChatBox
4. Pada kolom style : pilih "transparant" saja.
5. Centang I have read and do agree to do cbox terms and conditions of service.
6. Kemudian klik "Create my Cbox!".

      7.  Selanjutnya anda akan diarahkan ke Code Generator klik Copy to Clipboard 

           kemudian anda masuk ke blog anda. 

      8.  Masuk ke Dashboard pilih Rancangan lalu klik Add Widget
           atau Tambahkan Widget. Pilih HTML/Javascript dan masukan 
           script chatbox tadi di situ.  

      9.  Kemudian klik save.

Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas

Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.

Kali ini saya akan memposting cara memasang Cbox  auto hidden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.

Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.

Berikut ini adalah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.

Klik show untuk melihat

<style type="text/css">
#at{
position:fixed;
right:35%;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:0px;
width:0px;
float:top;
cursor:pointer;
background:url(url);
}
.atcontent{
float:left;
border:2px solid #fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMg71Jhc0pRxdv27IDqLXRq-g20B3vZyhcV7Vp9Vq93aAGFH_EM4FRurXCMaEhNYVqRzSjM2R8fdGoqjJ4uly7DvL9j7258a7vvt_ThbBWqygmFEduRurlfEBlTe9GP7drx7Wo3LFxwsnp/)#000000 repeat-x bottom center scroll;
-moz-border-radius:10px;
padding:10px;
}
.atcontent:hover{
border:2px solid #fff;
background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">

Strip kode cbox sobat

</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.bottom = (-200-at.offsetWidth).toString() + "px";
</script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvYtvp9yybxvj0MSuEaZn29Lxs7HTo69MZNcpn3ort1z3LZUngvtMPOtw6BbKlMHSbth3FKKqr37hTIHKxsEMTmmp0zrhIWiuWOi6fYtzXvRQNjViO949lO7rt5SWltwk5gKI428LjNeJl/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua.

Sumber : Zuaz'Z Creator

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Selamat Siang Sahabat Blogger, Kali ini saya akan kembali mencoba membagikan Tutorial tentang Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template, sehingga para pengunjung blog dapat memilih, apakah mereka ingin berkomentar melalui komentar blog atau dengan komentar facebook.

Langsung saja sobat, mari kita mulai praktekkan tentang bagaimana Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template, sebagaimana tutorial berikut :

1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

Klik show untuk melihat

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Anda bisa menyesuaikan kode warna biru untuk mengganti background kotak komentar.


     7. Kemudian Anda cari kode </head>

     8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>

Klik show untuk melihat

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Sobat disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Perhatikan tulisan yang berwarna biru di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka, seperti contoh https://www.facebook.com/1234567890. Udah ngertikan ? jika sudah maka Akan saya lanjut.

JADINYA SEPERTI INI

     9. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:
Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode <div class='comments' id='comments'> yang pertama dan kedua.

Klik show untuk melihat

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi.

Dan perhatikan pula kode yang berwarna hijau, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

Perhatian : jika ingin merubah warna tulisan pada kolom komentar facebook anda bisa mengganti kode berikut : fb:comments expr:href='data:post.url' num_posts='2' width='400'/ dengan div class='fb-comments' data-colorscheme='dark' data-num-posts='2' data-width='400' expr:data-href='data:post.url'/.

   10. Kemudian klik save, dan lihat hasilnya.

Sumber : super-bee & Zuaz'Z Creator™

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

Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header.

Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita. 

Panduan / Tutorial yang sekarang saya bagikan kepada sobat ini diambil dari sabahat Blogger Zuaz'Z Creator yang menurut saya memiliki seni dan kreatifitas yang tinggi dalam membuat design blog.

Oke langsung saja kita ikuti langkah - langkahnya sobat.

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRarjwZmwPzIiUlHCGNLSnmGHbEG_BhnKlmY14iYQg1N1F4e8i_QYcSkUOoWioeOqoqUiWuiMV9d3gvLjShA9J9i-dTsdnE1rTnfuvCO_Pxsv8WpPcTzJEBd10rHK4ow8R-Iesl8mZVds/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/AVvXsEgPyNlwpD-zLfxTBJTCyqQoz-yLWOGW2B7RGNPJzMCb8rPFgMdh3eNTmAoBQryPEAI1Mb1yg1qzfvl61ypA9qROHVEjOlveo9nY5UX4n-syWDLUM6T4REQqZASFROS_9RVm5vCUfFIfSfA/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

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg8pECOlN8zJGKw2TAsSgiNuBONyJzpq-vnKOdvambT5BTZb1fo7yXVxWCIMJ3ObxRWAgiWOLiDkNOsNyppfABT0dXofDZJzGmOoi22rvoO4d_J4w6QvpDgOpubWtX3WkpEjr1giHpzKk/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/matakakul' target='new'>Contact on Twitter</a></li>
<li><a href='http://de86nam.blogspot.com/Mata Kakul' target='new'>Contact on Myspace</a></li>
<li><a href='http://de86nam.blogspot.com/Mata Kakul' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a href='http://de86nam.blogspot.com' target='new'>Mata Kakul</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://de86nam.blogspot.com/search/label/tips%20dan%20trik%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/tips%20dan%20trik%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://de86nam.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://de86nam.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://de86nam.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://de86nam.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcEx6w7Xxe8aSKRLrXWnr_4iImbbq8c7AUHWJE_BboALG7x9KyWOXCCAxmWEYtSms7lUCgwnaJrKxE64m9QYrW2tcmrcDseLSwBktBkuYR7zm6mazhAGB3kQLAqW4QkVr6WFP7IJlJco0/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/AVvXsEhKfBUA94xM3LtqvUs_dq7il3DniVNLWnBI8XtFi0g85Wou6efIKDcND0G3d_pHoAZXcmNahSQ5BP9SIlOa2HQD4aizgqSYw7XymzhBHzIZKRj-8wqHP3Kj2SgP0SmIUJbeG1F89uKx-Fw/s1600/bg_search.gif' type='image' value='Search'/>

</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan :

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

Demikianlah Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header, semoga bermanfaat bagi sobat blogger.

Sumber : Zuaz'Z Creator

Cara Membuat Tampilan Popular Post Berjalan

Popular post atau istilah kerennya postingan yang terpopuler, seperti contoh popular post yang ada di sidebar blog saya ini. Bagaimana menarik bukan? Kalau kita cuma pakai yang standar maka tidak akan bergerak seperti itu, lalu membuatnya bagaimana? Caranya sangat mudah, pertama, tentu anda harus memasang gadget popular postnya terlebih dahulu, dengan klik rancangan - elemen laman - tambah gadget - tambahkan popular post/entri populer.

1. Masuk ke Template --> Edit HTML --> Centang Expand Template Widget. 
2. Kemudian sobat cari kode seperti 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'>

     3.  Perhatikan code di bawah 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>
<marquee align='left' direction='up' height='250' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
      <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'>
              <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>
            <div style='clear: both;'/>
          <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>
     </marquee></ul>

      4.  Kode yang berwarna MERAH adalah kode yang harus anda tambahkan.

Sumber : Gumanta-info