Kamis, 26 Juli 2012

Membuat Text Area dengan Tombol Highlight All

By Adam02.30Tutorial BlogspotNo comments

Membuat Text Area dengan Tombol Highlight All | Tutorial Blog

Tutorial kali ini saya akan coba berbagi tentang cara Membuat Text Area dengan tombol Highlight All. Dengan menggunakan Highlight All akan lebih memudahkan mengcopy kalimat/kode script yang ada di dalam text area.

Untuk membuatnya cukup mudah, silahkan copy kode dibawah ini :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL"><a href="http://banjarinfo.blogspot.com/" rel="dofollow" target="_blank">Tutorial Blog</a></textarea></div>
</form>
</div>

Silahkan ganti tulisan yang berwarna biru dengan tulisan/ kode script yang anda inginkan. hasilnya akan seperti dibawah ini :

Sekian penjelasan singkat mengenai cara Membuat Text Area dengan tombol Highlight All.
Semoga bermanfaat . . .

Membuat Efek Daun Berjatuhan di Blog

By Adam05.46Tips Dan Trik, Tutorial BlogspotNo comments

Membuat Efek Daun Berjatuhan di Blog | Tutorial Blog

Seperti halnya Memberi Efek Hujan Salju di Blog, efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

Login ke dashboard blogger anda.
Klik Template > Edit HTML.
Lalu klik Proceed dan centang Expand widget template.
Cari kode </head> pada template dengan menggunakan Ctrl+F.
Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

Memberi Efek Hujan Salju di Blog

By Adam06.31Tutorial BlogspotNo comments

Memberi Efek Hujan Salju di Blog | Tutorial Blog

Rasanya udah lama saya ga post, baru sekarang bisa update blog, jadi pada kesempatan ini saya akan berbagi salah satu cara untuk mempercantik blog, tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :

Login ke dashboard blogger sobat.
Pilih Layout > Add gadget > HTML/JavaScript.

Spoiler :
Letakkan script dibawah ini pada gadget.
<script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
Save dan lihat hasilnya.

Spoiler :

Ok sob, sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.

Menu Dropdown dengan Background

By Adam21.18Tutorial BlogspotNo comments

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

Login ke blogger Anda, klik menu Design > Edit HTML.
Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script>
Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
.dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}
Lalu klik Save Template.
Kemudian klik menu Design > Page Element > Add a Gadget.
Pilih HTML/Javascript, lalu masukkan kode berikut ini :
<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Optimasi SEO Menggunakan Anchor Text

By Adam21.38Seo, Tips Dan TrikNo comments

Optimasi SEO Menggunakan Anchor Text | Tutorial Blog

Anchor text merupakan sebuah teks berisi tautan link yang menuju pada sebuah halaman. Anchor Text dapat meningkatkan pageview, memperbanyak backlink dan meningkatkan trafik. hal tersebut dapat membuat sebuah situs memiliki tempat penting pada halaman Search Engine Result Page (SERP).

Dalam membuat Anchor text sebaiknya mengandung kata kunci yang di targetkan, menarik, dan mengandung arti yang mudah di mengerti.

Berikut beberapa contoh penulisan kode html untuk membuat anchor text :

Membuat Anchor Text sesuai judul Blog.
<a href="http://banjarinfo.blogspot.com/">Tutorial Blog</a>
Membuat Anchor Text untuk salah satu artikel.
<a href="http://banjarinfo.blogspot.com/2011/12/widget-recent-comment-valid-xhtml.html">Widget Recent Comment Valid XHTML</a>
Membuat Anchor Text pada image.
<a href="http://banjarinfo.blogspot.com/"><img alt="Tutorial Blog" border="0" src="Url Image" />Tutorial Blog</a>

Beberapa hal yang perlu diperhatikan dalam penggunaan anchor text :

