Cara Memasang Emoticon Yahoo di Postingan

Nah, akhirnya, setelah sekian lama admin vakum, dan sekarang untuk artikel pertama setelah sekian lama vakum admin akan memberi tips "Cara Memasang Emoticon Yahoo di Postingan" bagaimana?, tertarik, silahkan di cek artikelnya sob, cekidot...

Artikel yang menarik akan membuat pengunjung blog merasa semakin lebih nyaman, betul tidak sob?, nah salah satu cara untuk membuat artikel lebih menarik adalah dengan memasang "Emoticon" di dalam postingan kita, dengan memasang emoticon di postingan, sang penulis akan lebih mudah menggambarkan perasaanya pada kata atau kalimat di artikel tersebut sob, sebenernya sih banyak sob emoticon yang bisa di pasang di artikel blog, contohnya, emoticon kaskus, emoticon facebook, emoticon yahoo, dan lain lain, tapi menurut saya yang lebih menarik dan mudah untuk di dapat ya emoticon yahoo sob, wkwkwk

Sebenarnya ada 2 cara untuk menambahkan emoticon yahoo pada postingan blog, cara yang pertama yaitu manual, kalo manual otomatis lebih lama dan ribet masangnya, dan cara yang ke dua yaitu kebalikan cara pertama "otomatis". Untuk memasang emoticon yahoo di artikel kita membutuhkan kode url dan beberapa kode html untuk menampilkannya di dalam artikel kita.

Berikut ini adalah kode dan url emoticon yahoo yang siap di pasang di dalam postingan blog.

1. <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0> Hasilnya =
2. <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0> Hasilnya =
3. <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0> Hasilnya =
4. <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0> Hasilnya = 

Empat Emoticon di atas adalah contoh url dan kode htmlnya, untuk url yang lain silahkan di copy sendiri dari emoticon di bawah ini

 Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Hasilnya =

Sekian artikel dari Admin, salam blogger

[Baca Selanjutnya...]

Tips Membuat Semua Link Terbuka pada Tab Baru Secara Otomatis

Artikel ke.2 Last Generation pada malam hari ini sob, dan kali ini pun masih membahas tips blogging, langsung saja kita ke topik pembahasan sob, males lama-lama ngetik bikin jari capek. ( males maksud nya )

Mungkin sobat blogger telah jenuh saat membuat artikel harus menambahkan target_blank kepada setiap link sobat blogger maka dari itu untuk malam ini saya akan share sedikit info tentang Tips Membuat Semua Link Terbuka pada Tab Baru Secara Otomatis, ingin tau seperti apa, langsung saja, cekidottttt.....

First Step.
Tentunya login ke blogger dong

Next Step.
buka Rancangan, Edit HTML. ( jangan lupa centang "Expand Template Widget" )

Then
kita hanya tinggal menaruh kode <base target='_blank' /> di bawah kode </head>

Finish, sekarang save template sobat blogger, dan lihat hasilnya, link akan terbuka pada tab baru setiap sobat blogger mengclick link tersebut

good luck, dan sukses selalu.

By : Ivan Adi Pratama to Last Generation For Sobat blogger semua

[Baca Selanjutnya...]

Cara Membuat Tabs Info | Seperti Pada Sebelah Kanan Blog Saya

Malem sob, malem ini Last Generation akan sedikit berbagi info sepurta tips blog kepada anda semua
oke langsung saja kita ke topik pembicaraan malam ini yaitu "Cara membuat Tabs Info" kalo masih belum tau seperti apa, bisa lihat screenshootnya

Bagaimana ?? Sudah tau dan tertarik ??
ini dia step by step yang harus sobat blogger ikuti.

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Tata Letak - Edit HTML"

Langkah 3
Klik "Expand Template Widget" ( saya sarankan lebih baik sobat blogger download dulu template sobat blogger )

Langkah 4
Cari kode di bawah ini:
]]></b:skin>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:



.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}





Langkah 6
Cari kode dibawah ini:
</head>

Langkah 7
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 6:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
 $(".panel").toggle("fast");
 $(this).toggleClass("active");
 return false;
});
});
</script>



Langkah 8
Cari kode dibawah ini:
</body>

Langkah 9
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 8:

