Ocean Blue Flame Blogger tutorials || The Green Place ||

Mengubah Blogger Profil ke Google Plus dan Google Plus menjadi Blogger Profil.

Selamat malam peeps. Beberapa hari ini saya memang belum update blog tercintah ini. Karena saya sedang fokus mengobrak abrik template untuk rumah saya ini. Kalau tau tampilan blog saya yang sebelumnya pasti bisa membedakan kalo blog saya telah mengalami perubahan yang cukup drastis menjadi sangat sederhana. Untuk saat ini saya memang mengambil template gratisan dan sedikit memodifikasinya karena belum ada inspirasi untuk mendesain seperti apa, hehe. Saya juga melakukan perubahan untuk profil blogger yang sebelumnya menggunakan profil yang dihubungkan ke Google+. Tapi saya merasa kurang sreg aja di samping saya hampir tidak pernah membuka G+ saya. Dan, di postingan ini saya akan memberikan tutorial untuk mengubah profil blogger ke profil google+ dan sebaliknya untuk platform blogspot.

Langkah mengupgrade profil blogger menjadi google profil sebagai berikut:
1. Masuklah ke Home/Beranda dari blog Anda dan pilihlah menu setting tepat dibawah profil Anda...
pilih menu setting


 2. Selanjutnya klik pada "Connect to Google+", maka akan muncul tampilan seperti di bawah ini.
jangan lupa di ceklis sebelum klik switch button


3. Setelah klik switch button maka Anda telah terhubung ke Google profil dan diminta untuk verifikasi blog Anda seperti di bawah ini.
klik "ADD BLOG"

4. Dan, selsesai. profil blogger Anda telah berubah menjadi google profil. Keuntungan yang ditawarkan setelah profil terhubung ke google profil adalah untuk meningkatkan trafic blog. Karena setiap kali kita update postingan maka akan pop up message yang meminta Anda untuk share postingan ke G+. Tapi setelah mengubah menjadi google profil maka anda tidak akan bisa menemukan blogger profil sebelum diswitch kembali seperti sedia kala.

Jika Anda ingin mengubah google profil pada blog menjadi blogger profil yang biasa adalah sebagai berikut:
1. Masuk menu setting pada beranda blogger (blogspot) dan pilihlah "Revert to Blogger Profile" seperti di bawah ini.

setting >> revert to blogger profile

2. Maka akan langsung muncul tampilan untuk menguibah ke blogger profil seperti di bawah ini.

pilih switch to a limited blogger profile

3. Selesai deh.

Saya secara pribadi lebih nyaman menggunakan blogger profile yang biasa, setelah saya beberpa bulan menggunakan google profil. Karena menggunakan blogger profil lebih mudah untuk mengakses blog saya. imho. That's all for today. Semoga tutorial sederhana ini memberikan manfaat dan saya bisa memberikan tutorial yang lainnya.
readmore »»  
Read More..

Cara Menampilkan Foto kita pada Pencarian Google.

Googling, sebuah istilah yang terbentuk dari proses pencarian yang dilakukan menggunakan mesin pencari Google. Padahal google bukanlah sebuah kata kerja, namun karena dominasinya di jagat maya sehingga orang akan familiar dengan istilah serapan tersebut. Aturan Grammar pun tidak berlaku lagi :D.

Saya yakin hampir seluruh pengguna internet pernah menggunakan mesin pencari seperti google, bing, maupun yang lain. Dari hasil pencarian terkadang kita mendapatkan apa yang kita inginkan, namun tidak jarang kita mendapatkan hasil yang berupa sampah,yaitu situs yang penuh dengan kata kunci namun tidak memberikan informasi yang kita inginkan.