Kerapatan keyword dalam sebuah postingan. Beberapa forum SEO menyarankan kerapatan anchor teks yang baik minimal 300 karakter terdapat 1 anchor text.
Jumlah karakter anchor text maksimal 60 karakter, karena search engine biasanya mengambil 60 karakter terdepan dari keyword. Jika lebih terkadang search engine tidak mampu mengindeks keywordnya.
Anchor text untuk link di dalam blog sebaiknya berhubungan dengan judul postingan atau lebih baik jika keyword yang di gunakan juga terdapat di judul postingan, meta tag, judul blog, nama domain dan deskripsi blog agar robot searcgh engine memberi bobot relevansi yang tinggi. Jika halaman target di luar blog Anda sebaiknya gunakan keyword yang berhubungan dengan judul halaman yang akan di link.
Perhatikan pesaing Anda di google search, jika kita menggunakan blog yang masih rendah Pageranknya, sebaiknya lakukan optimasi dari keyword yang rendah saingannya. contoh: keyword Bisnis Online lebih ketat persaingannya dibanding keyword Teknik Bisnis Online, Bisnis Online untuk pemula. Usahakan mendapatkan backlink dengan keyword yang anda optimasi tersebut agar cepat muncul di halaman pertama mesin pencari.
Optimasi keyword seiring dengan peningkatan trafik, jika di dalam sebuah blog terlalu banyak link tetapi jumlah kunjungan berkurang, maka akan menyebabkan pagerank halaman tersebut berkurang. Dan bisa mempengaruhi google pagerank blog secara keseluruhan. Semakin banyak keyword yang anda pasang maka semakin banyak trafik yang dibutuhkan untuk mengimbangi, agar pagerank halamannya bisa bertahan atau meningkat.(sebagai catatan: setiap halaman mempunyai pagerank sendiri).
Anda bisa melakukan rotasi anchor teks, misalnya dalam 3 bulan pertama gunakan Cara Mudah Belajar Bisnis Online untuk pemula, kemudian 3 bulan berikutnya ganti dengan Teknis Bisnis Online, dalam melakukan rotasi sebaiknya gunakan potongan dari keyword awal, dengan catatan anda harus menambah kalimat baru untuk menempatkan keyword baru tanpa mengubah struktur kalimat lama.
Terus membuat keyword baru pada postingan baru, karena search engine senang jika mendeteksi update pada blog/website.
Anchor text Anda perlukan untuk membangun backlink, bisa dengan melakukan link antar halaman dalam sebuah blog, atau link dari blog lain ke blog anda.
Hindari penggunaan anchor teks yang kurang tepat, misal : d@wnload (kombinasi simbol dan alfabet), dan kata tidak baku lainnya.
Hindari menggunakan keyword yang tidak dikenali oleh search engine. misalnya dalam pertukaran link menggunakan kata : Namapemilikblog, url tetap terindeks, tetapi penempatan keywordnya yang kurang tepat,karena mungkin 50% pengguna internet jarang mencari nama atau url di search engine saat mencari blog, terkecuali jika blog anda sudah terkenal maka biasanya banyak pengunjung yang mengetikkan nama anda untuk menemukan blog.

Semoga artikel ini bermanfaat buat kita dalam optimasi blog.

Menampilkan Tag Clouds di Blogger

By Adam21.11Tips Dan Trik, Tutorial Blogspot, Widget / GadgetNo comments

Menampilkan Tag Clouds di Blogger | Tutorial Blog

Selain label dalam bentuk daftar, blogger juga menyediakan label dalam bentuk Cloud, jika fitur ini diaktifkan, label yang lebih populer muncul dalam font yang lebih besar daripada label yang kurang populer.

Berikut cara Menampilkan Tag Clouds di Blogger :

Login ke akun anda klik Dasbor > Design > Page Elements > Add a Gadget.
Kemudian pilih Label. Pada display ganti dari Daftar menjadi Cloud.
Lalu klik Save.

Sekarang Lihat blog anda, label clouds harusnya sudah di tampilkan. Kalau belum berhasil, lanjutkan dengan langkah berikut :

Klik Design > Edit HTML, beri centang pada Expand Template Widget.
Copy kode dibawah ini, letakkan tepat di atas kode ]]></b:skin>
/* Label Cloud Styles */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}
Copy kode dibawah ini, letakkan tepat di bawah kode ]]></b:skin>
<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>
Simpan template Anda dan lihat hasilnya!.

Sekian tutorial tentang Menampilkan Tag Clouds di Blogger.

Optimasi SEO pada Image

By Adam21.08Seo, Tips Dan TrikNo comments

Optimasi SEO pada Image | Tutorial Blog

Image dapat menjadi salah satu sumber traffic dalam optimasi seo. Namun Image tersebut harus kita optimalkan, maksudnya Image yang kita beri "ALT TAG", hal ini merupakan bagian dari optimasi seo on page. Sama halnya seperti tag HTML normal lainnya yang digunakan sebagai teks alternatif ketika image/gambar tidak dapat ditampilkan.

Untuk mengoptimalkan image, dapat kita lakukan melalui dua cara, yaitu melalui nama file dan penggunaan alt tag. Alt berasal dari kata alternatif, hal ini memungkinkan kita untuk menentukan teks alternatif bagi gambar jika tidak dapat ditampilkan karena bermacam alasan, juga sebagai identitas gambar/image di search engine, misalkan saat kita mencari pada Google Image, maka Alt tag tersebut sangat berfungsi pada hasil pencarian. Ketika search engine menjelajah halaman web atau blog, mereka menganggap nama file dan alt tag sebagai isi gambar.

Berikut beberapa Tips yang mungkin bisa Anda gunakan dalam Optimasi SEO pada Image :

Jangan gunakan "gambar1.png" atau "gambar2.jpg" sebagai nama file. Cobalah gunakan nama file Anda sebagai kata kunci atau keyword, contoh, "seo-on-page.png" atau "alt-tag.jpg"
Gunakan nama file dan alt tag yang singkat tapi deskriptif, hindari penulisan alt tag yang panjang, karena terkadang mungkin bisa dianggap spam
Pasokan alt tag bisa menggunakan gambar sebagai link, hal ini bekerja sebagai anchor text
Format gambar dengan jenis file - JPEG, GIF, PNG, dan BMP
Simpan semua gambar dalam direktori yang sama.