<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Blog saya [Last Generation] - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel yang saya susun. Ada banyak hal tentang saya, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://www.facebook.com/nguaceng.2nd' title='Ivan Adi Pratama'>Selengkapnya tentang Saya</a></p>

<h3>Sepintas Tentang Admin</h3>
<img height='90px' src='Pasang Link Foto Sobat' width='75px'/>
<p style='text-align:justify'>Nama saya Ivan Adi Pratama, Alamat Saya Di Perum Sumber Indah I Rt.2/Rw.5. Sampai sekarang saya masih tinggal disana, jadi jikalau mungkin di antara sobat blogger ada yang mau berkunjung kerumah saya silahkan. Saya seorang pelajar yang masih duduk di bangku smp, sebentar lagi mau lulus sih, hhe, ya itulah sepintas tentang saya semoga sobat blogger bisa lebih tau tentang saya.</p>

<div style='clear:both;'/>

<div class='columns'>
 <div class='colcenter'>
<h3>Social Stuff</h3>
<p style='text-align:justify'>
<a href='http://twitter.com/nk_squad' title='Twitter'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRRRUjQ7njgs4YHy6TbtH748aB8K5q8PXSANwHGJ_odHkYSNl-dfvN9O57lpES7fLTPdmSxo8DWX7GjFYZm-kNHGbVtXiz9kJhdIVWwTe13tKF9nvvsscTCKjkcxZzXuW0BkhqAifxGLI/'/></a>

<a href='http://facebook.com/nguaceng.2nd' title='Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2g3L0DQMER_qehTDaha5ipFae-8T509pO9Q5aO4mPL_lG-5QMS1B5zt0RW1fblFBrslfH6SpU08Xn_ZHnlCsD_PnbOtTUykjfbWjyq0iodZvwgcpugVnmkQ6NwbUTNunG9VOEKSNvHE/'/></a>

<a href='mailto:black.angellzt@windowslive.com' title='E-mail'><img alt='E-mail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPd4KVXPsMsY80FkSyudtGMwGgZCsp0Sb77eEUGaX7_1d4cFpj9dTtXvaMBMg3Jsp7t15tSd6oPlS8AUDbfzgTBSZmyEuixGrxYCHHpW4FXQX24RWDLbLDHhmkDXPB66cVeSG55rzMtNk/'/></a></p>
 </div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>

info :
Teks Merah : Pasang link foto sobat blogger, buat foto profil gitu.

Teks Biru Muda : Link profil twitter sobat blogger.

Teks Biru Tua : Link Facebook masing masing sobat blogger

Teks Hijau : Email sobat blogger


Last step, save template sobat blogger dan lihat jadinya.
good luck, dan sukses selalu.

By : Ivan Adi Pratama to Last Generation For Sobat blogger semua

[Baca Selanjutnya...]

Cara Mengedit Teks, Link, Gambar pada Blog

Dalam dunia Blogging tak lepas dari yang namanya teks dan gambar. dan pada setiap teks dan gambar tersebut biasanya tersimpan link dan title atau judul dari dari gambar dan teks tersebut.

Khusus pada gambar biasanya tersimpan alt (Alternative Text) atau Associated Text. yang berguna sebagai teks alternatif gambar tersebut.

Berikut ini adalah cara cara mengedit teks dan gambar :


* CARA MEMASUKKAN GAMBAR
kode :

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" border="0" height="18" width="30">

keterangan :
yang warna BIRU adalah lokasi gambar dimana disimpan.
height="18" width="30" adalah ukuran tinggi (height) dan lebar (width) gambar
hasil :




* CARA MEMBUAT LINK
Kode :

<a href="knight-xp.blogspot.com" >Last Generation </a>

Keterangan :
Teks warna BIRU adalah alamat link yang dimaksud.
Tulisan "Trik Tips Tutorial" adalah tulisan yang akan ditampilkan.

Jika anda ingin link yang tampil adalah sebuah gambar maka kita hanya perlu menggabungkannya, sehingga kodenya akan seperti ini :

<a href="http://knight-xp.blogspot.com" target="_blank"><img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" border="0" height="18" width="30"> </a>

Keterangan :
tambahan kode target="_blank" adalah digunakan apabila anda ingin link atau gambar yang di klik akan membuka tab baru.

