Techno Photo Slideshow

Tampilkan postingan dengan label Tips n Trick. Tampilkan semua postingan
Tampilkan postingan dengan label Tips n Trick. Tampilkan semua postingan

Membuat Recent Post Dengan Thumbnails

oke!!! kali ini kita gak usah pake banyak - banyak bacot deh... kali ini kita akan membuat Recent Post disertai dengan Thumbnails.

images Cara Membuat Recent Post dengan Thumbnails

pertanyaan : Mengapa harus menggunakan Thumbnails?

  1. Web atau blog akan terlihat perfesional,
  2. Pengunjung akan lebih tertarik untuk membaca (klik).
Terus kekurangan dari memasang Recent Post dengan Thumbnails?
  1. Membuat agak lambat load blog atau web kita karna script ini menggunakan JavaScript

Jika tertarik untuk memasangya langsung aja menuju TKP.... :P

 
 
Oya hampir lupa tips ini tanpa merubah code templates (body) kita, jadi kita bisa langsung Add a Gadget lalu pilih HTML/Javascript, setelah itu Copas Script di bawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";

thumbwidth = 40;
thumbheight = 40;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

icon2 = " ";
numposts = 5;
home_page = "http://marchsya.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Jika ingin Merubah Codenya untuk menyesuaikan dengan temp, teman - teman bisa lihat fungsi code di bawah ini:

boxwidth - Lebar widget
cellspacing - Space antara cells (default adalah 1 sudah bagus)
borderColor - Warna Border (Warna template widget bisa anda ganti.Defauld adalah putih)
thumbwidth & thumbheight - Lebar dan panjang thumbnail (default adalah 40 sudah bagus)
fntsize - Ukuran huruf judul postingan
acolor - Warna huruf judul postingan
aBold - Bila ingin ditebalkan adalah true, jika tidak false saja.
numposts - Berapa banyak recent post yang akan ditampilkan
home_page : http://putroweb.blogspot.com/ (Ganti dengan URL blog anda)
Yakinkan seeting site feed anda sudah pada Allow Blog Feed dengan melihat pada Setting>Site Feed>Full>Allow Blog Feeds.

Script dari : http://www.bloggertricks.com/2009/05/recent-posts-with-thumbnails-widget-for.html

Mengatasi Lupa Password atau Username

Pusing dengan blogger anda saat blogger anda tidak bisa dibuka sama sekali karna lupa dengan password atau username?. kadang kejadian ini memang sering bikin jengkel, biasanya seseorang Lupa Password ini terjadi saat kita baru membuat blog baru atau newbe. Tapi anda tak usah binggung dan kawatir karna  di blogger terdapat layanan untuk mengembalikan username dan password.

Berikut Cara Mengetahui Jika Lupa Password dab User Name Blogger :

Masuk aja ke http://www.blogger.com/forgot.g maka tampilanya akan seperti gambar dibawah ini :

images halaman










Semoga Password anda dan username anda ketemu :D

Cara Memasang Gambar Animasi Lucu Di Pojok Blog

waduh mata udah mulai stun - stun,, tapi tiba2 malah kebelet pengen buat  posting baru lagi nih.. pengen nambahin gambar - gambar yang "lucu".. nih gue kasiin!!! tapi kali ini gambarnya bisa tetap stay di pojokan blog mu,, walaupun kamu naik - turunin itu scrool mouse,, bisa tetep stay looh... simak yaa gans!!!

Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakan kode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :

1.Gajah loncat



Script:

<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>




2. Boring


Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>

3.Tuyul ketawa


Script:

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>


4.Boneka joget


Script :

<div style="position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi</a></center></small></div>


5. Panda main bola


Script :

<div style="position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>



6. Tuyul baring


Script :
<div style="position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

7. Panda biru



Script

<div style="position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif" title="Click to get more." /></a>
<small><center><a href="http://www.komputerseo.com" target="_blank">Free-Widget-Animasi</a></center></small></div>

8. Panah



Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>




9. Bunga




Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020322.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


10.Anjing laut


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


11.Lumba-lumba


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

12.Kucing tidur



Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

13.Kelinci


Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


14.Dragon


Script:

<div style="position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020478.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


15.Ikan


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020479.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>


16.Pinguin


Script :

<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

17. Helikopter


Script :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="Click to get more." /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

Cara memasang widget animasi ke blog :

1. Pilih script yang tersedia

2. Di Dashboard blogger pilih Rancangan - Elemen halaman