Contoh penggunaan Alt tag pada Image / gambar

Semoga artikel ini berguna bagi kita dalam meningkatkan Optimasi SEO.

Membuat Recent Comments Blogger dengan Avatar | Tutorial Blog

Tutorial kali ini sama saja dengan tutorial memasang Widget Recent Comment Valid XHTML, cuman kodenya aja yang berbeda. Jadi untuk tutorial yang lebih jelas silakan baca Widget Recent Comment Valid XHTML. Untuk postingan ini saya buat singkat saja.

Berikut caranya :

Buat widget HTML/JavaScript.
Beri judul Recent Comments atau apalah terserah Anda.

Lalu masukkan kode berikut :

<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments  = 5,
showAvatar  = true,
avatarSize  = 30,
characters  = 60,
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script>
<script type="text/javascript" src="http://banjarinfo.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

Keterangan :

numComments : 5, jumlah komentar yang ditampilkan

avatarSize : 30, ukuran avatar dalam pixel

characters : 60, jumlah karakter yang ditampilkan

banjarinfo.blogspot.com ganti dengan URL blog Anda.

max-results=5, jumlah komentar yang ditampilkan, ganti sesuai keinginan Anda.

Terakhir klik Save. Selesai...

Selamat mencoba Membuat Recent Comments Blogger dengan Avatar.

Menampilkan Smiley Pada Postingan Blogger

By Adam04.00Tips Dan Trik, Tutorial BlogspotNo comments

Menampilkan Smiley Pada Postingan Blogger | Tutorial Blog

Sebenarnya sudah banyak postingan dari para blogger master tentang Menampilkan Smiley Pada Postingan, namun tidak ada salahnya saya memposting ini, kali aja masih ada yang belum tau.

Trik ini dapat membuat tampilan postingan sobat menjadi lebih menarik, karena kita dapat menampilkan pic smile seperti Menampilkan Smiley Pada Postingan

dan lain lain.

Caranya gampang Sob, silakan ikuti tutorial berikut :

Login ke blogger trus pilih Layout > Edit HTML.
Beri tanda centang pada Expand Widget Templates.
Cari kode ini ]]></b:skin> .
Masukkan script berikut ini dibawah kode ]]></b:skin>
<script src='http://wadah-tutorial.googlecode.com/files/ysmileys.js' type='text/javascript'/>
Terakhir klik Save Template. Selesai...

Berikut beberapa kode yang dapat Anda gunakan :

:D		:P
:)		;)
:-S		:-B
:-h		:-a
:x		:(
:-t		:-bd
:-c		:-*
8-7		8-\|
7:P		=D7
8-}		X(

Sebenarnya masih ada beberapa kode lagi, berhubung saya sudah lupa jadi segitu dulu, jika ada yang mau menambahkan silakan tulis di kolom komentar.

Selamat mencoba dan semoga berhasil...

Tips Dalam Mengganti Template

By Adam21.26Tips Dan TrikNo comments

Tips Dalam Mengganti Template | Tutorial Blog

Untuk membuat blog terlihat lebih cantik biasanya kita menambahkan beberapa widget pada blog, atau mengedit css tempalate, bisa juga dengan mengganti template tersebut. Namun sebelum Anda mengedit atau mengganti template blog ada baiknya Anda perhatikan beberapa hal dibawah ini.

Tips berikut hanya menurut saya yang masih baru dalam dunia blogging, jadi kalau ada kesalahan harap di koreksi, jika ada tambahan dari Sobat blogger atau para master silakan Anda tulis di kolom komentar di bawah postingan ini.

Berikut Tipsnya :

Pastikan Sobat back up template anda terlebih dahulu. Caranya masuk ke dasboard > Design / Rancangan > Edit html, lalu klik Download Full Template / download template lengkap.
Simpan semua kode html yang Anda tambahkan pada template tersebut di sebuah Notepad. Jadi jika Anda memerlukannya sewaktu-waktu, Anda tinggal copy saja dari Notepad.
Simpan ke Notepad semua kode widget yang Anda gunakan.
Sesuaikan design template yang baru dengan design sebelumnya. Misal latar design sebelumnya berwarna hitam, sebaiknya untuk template baru juga menggunakan latar hitam. hal ini untuk menghindari warna latar yang sama dengan warna link text, seandainya pada waktu latar hitam Anda pernah memberi warna font putih pada sebuah Link, lalu Anda menggunakan warna latar putih pada template baru maka link tersebut tidak akan terlihat.
Sebaiknya gunakan blog dummy (blog cadangan) dulu, agar tidak berisiko jika salah, disana kita bisa leluasa mengutak atik template, kalau sudah pas download template-nya lalu upload pada template blog yang ingin kita ganti templatenya.
Dalam mengganti template, sebaiknya jangan terlalu sering, agar para pembaca tidak bingung karena tampilan berubah terus, selain itu menurut beberapa blogger kalau terlalu sering mengganti template akan beresiko merusak keberadaan SEO yang sedang kita bangun.

Sekian tips dari saya, semoga bermanfaat buat Sobat yang ingin mengganti template.