Gadget

Showing posts with label posting. Show all posts

Cara mengetahui / mengecheck artikel (postingan) blog yang masuk di google

Cara ini mungkin akan mempermudah kita untuk mengetahui seberapa banyak artikel kita yang telah masuk di google. Mau tahu caranya?

1. Masuk dulu ke Google
2. Setelah itu tuliskan kalimat " site:http://alamatbloganda.blogspot.com " (tanpa kutip)
3. Enter

Nah muncul artikel sobat yang muncul di google. Salam Blogger :D

Read User's Comments(0)

Cara membuat Text Area Pada Blog

Labels: dasar blog, posting

Text Area sering digunakan oleh para blogger sebagai kotak untuk menyisipkan kode tukar link maupun tukar banner, namu ada juga yang mengunakan ini untuk menyisipkan kode HTML. Sebenarnya untuk membuat text area itu sangat mudah, contohnya seperti ini

Cara membuatnya sangat mudah kok, sisipkan saja kode dibawah ini pada Edit HTML yang ada di postingan

<textarea rows="5" cols="15" onfocus="this.select()" onmouseover="this.focus()" style="display: inline;" name="txt" onclick="this.focus();this.select()">~~Hai Sekarang kalian sedang membaca postingan berjudul Cara membuat Text Area pada blog, selamat membaca ya :D~~ </textarea>

Belum tahu letak kode Edit HTML?

Read User's Comments(0)

Cara Membuat Recent Post dengan Tumbnails pada blog

Labels: aksesoris blog, dasar blog, gadget, posting

Screenshot:

Gambar 1.1. Recent Post dengan Tumbnails

Mau buat seperti itu, mudah kok

1. Pertama masuklah ke Dasboard sobat, lalu klik salah satu blog sobat
2. Pilih Tata Letak , lalu Tambah Gadget
3. Setelah itu akan muncul tab baru, pilih gadget Html Javascript
4. Lalu muncul halaman baru lagi
5. Isi Judul, dan isikan kode berikut pada kontennya

<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 = "Alamat Blog";

</script>

<script src="http://tutorialblogger.googlecode.com/files/recentposttumbanail.js" type="text/javascript"></script>

6. Simpan Elemen Tersebut

Read User's Comments(0)

Cara menyisipkan link pada kotak komentar

Labels: dasar blog, posting

Sebenarnya cara menyisipkan link pada kotak komentar itu sama saja dengan cara menyisipkan link pada postingan. Cuma kalau cara menyisipkan link pada kotak komentar menggunakan kode HTML, contohnya seperti di bawah ini

Gambar 1.1. Contoh Link yang saya tinggalkan pada blog teman

Mau buat link seperti itu? Caranya mudah kok

Pada saat nulis sisipkan kode di bawah ini

<a href='http:/~~/rizved.blogspot.com~~'>~~Tutorial Blogger~~</a>

Contohnya saya menulis seperti ini

Kunjungi balik ya sob di <a href='http://rizved.blogspot.com'>Tutorial Blogger</a>

Setelah jadi akan seperti ini

Kunjungi balik ya sob di Tutorial Blogger

Read User's Comments(0)

Cara membuat Dropcap pada postingan blog

Labels: dasar blog, posting

Pasti kawan-kawan semua sudah mengerti apa itu dropcap? Kalau ada yang belum mengerti akan saya jelaskan secara rinci apa itu dropcap. Drop cap adalah huruf besar pada awal kalimat, biasanya dropcap ini sering ditemukan saat kita sedang membaca surat kabar sebagai awal kalimatnya. Bukan hanya itu dropcap juga biasa dipakai pada MS. Word (Microsoft Word). Sekarang fasilitas dropcap ini bisa kita gunakan untuk awal kalimat pada postingan blog (blogger), ya meskipun caranya agak sedikit susah/rumit. Dibawah ini adalah contoh dropcap pada postingan blog

utorial Blogger adalah blog yang bisa dibilang cukup berteman dan tidak sombong

Untuk membuat dropcap pada postingan blog, ikuti langkah dibawah ini
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

