Textual description of firstImageUrl

Menambah Background Avatar Pada Komentar Pengunjung

Avatar kotak komentar
Berbicara kotak komentar memang banyak sekali hal-hal yang bisa kita utak-atik. Seperti merubah warna komentar admin berbeda dengan pengunjung, komentar dengan background dll. Nah terinspirasi dari web favorit saya kibagus. Dimana kotak komentarnya lain dari pada yang lain.
 

Pada blog tersebut bahwa setiap komentar apakah itu menggunakan profil blogger, anonymous, atau name dan url, akan muncul gambar avatar pada komentar pengunjung. Sebagai contoh lihat gambar di atas!

Untuk menambah background avatar pada komentar pengunjung ini juga sudah dijelaskan di Infonetmu. Namun tidak ada salahnya kalau kita berbagi pada orang yang belum tahu seperti saya ini. Belum lagi kasus saya mengikuti tutorial tersebut dimana salah satu kode gagal di temukan atau berbeda dengan yang dijelaskan. Baik langsung saja trik menambah background avatar pada komentar pengunjung.

1. Login ke blog kamu!
login
2. Klik Design
design baru
3.  Klik Edit HTML
edit html lama
4. Download Full template untuk backup template kamu
download ful template
5. Jangan lupa : Centang   Expand Widget Templates

6. Cari kode :

]]></b:skin>

7. Copy dan paste kode ini di atasnya :

#comments-block .avatar-image-container img {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwL9C7gnEvLbHiol9NnKT2fqAQSdW98lA-jfM8FOhRYLlORNlR5NzFN_8NYBxBpvUnyzL698FHa7JfDTqJ7l2cbAG9Q_lHIeuq63xNWFXpd0ncMX1VKMxQTP-jnxV-3eMszYWcIs71S5b/s1600/arrow-right+copye.png) no-repeat left top; width:35px;height:35px}


8. Cari kode di bawah ini :
<dl id='comments-block'>
Jika kode di atas tidak ketemu mungkin kodenya seperti ini : <dl class='comments-block' id='comments-block'>
9. Hapus kode no 8 dan ganti dengan kode :
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

10. Cari lagi kode di bawah ini :
<a expr:name='data:comment.anchorName'/>

11. hapus dan Ganti juga kode no 10 dengan
<b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
      <div expr:class='data:comment.avatarContainerClass'>
      <data:comment.authorAvatarImage/>
      </div>
      </b:if>

12. Jika sudah simpan template sobat.

Lihatlah salah satu posting sobat yang ada komentar dengan anonymous atau name dan url. Saya rasa sobat sudah bisa trik menambah background avatar pada komentar pengunjung. Dengan trik ini komentar anonymous atau komentar yang menggunakan name dan url akan terlihat avatarnya.


NB.

URL no.7 bisa sobat ganti dengan url sobat. Sebagai referensi sobat bisa menggunakan icon di bawah ini. Ukuran iconnya kurang lebih 35 x 35

icon comentar
icon comentar
icon comentar
Textual description of firstImageUrl

Posting Gambar Berdampingan Dengan Teks

Update 10 Oktober 2018
Posting Gambar Berdampingan dengan teks dapat dilakukan pada saat upload gambar dalam keadaan 'Edit HTML' saat posting. Tapi bagaimana jika kita mengedit posting yang sudah terlanjur diposting? Apakah harus upload lagi?

Tujuan Posting Gambar Berdampingan dengan teks ini membuat area posting menjadi penuh dan simpel. Jadi untuk menghemat tempat area posting namun tertata rapi agar pengunjung betah membaca artikel sampai habis. Dan dengan tujuan mendapatkan trafik blog dengan banyak kunjungan halaman.

Terdapat 2 cara atau metode untuk membuat gambar berjajar seperti berdekatan namun mempunyai fungsi sendiri. Menampilkan gambar di kiri dan kemudian menyisipkan teks di sebelah kanan gambar ataupun sebaliknya. Caranya dengan html tabel dan pengaturan CSS. Bagaimana melakukannya? Berikut penjelasan saya semoga mudah dipahami.

1. Membuat Posting 2 Gambar Menggunakan HTML Tabel
Caranya :
Saat posting artikel seperti biasa, posisi menulis pada 'edit html' jika masih keadaan "COMPOSE" Klik saja "EDIT HTML". Lalu tambahkan tag html tabel seperti ini :

<table><tr>
<td>alamat gambar sobat (kode gambar sobat)</td>
<td>alamat gambar sobat (kode gambar sobat)</td>
</tr></table>

Jika lebih dari 2 gambar sobat tinggal tambahkan kode <td>alamat gambar sobat (kode gambar sobat)</td> dan seterusnya sebelum </tr></table>

