Sabtu, 19 Januari 2013

Membuat Menu Drop Down pada Blogger



drop down menu
Membuat Menu Drop Down pada Blogger - Membuat drop menu tidak harus memakai script jquery yang cukup rumit. Cukup dengan memanfaatkan kode CSS dan HTML yang sederhana untuk membuat sebuah menu drop down yang cantik untuk blog anda. Berikut ini Tukang Toko Online akan membagikan tutorial untuk membuat menu drop down dengan memakai kode CSS dan HTML yang sederhana, sehingga mudah diterapkan.

Berikut Tutorialnya

Sebuah menu drop down diperlukan ketika anda memiliki konten yang cukup banyak. Ini dimaksudkan agar anda lebih mudah mengaturnya dan pengunjung blog andapun lebih leluasa memanfaatkannya. Dengan menu navigasi yang teratur dan cantik (dorp down menu), akan membuat pengunjung blog menjadi lebih betah berlama-lama di blog anda. Berikut langkah-langkah yang harus dilakukan untuk membuat menu drop down:
  1. Menuju ke menu Blogger Design Page Elements
  2. Pilih Widget HTML/JavaScript, taruh widget di tepat di bawah header dan paste kode berikut ini di dalam kolomnya,
drop down menu widget
<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>
      </ul>
    </div>
Ganti # dengan Links halaman anda dan teks bercetak tebal (bold) dengan nama halamannya. Kode dengan latar kuning berfungsi untuk mengatur menu drop down. Anda bisa meng-copy dan paste kannya di bawah tab manapun yang anda inginkan tepat sebelum </li>
Untuk menambahkan tab lainnya paste kode berikut ini di atas kode </ul>
<li>
          <a href='#'>Tab Name</a>
        </li>
       
    3.   Sekarang menuju ke menu Design/tataletak pada dashboard blog anda dan klik > Edit HTML
    4.   Jangan lupa untuk mem-Backup template anda dan cari kode berikut (gunakan CTRL+F),
]]></b:skin>
     5.   Tepat diatas kode tersebut, paste kode dibawah ini,
/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
beberapa yang bisa anda rubah dari kode di atas:
  • Merubah #060505 untuk merubah warna background dari menu utama/Main menu
  • Merubah kode yang berlatar kuning untuk merubah warna font, ukuran dan namanya
  • Merubah #BF0100 untuk merubah background dari tab pada mouse hover
  • Merubah  #BF0100 untuk merubah warna background dari menu drop down
  • Merubah #060505 untuk merubah warna background dari menu drop down pada mouse hover
      6.    Preview dulu untuk melihat hasilnya dan simpan template template anda jika berhasil

Selamat mencoba
readmore »»  

Jumat, 18 Januari 2013

Cara Membuat Sambutan Untuk Pengunjung Blog


Kali ini saya akan memberikan tips cara membuat sebuah kata sambutan untuk pengunjung blog sebelum pengunjung masuk ke halaman blog Anda. Sebagai admin blog mungkin Anda jika ingin memberi ucapan selamat datang atau pertanyaan kepada pengujung sebagai rasa hormat. Setelah saya mencari-cari di mbah Google ada dua macam kata sambutan yang bisa Anda gunakan berupa kata sambutan dari admin blog dan kata sambutan dari admin berupa pertanyaan dari admin mengenai pengunjung blog Anda. Untuk memasang atau membuatnya silahkan ikuti langkah-langkah di bawah ini :

Membuat Kata Sambutan :
1. Log in di blogger dengan id anda untuk masuk ke akun dan mengedit blog anda.
2. Klik Tata Letak / Layout
3. Tambahkan gadget dengan mengklik Add a Gadget
4. Pada menu yang tersedia, pilih atau klik HTML/Javascript
5. Cari kode </head> lalu copy pastekan kode dibwah ini tepat di atasnya : 

<SCRIPT language='JavaScript'>alert("Selamat Dtang Di Blog punkchill community purwakarta");</SCRIPT>
6. Ganti tulisan yg warna biru dengan kata kata anda sendiri
7. Klik Save Template
Membuat Pertanyaan Kepada Pengunjung Blog :
1. Caranya sama dengan dengan diatas, cuma ganti kodenya saja dengan yang di bawah ini. Copy pastekan di atas kode </head> : 
<script type="text/javascript"> var yourName = prompt("Bolehkah saya tau nama Anda", "Nama Anda Siapa?"); </script> 
2. Ganti tulisan yg berwarna biru dengan pertanyaan Anda sendiri.
3. Klik Save Template
Nah silahkan Anda mencobanya dan semoga bermanfaat!!
readmore »»  