Gambar 1.1. Edit HTML

Gambar 1.2. Lanjutkan

2. Cari kode ]]></b:skin> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat diatas kode yang tadi

/* Drop Cap
----------------------------------------------- */
.dropcap {
float:left;
color: #000000;
line-height:35px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:70px;
}

4. Simpan templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

Menggunakan Dropcap Pada Postingan

1. Buatlah sebuah postingan

2. Klik Edit HTML

3. Ketik <div class="dropcap">Huruf Besar</div>

Contohnya seperti ini

<div class="dropcap">H</div>ai nama saya Andreano Calvin

Setelah jadi akan seperti ini

ai nama saya Andreano Calvin

Semoga Berhasil

Read User's Comments(0)

Cara menyisipkan video Youtube di postingan Blog

Labels: dasar blog, posting

Youtube merupakan sebuah situs yang memiliki fasilitas video sharing (membagi video). Tahukah kalian asal mula Youtube? Pada bulan Februari 2005 Youtube didirikan oleh 3 orang mantan karyawan Paypal yang bernama Chad Hurley, Steve Chen, dan Jamed Karim. Dan pada tahun 2006 youtube akhirnya telah resmi dibeli oleh Google Inc. Senilai 1,65 Milyar US (Matanya pada hijau tuh :p)

Dengan adanya Youtube ditangan Google akhirnya Youtube digandeng dengan Blogger, artinya setiap video Youtube bisa kita bagikan melalui postingan Blogger (Sebagai perangkat pendukung). Untuk menyisipkan video Youtube tidak terlalu sulit atau bisa dikatakan sangat mudah, mari kita bahas bersama-sama

1. Kunjungi www.youtube.com kemudian pilih video yang ingin kalian sisipkan (pastikan video tersebut cocok dengan tema posting)

2. Setelah telah kalian memilih video perhatikan bagian bawah dari video tersebut, ada tombol Bagi lalu Sematkan. Klik tombol tersebut dan akan muncul sebuah kotak teksarea dengan kode HTML. Copy semua kode tersebut dengan menekan CTRL+C atau Klik kanan -> Copy

Gambar 1.1. Kode yang saya dapatkan

3. Setelah kode kalian salin, buatlah sebuat postingan. Lalu klik Edit HTML
Tampilan baru: Edit HTML berada di sisi kiri atas (sebelah kalimat compose)
Tampilan lawas: Edit HTML berada di sisi kanan atas (sebelah kalimay compose)
Paste kode HTML pada tersebut pada akhir postingan atau bisa anda letakan di bagian tengah maupun awal postingan. Jika sudah kalian paste klik compose kembali

4. Sebelum kalian terbitkan, kalian bisa mem-previewnya terlebih dahulu. Setelah kalian sudah mantap pada letak video tersebut silakan kalian terbitkan postingan tersebut

Read User's Comments(0)

Cara Memasang Google Translate dalam bentuk bendera kotak pada Blog

Labels: dasar blog, gadget, posting

Pada tutorial yang lalu sebenarnya saya telah membahas postingan yang memiliki tema yang sama. Yaitu “Cara memasang google translate pada blog (Drop Down)” dan “Cara memasang google translate pada blog (Bendera bulat)”, untuk siang hari ini kita akan membahas postingan yang hampir mirip dengan sebelumnya cuma ada sedikit saja yang berbeda. Sudah tahukan apa yang akan kita bahas? (Baca aja tuh judulnya). Postingan ini sengaja saya bagikan buat anda yang menyukai ikon penerjemah dalam bentuk bendera seperti di bawah ini

Gambar 1.1. Tampilan Google Translate dalam bendera

Bagaimana ikonnya? Keren, biasa, tidak tertarik atau apa?
Oke deh kalau begitu kita mulai tutorialnya
1. Masuk ke Dashboard -> Blog sobat -> Tata letak -> Add Gadget -> HTML/JavaScript
2. Masukan kode yang di bawah ini pada konten elemen tersebut