Saat kita melakukan pencarian, terkadang kita menemukan sebuah foto seperti yang terjadi pada pencarian Update Blender via Terminal di google.com di bawah ini
Foto pada hasil pencarian google search
Foto pada hasil pencarian google search
Saat ini sudah cukup banyak foto yang muncul pada hasil pencarian google search. Karena memang ini merupakan fitur resmi dari google. Jadi jangan harap foto yang muncul di google search akan muncul di mesin pencari lain, tapi tidak menutup kemungkinan mesin pencari lainnya akan mengadopsi cara ini. Berikut beberapa alasan kenapa kita perlu menampilkan foto pada hasil pencarian google:
  1. Menambah tingkat kepercayaan pencari. Banyak situs-situs sampah bertebaran yang orang akan memilih hasil pencarian. Dengan foto penulis, orang akan berfikir bahwa pemilik blog ini orang yang professional, sampai google pun menampilkan fotonya di hasil pencarian. Hal ini membuat orang tidak ragu untuk membuka link kita
  2. Meningkatkan jumlah pengunjung. Point ini berkaitan dengan point pertama, meningkatnya kepercayaan orang akan situs kita, secara otomatis situs kita akan banyak mendapatkan pengunjung.
  3. Mempromosikan diri. Dengan munculnya foto kita di mesin pencari secara tidak langsung akan mempromosikan diri supaya lebih dikenal oleh orang yang mencari informasi sesuai bidang yang kita geluti.
Syarat utama untuk menampilkan foto pada hasil google search adalah akun Google Plus, karena foto yang muncul merupakan foto profil yang ada di akun G+. Jika belum memiliki, silakan daftar Google Plus terlebih dahulu. Setelah mendaftar buka tab profile kemudian edit profile. Pilih bagian contributor to, setelah itu isikan alamat websitemu disitu. Saran saya gunakan alamat domain utama dan sub domain www, sehingga tampak seperti screenshot di bawah ini.
contributor to
contributor to
Setelah memiliki akun Google + dan mengubah contributor  to, kini saatnya mengubah source code dari website yang kita miliki. Buka editor html dari website kita, contoh kali ini menggunakan platform blogger. Letakkan kode di bawah ini diantara <head> dan </head>
<a href='https://plus.google.com/101013565603753330318?rel=author'/>
<a href='https://plus.google.com/101013565603753330318?rel=publisher'/>

Berikut screenshot peletakan kode tersebut
peletakkan kode
peletakkan kode
Ganti kode di bawah ini menjadi alamat google plusmu

https://plus.google.com/101013565603753330318 

Jika sudah, jangan lupa simpan file tersebut dan coba buka Google Richsnippet Tool untuk memeriksa apakah foto kita muncul di hasil pencarian google search. Jika mengalami kendala jangan sungkan-sungkan untuk meninggalkan komentar :D.

readmore »»  
Read More..

cara mempercantik tampilan read more pada blog

Nah saya sekarang akan membuat postingan lagi yang berjudul Cara Membuat Read More Dengan Tombol Gambar. Jadi Tulisan Read More nya itu kita ganti dengan Tombol Gambar.
nah berikut ini adalah pilihan tombol yang saya punya :

  ( Black Style)
Read More Button #01

 ( Orange Style)
Read More Button #02

(White and Green Style)
Read More Button #03

( Blue Blank Style)
Read More Button #04

( Red White Style )
Read More Button #05

( Brown top Bottom Style)
Read More Button #06

( Pink Left-right Style )
Read More Button #07


( Rectangle left border Style)
Read More Button #08

( Light Purple long Style)
Read More Button #09

( Narrow black Orange Style)
Read More Button #10


Berikut Cara Membuat Tombol Gambar Read More :
1. Login Ke Akun Blogger Anda
2. Klik Dashbord -> Edit HTML 
3. Centang   Expand Widget Templates
4. Cari kode <data:post.body/> Mungkin kamu akan menemukan 2 kode ini jadi pilih kode yang kedua. 5. (Gunakan Tombol CTRL+F atau F3 untuk mempermudah pencarian kode)Jika ada tulisan Read More ya kira-kira kode nya seperti berikut
<b:if cond='data:blog.pageType != &quot;item&quot;'><div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span style='float:right'><a expr:href='data:post.url'>Read More.. </a></span><b:else/><data:post.body/></b:if>

  6. Ganti Tulisan Yang Berwarna Merah dengan kode berikut :
