The Art of SEO

Cara Mengganti Background Blog dengan Gambar Repeat

2013-04-24T16:39:00.005+07:00

Setelah sebelumnya saya memberikan tutorial mengganti background blog dengan gambar full screen, maka kali ini saya akan menggunakan gambar kecil dengan properti repeat, penggunaan gambar kecil untuk background blog memberikan keuntungan dalam waktu loading halaman yang tidak terlalu lama apalagi jika dibandingkan dengan penggunaan background gambar kualitas HD

Mengganti background blog

Tutorialnya masih sama dengan tutorial sebelumnya, silahkan anda buka cara mengganti background blog

pada tutorial kali ini saya akan mempergunakan gambar berikut

.

Jika sebelumnya kode yang anda masukkan di menu tambahkan css adalah

body {
background:#fff url(alamat url gambar anda);
background-size:cover;
}

Maka jika anda menggunakan gambar kecil, ganti kode tersebut dengan

body {
background:#fff url(alamat url gambar anda)repeat center;
}

untuk hasil background,

Lorem ipsuk dolor sit kesana kemari mencari alamat..

body {
background:#fff url(alamat url gambar anda)repeat-x;
}

untuk hasil background

Lorem ipsuk dolor sit kesana kemari mencari alamat..

dan,

body {
background:#fff url(alamat url gambar anda)repeat-y;
}

untuk hasil background

Lorem ipsuk dolor sit kesana kemari mencari alamat..

Selamat mencoba tutorial mengganti background blog yang saya berikan dan semoga bermanfaat.

Cara Edit HTML Template di Tampilan Baru

2013-04-10T12:55:00.002+07:00

Karena kebetulan beberapa hari ini fokus pada kegiatan membuat template blog, cukup terkejut juga saat baru saja membuka menu edit HTML template, karena ada perubahan tampilan yang cukup unik pada menu bawaan blogger tersebut.

Edit HTML template

Berikut screen shot dari tampilan edit HTML terbaru.

Sedikit membutuhkan pembelajaran tentunya untuk akrab dengan tampilan baru ini.

Cara edit HTML tampilan baru

Bagi anda yang kesulitan untuk mengedit template di tampilan baru ini, berikut beberapa tips yang mungkin bisa membantu.

Expand template widget

Kolom centang menjadi hilang dan diganti dengan cukup klik tanda panah di samping penomoran di kode HTML

Edit widget

Mencari widget lebih mudah dengan adanya fasilitas lompat ke widget atau jump to widget

Memasukan css

Kode CSS terletak di antara markah <b:skin> dan </b:skin>, klik pada kode tersebut untuk membuka css.

CTRL F

klik pada daerah kosong di area kode HTML, kemudian tekan ctrl+f, kotak pencarian akan muncul di dalam daerah kode, bukan di web browser

Pratinjau template

Jika sebelumnya pratinjau template terbuka di tab baru, maka di tampilan kali ini pratinjau akan terbuka di tab sama mengganti kolom menu HTML

Perubahan tampilan edit HTML

Perubahan tampilan edit HTML Blogger kali ini mungkin ditujukan untuk memudahkan peng-editan pada template, yang menjadi pertanyaan bagi saya sekarang, bagaimana dengan tutorial yang sudah saya tulis ke belakang? apakah saya harus menyesuaikannya satu-persatu? ataukah ini menjadi ajang kompetisi blogger baru untuk menulis tutorial modifikasi blog dengan tampilan edit HTML baru?
Menurut anda?

Mengganti Background Blog Dengan Gambar

2013-04-04T08:43:00.003+07:00

Jika sebelumnya saya telah memberikan tutorial mengganti background post dengan warna transparan, masih seputar background, artikel kali ini akan memberikan tutorial mengganti background blog dengan gambar, demonya bisa anda lihat langsung saat membuka posting ini.

Mengganti background blog

Untuk mengganti background blog dengan gambar, anda hanya perlu masuk ke dasbor blog anda kemudian menuju ke menu template dan sesuaikan, seperti pada gambar berikut.

Selanjutnya di halaman perancang template, silahkan langsung menuju ke menu tambahkan CSS seperti pada gambar berikut

Selanjutnya, silahkan copy paste kode berikut pada bagian kosong di sebelah kanan,

body {
background:#fff url(alamat url gambar anda);
background-size:cover;
}

Ganti tulisan berwarna merah dengan alamat URL gambar yang ingin anda jadikan gambar background, kemudian terapkan ke blog.

Atau anda juga bisa menaruh kode CSS di atas sebelum markah ]]></b:skin> di template blog anda.

Merubah background blog

Pada demo di artikel kali ini, saya menggunakan gambar dari http://hdwallpapers4free.com/abstract-vector/horizon-blue-orange-abstract-shapes-objects-desktop-wallpaper-46993/ , dan merubah background outer-wrapper dan isinya dengan warna transparan, caranya?
silahkan buka cara membuat background transparan pada posting blog, atau anda dapat mengintip kode css yang saya gunakan di feeds art of seo, selamat mencoba dan semoga bermanfaat.

Menyembunyikan Post Footer di Homepage Blog

2013-03-26T18:54:00.001+07:00

Bagi yang masih menggunakan template standar bawaan blogger, biasanya di homepage atau halaman awal, satu post dengan post lainnya dipisahkan dengan post footer yang biasanya berisi nama author, label, tombol berbagi, dan lainnya.

Sebenarnya -menurut saya pribadi- post footer di beranda dapat dikatakan kurang bermanfaat, mungkin karena itu pula lah anda akan jarang menemukan template hasil modifikasi atau download yang masih menyertakan post footer di halaman awal blog.

Menyembunyikan post footer di beranda

Sebelumnya, berikut adalah foto "penampakan" bagian blog yang dinamakan post footer,

Untuk menghilangkan post-footer dan menampilkannya hanya pada saat artikel terbuka selengkapnya caranya sangatlah mudah, anda hanya perlu masuk ke menu edit HTML di blog anda, kemudian silahkan anda cari tag </head> , gunakan ctrl+f untuk memudahkan pencarian.

Jika anda sudah menemukan tag </head> paste kan kode berikut di bawah markah </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
.post-footer {
display:none;
}
</style>
</b:if>

Kemudian simpan atau save template anda.

Jika sudah, anda dapat langsung melihat hasil dari tutorial menyembunyikan post-footer di homepage blog di atas di beranda blog anda, selamat mencoba.

Horizontal Menu Dropdown Warna Hijau Gradasi

2013-03-10T20:58:00.000+07:00

Menambah tutorial membuat menu horizontal dropdown, kali ini saya akan melakukan modifikasi horizontal menu dengan menggunakan warna gradasi hijau setelah sebelumnya saya memberikan juga tutorial membuat menu horizontal dengan warna gradasi merah dan hitam.

Horizontal menu dropdown

Untuk melihat bentuk dari horizontal menu dropdown yang akan kita buat, silahkan anda buka link

demo

Jika anda berminat untuk menggunakannya di template blog anda, mari kita menuju ke tutorial.

Membuat menu horizontal

Seperti pada horizontal menu sebelumnya, kita akan menambahkan kode HTML di template blog anda terlebih dahulu, sederhananya seperti berikut,

<div id='latecnicedeseo'><ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Antivirus</a></li>

<li class='ijolumut'>
<a href='#'>Multimedia</a>
<ul>
<li><a href='#'>MP3 Player</a></li>
<li><a href='#'>Video Player</a></li>
</ul>
</li>

<li class='ijolumut'>
<a href='#'>Games</a>
<ul>
<li><a href='#'>RPG</a></li>
<li><a href='#'>1st Person Shooter</a></li>
<li><a href='#'>Race</a></li>
</ul>
</li>

<li><a href='#'>Desktop Enhancements</a></li>
<li><a href='#'>Archive</a></li>
</ul></div>

Pada tutorial kali ini, tautan label yang memiliki sub menu saya tandai dengan nama 'ijolumut' , dengan sub menu yang di mulai dari tag <ul> sampai tag penutup </ul> yang saya beri warna merah. silahkan anda ganti tanda # dengan alamat link yang anda inginkan, dan tulisan tautan dengan anchor text (tulisan label) yang sesuai dengan label blog anda.

Kode di atas anda simpan di template anda (edit HTML) di bawah tag </header>

Kemudian anda paste kode CSS berikut di atas ]]></b:skin> di template blog anda

height:24px;
display:block;
border:1px solid #008000;
border-radius:5px;
margin:0 auto;
padding:0;
}
#latecnicedeseo > ul {
list-style:inside none;
margin:0;
padding:0;
}
#latecnicedeseo > ul > li {
list-style:inside none;
float:left;
display:block;
position:relative;
margin:0;
padding:0;
}
#latecnicedeseo > ul > li > a {
outline:none;
display:block;
position:relative;
font-size:15px;
text-align:center;
text-decoration:none;
text-shadow:3px 3px 4px #000;
color:#fff;
padding:4px 20px;
}
#latecnicedeseo > ul > li:first-child > a {
border-radius:5px 0 0 5px;
}
#latecnicedeseo > ul > li > a:after {
content:'';
position:absolute;
border-right:1px solid #008000;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
}
#latecnicedeseo ul li.ijolumut:hover > a:after {
top:0;
bottom:0;
}
#latecnicedeseo > ul > li.ijolumut > a:before {
content:'';
position:absolute;
top:50%;
right:3px;
border:5px solid transparent;
border-top:5px solid #fff;
}
#latecnicedeseo > ul > li.ijolumut:hover > a:before {
top:50%;
}
#latecnicedeseo ul li.ijolumut:hover > a {
background:#008000;
top:-1px;
z-index:999;
}
#latecnicedeseo ul li.ijolumut:hover > ul,#latecnicedeseo ul li.ijolumut:hover > div {
display:block;
}
#latecnicedeseo ul li > ul,#latecnicedeseo ul li > div {
display:none;
width:auto;
position:absolute;
top:24px;
background:#008000;
border-radius:0 0 5px 5px;
z-index:999;
padding:4px 0;
}
#latecnicedeseo ul li > ul {
width:100%;
}
#latecnicedeseo ul li > ul li {
display:block;
list-style:inside none;
position:relative;
margin:0;
padding:0;
}
#latecnicedeseo ul li > ul li a {
outline:none;
display:block;
position:relative;
color:#fff;
text-decoration:none;
text-shadow:2px 2px 4px #000;
margin:0;
padding:10px;
}
#latecnicedeseo,#latecnicedeseo > ul > li > ul > li a:hover {
background-color:#048551;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#0e9402', endColorstr='#048551');
background-image:-webkit-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:-moz-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:-ms-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:-o-linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
background-image:linear-gradient(top, #0e9402 0%, #15d10b 50%, #048551 100%);
}
#latecnicedeseo ul li.ijolumut > a:hover,#latecnicedeseo > ul > li > a:hover {
background:#008000;
}