Rabu, 16 Januari 2013

cara memasang playlist lagu di blog

pada posting kali ini saa akan membahas tentang bagaimana cara untuk membuat playlist lagu kesukaan kita di blog. ada beberapa penyedia layanan aplikasi untuk widget playlist. yang saya gunakan untuk menambahkan widget playlist di blog adalah scmplayer.net.

langkah pertama yang harus kita lakukan,
1.silahkan klik link berikut scmplayer.net
2.memilih skin yang akan kita gunakan di blog.
3.kita mulai mencari lagu yang akan kita pasang di blog.dengan sedikit usaha untuk mencari link-link lagunya.
4.step berikutnya tinggal mengcopy kode yang telah di berikan.
mudah bukan..??
terus apakah otomatis akan tampil di blog kita,,??
tentu tidak. langkah berikutnya yang harus kita lakukan adalah.
1.masuk ke blog kita.
2.pada dasbor blog kita pilih layout.
3.tambah widget
4.pilih html/javascrift
5.paste kode yang telah kita copy.
6,jangan lupa di simpen.

ok sekarang silahkan cek blog kawan sekalian..
apakah playlist sudah terpasang di blog kita..

readmore »»  

memberi efek zoom pada postingan gambar

efek zoom cara membuat efek zoom atau membesar pada gambar di blog -hello sobat blogger, pada posting kali ini saya akan memberikan sebuah tutorial mengenai membuat efek zoom atau membesar pada gambar di blog. pertama sobat tau apa itu maksud efek zoom pada gambar ? maksudnya saat scroll mouse mengenai gambar si gambar tersebut akan membesar dan akan terlihat seperti di zoom, gimana sudah mengerti ? kalau belum mengerti langsung saja diperaktekan dan lihat hasilnya, efek ini bagus buat blog yang banyak gambarnya tapi ukuran gambarnya kecil. owh iya kalau soal memperlambat loading blog atau tidak menurut saya sendiri sih tidak memperberat loading blog kenapa ? karena memang efek ini tidak menggunakan javascript tapi menggunakan CSS tapi ga tau juga sih saya masih newbie jadi kalau ada kesalahan mohon di maafkan hehehehe. ok dari pada baca tulisan ga berguna dan ga bermutu langsung saja ke tutorial mengenai cara membuat efek zoom atau membesar pada gambar di blog.


masuk ke bagian template anda kemudian cari kode ]]></b:skin> agar lebih cepat gunakan F3 atau ctrl + F 
bila sudah menemukan ]]></b:skin> selanjutnya masukan kode dibawah ini tepat di atas ]]></b:skin> 

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }
setelah simpan template sobat dan lihat hasilnya.
readmore »»  

Memasang burung twitter terbang di blog

langkah pertama dan langkah sederhana..silahkan di simak para bloger
1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript

Masukkan Script berikut 

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://tateluproject.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQJc45gwlEZMi2WENWL6ccjqqV35jGZenqj5lyB3RhgE-qpaO-W_4Vq2G4DHnDEkXfe61XcdW-TQmdUqLSf6QStamewq3KkdQik9Nr1pzwNJa7K_zNEs5zeI8I4QpcJc2SqRaGCMyCvQA/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/brigdepcp";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>