3. Pilih Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript




Catatan:


1.Contoh blog yang sudah terpasang widget di atas bisa dilihat disini widget animasi atau disini widget blog
2. Untuk mengganti posisi widget dari sebelah kiri ke kanan ganti tag left menjadi right
Untuk mengubah posisi dari kiri ke kanan ganti tag right menjadi left
Contohnya bisa dilihat di bawah ini
<div style="position: fixed; bottom: 0px; left: 30px;width:160px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif" border="0" /></a><small><center><a href="http://www.komputerseo.com" target="_blank">Widget-Animasi-Blog</a></center></small></div>
semoga bermanfaat yaa!!!

sumber : seo computer

Membuat Twitter Updates

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg50eOjcW8Y1cvDqYNARLX8HE8tStmrVqA1IUSO9qoedZTYMR9kR8tdFV33xNq1ecGQcfRCH546VWDSP1DBZ4bpqpF4giijNtOUf1mkX1RTIu_TUJb80UprMRqb-OLM6on1KM2w52cvWXkW/s1600/twitter+1.jpg

huft!!! panas banget hari ini... jadi pengen ngeluapkan sesuatu lewat posting... gak sengaja pas buka laptop di sekolah sore - sore... gue ada liet temen gue yang sedang buka twitter tuh... secara gak sengaja juga nih gue mikirin gimana caranya bisa dapetin update twitter gue lewat blogger... setelah sekian lama berkelana mengelilingi kebun "SAWIT"... akhirnya gue nemuin gimana caranya masang twitter update di blogger... langsung aja!!! nih caranya temen - temen...

twitter updates

1. Login ke Twitter.com dengan username dan password Twitter Anda.

2. Kunjungi twitter.com/about/resources/widgets/widget_profile [1]

3. Klik Finish and Grab Code dan Copy kode yang ada

4. Login/masuk ke Blogger.com -> Rancangan -> Elemen Laman -> HTML Javascript -> masukkan kode Twitter

5. Simpan. Selesai.

gampang aja kan temen - temen, silahkan dicoba dan semoga bermanfaat.

Cara Membuat Menu Vertikal CSS

Haiiii!!!! Kali ini Mimin Blog Renovatio nimbrung di Blog Techno World !! Kali ini yang empunya blog request buat diposting-kan cara membuat navigasi Vertikal!! Oke, setelah mimin berkelana kesana-kemari mencara alamat... akhirnya, ketemu juga artikel yang membahas tentang Cara membuat Menu Navigasi Vertikal... Cekibrott yaaa!!







Contoh menu vertikal dengan CSS

















Mari kita ikuti tutorial membuat menu vertical dengan menggunakan CSS

1.    Masuk ke Blogger

2.    Pilih Design > Edit HTML

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

4.    Kemudian Copy kode di bawah in dan pastekan tepat di atas kode ]]></b:skin>
 