Kemudian simpan template anda.

Jika anda memiliki masalah dengan pemasangan menu horizontal dropdown dengan warna gradasi hijau ini, silahkan gunakan kolom komentar untuk bertanya, dan jika anda rasa artikel kali ini bermanfaat, jangan lupa untuk menambahkan +1 untuk toturial kali ini.
Terima kasih

Tekhnik SEO Menyembunyikan Keyword dengan CSS

2013-03-03T13:39:00.001+07:00

Sebagai seorang blogger anda pasti tahu pentingnya menempatkan keyword dan menandainya dengan atribut bold atau strong agar mudah dimengerti oleh mesin pencari, untuk hal tersebut rasanya tidak perlu saya jelaskan lagi, saya sudah sering menemukan penekanan keyword tersebut di blog-blog yang saya kunjungi dan juga dapat anda temukan di blog ini.
Penekanan yang paling banyak biasanya bisa anda temukan di artikel kontes SEO, namun pernahkah anda menemukan sebuah blog dari halaman satu SERP Google yang pada artikelnya sama sekali tidak ada kalimat dengan atribut bold maupun underline?

Tekhnik menyembunyikan penekanan keyword

Tidak ada tujuan lain dari penyembunyian penekanan keyword ini selain agar artikel terlihat lebih alami seperti layaknya membaca sebuah surat kabar atau sebuah buku, kemudian diharapkan pembaca tidak merasa terganggu dengan tulisan tebal yang bertebaran sepanjang artikel, walaupun untuk rasa terganggu tersebut tentunya masih dapat diperdebatkan.

Mari kita bandingkan paragraf blog biasa dengan paragraf yang telah kita "modifikasi"

Penekanan terlihat :

Keyword tersembunyi :

Pengaruh terhadap SEO

Lalu bagaimana pengaruh penyembunyian atribut HTML pada keyword ini terhadap SEO?

Dikarenakan robot perayap hanya membaca Hyper Text Markup Language atau biasa anda kenal dengan singkatan HTML dan mengabaikan penggayaan dengan Cascading Style Sheets atau CSS, maka apa yang kita lakukan ini tidak merusak optimasi SEO yang kita lakukan.

Apakah termasuk black hat?

Penyembunyian keyword tentunya adalah salah satu tekhnik dari black hat SEO, namun yang dimaksud penyembunyian keyword dalam black hat SEO tersebut adalah menyamarkan keyword atau invisible keyword, dilakukan dengan menambahkan color:transparent, sedangkan yang kita lakukan adalah menghilangkan penekanan tanpa menghilangkan keyword nya itu sendiri.

Hal ini saya rasa bukanlah bagian dari black hat SEO, kecuali anda punya pendapat lain, silahkan anda tambahkan melalui kotak komentar di bawah.

Cara menyembunyikan penekanan keyword

Caranya sebenarnya sederhana, hanya dengan menempatkan kode sebagai berikut,

u {
text-decoration:none;
}
b,strong {
font-weight:400;
}

di atas kode ]]></b:skin> di template anda, atau anda dapat menempatkan kode seperti berikut,

<style>
u {
text-decoration:none;
}
b,strong {
font-weight:400;
}
</style>

di bawah artikel yang anda tulis dalam mode HTML untuk hanya merubah posting-posting tertentu saja.

Hasilnya? seperti pada gambar di atas maupun pada keseluruhan artikel kali ini, tulisan yang anda beri atribut <b> </b> akan terlihat sama dengan tulisan normal, begitupun kalimat dengan atribut <u> </u> akan terlihat tanpa garis bawah.

Agar tidak terjadi kesalah pahaman, 5-atau 4- tulisan tebal yang anda lihat di atas adalah tag heading, bukan dibuat dengan tag bold maupun strong.
semoga bermanfaat.

*catatan, pada browser mobile terutama opera mini, tulisan bold akan tetap terlihat.

Cara Membuat Horizontal Menu Dropdown

2013-02-28T04:35:00.000+07:00

Artikel cara membuat horizontal menu dropdown ini saya buat atas permintaan dari sahabat +kunio Diablo melalui komentarnya di artikel tutorial membuat back to top button.
Berhubung template blog yang digunakan oleh sahabat Kunio mempunyai label berwarna biru, maka horizontal menu yang akan saya buat kali ini pun akan bernuansa warna biru, semoga cocok dengan templatenya ya sobat, dan semoga bermanfaat juga untuk pengunjung lainnya yang membutuhkan menu horizontal di blog nya.

Cara membuat horizontal menu dropdown

Untuk demo nya, silahkan anda buka terlebih dahulu tautan demo horizontal menu.

Jika anda tertarik untuk membuatnya, mari kita menuju ke tutorial.

Pertama-tama kita akan membuat kode HTML nya terlebih dahulu, berikut contohnya,


<div id='tsadropdown'><ul>
   <li><a href='#'>Home</a></li>
   <li><a href='#'>Modifikasi blog</a></li>

   <li class='kidnapper'>

<a href='#'>

Search engine

</a>
      <ul>
         <li><a href='#'>

Onpage SEO

</a></li>
<li><a href='#'>

Offpage SEO

</a></li>
      </ul>
   </li>

   <li class='kidnapper'>

<a href='#'>

Google Optimization

</a>
      <ul>
         <li><a href='#'>

White hat

</a></li>
         <li><a href='#'>

Gray hat

</a></li>
<li><a href='#'>

Black Hat

</a></li>

</ul>

</li>

<li><a href='#'>

Archive

</a></li>
<li><a href='#'>

About

</a></li>
      </ul></div>

Perhatikan pada kode di atas, tautan yang memiliki sub menu saya tandai dengan nama 'kidnapper' , dan sub menu dari 'kidnapper' tersebut di mulai dari tag <ul> sampai tag penutup </ul> yang saya beri warna merah. silahkan anda ganti tanda # dengan alamat link yang anda inginkan, dan tulisan berwarna biru dengan anchor text (tulisan label) yang sesuai, setelah selesai, saya sarankan anda simpan terlebih dahulu kode tersebut ke notepad karena kita akan masuk ke menu template blog anda.

Memasang horizontal menu

Silahkan masuk ke menu edit HTML blog anda, tidak perlu menambahkan centang pada kotak expand template widget, silahkan anda cari kode </header> di template blog anda, gunakan ctrl+f untuk memudahkan pencarian.

Setelah anda menemukan kode </header> ( perhatikan! bukan kode </head> ) silahkan anda pastekan kode HTML yang sudah anda siapkan di notepad tadi tepat di bawah tag </header>

Sudah? sekarang saatnya memasukkan kode css

Membuat menu dropdown

Sepertinya untuk kode css yang akan kita pasang saya tidak akan menjelaskan rinciannya karena akan sangat panjang sekali. Silahkan anda cari kode ]]></b:skin> di template blog anda, kemudian anda pastekan kode berikut di atas markah ]]></b:skin>

#tsadropdown {
height:24px;
display:block;
border:1px solid #b6cfea;
border-radius:5px;
margin:0 auto;
padding:0;
}

#tsadropdown > ul {
list-style:inside none;
margin:0;
padding:0;
}

#tsadropdown > ul > li {
list-style:inside none;
float:left;
display:block;
position:relative;
margin:0;
padding:0;
}

#tsadropdown > ul > li > a {
outline:none;
display:block;
position:relative;
font-size:15px;
text-align:center;
text-decoration:none;
text-shadow:3px 3px 4px #000;
color:#fff;
padding:4px 20px;
}

#tsadropdown > ul > li:first-child > a {
border-radius:5px 0 0 5px;
}

#tsadropdown > ul > li > a:after {
content:'';
position:absolute;
border-right:1px solid #fff;
top:-1px;
bottom:-1px;
right:-2px;
z-index:99;
border-color:#fff;
}

#tsadropdown ul li.kidnapper:hover > a:after {
top:0;
bottom:0;
}

#tsadropdown > ul > li.kidnapper > a:before {
content:'';
position:absolute;
top:50%;
right:3px;
border:5px solid transparent;
border-top:5px solid #fff;
}

#tsadropdown > ul > li.kidnapper:hover > a:before {
top:50%;
}

#tsadropdown ul li.kidnapper:hover > a {
background:#008ebe;
top:-1px;
z-index:999;
}

#tsadropdown ul li.kidnapper:hover > ul,#tsadropdown ul li.kidnapper:hover > div {
display:block;
}

#tsadropdown ul li > ul,#tsadropdown ul li > div {
display:none;
width:auto;
position:absolute;
top:24px;
background:#008ebe;
border-radius:0 0 5px 5px;
z-index:999;
padding:4px 0;
}

#tsadropdown ul li > ul {
width:100%;
}

#tsadropdown ul li > ul li {
display:block;
list-style:inside none;
position:relative;
margin:0;
padding:0;
}

#tsadropdown ul li > ul li a {
outline:none;
display:block;
position:relative;
color:#fff;
text-decoration:none;
text-shadow:2px 2px 4px #000;
margin:0;
padding:10px;
}

#tsadropdown,#tsadropdown > ul > li > ul > li a:hover {
background:rgba(52,170,252,0.72);
}

#tsadropdown ul li.kidnapper > a:hover,#tsadropdown > ul > li > a:hover {
background:#008ebe;
}