<img alt='Read More..' src='URL FOTO NYA SOBAT'/>

   7. Simpan Template
   8.  Selesai dan lihat hasilnya.

Semoga Bermanfaat sobat.
readmore »»  
Read More..

Cara ampuh menggabungkan beberapa widget pada blog

Kita bisa membuat widget statistik blog dengan/tampak rapi dengan sedikit sentuhan HTML.ok langsung saja, cara membuat blog tampak rapi..

1. Log in ke Blogger
2. Masuk ke tab layout
3. Pilih tab add page element
4. Pilih HTML/Javascript
5. Masukkan kode berikut ini di dalam HTML/Javascript



<center><table border="0" cellpadding="3" width="250"><tbody><tr>
<td align="center"> 
Kode Gadget HTML 1
</td>
<td align="center"> 
Kode Gadget HTML 2
</td>
</tr>
<tr>
<td align="center"> 
Kode Gadget HTML 3
</td>
<td align="center"> 
Kode Gadget HTML 4
</td>
</tr>
</tbody></table></center>

• Pada kode berwarna Merah, Ganti dengan kode Gadget yang kamu punya.
• Sedangkan pada kode yang berwarna Biru, rubahlah sesuai ukuran yang pas dengan sidebar gadget di template blog kamu.
• Simpan dan lihatlah hasilnya, contoh hasilnya akan tampak seperti gambar pada artikel ini.

"selamat Mencoba" semoga berhasil, silahkan tinggal kan komentar anda.

readmore »»  
Read More..

Cara menjadikan widget blog menjadi rata tengah


Mungkin tutorial ini merupakan tutorial yang jadul dan sudah banyak yang tahu. Namun sekiranya ini bisa menjadi tambahan pengetahuan bagi kita semua yang masih baru dalam dunia blogger termasuk saya tentunya.



Adakalanya jika kita menempatkan suatu widget yang kita tempatkan pada blog ternyata ukuran widget tersebut tidak sesuai dengan ukuran yang sudah ada pada blog. Oleh karena itu terkesan tidak rapi jika kita paksakan juga.
Untuk menyiasatinya, cara yang paling gampang adalah dengan meletakkan widget tersebut tepat pada bagian tengah (center).



Terus bagaimana caranya? Ternyata caranya sangat-sangatlah mudah. Kita tinggal meyisipkan kode HTML berikut : <center>...</center>. Peletakannya pada bagian awal dan akhir script yang akan kita ratakan.



Ini contohnya:



<center>

<script widget><br />
</center>







selamat mencoba ya sobat, kalau berhasil komentar OK.
readmore »»  
Read More..

Cara Mencegah dan Mengatasi Duplikat Konten Pada Blog

Sebenarnya duplikat konten pada seperti ini tidak akan berdampak buruk pada blog kita, namun bila Cara Mencegah dan Mengatasi Duplikat Konten Pada Blog kita terapkan dapat meningkatkan kualitas blog kita di mata mesin pencari, khususnya google.
Oleh karena itu saya akan share cara-cara untuk mencegah duplikat konten tersebut, berikut  langkah-langkah yg bisa anda lakukan :

 Pertama anda harus login dulu ke akun blogger kalian setelah itu klik Template--->Edit Html  dan masukkan kode dibawah ini dibawah tag <head>

<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
 Kemudian tambahkan lagi kode berikut dibawah kode diatas, berikut kodenya
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
 kalo sudah selesai kemudian simpan.

Sekarang anda aktifkan tag header robot khusus di Setelan--->Preferensi Penelusuran--->kemudian pilih Tag tajuk robot khusus pada opsi paling bawah  ,kemudian setting seperti gambar berikut

setelah selesai sekarang anda simpan..

Selesai,,,
silahkan dicoba semoga bermanfaat.. TERIMA KASIH ATAS PERHATIANNYA
readmore »»  
Read More..