<form action="http://www.google.com/translate">
<script language="JavaScript">

</script>
<input value="en" name="hl" type="hidden"/>
<input value="UTF8" name="ie" type="hidden"/>
<input value="" name="langpair" type="hidden"/>
<center>
<input onclick="this.form.langpair.value=this.value" title="Chinese Simplified" value="ro|zh-CN" type="image" height="20" src="http://www.google.com/images/flags/cn_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="English" value="ro|en" type="image" height="40" src="http://www.google.com/images/flags/uk_flag.gif" width="50" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Greek" value="ro|el" type="image" height="20" src="http://www.google.com/images/flags/gr_flag.gif" width="30" name="langpair"/>
<br/>
<input onclick="this.form.langpair.value=this.value" title="Hindu" value="ro|hi" type="image" height="20" src="http://www.google.com/images/flags/in_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="German" value="ro|de" type="image" height="20" src="http://www.google.com/images/flags/de_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Dutch" value="ro|nl" type="image" height="20" src="http://www.google.com/images/flags/nl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Russian" value="ro|ru" type="image" height="20" src="http://www.google.com/images/flags/ru_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Bulgarian" value="ro|bg" type="image" height="20" src="http://www.google.com/images/flags/bg_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Polish" value="ro|pl" type="image" height="20" src="http://www.google.com/images/flags/pl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Czech" value="ro|cs" type="image" height="20" src="http://www.google.com/images/flags/cz_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Croatian" value="ro|hr" type="image" height="20" src="http://www.google.com/images/flags/hr_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="French" value="ro|fr" type="image" height="20" src="http://www.google.com/images/flags/fr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Italian" value="ro|it" type="image" height="20" src="http://www.google.com/images/flags/it_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Portuguese" value="ro|pt" type="image" height="20" src="http://www.google.com/images/flags/pt_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Spanish" value="ro|es" type="image" height="20" src="http://www.google.com/images/flags/es_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Arabic" value="ro|ar" type="image" height="20" src="http://www.google.com/images/flags/sa_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Japanese" value="ro|ja" type="image" height="20" src="http://www.google.com/images/flags/ja_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Korean" value="ro|ko" type="image" height="20" src="http://www.google.com/images/flags/kr_flag.gif" width="30" name="langpair"/>
<input onclick="this.form.langpair.value=this.value" title="Chinese (traditional)" value="en|zh-TW" type="image" height="20" src="http://www.google.com/images/flags/tw_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Danish" value="ro|da" type="image" height="20" src="http://www.google.com/images/flags/dk_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Finnish" value="ro|fi" type="image" height="20" src="http://www.google.com/images/flags/fi_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Norwegian" value="ro|no" type="image" height="20" src="http://www.google.com/images/flags/no_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Swedish" value="ro|sv" type="image" height="20" src="http://www.google.com/images/flags/se_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Catalan" value="ro|ca" type="image" height="20" src="http://www.google.com/images/flags/cl_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Filipino" value="ro|tl" type="image" height="20" src="http://www.google.com/images/flags/ph_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Hebrew" value="ro|iw" type="image" height="20" src="http://www.google.com/images/flags/il_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Indonesian" value="ro|id" type="image" height="20" src="http://www.google.com/images/flags/id_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Latvian" value="ro|lv" type="image" height="20" src="http://www.google.com/images/flags/lv_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Lithuanian" value="ro|lt" type="image" height="20" src="http://www.google.com/images/flags/lt_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Serbian" value="ro|sr" type="image" height="20" src="http://www.google.com/images/flags/rs_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Slovak" value="ro|sk" type="image" height="20" src="http://www.google.com/images/flags/sk_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Slovenian" value="ro|sl" type="image" height="20" src="http://www.google.com/images/flags/si_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Ukrainian" value="ro|uk" type="image" height="20" src="http://www.google.com/images/flags/ua_flag.gif" width="30" name="langpair2"/>
<input onclick="this.form.langpair.value=this.value" title="Vietnamese" value="ro|vi" type="image" height="20" src="http://www.google.com/images/flags/vn_flag.gif" width="30" name="langpair2"/>
<h6>Widget By <u><a href='http://rizved.blogspot.com/2012/04/cara-memasang-google-translate-dalam.html'>Tutorial Blogger</a></u></h6>
</center>
</form>