Silahkan simpan template anda setelahnya, kemudian lihat hasilnya di homepage blog anda.

Jika anda rasa artikel tutorial membuat horizontal menu dropdown yang saya tulis kali ini bermanfaat, silahkan anda tambahkan komentar atau bantu saya dengan membagikan artikel ini melalui tombol share di bawah postingan ini, terima kasih.

Membuat Tombol Back to Top dengan CSS & HTML Entities

2013-02-21T10:04:00.000+07:00

Tombol back to top, biasanya dipergunakan oleh penulis blog yang memiliki artikel yang lumayan panjang untuk memudahkan pengunjung kembali ke bagian atas halaman tanpa perlu menggeser scroll bar web browser nya. Dan melalui artikel kali ini saya akan memberikan tutorial membuat tombol back to top menggunakan HTML Entity, tanpa gambar dan tanpa jquery dengan harapan tidak menambah atau memberatkan waktu loading halaman.

Cara membuat tombol back to top

Yang akan kita pergunakan untuk memperjelas fungsi tombol adalah kode HTML arrow ⇑ yang akan ditampilkan menjadi ⇑ , bagi anda yang belum mengetahui apa itu HTML entity, silahkan anda baca terlebih dahulu sentuhan seni dengan HTML Entities

Mari menuju ke tutorial.

CSS back to top button

Pertama tama kita akan namai tombol yang akan kita buat kali ini, sebagai bukti cinta kita pada produksi Indonesia, kita namai tombol ini "atas". Berikut standar kode untuk membuat tombol back to top,

<div class="atas"><a href="#" title="Back To Top">⇑</a></div>

Anda bisa mengganti tulisan back to top dengan kembali ke atas atau lainnya.

Saatnya memberikan make up untuk tombol tersebut.

Pertama-tama kita akan memberi background dan bentuk pada tombol tersebut,

.atas {background-color:#fff;font-size:2em;font-weight:bold;border:2px solid #333;display:inline;padding:6px}

dengan kode tersebut saya memberi latar belakang warna putih (#fff) dengan ukuran panah sebesar 2em dan border sebesar 2px solid, bentuknya jadinya akan seperti ini :

agar lebih terlihat sebagai sebuah button, saya akan membuatnya bulat dengan menambahkan -webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px; , kode lengkapnya menjadi

.atas {background-color:#fff;font-size:2em;font-weight:bold;border:2px solid #333;display:inline;padding:6px; -webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px; }

dan hasilnya

Karena tombol tersebut adalah sebuah link, kita akan menghilangkan garis bawah dari tautan tersebut, dan untuk mempercantik tampilannya, kita buat tombol tersebut menonjol, berikut kode nya

.atas {
background-color:#fff;
font-size:2em;
font-weight:700;
border-left:2px solid #333;
box-shadow:2px 2px 4px #000;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
display:inline;
padding:6px;
}

.atas a {
color:#333;
text-decoration:none;
border-left:1px solid #555;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
box-shadow:2px 2px 4px #000;
}

dan hasilnya

kemudian kita tambahkan efek tertekan pada tombol tersebut saat dilalui oleh pointer dengan menambahkan

.atas:hover {
border:1px solid #555;
box-shadow:2px 2px 4px transparent;
}

maka tombol back to top pun telah selesai kita buat, tinggal menambahkannya di blog anda.

Kita menuju ke menu template blog anda kemudian anda pastekan kode berikut di atas tag ]]></b:skin>

.atas {position:fixed;left:3%;bottom:10%;
background-color:#fff;
font-size:2em;
font-weight:700;
border-left:2px solid #333;
box-shadow:2px 2px 4px #000;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
display:inline;
padding:6px;
}
.atas a {
color:#333;
text-decoration:none;
border-left:1px solid #555;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
box-shadow:2px 2px 4px #000;
}
.atas:hover {
border:1px solid #555;
box-shadow:2px 2px 4px transparent;
}

perhatikan ada kode yang saya warnai merah diatas adalah sebuah perintah agar tombol tersebut melayang atau floating di sebelah kiri(left) dengan jarak 3% dan di bawah(bottom) dengan jarak 10%, anda dapat menyesuaikannya dengan memindahkannya ke kanan dengan mengganti left dengan right, begitupun bottom dengan top.

Kemudian tambahkan kode berikut di atas kode </body>

<div class="atas"><a href="#" title="Back To Top">⇑</a></div>

Simpan template anda, dan lihat hasilnya di blog anda, silahkan anda hover untuk melihat efeknya, atau klik untuk melihat gerakan kembali ke atasnya.

Semoga tutorial membuat tombol back to top yang saya tulis bermanfaat, satu tambahan komentar dari anda atau bantuan share artikel ini melalui tombol share di bawah amat sangat saya hargai, terima kasih.

Misi Template Blog "Kill Your Sidebar" Sukses

2013-02-17T13:35:00.000+07:00

Awalnya kaget juga ditodong suruh membuat sebuah template blog yang beda dengan yang lain, padahal menurut saya template blog yang paling unik itu template yang tidak ada bagian posting nya, hehe..
tapi tentu yang request template ga akan setuju kalau blog nya tidak memunculkan posting.

Template blog tanpa sidebar

"pokonya tanpa sidebar, minimalis, unik, beda, yaa... gitu deh", kata si "peminta template" sambil merayu-rayu manja. Dari poin-poin tersebut yang paling saya perhatikan adalah tanpa sidebar, artinya tampilan post harus rata tengah.

Dengan sedikit megap-megap karena sudah sedikit lupa struktur template blog, dan hanya dibekali satu gelas kopi yang saya beli sendiri, saya pun memulai projek tanpa nama ini.

Sedikit coba-coba dengan merubah tampilan posting, mengganti background, dan lain sebagainya, akhirnya..
template blog pun selesai. Nah, ternyata setelah template selesai, si "peminta template" malah minta juga blog nya di promosikan, gratisan lagi.. hehe..

~~Ini lo blog nya, ayo.., ayoo.., kunjungi~~ - Update ! in Maintenance -

o ya, sebelumnya saya pernah juga membuat template blog dengan konsep minimalis, kira kira ada yang minat ga ya? ~~bisa di cek di~~ -sedang di update juga :)-

Untuk anda pembaca artikel ini, boleh dong kasih ide tampilan blog yang unik-unik, soalnya jadi kepikiran juga untuk buat template blog, lumayan kan, nambah koleksi artikel, tambah komentar ya..

Membuat Kreasi Unik Tulisan Marquee dengan CSS

2013-02-16T13:07:00.000+07:00

Tulisan marquee atau tulisan bergerak dan kadang disebut juga tulisan bolak-balik kiri kanan tentunya bukanlah hal baru dan telah banyak blog yang membahas tutorial untuk membuatnya, sebagai tambahan koleksi tutorial rasanya tidak salah jika saya pun ikut-ikutan memberikan cara membuat tulisan dengan efek marquee, namun untuk membedakan dengan tutorial lainnya, saya akan menambahkan penggayaan CSS pada tulisan marquee tersebut.

Membuat marquee dengan CSS

Defaultnya, tulisan marquee dibuat dengan kode seperti berikut,

<marquee>the Art of SEO</marquee> , yang hasilnya seperti ini :

the Art of SEO
Namun, melalui posting ini, kita akan menambahkan CSS pada tulisan bolak-balik tersebut. Berikut adalah contoh tulisan marquee yang akan saya berikan :

the Art of SEO
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine

Yang saya buat dengan kode seperti berikut :