/*****Menu Vertical css Techno World*****/   
.navbox {   
position: relative;   
float: left;   
}   
ul.nav {   
list-style: none;   
display: block;   
width: 220px;   
position: relative;   
top: 0px;   
left: 0px;   
padding: 0px 0 0px 0;   
background: url(http://i580.photobucket.com/albums/ss241/nobhita/green1.gif) no-repeat;   
-webkit-background-size: 50% 100%;   
-moz-background-size: 50% 100%;   
}   
li {   
margin: 5px 0 0 0;   
}   
ul.nav li a {   
-webkit-transition: all 0.3s ease-out;   
-moz-transition: all 0.3s ease-out;   
background: #cfe2f3 url(http://i580.photobucket.com/albums/ss241/nobhita/green1.gif) no-repeat;   
color: #cc0000;   
padding: 7px 15px 7px 15px;   
-webkit-border-top-right-radius: 0px;   
-webkit-border-bottom-right-radius: 0px;   
-moz-border-radius-topright: 0px;   
-moz-border-radius-bottomright: 0px;   
width: 110px;   
display: block;   
text-decoration: none;   
-webkit-box-shadow: 4px 2px 4px #888;   
-moz-box-shadow: 4px 2px 4px #888;   
}   
ul.nav li a:hover {   
background: #cc0000 url(http://i580.photobucket.com/albums/ss241/nobhita/green1.gif) no-repeat;   
color: black;   
padding: 7px 15px 7px 30px;   
}  


5.    Save template sobat

6.    Setelah itu masuk ke element laman dan klik add gadget kemudian pilih html/java script

7.    Pastekan kode di bawah
 
<div class="navbox">   
<ul class="nav">   
<li><a href="http://wisnu-utomo8.blogspot.com/">Techo World</a></li>   
<li><a href="masukan link">kategory 2</a></li>   
<li><a href="masukan link">kategory 3</a></li>   
<li><a href="masukan link">kategory 4</a></li>   
<li><a href="masukan link">kategory 5</a></li>   
<li><a href="masukan link">kategory 6</a></li>   
<li><a href="masukan link">kategory 7</a></li>   
<li><a href="masukan link">kategory 8</a></li>   
<li><a href="masukan link">kategory 9</a></li>   
</ul>   
</div>  

8.    Simpan gadget sobat dan lihat hasilnya.

Memasang Tombol Share Melayang

Tombol share melayang sebenarnya tidak beda dengan tombol share lainnya, yaitu berfungsi untuk membagi/share konten blog ke berbagai jejaring sosial yang ada di internet. Bedanya, tombol yang satu ini posisinya melayang di blog kita, jadi walau pengunjung melakukan scrolling, tombol share tersebut akan tetap kelihatan di samping blog kita, sebagai contohnya, silahkan lihat di sebelah kiri. Tentu dengan posisinya yang melayang itu, kesempatan untuk diklik oleh para pengunjung dengan tujuan sharing akan semakin besar. Dalam Tombol share tersebut mencakup tiga layanan, yaitu: Google plus, facebook, sama twitter/retwit.

Bagi sobat Blogger yang tertarik untuk menampilkannya ke dalam blog sobat silahkan gunakan kode berikut, caranya:
1. login ke blogger
2. Pilih Rancangan
3. Lalu "add gadget"
4. Pilih HTML/Javascript
5. isikan dengan kode berikut di dalamnya

<!-- floating page sharers Start-->
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title="Share to Your Friends">
<div style="clear: both;font-size: 16px;text-align:center;">
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall"></g:plusone>
</div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<!-- floating page sharers End --></div>
6. Klik simpan

Silahkan lihat hasilnya! Menarik bukan?

Semoga bermanfaat :D
Jika ada pertanyaan silahkan ditinggal di kotak komentar

Membuat Menu DropDown

Apa itu menu dropdown? Itu lho teman-teman pasti tahu program office yang bernama Microsoft Word. Suatu ketika teman-teman ingin menyimpan file teman-teman, maka teman-teman akan mengklik menu File, dan setelah itu langsung muncul banyak sub menu seperti Save, save As, dll. Nah menu yang seperti itulah yang dinamakan sebagai menu dropdown. Bgaimana teman-teman, sudah ada bayangan? kalau belum ada, bisa tuh dilihat contoh tampilan berikut:



Untuk membuat menu dropdown seperti di atas, kita hanya membutuhkan kode HTML berikut ini:



<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Menu DropDown</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 2</option>
</select>




Tulisan yang berwarna merah akan muncul sebagai nama menu, seperti halnya contoh tampilan sebelumnya dengan nama menu Tutorial Blogger. Yang biru silahkan didisi dengan link anda, sedangkan yang hijau adalah teks yang merupakan keterangan dari link yang anda pasang.

Cara memasangnya seperti biasa:

1. Login ke Blogger.

2. Klik Tata letak.

3. Klik Tambah Gadget >> JavaScript/HTML, dan isikan kode berikut:


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Menu DropDown</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 2</option>
</select>




Nb:
Untuk menambah menu, tinggal anda tambahkan kode: <option value="Link 1">Teks 1</option>


4. Simpan hasil kerjaan anda, dan selesai.


Untuk kode yang di atas cocok digunakan untuk link yang masih ada hubungannya dengan blog anda, dengan kata lain apabila anda mengkliknya maka akan tetap terbuka di tab window yang sama. Bagi teman-teman yang membutuhkan menu dropdown yang akan digunakan sebagai blog roll maka akan lebih cocok jika teman-teman menggunakan menu dropdown dengan tipe open new tab/ window, karena walaupun para pengunjung mengklik link yang tertera di menu dropdown, para pengunjung tidak akan meninggalkan halaman blog anda. Maka untuk membuat menu dropdown dengan tipe open new tab/ window, anda cukup mengganti kode:


<select onChange="document.location.href=this.options[this.selectedIndex].value;">


Dengan kode berikut ini:


<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">


Sehingga susunannya menjadi seperti berikut ini:


<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="#" selected>Menu DropDown</option>
<option value="Link 1">Teks 1</option>
<option value="Link 2">Teks 2</option>
</select>



Dan Hasilnya seperti berikut ini. Coba diklik ya...untuk mengetahui perbedaannya:





Bagaimana teman-teman? Gampangkan?




Semoga Bermanfaat [^_^]

Cara Memasang Menu Horizontal

Apa itu menu horizontal? Menu horizontal adalah menu yang gak vertikal, itu penjelasan singkatnya...wkwkwkwkjust kidding...serius2: menu horizontal adalah menu navigasi yang memilki arah deret horizontal. Jadi dengan menu ini, teman2 bisa mengatur beragam menu di blognya masing2. Biasanya menu yang disediakan meliputi home atau halaman depan blog, daftar isi, profil admin, dsb dan tentunya teman2 bisa mengaturnya sedemikian rupa sesuai keinginan masing2.

Agar lebih jelasnya teman2 bisa nengok ke bagian atas alias header blog ini, nah deretan horizontal yang terdapat menu seperti Home, Daftar Isi, English, العربية, dsb ...nah, itulah yang dinamakan menu Horizontl



Dah, langsung aja yaaa...cara bikinnya seperti biasa teman2 login ke blogger dulu, lalu klik tuh Tata Letak lalu Edit HTML

Selanjutnya letakkan kode berikut ini tepat di atas kode tag ]]></b:skin> (cara menemukan kode tag nya tekan Ctrl + F dan masukan kode tag)