1. 3. Setelah itu simpan elemen tersebut

Read User's Comments(0)

Cara Memasang Tombol Share To Facebook Di Blog

Labels: aksesoris blog, dasar blog, posting

Memasang gadget share facebook pada blog ini bertujuan untuk mempublikasikan atau sharing posting atau artikel blog kita ke teman blogger dan memperluas jaringan blog sobat (Meningkatkan reputasi blog), serta dapat juga mendatangkan banyak pengunjung (Apa bedanya sama reputasi?)/ Untuk membuatnya ikuti langkah dibawah ini

1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget

Gambar 1.1. Edit HTML

Gambar 1.2. Lanjutkan

2. Cari kode <span class='post-author vcard'> (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)

3. Setelah ketemu letakan kode dibawah ini tepat dibawah kode yang tadi

<b:if cond='data:post.url'>
<a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url'><img alt='This Share Facebook' border='0' src='http://img32.imageshack.us/img32/5742/sharefacebook.jpg'/></a>
</b:if>

Gambar 1.3. Peletakan kode HTML

4. Simpan Templatenya

Untuk yang kalimat simpannya tidak terlihat, hilangkan dulu kotak pencariannya

Gambar 1.4. Hasil Akhir kode tersebut Klik Disini

Read User's Comments(0)

Cara Membuat Link Berbentuk Spoiler / Form Button

Labels: dasar blog, posting

Cara Membuat Link Berbentuk Spoiler / Form Button sebenarnya, sama saja seperti Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog hanya sedikit saja yang berbeda. Cara Membuat Link Berbentuk Spoiler / Form Button jika di klik maka akan menuju ke suatu link sedangkan Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog jika di klik akan memunculkan suatu gambar

Dibawah ini adalah contoh dari Cara Membuat Link Berbentuk Spoiler / Form Button

3. Setelah itu masukan script berikut ini

<form action="http://rizved.blogspot.com/" method="get" target="_blank">
<input name="q" type="submit" value="Klik Disini!" />

4. Selesai

Cukup ganti kode yang bewarna merah. Dan Link dengan spoiler sobat sudah jadi

Selamat Berkreasi ^_^

Read User's Comments(0)

Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog

Labels: posting

Ok lanjut saja, berikut adalah contohnya

Berikut adalah Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog

1. Buatlah sebuah postingan
2. Pilih Edit HTML

3. Setelah itu masukan script berikut ini

<center><div>
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Gambar'; }" style="margin: 0px; padding: 0px;" type="button" value="Lihat Gambar" /></div>
<div style="background: #ffffff; border: 0px solid #000; margin: 10px auto; padding: 5px;">
<div style="display: none;">
<img alt="Kumpulan Tutorial | Aksesoris Blog | Dasar dasar Blog | Gadget Blog | Template Blog
" height="200" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/276920_330771053623003_487235119_n.jpg" title="Tutorial Blogger" width="300" /></div>
</div>
</center>

Keterangan:

Silakan Ganti kode bewarna biru dengan link image lain

4. Selesai

Selamat Berkreasi ^_^

Read User's Comments(0)

Gadget

Gadget Unik Menarik

About

Archives

Categories

Cara mengetahui / mengecheck artikel (postingan) blog yang masuk di google

Cara membuat Text Area Pada Blog

Cara Membuat Recent Post dengan Tumbnails pada blog

Cara menyisipkan link pada kotak komentar

Cara membuat Dropcap pada postingan blog

Cara menyisipkan video Youtube di postingan Blog

Cara Memasang Google Translate dalam bentuk bendera kotak pada Blog

Cara Memasang Tombol Share To Facebook Di Blog

Cara Membuat Link Berbentuk Spoiler / Form Button

Cara Menyembunyikan / Menyelipkan Gambar Dengan Spoiler Pada Blog