<div class="marqueeart">
<marquee style="font-size:3em;color:color:#333;text-shadow:2px 2px 4px #777;font-family:Courier New;">
the Art of SEO
<br />
<span style="font-size:12px;color:#333;font-family:Lucida Console;">
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine
</span></marquee></div>
<style>
.marqueeart {width:450px;height:68;background-color: #fff;
background-image: -webkit-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: -moz-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: -0-linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-image: linear-gradient(top, #dbe8bc 0%, #dbe8bc 5%, transparent 5%, transparent 100%);
background-size: 1px 23px; box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
</style>

Anda ingin membuatnya sendiri menurut selera anda? mari perhatikan kode di atas.

Semua kode yang saya beri warna merah adalah kode warna HTML tulisan marquee, anda dapat melakukan modifikasi sesuai selera anda dengan merubah kode warna tersebut.

Tulisan berwarna hijau tua adalah tulisan marquee yang akan ditampilkan, jika anda hanya ingin membuat tulisan satu baris, hilangkan markah

<span style="font-size:12px;color:#333;font-family:Lucida Console;">
Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine
</span>

dari kode di atas.

Kode berwarna ungu adalah lebar dan tinggi background tulisan, silahkan sesuaikan dengan tempat anda meletakkan tulisan marquee tersebut.

Untuk kode berwarna biru, adalah background dari tulisan marquee tersebut.

Berikut contoh dari tulisan marquee satu baris

Selamat Datang di the Art of SEO , Blog-nya Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine

Saya membuatnya dengan kode seperti ini,

<div class="marqueeart2"><marquee style="font-size:32px;color:#fff;text-shadow:2px 2px 4px #000;font-family:Times New Roman;padding-top:5px;">Selamat Datang di the Art of SEO , Blog-nya Tutorial Modifikasi Blog & Panduan Optimasi Blog dan Search Engine</marquee></div>
<style>
.marqueeart2 {width:450px;height:50;background-color:#a19eab;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b8bfc4', endColorstr='#a19eab');
background-image:-webkit-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-moz-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-ms-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:-o-linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
background-image:linear-gradient(top, #b8bfc4 0%, #fcfcfc 50%, #a19eab 100%);
}
</style>

Bagaimana? mudah bukan tutorial membuat tulisan marquee yang saya berikan? ada tambahan atau pertanyaan? silahkan pergunakan kotak komentar.
Terima kasih.

Cara Membagi Posting Menjadi 2 Kolom Kiri & Kanan

2013-02-13T18:18:00.001+07:00

Menambah kembali tutorial untuk merubah tampilan artikel dalam sebuah blog, setelah sebelumnya saya memberikan cara merubah background posting dan cara membuat drop cap yang hasilnya dapat anda lihat di huruf awal artikel ini, kali ini saya akan memberikan cara membagi posting menjadi 2 kolom.

membuat 2 kolom posting

Sebenarnya, posting dalam sebuah blog bukan hanya bisa di bagi menjadi 2 kolom, namun yang harus diperhatikan adalah lebar dari bagian post terkecuali anda menghilangkan sidebar terlebih dahulu menggunakan conditional tag dan pengkodean CSS.

Dengan kreatifitas, anda bahkan dapat memberikan latar pada posting menggunakan paper pattern hingga terkesan seperti sebuah artikel dalam surat kabar.

Mari menuju ke tutorial

Seperti biasa, saya menggunakan pengkodean css di akhir posting dalam mode HTML untuk merubah tampilan artikel hingga tidak perlu melakukan modifikasi pada template blog. Pertama tama kita tambahkan tag

<div class="belahduren">

pada mode HTML saat menulis posting, kemudian lanjutkan tulis artikel yang akan anda bagi menjadi dua kolom di bawah kode tersebut.

Setelah selesai, untuk melengkapi markah di atas, kita tutup postingan tersebut dengan tag </div>

Kemudian, di bawah tag penutup </div> tersebut, kita tambahkan pengkodean CSS berikut dalam mode HTML :

<style type="text/css">
.belahduren
{
-moz-column-width:195px;
-webkit-column-width:195px;
column-width:195px;
}
</style>

dan artikel anda pun siap untuk di publish.

Sebagai catatan, anda dapat menyimpan kode berwarna biru (hanya yang berwarna biru) di atas pada template blog anda di atas tag

]]></b:skin>

namun untuk membagi posting menjadi 2 kolom anda harus tetap mengapit posting anda dengan
<div class="belahduren"> </div>

Semoga bermanfaat.

Editor : al ghifari.

Manfaat Memiliki Niche Bagi Anda dan Blog Anda

2013-02-09T22:35:00.000+07:00

Konsisten pada niche sebuah blog, tema itulah yang ingin saya angkat pada postingan kali ini, sekaligus menjawab materi diskusi yang di angkat oleh sahabat Kunio Diablo melalui komentar di artikel 7 Solusi Mengatasi Kebuntuan Ide Saat Menulis Artikel Blog, pentingkah konsistensi pada sebuah niche bagi sebuah blog? manfaat apa saja yang bisa anda dapat dari niche blog? mari kita diskusikan bersama.

Manfaat memiliki niche bagi blog

Manfaat pertama, mempunyai tema spesifik membuat anda terlihat lebih profesional dalam niche yang anda bahas, kemampuan anda untuk mengolah artikel-artikel yang membahas sebuah permasalahan membuat anda tampil menonjol dan akan memberikan citra tersendiri bagi pembaca blog anda, tentunya hal tersebut perlu ditunjang dengan pemahaman lebih akan niche yang ingin anda angkat.

Hal tersebut seringkali dijadikan sebuah masalah bagi beberapa blogger, namun sebenarnya sama sekali bukanlah masalah yang berarti jika sebelumnya anda telah mempelajari niche apa yang sedikitnya anda kuasai atau anda senangi, karena jika anda bukanlah seorang yang ahli dalam sebuah topik, memilih topik yang anda senangi akan memberikan anda semangat untuk belajar lebih banyak, mengenai hal tersebut pernah saya singgung di tulisan saya, tips optimasi blog bagi pemula.

Dari sisi pengunjung, orang-orang cenderung lebih mudah mengingat blog dengan brand tersendiri, bukankah anda pun tentunya mempunyai pilihan situs atau blog untuk dikunjungi jika anda ingin mencari informasi blogging, mendownload aplikasi, atau membuka video streaming?

Contoh lainnya, situs manakah yang akan anda kunjungi pada saat anda mencari informasi gadget terbaru di search engine jika hasil pencarian menunjukan :

disinisemuada. com di urutan pertama dan
infogadgetbaru. com di urutan kedua

Dari sisi SEO, blog ber-niche lebih memberikan kemudahan untuk men-tautkan satu post ke posting lainnya, karena tentu saja artikel yang disajikan selalu berhubungan meskipun bukan tidak mungkin bagi sebuah blog general melakukan link scheme yang sama, namun biasanya hanya sebatas pemaksaan pemberian anchor teks yang tidak ditunjang dengan kalimat ajakan bagi pengunjung untuk menelusuri artikel demi artikel di blog tersebut, persentase bounce rate pun akan jauh lebih baik jika pengunjung anda sedang mencari informasi mengenai masalah tertentu, hal tersebut berdasar pada pengamatan dari beberapa blog yang saya miliki.

Kekurangan niche blog

Di atas sudah saya ulas mengenai keuntungan yang anda dapat dari konsistensi terhadap sebuah niche, namun dibalik keuntungan-keuntungan tersebut tentunya tersimpan juga kekurangan dari memiliki blog ber-niche, diantaranya adalah waktu optimasi yang relatif lebih lama, sulitnya membuat konten yang fresh, dan lalu lintas yang cenderung mendatar jika di banding dengan blog dengan tema general yang lebih mudah menghasilkan lonjakan traffic jika cermat menganalisa trend yang sedang terjadi.

Jadi, bagaimana menurut anda? setujukah dengan manfaat-manfaat dari memiliki niche blog yang telah saya tulis? pentingkah memiliki niche bagi sebuah blog? ataukah anda memiliki pandangan lain berdasarkan pengalaman anda sendiri? silahkan berbagi melalui komentar, dan bagi anda yang tertarik membuat blog dengan niche spesifik, artikel yang pernah saya tulis mengenai jenis-jenis artikel populer dalam sebuah blog mungkin dapat menambah inspirasi bagi anda.
Semoga bermanfaat.

Macam atau Jenis Border Untuk Modifikasi CSS

2013-02-08T02:32:00.000+07:00

Border atau garis pinggir pada CSS pastinya sering anda temukan pada tutorial seperti membuat horizontal menu maupun vertical menu, tertulis dengan contoh kode seperti berikut :
border : 2px solid #000;
Namun tahukah anda, selain solid ada berbagai macam jenis border pada CSS, dan akan saya ulas dalam posting kali ini.

Jenis-jenis border CSS

Semua contoh border akan saya beri warna biru HTML #2a4aeb dengan ukuran 7px untuk memperjelas perbedaannya.

Border Solid.

Ini adalah contoh border solid, saya buat dengan kode
<div style="border: 7px solid #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Dotted

Ini adalah contoh border dotted, saya buat dengan kode
<div style="border: 7px dotted #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Dashed

Ini adalah contoh border dashed, saya buat dengan kode
<div style="border: 7px dashed #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Double

Ini adalah contoh border double, saya buat dengan kode
<div style="border: 7px double #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Groove

Ini adalah contoh border groove, saya buat dengan kode
<div style="border: 7px groove #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Ridge

Ini adalah contoh border ridge, saya buat dengan kode
<div style="border: 7px ridge #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Inset

Ini adalah contoh border inset, saya buat dengan kode
<div style="border: 7px inset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Border Outset

Ini adalah contoh border outset, saya buat dengan kode
<div style="border: 7px outset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Untuk catatan, dimulai dari border double ke bawah pada contoh di atas, ukuran atau tebal border harus di atas 2px agar lebih terlihat perbedaannya.
Semoga posting jenis-jenis border dalam CSS yang saya tulis kali ini bermanfaat, jangan lupa untuk meninggalkan komentar jika anda merasa terbantu dengan artikel ini atau hanya sekedar lewat dan membaca,
terima kasih.

Mengganti Background Posting dengan Warna Transparan

2013-02-04T00:01:00.000+07:00

Salah satu variasi untuk mempercantik tampilan artikel sebuah blog adalah membuat latar posting menjadi transparan, namun untuk melakukannya dibutuhkan kemampuan untuk mengkombinasikan warna latar dan warna text, dengan latar belakang artikel tersebut untuk membuat kesan transparan tersebut tampil pas tanpa terlalu mengganggu readability dari artikel yang kita tulis.

Saya bukanlah seorang yang ahli dalam desain template blog, seperti yang telah saya tuliskan dalam posting Inilah Make Up Template Terakhir The Art of SEO, seringkali saya mengalami kesulitan dalam melakukan mix and match warna, gambar dan desain, hingga seperti posting kali inilah hasil terbaik yang bisa saya lakukan.

Membuat background posting menjadi transparan

Yang saya lakukan untuk membuat latar posting ini transparan adalah mengganti latar post dari nilai hexadesimal ke rgba. Pertama-tama saya mengganti latar .main-inner menggunakan gambar yang saya buat menggunakan aplikasi photoscape dan saya upload ke album web picassa seperti berikut :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;}

property repeat di atas untuk mengakali ukuran gambar yang kecil ditampilkan berjajar hingga memenuhi 100% bagian main inner. Sedangkan tujuan penggunaan gambar tersebut untuk lebih menonjolkan efek transparan dari latar posting nantinya, dan penggunaan kode warna #7b7c47 untuk mengantisipasi gagalnya loading gambar atau hilangnya gambar jika terhapus dikemudian hari.

Berlanjut ke bagian posting, karena saya sebelumnya memberikan latar gambar dengan dominasi warna hijau tua, maka kali ini saya membuat latar posting berwarna putih yang memiliki nilai RGB 255,255,255 dan saya tambahkan nilai akhir 0.79 yang akan membuat warna putih tersebut menjadi transparan. Untuk anda yang ingin ikut mencoba, sedikit petunjuk bahwa semakin kecil nilai akhir yang kita tambahkan tersebut maka tampilan warna akan semakin transparent.

Kemudian untuk sedikit mempermanis, saya tambahkan juga border dengan warna biru muda, sebagai tambahan materi, silahkan baca juga jenis-jenis border pada CSS.
Lengkapnya, berikut style yang saya tambahkan :

.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}

Sehingga jika digabung dengan kode di awal tadi menjadi :