cara mendaftarkan blog sobat ke Google Webmaster Tools


Salah satu search engine terbesar didunia saat ini adalah Google, agar blog kita bisa ter index atau terdaftar di halaman search engine Google kita harus mendaftarkan blog terlebih dahulu di Google Webmaster Tools.

Dengan terdaftarnya blog di Google Webmaster Tools, blog kita akan lebih mudah ter index oleh Google search engine. Sebelum mendaftar Anda diharuskan memiliki akun Gmail, langsung saja kita masuk langkah-langkah mendaftar blog ke Google Webmaster Tools:

1. Kunjungi situs Google Webmaster Tools.
2. Masukkan alamat URL blog, kemudian klik 'ADD A SITE'. 
3. Setelah itu klik 'Alternate Methods', kemudian centang 'HTML tag'. 
4. Copy kode meta tag pada Source Code HTML blog Anda setelah kode <head>
5. Kemudian kembali ke halaman Google Webmaster Tools, dan klik 'VERIFY'.

Nah, sekarang Anda sudah terdaftar di Google Webmaster Tools, namun setelah terdaftar Anda harus memasukkan sitemap blog Anda agar semua posting/konten blog kita ter index oleh Google. Berikut langkah-langkahnya:

1. Klik link blog yang Anda daftarkan tadi.
2. Kemudian klik 'Sitemaps' (kanan bawah) ---> klik 'ADD/TEST SITEMAP'. 
3. Masukkan kode berikut di kotak: 
atom.xml?redirect=false&start-index=1&max-results=500
(apabila artikel di blog lebih dari 500 posting, tambah kode &max-results=1000dibelakangnya)
4. Setelah itu, klik 'Submit Sitemap'.

Sekian postingan dari id-pemula blogspot, selamat mencoba dan semoga bermanfaat.
readmore »»  
Read More..

Cara Membuat Judul Postingan Menjadi Judul Halaman Blog

Pada postingan terdahulu, kita sudah membahas cara membuat judul postingan berada di sebelah kiri judul blog. Nah, kali ini kita akan membuat judul postingan menjadi judul halaman blog.

Tapi apa sich maksudnya membuat judul postingan menjadi judul halaman blog?

Begini. Standarnya judul posting berada di sebelah kanan judul blog. Seperti ini.

Nah, dengan membuat judul postingan menjadi judul halaman blog, maka yang tampil di title bar hanya judul postingan. Seperti gambar dibawah ini.
Nah, di sisi SEO ini tentu lebih menguntungkan daripada judul postingan berada di sebelah kiri judul blog. Nah, langsung saja yuk kita buat...

Pertama-tama login ke Blogger dulu. Lalu pilih menu Tata Letak > Edit HTML. Lalu silakan backup dulu templatenya. Kalau sudah, langsung saja ikuti langkah-langkah ini.

1. Cari kode berikut ini.
<title><data:blog.pageTitle/></title>
2. Ganti dengan kode berikut ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
Apabila anda telah menggunakan cara membuat judul postingan berada di sebelah kiri judul blog, maka hapuslah semua kodenya dan ganti dengan kode diatas.

3. Terakhir, simpan.

Nah, semoga dengan ini blog anda lebih Search Engine Friendly.
readmore »»  
Read More..

cara membatasi jumlah posting yang muncul pada label

jumlah posting yang muncul pada halaman beranda atau homepage dapat dibatasi sesuai keinginan kita tanpa harus masuk ke edit html. Disini saya beranggapan bahwa anda telah dapat mengatur jumlah posting yang muncul di homepage.  Pembahasan kali ini terfokus pada cara membatasi jumlah posting yang akan ditampilkan ketika label diklik.

Jumlah postingan dalam label ketika diklik, secara default blogger tidak memberikan batasan.  Sehingga bila kita mempunyai artikel dalam satu label sejumlah 100 artikel maka berapa meter panjang blog kita. Tentu sangat tidak nyaman bagi pengunjung karena harus memutar-mutar scroll mouse yang sangat melelahkan.