3. Klik save / simpan.
NB:
Ganti tulisan yang berwarna merah dengan warna icon twitter kesukaan sobat. 

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIn8U0xWfqkZJD07Xz0_5vuLaZbtrvnC7VIYTEOKlvDSYAYFrxb4xpN3lG7ZMSRnQVUUEPhawog0fiIfG_1w8vLHP_tDYsQwpOu7H1rDtLZUJ-9qsf1FZD0YrqF5YVw8FDYjcGWfa1xdo/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtmJSpU4wZw9xACKm0HniBF493ER15EtlpaLhExQd81Jld0xUZNawgqLuMW8EglZM3yiOViMM7P9Z7HGrp5gfjtmsYvj_RtNHlevJ-40J1XHonV2RWFSxgTk9fTd30dX_d_Z3ovT6-Sds/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCl5GljDWolaMn576M_vLhmC55D17_FJlnFv8sAXNwFiT0rnVKUf2asRirZ7PIRNRILJAYVqnt81BHMb1igkCNyqyY9f93YeMMNxHGYghZfktV0LnDflf3el-HztC5siepNOsSW66HN7g/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP7n3hQ3SQ4xBelNXD1Qvhw-hB3dvHEwpFFNmMRBpfqQtla_Nw56VMLbyUGEDHMyfhnH1-NcCCJiMJTCEsuCmR1k-an2I_9-5Y54thIPvBhb7C-WKqJXE-RhRerxZTD2BYwqo_QGfDLRY/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghj-h-UfTqUzDL6KsGBaQ4zaovnraZML67waVIW7DXAir1LSoK8TwnPvz2BBbBuRbL73HsvKqdxjzXFge_pYblIjzz9RIKW2SScnneVy3kl7TuQeWjNIscu2C0nvOpV8EkNUAOTTc5P6g/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgDCEjB6ypDXhPCOVj2rKLzQP7mveB-Zh6bxKqnSoqms2UJ8MrNs_oam3hVMH5ATC4IzL8hO3x2HRmIMRUP1K9Cj0VAOMWufBwkg2V6u7V-IS2fnLKx6tC1YMLDW8_r9MBgi4kOK2VQ2M/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijcVLsJS-8Z7PiCvSx1OUPEN85XMR9PS8ucysWaPssc5EFu_bWaEJfGXi0ULHbY1J0-_XmQIPEftF0UDzcTLCozmoe34XaIxxSXnxk2yvNTtQlGyisXuKuqoThOfgEvDM5naY5iBWK-AE/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwhveftE7N7WPl3pINMNtvG84ds_C_-msGrn4SMIcsqn_8CMJz1yP32m-xhuBTwJczZms9GuEdVIGigmgJ9WX55z3_XZ3aDVX6-EBrnPpm5hCowBWG_LOl0i-tAMyaPd0vW9NKml_YEw/s1600/red+bird.png

dan jangan lupa ganti link yg berwarna biru dengan alamat twitter sobat

readmore »»  

cara membuat readmore di blog

Bagaimana cara membuat readmore di blogspot dengan cara yang mudah dan cepat kilat di blog kesayangan sobat blogger . inilah pokok bahasan yang akan saya bahas untuk anda semua,hehehe.
baik sobat blogger, sebelumnya saya jelaskan sedikit apa gunanya read more pada blog kita. dengan adanya readmore blog sobat tampilan nya di home tidak terlalu memanjang ke bawah seperti tampilan home blog saya yang menggunakan readmore namun disini saya menggantinya dengan tulisan baca selengkapnya, itu seterah sobat.
Berikut cara memasang readmore di blogspot :

-Login ke blogger dengan ID sobat.

-Pilih Rancangan atau Tata Letak.

-Pilih Edit HTML.

-Centang tulisan "expand template widget".

-Lalu cari kode </head> :   untuk mempermudah pencarian tekan CTRL+F.

-Lalu masukkan code di bawah ini tepat di atas  </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Kemudian sobat  cari kode <data:post.body/>
Ganti kode <data:post.body/>  dengan kode di bawah 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'> <b> readmore</b> &#187;&#187;&#160;&#160; </a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

Kemudian Save Template.
untuk keterangan readmorenya...
var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini .
readmore »»  

Minggu, 22 Juli 2012

lady dragsters from bandung

Cantik, berbakat, bernyali besar, bemotivasi tinggi, dan pantang menyerah, itulah Indri Nurlia Sari atau yang lebih di kenal dengan Indri Barbie, salah satu Lady Dragster di Indonesia. Gadis yang masih duduk di bangku kelas 3 SMU Pahlawan Toha, Bandung ini, Memulai karir di dunia Drag Bike pada Maret 2011. Mulanya hanya sekedar iseng nyeting motor sahabat nya, lalu tidak lama kemudian dia di tawarkan untuk bergabung dengan team balap Shit The Grid 

Bandung, dan langsung di jadikan Joki balap resmi !
Kemampuan Indri yang terus berkembang, membuat team balap lain tertarik untuk mengajaknya bergabung, sepertiWahana Baru Motor Bandung & Tiara Racing Ciracas.
Sampai saat ini, terhitung kurang lebih 7 kali kejuaran Drag Bike yang di ikutinya, Dan merebut juara pertama pada kejuaraan Drag Bike di Brigif, Cimahi, untuk kelas FFA ( Free For All ) ! Wow !





BIODATA
Nama Lengkap : Indri Nurlia Sari
Nama Panggilan : Indri Barbie
Tempat Tanggal Lahir : Bandung, 25 Agustus 1994
Tinggi Badan : 158 cm
Berat Badan : 44 Kilogram
Team : Shit The Grid Bandung, Wahana Baru Motor Bandung, Tiara Racing Ciracas.

di bawah ini adalah foto foto dia selama mengikuti kejuaraan Drag Bike di Indonesia..














































































dan ini foto pribadi indri barbie monggo di simak..





























































readmore »»