.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;}
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}

dan saya tambahkan tag style hingga lengkapnya :

<style type="text/css">
.main-inner { background:#7b7c47 url(https://lh3.googleusercontent.com/-uliLMHIsokQ/UQ6Lw7jdBoI/AAAAAAAABks/XLCqj-FnNys/s124/pattern.jpg) repeat;margin-left:10px;}
.post { background : rgba(255,255,255,0.79);border:9px solid rgba(52,170,252,0.13)}
</style>

lalu saya simpan di akhir postingan ini dalam mode HTML, dan selesailah usaha saya untuk mengganti background posting dengan warna transparan.
Bagaimana menurut anda? apa yang harus saya perbaiki? dan ataukah anda mempunyai cara yang lebih mudah? silahkan berbagi atau share artikel ini melalui tombol share social media di bawah posting ini.
Terima kasih.

Cara Membuat Vertical Menu dengan Efek CSS Tranform

2013-02-02T08:55:00.000+07:00

Setelah sebelumnya saya memberikan dua buah tutorial membuat horizontal menu, masih seputar menu navigasi, kali ini saya berikan untuk anda tutorial membuat menu navigasi vertical sebagai variasi tautan menuju label di blog anda yang dapat anda tempatkan di sidebar, salah satu kolom footer, maupun anda buat mengambang di samping layout blog anda.

Menu navigasi vertical

Kebetulan saya belum mempunyai nama untuk menamai menu navigasi vertical ini, yang dapat anda lihat di demo vertical menu , jika anda mempunyai inspirasi untuk menamai menu vertical tersebut, silahkan anda usulkan di kotak komentar.
Untuk sementara, saya akan menamai navigasi vertical ini Stick Vertical Menu.

Cara Membuat menu navigasi vertical.

Untuk anda yang tertarik memasang menu navigasi vertical, silahkan anda menuju ke menu edit HTML blog anda. Cari kode ]]></b:skin> , lalu pastekan kode CSS berikut di atas ]]></b:skin>

.stik{list-style-type: none;margin: 0 auto;padding: 2px;width: 247px;}
.stik li a{display: block;width: 220px;margin-top:2px;padding: 2px 3px 2px 10px;font-weight: bold;background-color: transparent;border: 2px solid gray;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;text-decoration:none;}
.stik li a:hover{color: #fff;text-decoration:none;margin-top:10px;background-color:#00ff00;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#fa0808', endColorstr='#00ff00');background-image:-webkit-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:-moz-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:-ms-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:-o-linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);background-image:linear-gradient(left, #fa0808 0%, #ffff00 50%, #00ff00 100%);
border: 2px inset gray;transform:rotate(-6deg);-ms-transform:rotate(-6deg);-moz-transform:rotate(-6deg);-webkit-transform:rotate(-6deg);-o-transform:rotate(-6deg);}

Lalu simpan template anda.

Selanjutnya, silahkan anda menuju ke menu tata letak di blog anda.

Lalu tambahkan gadget dimanapun anda ingin menempatkan menu navigasi vertical ini, pilih HTML/Javascript , kemudian anda pastekan kode berikut,

<ul class="stik">
<li><a href="#" >Tautan 1</a></li>
<li><a href="#" >Tautan 2</a></li>
<li><a href="#">Tautan 3</a></li>
<li><a href="#">Tautan 4</a></li>
<li><a href="#">Tautan 5</a></li>
<li><a href="#">Tautan 6</a></li>
</ul>

Silahkan rubah tulisan berwarna merah dengan tautan dan anchor text yang sesuai dengan label blog anda kemudian simpan dan lihat hasil pemasangan menu navigasi vertical ini di homepage blog anda.
Semoga bermanfaat dan jangan lupa berikan komentar, terima kasih.

Cara Membuat Simple Horizontal Menu Border-Top

2013-01-30T19:49:00.000+07:00

Horizontal menu simple border-top ini terinspirasi dari tampilan blog yang minimalis, pemasangannya pun hanya menggunakan css, jadi benar-benar simple dan tidak mempengaruhi waktu loading halaman blog anda.
Sebelumnya, saya juga pernah memberikan tutorial membuat menu horizontal dengan gradasi merah dan hitam yang dapat anda temukan di posting cara membuat menu horizontal dengan gradasi warna merah hitam.

Simple Horizontal menu

Untuk melihat demo dari menu horizontal yang saya buat kali ini, silahkan anda menuju ke demo simple menu.

Jika anda tertarik untuk menggunakan menu horizontal tersebut, silahkan ikuti tutorial pemasangan berikut :

Cara membuat menu horizontal border-top

Silahkan anda menuju ke menu edit HTML blog anda.

Cari markah seperti ini : <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
di dalam kode HTML template blog anda
( Untuk mempermudah, gunakan ctrl + f )

kemudian anda rubah kode tersebut menjadi
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

di bawah kode tersebut anda akan menemukan markah seperti berikut,

<b:widget id='Header1' locked='true'

Silahkan anda rubah tulisan true menjadi false, seperti berikut,

<b:widget id='Header1' locked='false'

Selanjutnya, cari kode ]]></b:skin> , lalu pastekan kode CSS berikut di atas ]]></b:skin>

#menu {width:800px;background:#fff;border-top:1px solid #999;margin: 0 auto;}
#menu li {list-style: none; float: left; margin: 3px 15px;}
#menu li a {text-decoration:none;font-family: verdana;font-size:small; color:#999;}
#menu li a:hover {text-decoration:none;color:#000;border-top:3px solid #000;}
Kemudian simpan template anda.

Menambahkan menu di tata letak

Silahkan anda menuju ke menu tata letak

Anda akan menemukan menu baru di atas header blog anda, silahkan klik tambahkan gadget

Pilih HTML/Javascript, kemudian paste-kan markah HTML berikut :

<ul id="menu">
<li><a href="url label 1">Nama label 1</a></li>
<li><a href="url label 2">Nama label 2</a></li>
<li><a href="url label 3">Nama label 3</a></li>
<li><a href="url label 4">Nama label 4</a></li>
<li><a href="url label 5">Nama label 5</a></li>
</ul>

Silahkan anda sesuaikan tulisan berwarna merah di atas agar mengarah ke label di blog anda, silahkan juga menambah atau mengurangi jumlah link dalam kode HTML tersebut sesuai jumlah label di blog anda, kemudian simpan.

Masih di menu tata letak, anda dapat menggeser widget baru tersebut ke bawah atau ke atas header, silahkan anda sesuaikan dengan selera anda sendiri, dan lihat hasil pemasangan menu horizontal simple border top tersebut di homepage blog anda.
Selamat mencoba.

Google Image Search Berubah Tampilan

2013-01-28T19:58:00.001+07:00

Google Image Search, salah satu layanan pencarian gambar di Google™ ternyata merubah hasil pencariannya dengan dominasi background hitam, saat saya mencari informasi mengenai hal tersebut, artikel terlama yang saya dapat adalah sekitar 9 jam lalu, maka dapat saya simpulkan bahwa perubahan tampilan google image search tersebut mulai berlaku sejak hari ini, 28 januari 2013 (tolong koreksi kalau saya salah)

Perubahan Google™ image search

Untuk melihat perubahannya, silahkan anda menuju ke Google image search, kemudian masukkan query gambar yang ingin anda cari, hasil tampilan gambar saat di klik akan membuka gambar dengan background hitam di bawah gambar yang kita klik, bahkan saat kita memilih membuka gambar di tab baru, yang tampil adalah gambar dengan link langsung ke halaman asal gambar, seperti berikut :

Mungkinkah ini strategi Google™ untuk mengoptimalisasi hasil pencarian gambar ?
Lalu, bagaimana menurut anda mengenai perubahan tampilan Google image search ini ?

7 Solusi Mengatasi Kebuntuan Ide Saat Menulis Artikel Blog

2013-01-27T13:33:00.001+07:00

Kebuntuan ide adalah penyakit klasik yang sangat mungkin dialami oleh seorang penulis —dalam hal ini, seorang blogger— . Bukan hanya kehilangan ide untuk ditulis, kebuntuan mungkin saja menyerang saat anda tengah menulis sebuah draft posting ketika tiba-tiba anda kehilangan ide untuk menyusun hanya sekedar beberapa paragraf penutup. Hal tersebut sangat sering saya alami. Mungkin pengalaman saya yang saya susun dalam posting kali ini bisa menjadi bahan pertimbangan bagi anda yang tengah mencari solusi mengatasi kebuntuan ide dalam menulis artikel.

Mengatasi kebuntuan ide tulisan

Mulailah hal baru

Salah satu masalah bagi blogger yang mengkhususkan blog nya untuk niche tertentu adalah kehabisan ide untuk ditulis, saya rasa tidak perlu memaksa diri untuk menambah koleksi artikel di blog anda tersebut jika anda mengalaminya, mencoba sebuah tema baru mungkin dapat menyegarkan pikiran anda..
Seperti kita tahu, blogger tidak membatasi berapa blog yang bisa kita buat dalam satu akun e-mail, cobalah membuat blog baru dengan tema baru untuk sekedar mencari suasana baru, siapa tahu blog baru tersebut dapat kita publish suatu saat nanti, dan siapa yang dapat meramalkan dari blog mana ternyata tulisan kita akan dikenal luas suatu saat nanti. Silahkan anda baca jenis-jenis artikel yang membuat blog anda populer.

Buatlah blog personal

Tekanan untuk selalu update berkala atau rasa takut kehilangan kunjungan dari pengunjung setia blog dan search engine traffic yang berimbas pada penurunan alexa rank bukan tidak mungkin membuat sebagian blogger merasa stress dalam me-manage blog yang mereka miliki.
Sebenarnya, mengurus blog sama sekali bukanlah beban, anda tidak pernah benar-benar mempunyai deadline untuk menulis artikel, sangat banyak blogger yang melaporkan justru pada saat blog mereka ditinggal beberapa saat, traffic kunjungan tiba-tiba meningkat.
Jika anda orang yang sangat gemar menulis, cobalah tuliskan kebuntuan yang anda alami, tekanan yang anda rasakan tersebut dalam blog pribadi, bukankah itu adalah sebuah ide segar yang dapat anda tulis? dan jangan lupa jika banyak sekali blogger yang menjadi terkenal karena personal blog yang mereka miliki.