Maka hasilnya adalah sebagai berikut :
logo blogger
logo blogger
2. Posting Gambar Berdampingan Dengan Pengaturan CSS
→ Hasilnya seperti berikut ini:
problem Ada problem pertanyaan tentang Google Adsense? Kami siap membantu anda. Jika jawaban kami tidak dapat membantu, kunjungi beberapa pusat bantuan dan dukungan Google Adsense. Semoga anda puas dengan jawaban kami, terima kasih sudah berkunjung di blog ini. Komentar belum sempat di balas semua karena saya sedang belajar seo blogspot dan adsense :D


→ Sedangkan kodenya seperti ini :

<img alt="problem" class="kiri" height="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkhk_3UoX76qTOSkhGzKm-eCHrBqWL0bTFJsnsgSxJIyD6cOv3iUMci4rmCHlEam66F1nwdX91ny9pqaSugchZuigRi-54ubjBVnYhr0kwGfVB29Z5A1JtOBw7qDZhNnIor_7PEb8VtPqo/s1600/010-problem.png" title='problem'/> Ada problem pertanyaan tentang Google Adsense? Kami siap membantu anda. Jika jawaban kami tidak dapat membantu, kunjungi beberapa pusat bantuan dan dukungan Google Adsense. Semoga anda puas dengan jawaban kami, terima kasih sudah berkunjung di blog ini. Komentar belum sempat di balas semua karena saya sedang belajar seo blogspot dan adsense :D </br>


→ Lalu yang selanjutnya tambahkan css seperti berikut :

<style> img.kiri { float: left; margin: 5px;} img.kanan { float: right; margin: 5px; } </style>


Teman-teman bisa mengubah ukuran tinggi gambar dengan mengubah nilai css height dengan varian angka 'px' maupun '%' bagi teman-teman yang menggunakan design responsive. Pengaturan tinggi pendeknya serta lebar gambar dapat disesuaikan dengan selera kamu sesuai konten disampingnya.

2 Langkah mudah memposting gambar berdampingan yaitu dengan menggunakan HTML Table dan pengaturan CSS blogger. Beberapa blogger sering mengabaikan tehnik sederhana ini. Namun percayalah saat penggunaan format artikel gambar-text atau text-gambar bisa kanan bisa kiri, saya yakin artikel di blog kita terlihat rapi dan elegant. Untuk faktor seo terutama pengunjung akan dimudahkan dalam membaca dan mempelajari artikel. Terutama bagi aku yang sedang belajar seo blogspot apalagi pemula seperti saya bahwa penggunaan gambar posting berdampingan adalah hal yang selalu saya praktekkan saat posting seperti blog saya yang lain.
Textual description of firstImageUrl

SEO Ala Sejuta Trik Blogger


Update 26 September 2018
SEO for Blogger sejuta trik


Apasih SEO itu? berikut penjelasan dari wikipedia.

Sekilas tentang SEO

Optimisasi mesin pencari (bahasa Inggris: Search Engine Optimization, biasa disingkat SEO) adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut. Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.

Sejalan dengan makin berkembangnya pemanfaatan jaringan internet sebagai media bisnis, kebutuhan atas SEO juga semakin meningkat. Berada pada posisi teratas hasil pencarian akan meningkatkan peluang sebuah perusahaan pemasaran berbasis web untuk mendapatkan pelanggan baru. Peluang ini dimanfaatkan sejumlah pihak untuk menawarkan jasa optimisasi mesin pencari bagi perusahaan-perusahaan yang memiliki basis usaha di internet. Selengkapnya → baca tentang apa itu SEO?
Mari lanjutkan membaca tentang SEO karena saya ingin kita melakukan praktek nyata melalui SEO Ala Sejuta Trik Blogger ini. Salah satu praktik nyata dengan hasil sesuai usaha tentu mempunyai nilai kepuasan tersendiri. Jadi semakin banyak atau semakin besar yang kita lakukan, semakin besar pula apa yang kita dapatkan. (Quote : Alexander Dumas - The Three Musketeers)

Cara Kerja Nyata SEO di Blogger

Dari sekian ratus metode SEO karena saking banyaknya artikel berkaitan dengan Optimasi SEO anda mungkin bertanya-tanya bagaimana cara agar optimasi SEO di blogspot dapat berjalan, berikut penjelasan saya. Saya mengambil dari salah satu website penyedia layanan optimasi SEO atau Jasa SEO Internasional yaitu Overflow Cafe SEO. Adalah situs dari Jasa SEO yang memiliki reputasi sangat baik dan mempunyai beberapa staf terkenal seperti Delilah, Desiree, Joshua, Divina, Jeff dan masih banyak lagi. Website tersebut adalah anak perusahaan terkenal dari XML Sitemap Generator. Dengan kantor pusat layanan SEO di Toronto, Canada ini memiliki server tercepat. Tidak hanya itu, bahkan di halaman Google tentang sitemap pihak ke tiga yang juga merupakan protokol terpenting sebuah website turut dimuat dalam halaman tersebut.