.horizontal-menu{width:100%; overflow:hidden; border-bottom:1px solid #000000;}
.horizontal-menu ul{margin:0; padding:0; padding-left:0px; font:11px Arial; list-style-type:none}
.horizontal-menu li{display:inline; margin:0}
.horizontal-menu li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#999999;}
.horizontal-menu li a:hover{color:#FFFFFF; background:#FF9900}

Sudah itu klik simpan template


Bagian Utama yang bisa teman2 ubah adlh sbg berikut:

-------------------------------------
Biru: Itu adalah ketebalan garis pinggir di bawah menu, bagi teman2 yg tdk menginginkannya silahkan 1px diubah menjadi 0px

Pucat: itu adalah warna tampilan menu, contoh:. Silahkan cari kode warna di sini

Orange: Adalah Warna background ketika disorot, ketika tman2 menyorot menu horizon pada blog ini pasti warnanya seperti ini:. Silahkan cari kode warna di sini
-------------------------------------


Selanjutnya yang harus teman2 lakukan yaitu menaruh kode HTML menu horizontal pada elemen add gadged bagian header (bagian atas blog)

Bagi teman2 yang ternyata template-nya gak ada elemen add gadget pada bagian headernya, maka bisa ditambah dengan menggunakan trik yang berada di postingan "cara menambah add elemen pada bagian header", pilih add elemen di bawah header, bukan yang di atas header. Kalau sudah menerapkan trik tersebut, maka langkah selanjutnya (pastikan anda sekarang berada pada halaman tata letak/layout) adalah klik add gadget/tambah gadget, pilih gadget HTML JavaScript, dan isikan kode HTML berikut di dalamnya

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="horizontal-menu">
<li>
<a href=' http://wisnu-utomo8.blogspot.com/ ' title=''> Beranda</a></li>
<a href=' http://www.toki.or.id/ ' title=''> Tim Olimpiade Komputer Indonesia</a></li>
<a href=' http://www.games.co.id ' title=''> Game Online</a></li>
<a href=' https://www.facebook.com/#!/wisnu.centerz ' title=''> My Facebook</a></li>
<a href=' http://www.sman1-sekadau.sch.id ' title=''> Website SMA Negeri 1 Sekadau </a></li>

</li>
</div>
</div>


Klik Simpan


Yang perlu teman2 ubah adalah pada bagian2 yang telah saya tandai denagn warna biru itu adalah link/URL menu serta bagian yang di-bold/ditebalkan yaitu keterangan dari link/URL tersebut, ex: http://wisnu-utomo8.blogspot.com ===>> HOME

Bagaimana...gampangkan?

O ya, hampir kelupaan. Mungkin beberapa rekan blogger merasa trik di atas rada susah atau mungkin ribet, maka gak sah khawatir...masih ada alternatif lain, yaitu cara membuat menu horizontal secara instan. Tentu ini hanya membutuhkan waktu yang relatif pendek untuk membuatnya. Oh iya...gak hanya menu horizontal yang dapat teman2 buat, menu vertikal juga bisa...dan kerennya lagi bisa milih2 gaya/style suka2 kita. Biar gak kelamaan, langsung aja kunjungi web: Accessify.com

Berhubung itu webnya bule, jadi teman2 bisa menggunakan jasa Google translate. Itung2 buat nerjemahin kata2 yg susah. GoOd LuCk~





Semoga Bermanfaat []

Cara Membuat Slideshow Foto Via Flickr

Posting Ke - 8 nih, gue pengen kasi tahu gimana cara masukin slide foto di blogger tapi via flickr. caranya gak susah kok? langsung aja ya gue kasi tahu, liat aja di bawah ini caranya:


1. pertama kali kamu harus punya akun flickr dulu, kalau belum ada daftar aja dulu klik di sini 
2. upload dulu foto - foto yang kamu punya!!!     
3. setelah itu buka you photostream dan klik tombol slideshow (untuk membuat slide dari foto2 yang udah kamu upload)
4. klik tombol share (untuk dapetin embed code nya), lalu copy code tersebut
5. buka blog mu, -->add gadget -->HTML/Java Script -->paste code nya tadi

udah deh selesai, gampang kan. Semoga sukses ya!!!

Burung Twitter Beterbangan Di Blog

Mungkin temen - temen blogger sudah sering melihat burung yang berterbangan di blog-blog atau di website-website tertentu...lalu muncul keinginginan untuk membuatnya, soalnya selain kelihatan lucu, unik, dan menggemaskan juga memiliki fungsi agar pengunjung blog kita bisa tahu akun twitter kita yang kemudian membuat kesempatan jumlah pengikut twitter kita semakin banyak dan tentu ini akan ada pengaruhnya dengan jumlah trafik blog kita. Iya nggak, iya nggak? Oke deh, langsung saja...hehe

Bagi kalian yang mungkin belum pernah lihat, silakan lihat dulu screenshot/penampakannya berikut...


Pas Lagi Terbang

Lalu ketika mendarat, berikut tampilannya...

Sudah Mendarat, kelihatan imut yaaa... :D

Nah, bagaimana? Sudah mulai tertarik untuk membuat Twitter Burung berterbangan di blog seperti di atas? Silahkan untuk mengikuti langkah-langkah berikut:

1. Login ke akun Blogger anda
2. Lalu kliklah menu "Layout"

3. Klik "Add a gadget"

4. Pilih "HTML/Java Script"

5. Paste-kan kode berikut di dalamnya:

<script type="text/javascript" src="http://t4belajarblogger.googlecode.com/files/tripleflap_t4belajarblogger.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizEcV-NcNE2Tl8rmZeHhZWqqSYo5COFCPpJN3IxuJswVooZz3v5jq5iJfopT8VsgB5nJmTcHBKnc9pulSlrGNDjCA2BdcThy1Nyuemb7AZpHE-FcNYjahPBxJXrxLhNU6lZNKEKCM1LE_f/s320/birdsprite_t4belajarblogger.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/#!/idtwitteranda";var tweetThisText = "Twitter - Techno World http://wisnu-utomo8.blogspot.com/";tripleflapInit(); </script>

Silahkan untuk mengganti bagian yang telah saya tandai dengan warna biru dengan ID Twitter anda, lalu yang bagian warna merah dengan judul blog anda, dan yang berwarna hijau dengan URL Blog/web anda.

6. Klik tombol "Save". Selesai....!

Jika sudah, sekarang silakan untuk melihat tampilannya di blog anda...kliklah post mana saja yang ada di blog anda...maka nanti akan ada burung yang berterbangan.  Semoga bermanfaat...

Cara Mengganti Kursor Pada Blog

Kali ini gue akan membahas tentang cara mengubah tampilan kursor yang ada di blog. Jika temen - temen masih penasaran dengan yang dimaksud mengubah kursor, maka silahkan untuk memperhatikan kursor blog ini terlebih dahulu. Bagaimana? Menarik bukan....?


Nah, di atas itu adalah tampilan kursor blog ini. Bagi kalian yang ingin mengubah kursor yang ada di blognya, maka kalian bisa mengubahnya melalui langkah-langkah berikut:

1. login lah ke akun blogger sobat terlebih dahulu
2. Lalu klik "Layout"

3. Pilih "add a gadget" lalu pilih "HTML/Java Script" dan paste-kan kode berikut untuk mulai mengubah tampilan kursor yang ada di blog sobat:

a. Kode 1: mengubah kursor tapi tidak mengubah kursor ketika menyorot link

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAe0d86nedAowEusD3nnj5pdCjakGOonfocmfygHWXIabzWRtdwIHcxAhvVGNX1pawhiDjPQCN2HxSZHVbioYDHOIxSQ-ImycO3RI5qhP8VIy0AhkoJNxUi5YWdYUVYaSgy2VxTTRI-U66/"), auto;}
</style>

b. Kode 2: mengubah kursor serta tetap berubah walau disorot ke arah link

<style type="text/css">
body{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAe0d86nedAowEusD3nnj5pdCjakGOonfocmfygHWXIabzWRtdwIHcxAhvVGNX1pawhiDjPQCN2HxSZHVbioYDHOIxSQ-ImycO3RI5qhP8VIy0AhkoJNxUi5YWdYUVYaSgy2VxTTRI-U66/"), auto;}
body a:hover{cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAe0d86nedAowEusD3nnj5pdCjakGOonfocmfygHWXIabzWRtdwIHcxAhvVGNX1pawhiDjPQCN2HxSZHVbioYDHOIxSQ-ImycO3RI5qhP8VIy0AhkoJNxUi5YWdYUVYaSgy2VxTTRI-U66/"), auto;}
</style>

SILAHKAN UNTUK MEMILIH SALAH SATU KODE YANG SOBAT INGINKAN

4. Jika sudah, maka silahkan untuk tekan tombol "SAVE" atau "SIMPAN"


PENTING:

Sobat bisa mengganti link gambar yang telah saya tandai warna biru dengan link gambar kursor sesuai keinginan sobat. Berikut adalah beberapa link gambar kursor koleksi saya:


Link:



Link:



Link:



Untuk selebihnya temen - temen bisa mencarinya melalui Google... :D

Semoga bermanfaat. Keep blogging...

Cara Membuat Read More Otomatis

Baiklah pada kali ini saya akan memberitahukan cara membuat read more otomatis dengan menggunakan gambar. Langkah pertama kali yang harus dilakukan seperti biasa ya gan pilih Dashboard,lalu Desain/Tata Letak, pilih edit HTML dan Contreng tulisan Expand Widget Templates.

setelah itu,cari kode </head>,setelah ketemu tepat dibawahnya CoPas(Copy Paste) kode javascript berikut:

<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 src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah kode ketemu  hapus kode tersebut dan gantilah dengan kode berikut:

<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 alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>
Nah demikianlah langkah-langkah cara membuat read more pada blog, Cukup mudah bukan cara membuatnya. selamat mencoba agan-agan sekalian. Good luck . . 

Membuat Buku Tamu Melayang

oke kali ini gue pengen kasi info seputar dunia blogger nih. yang punya masalah sama tampilan bloggernya yang luar biasa rame tapi pengen nambahin satu bahan lagi biar lebih keren blognya. nih gue pengen bagiin gimana cara bikin buku tamu tapi nggak bikin penuh tampilan blog kalian. silahkan di coba ya, ini caranya :

1. kalian harus daftar dulu di cbox, kunjungi dulu http://www.cbox.com/ lalu klik SIGN UP
2. isi biodatanya secara lengkap, dan kalau sudah klik CREATE MY CBOX
3. setelah itu klik PUBLISH! untuk mendapatkan embed code dari cbox kalian
4. Buka blog kamu, seperti biasa pilih tambah gadget lalu html/java script
5. silakan copy - paste kode berikut ini:

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgZsocceIhprqr18wIkghM_6ZohDT18CFX5KjT2iaAcwe7Gduf9guiz7L9SLKDSdOjxpBEA0X7lnfY-y7xTvHX8hf4Sl6wMp3B04alAzakNvQr1WsTfLRDxkd9xOmzG5J37ObAg4D-TAQx/s1600/bukutamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent">
Copy Paste kode cbox disini 
br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://www.cerdaskom.com/2012/02/membuat-buku-tamu-melayang.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

6. Pada tulisan berwarnah merah silakan temen - temen blogger copy-paste kode cbox nya.
7. simpan urusannya selesai deh

semoga bermanfaat yaa...
sumber: http://www.cerdaskom.com/2012/02/membuat-buku-tamu-melayang.html

 
Techno World © 2012 | Designed by Cheap TVS, in collaboration with Vegan Breakfast, Royalty Free Images and Live Cricket Score