Lupakan struktur artikel

Ada beberapa blogger yang percaya jika menulis artikel haruslah tersusun seperti halnya menulis sebuah buku, sehingga ketika muncul sebuah ide baru untuk ditulis, mereka akan menundanya karena tengah berusaha menyelesaikan topik tertentu. Ide untuk tulisan tidak datang setiap saat, tulislah apa yang bisa anda tulis pada saat sebuah ide muncul, lupakan sejenak mengenai susunan artikel, bukankah blogger memberikan fasilitas posting terjadwal jika nantinya anda menginginkan artikel anda tersusun rapih saat pengunjung membuka daftar isi atau archive di blog anda ?

Simpan sebagai draft

Jika anda tengah menulis sebuah posting kemudian mengalami proses kebuntuan sebelum posting itu selesai dan dapat anda publish, simpanlah sebagai draft, jangan memaksakan diri. Jika pikiran anda telah segar dan mood menulis anda telah kembali, artikel yang anda simpan sebagai draft dapat anda lanjutkan kemudian.
Hal ini juga berlaku juga jika anda tiba-tiba menemukan ide baru saat tengah menyusun sebuah posting. Hal tersebut sangat sering saya alami, tiba-tiba saja saya mendapat ide untuk menulis mengenai sebuah permasalahan lain saat saya tengah menulis sebuah posting, yang akan saya lakukan adalah segera mungkin membuka post editor di tab baru, menulis dan menyimpannya sebagai sebuah draft. Sebuah ide adalah barang mahal yang tidak bisa kita prediksi kedatangannya.

Faktor Emosi

Unsur emosional atau mood seringkali menjadi masalah saat anda menulis. Ide untuk tulisan sering kali mengalir lebih baik saat pikiran sedang tenang. Sediakan waktu sejenak untuk sekedar bersantai dan tidak memaksakan diri, mendengarkan musik favorit anda mungkin bisa menjadi pilihan untuk mengembalikan mood anda.

Blog walking

Mengurangi kebiasaan fast reading untuk hanya sekedar berkomentar di artikel terbaru dan hanya sekedar meninggalkan backlink atau menambah link in alexa saat anda melakukan blog walking juga dapat membantu anda menemukan sebuah ide baru. Kunjungi beberapa blog yang anda rasa memiliki tulisan yang baik, baca-baca artikel yang sudah di publish dalam blog tersebut, dengan begitu dimungkinkan anda akan merasa tertantang untuk membuat atau mengembangkan ide dari artikel yang tengah anda baca.

Buka koleksi komentar

Seorang blogger sangat merindukan artikelnya dikomentari, namun setelah mendapat komentar, komentar yang pengunjung berikan kadang kali kita lupakan dan seakan tidak berarti, coba buka kembali list komentar yang telah masuk ke blog kita, adakah pengunjung yang menanyakan mengenai topik tertentu? dari komentar-komentar pengunjung tersebut sangat dimungkinkan kita temukan sebuah ide untuk ditulis.

Mengatasi masalah hilangnya ide untuk ditulis

Percayalah, setiap masalah yang anda alami sebagai seorang blogger pasti dialami oleh blogger lainnya, jika anda pernah mengalami kebuntuan ide dan menemukan solusi sebagai jalan keluarnya, berbagilah dengan pengunjung anda. Atau jika anda tidak mempunyai waktu untuk menulis sebuah artikel, berbagi dengan pengunjung blog ini mungkin bisa menjadi manfaat untuk kita bersama.
Silahkan, tambahkan cara anda mengatasi kebuntuan ide dalam menulis melalui kotak komentar yang saya sediakan, setiap tambahan dari anda akan menjadi sebuah tambahan ilmu yang bermanfaat bagi kita semua, selamat berkomentar.

Membuat Tombol Sederhana Dengan CSS

2013-01-24T22:53:00.000+07:00

Sering sekali saya melihat artikel yang menyertakan tombol di dalam isi postingnya, baik itu tombol download, maupun tombol demo untuk blog tutorial. Melalui posting kali ini saya akan memberikan tutorial membuat simple button menggunakan CSS.

Cara membuat button

Bagi anda yang belum tahu, sebenarnya membuat tombol di dalam artikel bisa dilakukan hanya dengan memberikan tag <button>, contohnya jika saya akan membuat tombol demo maka yang perlu saya tulis dalam mode HTML adalah <button>Demo</button>, dan hasilnya : . Namun untuk anda yang menyenangi variasi bentuk tombol dalam artikel blog, mudah-mudahan posting saya kali ini membantu anda.

Tombol yang akan saya buat mempunyai tampilan sebagai berikut :
(silahkan hover untuk melihat efek "tertekan")

Download

Untuk membuatnya, silahkan anda menuju ke menu template blog anda, kemudian klik menu sesuaikan, lanjut ke pilihan tingkat lanjut dan tambahkan CSS.

Kemudian paste-kan kode berikut di kolom sebelah kanan :

.tsabtn {
cursor:pointer;
border:2px outset #adb5c9;
background-color:#ffffff;
padding:10px 14px;
-webkit-border-radius:11px;
-moz-border-radius:11px;
border-radius:11px;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
color:#0f090f;
font:normal 18px 'Showcard Gothic',Helvetica,Arial,Sans-Serif;
text-decoration:none;
outline:none;
vertical-align:middle;
}

Untuk menambahkan efek saat tombol di sorot mouse, silahkan anda pastekan kode berikut di bawah kode di atas.

.tsabtn:hover {
border:1px solid #8a8c91;
background-color:#ffffff;
color:#524a52;
}

Kemudian klik tombol terapkan ke blog.

Memasang tombol pada postingan.

Untuk menampilkan tombol tersebut pada postingan dan menjadikannya sebuah link, pada mode HTML, tuliskan kode seperti berikut :

<a href="alamat url tujuan" target="_blank" title="download"><span class="tsabtn">Download</span></a>

Silahkan anda rubah tulisan yang berwarna merah.

Jika anda rasa artikel membuat tombol sederhana dengan CSS ini bermanfaat, jangan lupa untuk berkomentar atau menekan tombol share di bawah artikel ini, atau jika anda mempunyai ide untuk tampilan tombol yang lebih menarik dibanding tombol di atas, silahkan anda beritahu saya melalui kotak komentar, terima kasih.

Cara Membuat Menu Horizontal dengan Gradasi Warna Merah Hitam

2013-01-20T20:07:00.000+07:00

Menambah koleksi menu tutorial, saya akan memberikan tutorial membuat menu horizontal sebagai navigasi menu, menu label horizontal kali ini di dominasi dengan warna gradasi merah hitam. Untuk anda yang ingin membuat menu navigasi horizontal, silahkan ikuti tutorial yang saya berikan kali ini.

Cara membuat menu horizontal

Untuk demo dari menu horizontal yang saya maksud, silahkan anda kunjungi demo menu horizontal di black csstyle

Untuk tutorial pemasangannya, terlebih dahulu kita akan menempatkan kode HTML pada widget blog anda, silahkan ikuti petunjuk gambar berikut:

1.

2.

3.

Kemudian anda pastekan kode berikut pada jendela konfigurasi HTML/Javascript :

<ul id="tsa-extrapedas">
<li><a href="alamat blog anda">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>

Silahkan anda rubah tulisan yang saya beri warna merah di atas dengan alamat tautan dan anchor text yang ingin anda buat.

Menambahkan CSS

Selanjutnya kita akan menambahkan CSS pada menu navigasi yang telah kita buat, silahkan ikuti tutorial gambar berikut :

1.<

2.

Pastekan kode CSS berikut di jendela sebelah kanan