Jika ingin menambahkan title pada link teks dan gambar anda tinggal menambahkan kode
title="keterangan link" ganti tulisan keterangan link dengan keterangan link yang anda inginkan seperti :

<a href="http://knight-xp.blogspot.com/" target="_blank" title="Ke Beranda">Trik Tips Tutorial</a>

Hasilnya : Trik Tips Tutorial



* CARA MEMBUAT TEKS/GAMBAR BERADA DI TENGAH
Kode :

<center> teks/gambar atau link gambar/link teks </center>

Keterangan :
Ganti tulisan "teks/gambar atau link gambar/link teks" dengan teks atau gambar yang dimaksud.



* CARA MEMBUAT BARIS BARU
Kode :

<br> atau kode <br/>

Keterangan :
Tambahkan kode berwarna MERAH tersebut sebelum atau sesudah objek (teks/gambar) yang dimaksud.



* MEMBUAT HURUF TEBAL, MIRING, BERGARIS BAWAH, TERCORET, KECIL BAWAH (Subscript) DAN KECIL ATAS (Superscript)
Kode :
<b>teks</b> hasil : teks menjadi tebal.
<i>teks</i> hasil : teks menjadi miring.
<u>teks</u> hasil : teks menjadi bergaris bawah.
<strike>teks</strike> hasil : teks menjadi bergaris tengah atau tercoret.
_teks hasil : _teks menjadi kecil bawah atau Subscript.
^teks hasil : ^teks menjadi kecil atas atau Superscript.


* MEMBERI WARNA TEKS

<font color="#FF0000"> Merah </font>
<font color="red"> Merah </font>

Keterangan :
Ganti text yang berwarna MERAH dengan warna atau kode warna kesukaanmu.
Hasil :
Merah

Untuk kode kode warna yang lainnya bisa di lihat di Kode Kode Warna



* MERUBAH UKURAN TEKS
kode :

<font size="1">ini font size 1</font>

Ganti angka 1 dengan ukuran 1, 2, 3, 4, 5, dan seterusnya Hasilnya seperti :
Ini font size 1
Ini font size 2
Ini font size 3
Ini font size 4
Ini font size 5
dan seterusnya... Demikianlah artikel tentang Cara Mengedit Teks dan Gambar
Kembali ke Beranda Blog Trik Tips Tutorial
Semoga Bermanfaat..

[Baca Selanjutnya...]

Memasang Widget Translate Google Flag

Memasang translete pada blog sangat perlu karena mungkin saja ada pengunjung dari negara asing yang nyasar keblog anda, tapi yang harus diperhatikan agar tidak terjadi kesalahan translate maka blog anda harus menggunakan bahasa yang resmi, bukan bahasa pasaran atau gaul.

Nah caranya:

• Seperti biasa sig in dulu ke blogger.
• Masuk/ klik tombol layout/ tataletak.
• Klik tombol elemen halaman/ page elemen=>tambah gadget=>HTML/ Java script
• Beri nama/ isi titel dengan kalimat translate atau dengan kalimat yang anda sukai. Kemudian Copi kode berikut dan paste dikolom HTML/ Java Script.

• Maka hasilnya seperti dibawah ini:

Google Translate

• Jika lebar dari sidebar anda tidak mencukupi untuk memuat susunan 2 baris seperti gambar di atas, anda bisa menggantinya dengan susunan 3 baris, seperti gambar di bawah ini:

Google Translate

• Silahkan anda copy dan pastekan script di bawah ini, jika anda menginginkan susunan 3 baris seperti gambar di atas

• Seandainyapun susunan 3 baris tidak muat pada sidebar anda, sekarang anda bisa mencoba dengan susunan 4 baris, seperti gambar di bawah ini:

Google Translate

• Silahkan anda copy dan pastekan script di bawah ini, jika anda menginginkan susunan 4 baris seperti gambar di atas

• Tekan tombol save/ simpan. Pada elemen halaman save lagi. Tunggu sampai proses berlangsung dan tampil info bahwa setting berhasil disimpan. Liat hasilnya diblog anda.

Semoga bermanfaat!!!
NB: Inspirasinya dari Pingin Belajar dengan sedikit pengeditan kode (URL gambar milik saya sendiri).

[Baca Selanjutnya...]