Memang sih dengan adanya readmore dapat memotong artikel agar tidak ditampilkan seluruhnya, hanya beberapa kalimat saja tergantung pada dimana akan diletakkannya pemenggal paragraf (readmore). Tetapi masih tetap panjang bila setingan label masih default dan tidak kita batasi. Dan tentu saja akan menambah berat loading blog.

Nah untuk membatasi jumlah posting yang tampil dalam satu halaman ketika label diklik, perlu ditambahkan kode pembatas seperti di bawah ini.
+ &quot;?max-results=7&quot;
Angka 7 di atas menunjukkan berapa banyak jumlah posting yang ditampilkan per halamannya. Silakan ganti sesuai dengan keinginan Anda.

Sekarang akan kita praktekkan di template blog kita. Namun, sebelumnya pastikan bahwa Anda sudah memasang widget label di sidebar blog Anda. Anda bisa memilih label berbentuk daftar atau list atau bisa juga label yang berbentuk cloud.

Setelah selesai memasang widget label, selanjutnya adalah membatasi jumlah posting dalam label, caranya:
  1. Masuk ke akun Blogger Anda.
  2. Klik Rancangan > Edit HTML.
  3. Klik Download Template Lengkap untuk mem-back up template. Hal ini dilakukan untuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.
  4. Beri tanda centang pada Expand Template Widget.
  5. Cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.
  6. <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul>
  7. Tambahkan kode pembatas + &quot;?max-results=7&quot;
  8. Sehingga hasilnya akan seperti di bawah ini.
  9. <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'><data:label.name/></span> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url+ &quot;?max-results=7&quot;'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>(<data:label.count/>)</span> </b:if> </li> </b:loop> </ul>
  10. Kode di atas adalah kode untuk label yang berbentuk list. Sedangkan untuk labelcloud, silakan cari kode seperti di bawah ini. Letaknya di bawah kode label list.
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
  11. Tambahkan kode pembatas + &quot;?max-results=7&quot;
  12. Maka hasilnya akan tampak seperti di bawah ini.
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=7&quot;'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
  13. Klik tombol SIMPAN TEMPLATE.
  14. Selesai.

Cara di atas berlaku pada sebuah label yang diklik di widget label, baik label daftar atau label cloud. Namun, untuk link label yang terdapat di menu navigasi breadcrumbs dan post footer line, link label tersebut bila diklik masih menampilkan semua posting.

Nah, bila Anda ingin membatasi juga jumlah posting yang tampil pada label di kedua lokasi tersebut, silakan simak langkah-langkahnya di bawah ini.
  1. Lakukan langkah no. 1 - 4 pada langkah di atas.
  2. Cari kode seperti di bawah ini  atau yang mirip dengan kode tersebut, yaitu kode untuk menu navigasi breadcrumbs.
    <div id='breadcrumbs'>
    Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
    </b:loop>
    </b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
    </div>
  3. Tambahkan kode pembatasnya, maka hasilnya seperti di bawah ini.
    <div id='breadcrumbs'>
    Browse: <a expr:href='data:blog.homepageUrl'>Home</a> &gt; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if>
    </b:loop>
    </b:if> &gt; <a expr:href='data:post.link'><data:post.title/></a>
    </div>
  4. Cari kode seperti ini di bawah ini atau yang mirip dengan kode tersebut, yaitu kode untuk label pada post footer line.
    <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span> </div>
  5. Kemudian tambahkan kode pembatasnya, maka jadinya akan seperti di bawah ini.
    <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url + &quot;?max-results=7&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    </b:if>
    </span> </div>
  6. Klik tombol SIMPAN TEMPLATE.
Mudah-mudahan dengan dibatasinya jumlah posting yang muncul dalam label dapat menjadikan tampilan blog lebih baik, pengunjung menjadi nyaman dan akan kembali lagi di kemudian hari.
readmore »»  
Read More..

Tukar Link