#tsa-extrapedas {width: 850px; height: 70px; border-left:2px solid black;border-right:2px solid black;border-top:4px solid black;padding: 0 auto; margin: 0 auto;background-color:#4d3131;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000103', endColorstr='#4d3131');background-image:-webkit-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-moz-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-ms-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:-o-linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);background-image:linear-gradient(top, #000103 0%, #fa0000 50%, #4d3131 100%);}
#tsa-extrapedas li {list-style: none; float: left; margin: 0 11px;}
#tsa-extrapedas li:first-child {margin-left: 10px;}
#tsa-extrapedas li a {display: block; width: 100px; height: 40px; padding:4px;margin:auto;background-color:#cc1d1d;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d2def5', endColorstr='#cc1d1d');background-image:-webkit-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-moz-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-ms-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:-o-linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
background-image:linear-gradient(top, #d2def5 0%, #704141 50%, #cc1d1d 100%);
font: bold 17px Helvetica, Arial, Sans-serif;text-align:center; color:red; text-decoration: none;border-bottom:#a41a1a;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;}
#tsa-extrapedas li a:hover,#menu li a:focus,#tsa-extrapedas li a:active{font:bold 24px Helvetica, Arial, Sans-serif;color:#dcdcdc;background:transparent;border-bottom:2px solid red}

kemudian klik tombol terapkan ke blog.
Lihat hasilnya pada homepage blog anda, jika anda suka dengan tutorial cara membuat menu navigasi horizontal yang saya berikan kali ini, silahkan bantu blog saya ini dengan tombol share yang terletak di bawah posting kali ini, dan jangan lupa berkomentar.
Semoga bermanfaat

Inilah Make Up Template Terakhir The Art of SEO

2013-01-20T02:59:00.000+07:00

Artikel kali ini mungkin tidak akan bermanfaat bagi anda, pengunjung blog sederhana ini. Namun, saya ucapkan terima kasih yang sebesar-besar nya jika anda masih menyempatkan diri membaca postingan saya kali ini.

Modifikasi Template Terakhir

Untuk sahabat-sahabat blogger yang pernah beberapa kali berkunjung ke blog saya ini dari awal, tentunya tahu bahwa dalam umurnya yang mendekati 2 bulan, blog ini sempat berkali-kali ganti tampilan, terakhir saya mencoba menggunakan style costum post pada artikel-artikel yang saya terbitkan, namun semua sudah saya kembalikan ke tampilan default.

Sedikit cerita mengenai tampilan blog, saya pribadi adalah orang yang sangat menyenangi modifikasi template, terutama template bawaan blogger, namun sering kali tersandung dengan masalah kurangnya pemahaman tentang seni desain dan komposisi warna.

Sedikit bahan diskusi untuk anda yang mempunyai waktu untuk menuliskan komentar. Tolong beritahu saya, sebuah template blog yang bagus menurut anda itu seperti apa? apakah memang harus template yang minimalis sebagai penguat dari artikel saya sebelumnya, SEO Friendly Blog Template, Haruskah Minimalis? atau harus penuh dengan gambar dan warna-wani ceria? Setiap orang pastinya mempunyai pendapat yang berbeda, oleh karena itu setiap komentar anda bisa menjadi masukan yang sangat berharga bagi saya, jadi.. selamat berkomentar dan terima kasih.

Tips Optimasi Link dalam Posting Blog

2013-01-19T04:16:00.000+07:00

Dalam posting sebelumnya mengenai tutorial membuat tautan atau link, saya telah memberikan cara dasar membuat tautan, karena artikel ini adalah artikel bersusun, bagi anda yang terlewat membaca artikel sebelumnya, akan lebih baik jika anda membaca terlebih dahulu posting saya mengenai cara membuat link ( tautan terbuka di tab baru ).

Panduan Optimasi Link

Mari buka kembali gambar di postingan pertama.

Seperti yang dapat anda lihat, kali ini saya menambahkan penomoran pada menu-menu tersebut. Mari kita diskusikan satu-persatu.

Anchor text

Di post pertama, sudah saya bahas bahwa anchor text adalah kata atau kalimat yang anda jadikan tautan.
Pada gambar di atas, anchor text yang saya gunakan adalah optimasi SEO dasar. Meskipun hanya terdiri dari 3 kalimat atau bahkan kurang, untuk search engine, anchor text mutlak diperlukan dan memiliki pengaruh besar dalam SEO.

Melalui anchor text tersebut, kita menjelaskan bahwa halaman yang dituju saat tautan di buka adalah artikel mengenai optimasi SEO dasar. Hindari dan sangat tidak disarankan untuk menggunakan kalimat "klik di sini", "posting ini", atau "blog ini" sebagai anchor text, karena saya yakin bahwa posting yang anda tautkan tidak membahas mengenai kalimat-kalimat tersebut, kecuali sebaliknya. Lebih bagus menggunakan keyword dari artikel yang anda kaitkan sebagai anchor text dari link yang anda buat.

Open New Window/Tab

Ada beberapa blogger yang melakukan modifikasi pada semua tautan di blog mereka agar terbuka di tab baru, apakah hal ini penting untuk dibahas?
Percaya atau tidak, dari hasil survey di beberapa situs besar, tercatat bahwa rata-rata sekitar 74% responder kurang menyukai tautan yang terbuka di tab baru, sebuah artikel lama yang dapat anda baca di https://managewp.com/should-you-open-links-in-new-windows pun membahas mengenai hal tersebut.
Jika anda klik link tersebut, maka tautan tersebut akan terbuka di tab baru, mengapa? bukankah tautan open new tab kurang disenangi oleh pembaca blog? untuk hal tersebut, saya menggunakan pertimbangan sebagai berikut :

Jika saya rasa artikel yang dituju tidak memiliki kaitan materi khusus dengan artikel awal, maka saya tidak menggunakan tab baru.

Jika artikel yang dituju adalah materi penunjang dari posting asal, maka saya membukanya di tab baru dengan tujuan memudahkan pembaca kembali ke posting awal setelah memahami tambahan materi di posting tertaut.

Jika tautan mengarah ke web atau blog lain, tentu saja saya menggunakan tab baru, anda pun tentunya tak ingin pembaca posting anda cepat-cepat meninggalkan blog anda bukan?

Sampai di sini apakah ada masukan yang bisa anda tambahkan di kotak komentar?

Rel="nofollow"

Kapan sebaiknya perlu menambahkan centang pada add "rel=nofollow" attribut ?

Halaman statis

Untuk halaman seperti about me, term of service, privacy policy, dan sebagainya, sangat disarankan untuk menggunakan rel="nofollow", tambahkan juga atribut nofollow pada halaman yang dapat membahayakan blog anda di SERP, seperti halaman tukar link. Untuk tujuan tersebut, selain tag nofollow, anda dapat memaksimalkan fungsi dari robot txt yang sudah saya bahas di posting cara setting robot.txt

Duplicate link

Jika anda membuat dua buah link atau lebih untuk satu halaman yang sama dalam sebuah artikel, pertimbangkan menggunakan tag nofollow pada tautan ke dua dan selanjutnya, meskipun sebenarnya search engine sendiri hanya menghitung dan merayapi tautan pertama.

Link affiliasi dan link berbayar.

Tautan menuju situs-situs tersebut sangat tidak disukai oleh Google™, sama seperti tautan menuju situs-situs pornografi. Karena pertimbangan tersebut, gunakan rel=nofollow untuk tautan yang mengarah pada situs-situs tersebut.

Blog Lain.

Untuk satu ini mungkin akan lebih baik jika anda yang berpendapat sendiri, perlukah menambahkan tag nofollow pada blog lain ? bagaimana jika anda mengambil artikel dari blog tersebut ? apakah anda akan tetap menggunakan rel="nofollow" untuk post source di blog anda ?

Saya rasa artikel kali ini sudah cukup panjang, dan saya rasa sudah waktunya bagi anda untuk menambahkan materi atau membuka diskusi mengenai topik yang saya bahas kali ini, apakah masih relevan untuk di bahas? apakah anda mempunyai pandangan lain mengenai tips optimasi link dalam postingan blog?
Silahkan gunakan comment form, terima kasih dan semoga bermanfaat.

Cara membuat Link dalam Posting Blog

2013-01-19T03:28:00.002+07:00

Walau dirasa terbalik, posting cara membuat link kali ini walau tidak berhubungan langsung adalah materi susulan dari posting saya sebelumnya, cara modifikasi tampilan link dengan CSS.

Link / tautan atau pranala adalah sebuah cara meng-kaitkan atau menautkan sebuah halaman Uniform Resource Locator ( URL ) dari sebuah situs atau blog ke halaman lain, baik di dalam situs atau blog itu sendiri ( inbound link ), maupun menuju situs atau blog lain ( outbond link ).

Pada kesempatan kali ini saya ingin menulis artikel bersusun mengenai cara membuat link dan optimasi link dalam posting blog yang merupakan sebuah ilmu dan optimasi SEO dasar. Untuk anda yang sudah cukup atau lebih memahami mengenai optimasi tautan ini, saya undang koreksi, tambahan materi, maupun sekedar penguat teori yang mungkin bisa anda tambahkan pada comment form yang saya sediakan.

Cara Membuat Link.

Untuk membuat link, pada saat menulis posting baik pada mode Compose ataupun HTML, yang perlu anda lakukan adalah membuat block pada tulisan yang akan anda buat link ( anchor text ), seperti pada gambar berikut :

Pada gambar di atas saya menggunakan kalimat optimasi SEO dasar sebagai anchor text atau kalimat yang akan saya buat link. Selanjutnya klik pada menu add or remove link di atas post editor blog anda.

Selanjutnya akan tampil jendela munculan seperti berikut :

Perhatikan bahwa pada kotak di samping text to display akan otomatis muncul tulisan yang anda blok di awal ( anchor text ). Untuk menyempurnakan nya menjadi sebuah tautan, masukkan alamat link ingin anda tuju pada kotak di samping tulisan Web address atau di bawah to what URL should this link go? contohnya seperti :
http://theseoart.blogspot.com/2012/12/template-blog-seo-friendly.html

Sampai proses tersebut, jika anda menekan maka anda telah selesai membuat link, namun sejenak kita tahan dulu, karena kita akan membahas mengenai tips optimasi link.

Agar posting kali ini tidak menjadi terlalu panjang dan melelahkan untuk di baca, saya undang anda untuk membuka artikel Tips Optimasi Link dalam Posting Blog, namun sebelumnya, saya pun mengundang anda untuk memberikan komentar atau tambahan jika anda rasa ada yang terlewat untuk saya bahas dalam artikel kali ini.

Silahkan, kotak komentar saya sediakan khusus untuk anda.
Terima kasih.

Sudahkah Anda Mempunyai 7 Modal Untuk Menjadi Blogger?

2013-01-13T20:26:00.001+07:00

Bukankah saya membuat blog dengan flatform blogger™ yang 100% gratis, kenapa harus memakai modal? apakah modal internet yang penulis the SEO art maksud? mungkin itulah pertanyaan yang terlintas di pikiran sahabat yang baru saja berkeinginan untuk memulai membuat dan mengembangkan sebuah blog saat membaca judul artikel saya kali ini, atau mungkin saya hanya membuat monolog? yang pasti, disadari maupun tidak, berikut 7 modal dasar yang harus dimiliki oleh seorang blogger.

7 modal dasar menjadi blogger.

1. Niat untuk memulai.

Mencoba dan memulai, itulah modal awal anda untuk membuat blog, selama ini anda mungkin mempunyai niat yang besar untuk membuat blog, anda sudah terlalu banyak belajar dari blog ini dan itu, membaca tips ini dan itu karena ingin membuat blog yang sempurna, maka hentikanlah kebiasaan anda, simpan semua sumber panduan anda, buka lah dasbor blog anda, dan mulailah membuat blog, mulailah paling tidak menerbitkan satu artikel saja. Anda tidak dapat menciptakan seribu langkah ke depan tanpa satu langkah kecil pertama.

“ Awalilah setiap pekerjaan dengan perencanaan yang baik, karena gagal dalam merencanakan sama dengan merencanakan kegagalan.” – Abdullah Gymnastiar

2. Niat untuk menulis.

blog adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) - wikipedia-