Overflow Cafe dalam website resminya membutuhkan waktu 12 bulan agar semua metode yang digunakan dapat bekerja optimal. Dari halaman "how SEO work" terdapat 2 langkah dan dapat disimpulkan cara kerja SEO untuk blogspot yaitu :
A. Penetapan atau targeting terlebih dahulu
Sebuah web atau blog merupakan identitas tentang personal, bisnis lokal, perusahaan, organisasi maupun kategori lainnya membutuhkan segmentasi terlebih dahulu. Untuk itu tetapkan target lokasi dan semua hal yang berkaitan dengan blog kemudian pengembangan lebih lanjut. Disamping itu tetap mengikuti Kualitas pedoman webmaster seperti google.
B. Memaksimalkan SEO On Page setiap halaman
Mesin pencari google lebih menyukai halaman berkualitas untuk itu membangun konten original dan berkualitas serta didasarkan pada sumber terpercaya akan mampu meningkatkan kualitas SEO blog. Secara alami SEO On Page itu memaksimalkan fungsi HTML agar pengunjung betah mengunjungi halaman blog bukan pengunjung yang datang lalu pergi begitu saja. Sebagai dasar yaitu hasil akhir tentang lalu lintas di blog, kenali segala sesuatu yang tidak wajar seperti halaman kurang populer perlu perhatian khusus. Baca → SEO On Page Blogspot
C. Terdaftar dimana saja
Tentu saja blog sudah terindex pada mesin pencari besar seperti Google, Yahoo, Bing, Yandex maupun 300 lebih mesin pencari lainnya. Perlunya mencari atau menambahkan artikel melalui platform media marketing lainnya, direktori blog atau bisnis, dan yang lebih utama adalah bberbagai situs media sosial. Pengaruh media sosial berperan penting dalam lalulintas kunjungan blog. Sebagai contoh yaitu halaman SEO Off Page blog ini.
D. Pelaporan hasil kinerja
Penggunaan webmaster tools dapat menjadi acuan untuk cara kerja lainnya berkaitan masalah atau laporan dalam web master tersebut. Langkah selanjutnya dapat diterapkan jika menemukan indikasi penurunan kunjungan maupun pinalti dari mesin pencari.
E. Penggunaan Design Responsive
Design responsive atau dapat dilihat dalam berbagai ukuran layar maupun gadget dapat menjadi penopang melakukan optimasi SEO. Design responsive perlu perhatian juga karena setiap halaman yang tidak ditata dengan baik akan menimbulkan perbedaan persepsi dari para pengunjung blog.
F. Jasa SEO
Point terpenting SEO selanjutnya yaitu menyewa jasa SEO, membeli backlink, menyewa domain serta langganan situs penyedia webmaster tools berbayar akan mampu menambah daya saing blog kita pada mesin pencari.
Nah itulah sedikit pengertian dan cara SEO Ala Sejuta Trik Blogger. Lihat kumpulan artikel saya lainnya tentang SEO di halaman Belajar SEO Blogspot Tutorial Lengkap.

Kumpulan Cara Membuat Text Area

Ada berbagai macam cara membuat text area. Ada text area biasa, ada text area sensitif select all ada yang berwarna. Yuk langsung saja membahas Kumpulan Cara Membuat Text Area.

Text area ini dapat diletakkan di area posting dan widget sobat. Caranya kalau di posting sobat harus memencet edit HTML saat memposting. Nah berikut Kumpulan cara membuat text area. Sobat tinggal copy paste pada tampilan berikut ini :


1. Text Area Biasa
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Hasilnya :


2. Text Area Hightlight All
<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"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Hasilnya :
3. Text Area Berwarna


<center><textarea name="code" rows="2" cols="50" style="background: #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Hasilnya :




<center><textarea name="code" rows="3" cols="42" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>



Hasilnya :


<center><textarea name="code" rows="2" cols="40" style="background:#E0ECF8; color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Hasilnya :



<center><textarea name="code" rows="2" cols="42" style="background: #F8ECE0; color: #848484; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Hasilnya :




<center><textarea name="code" rows="2" cols="42" style="background:#A9F5A9; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>

Hasilnya :




<center><textarea name="code" rows="2" cols="42" style="background: #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"><center><textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center></textarea></center>


Hasilnya :



<center><textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> ISI TEKS/KODE/SCRIPT ANDA DISINI </textarea></center>
Hasilnya :



Masih banyak kumpulan cara membuat text area. Masih banyak juga yang mesti dibenahi dalam membuat text area yang dinamis. Yang pasti dengan info di atas sobat bisa kreasikan sendiri kode-kode di atas itu.