Apa jadinya sebuah blog tanpa tulisan?
Bukankah konten adalah element utama dalam sebuah blog?
Sepandai apapun anda menghias background, header, footer, sidebar, maupun keseluruhan desain blog anda, tak akan ada artinya jika tidak disertai dengan tulisan, pengunjung tidak datang untuk memandangi dan mengagumi karya anda, namun mereka butuh ilmu yang bisa anda bagi melalui artikel yang anda tulis.
Melalui tulisan lah anda menuangkan pengetahuan, ide maupun gagasan anda untuk disampaikan kepada pembaca blog anda, dan tulisan juga lah yang membedakan blog anda dengan lainnya.
Anda mungkin bisa mengambil jalan pintas seperti mengisi blog anda dengan artikel hasil copy paste, tidak ada salahnya, dan tidak ada hak saya untuk mengadili, anda bisa ibaratkan bahwa blog yang anda buat adalah sebuah rumah yang bisa saja anda isi dengan perabotan curian, mungkin salah satu posting yang pernah saya tulis mengenai cara cerdas copy paste artikel tutorial bisa membantu anda. Namun jika boleh, saya ingin mengajak anda untuk satu kali saja membuat artikel yang murni dari hasil pemikiran anda, satu persatu kalimat anda susun menjadi beberapa paragraf yang utuh, menjadi sebuah artikel yang utuh kemudian anda terbitkan, rasakanlah kebanggaan yang akan anda rasakan, dan percayalah, pada saat itu anda akan merasa bahwa artikel copy paste sama sekali tidak ada artinya.

“Orang boleh pandai setinggi langit, tapi selama ia tak menulis, ia akan hilang di dalam masyarakat dan dari sejarah.” – Pramoedya Ananta Toer

3. Niat untuk belajar.

Hari baru adalah hal baru, anda tidak bisa terus-terusan mengulas mengenai suatu hal jika hari ini setiap orang telah meninggalkan hal tersebut, betul bahwa dasar menulis blog adalah menulis apa yang anda ketahui, hal tersebut pernah saya tulis di posting saya, optimasi blog bagi pemula, namun jangan pernah membatasi blog anda dengan batas kemampuan anda, selalu termotivasi untuk lebih tahu akan membantu blog anda berkembang lebih baik.

“Orang-orang yang berhenti belajar akan menjadi pemilik masa lalu. Orang-orang yang masih terus belajar, akan menjadi pemilik masa depan.“ – Mario Teguh

4. Kesiapan menerima kritik.

Jika pujian adalah racun untuk keberhasilan, maka kritik adalah madu, betulkah?
Bersiaplah menghadapi kritik yang mungkin muncul di salah satu komentar dari list komentar di coment form pada salah satu artikel blog anda, mungkin saat itu jantung anda berdetak lebih cepat dari biasanya, jari-jari anda akan terpacu dengan emosi untuk sesegera mungkin memberikan alibi melawan kritik tersebut, atau anda akan sesegera mungkin menghapus komentar tersebut?
Percayalah, suatu hari anda akan menemukan kritik yang mungkin saja dapat menurunkan semangat anda jika anda tidak mempersiapkan segalanya dari awal.

“kita hanya dekat dengan mereka yang kita sukai. Dan seringkali kita menghindari orang yang tidak tidak kita sukai, padahal dari dialah kita akan mengenal sudut pikiran yang baru“ – Mario Teguh

5. Tidak mudah menyerah

Banyak orang yang tinggal satu langkah menuju kesuksesan, tapi mereka memilih untuk berhenti dan menyerah. Percayalah bahwa tidak ada yang tidak mungkin, yang anda butuhkan hanya kegigihan, usaha, dan semangat pantang menyerah. Carilah motivasi dari awal dan berniatlah untuk tidak pernah berhenti sebelum anda memenuhi motivasi yang anda miliki.

“Selama kita memiliki tujuan besar untuk dicapai, tidak pantas patah semangat di tengah jalan. Ingat! Tidak ada sukses sejati bisa diraih tanpa melalui hambatan! “ – Andrie Wongso

6. Motivasi.

Ingin dikenal, ingin diakui, ingin mendapat penghasilan secara online dari iklan di blog, motivasi-motivasi seperti itu akan membuat anda lebih terpacu dan bersemangat untuk membangun blog anda.
Awalnya mungkin anda dan sebagian blogger lainnya berkilah bahwa menulis blog hanya sekedar hobi, mengisi waktu, dan lainnya. Percayalah bahwa orang dapat berubah seiring waktu, perlahan-lahan anda mengenal mereka yang menjadi terkenal karena blog yang mereka kelola, mereka yang sukses mendapat penghasilan lebih dari blog nya, dan pada saat anda terpacu untuk mengikuti jejak mereka, pada saat itulah semangat anda akan membuat blog anda melaju lebih pesat.

“ Jalan terbaik untuk memprediksi masa depan adalah menentukan sendiri masa depan “ – Peter Drucker

7. kesiapan untuk gagal

Seperti yang sudah saya singgung di atas, setiap orang haruslah memiliki tujuan saat membuat blog. Tujuan awal tersebut pastinya berbeda antar individu, dari sekedar keinginan untuk dikenal dan diakui, atau lebih ke tujuan monetize blog. Seperti juga sudah saya tulis di atas, tidak ada yang mustahil namun juga perlu saya tambahkan bahwa tidak ada yang semudah membalikkan telapak tangan, setiap tujuan membutuhkan usaha, dan setiap usaha berpotensi menghasilkan kegagalan.

“Banyak kegagalan dalam hidup ini dikarenakan orang-orang tidak menyadari betapa dekatnya mereka dengan keberhasilan saat mereka menyerah.” – Thomas A Edison

Jadi, sudahkah anda memiliki 7 modal di atas? atau mungkin anda memiliki tambahan modal ke 8?

Sentuhan Personal Dibalik Blog Tutorial

2013-01-11T16:43:00.000+07:00

Sebagai seorang penulis blog, adalah sebuah kewajaran jika saya melakukan blog walking atau blog exploring and visiting -mudah-mudahan di sentil kang Ismet- . Dari satu blog ke lainnya, saya membuka satu demi satu artikel yang diterbitkan oleh blog tersebut, mencoba mengenali siapa penulis blog tersebut dari tutur katanya, dan sedikit-sedikit mempelajari cara sang penulis menyajikan materi yang ingin dia bicarakan, karena sebagian besar blog yang saya kunjungi adalah blog tutorial tentunya.

Terkadang saya merasa nyaman dan terhanyut dalam setiap halaman demi halaman yang tersaji dalam blog tersebut, namun terkadang pula saya hanya terhenti di posting pertama yang saya baca, meninggalkan sepatah dua patah komentar, kemudian melanjutkan perjalanan suci mendulang traffic.

Jika boleh sedikit bernostalgia, dulu saat saya baru mengenal blog, saya belajar melalui artikel-artikel yang ditulis oleh para penulis blog tersebut, namun hanya sekedar membaca apa yang sedang saya cari, jika saya ingin mencari cara membuat navigasi horizontal, ya yang saya baca hanya post tersebut yang kebetulan saya temukan di search engine kemudian pergi. Jarang sekali saya membuka artikel blog tutorial hingga 3 post atau lebih dalam sebuah blog, karena kebanyakan -saya tidak katakan semua- artikel yang tersaji memang dengan alur yang sama, ini yang akan saya ajarkan, seperti ini caranya, selesai, mudah kan? hmm..

Namun akan sangat berbeda jika yang saya buka adalah sebuah blog tutorial dengan sentuhan personal -saya kurang tahu apa namanya- yang menyelipkan sebuah cerita pribadi dalam postingnya, sering sekali tanpa sadar saya menghabiskan waktu berlama-lama mengikuti alur cerita yang tersaji dari pengalaman sang penulis, menikmati kata-kata yang jujur, humor ringan yang tersaji, dan sedikit jalan diskusi di paragraf terakhir, seakan saat itu saya sedang berhadapan dengan sang penulis yang bercerita secara langsung di hadapan saya. Rasanya sangat segar sekali walau materi yang dibicarakan sebenarnya adalah materi umum yang sudah banyak di bahas di blog lain, belum lagi kemampuan sang penulis yang menautkan satu artikel dengan artikel lainnya menggunakan kalimat yang tepat dan tidak dipaksakan hingga tanpa sadar saya pun terhipnotis mengikuti ajakan untuk melakukan klik pada tautan yang tersedia, ingin rasanya saat itu saya copy paste semua isi otak penulis blog tersebut.

Rasanya, akan sangat menyenangkan sekali jika sebuah blog tutorial dapat membuat kita nyaman, tidak membuat kita merasa digurui, namun lebih merasa seakan menemukan teman diskusi.

Akhirnya, sebuah pertanyaan besar untuk saya pribadi saat ini.

Mungkinkah jika sebuah blog tutorial tidak hanya menyajikan artikel berbentuk tutorial namun juga menyuguhkan sentuhan cerita pribadi dalam koleksi artikelnya seperti sebuah personal blog tanpa keluar dari jalur? dan untuk anda pengunjung blog ini yang mempunyai lebih banyak waktu untuk sekedar memberi masukan dan saran, blog seperti apakah yang anda temukan dan anda nikmati untuk anda baca? apakah seperti Honeylizious nya Mbak Rohani Syawaliah ataukah seperti Blog Kang Ismet? atau mungkin anda punya rekomendasi lain? Mungkin komentar dari anda bisa menjadi bahan pembelajaran untuk saya khususnya.

Seperti biasa, saya selalu membuat paragraf penutup dalam posting yang saya tulis, sedikit meminta waktu untuk "curhat", dua hari belakangan ini saya mendapatkan akibat pahit dari hobi saya mengkonsumsi cemilan manis, jika anda rasa artikel kali ini bermanfaat, mohon doa kan saya agar tidak pernah lagi mengalami sakit gigi seumur hidup,hehe..
dan terima kasih telah menyempatkan diri membaca posting saya kali ini.
Salam.