Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Selasa, 03 September 2013

Pelatihan Blogger Indonesia bagi Pemula

Banyak orang yang sukses hanya dengan mempunyai sebuah blog. Ngeblog menjadi trend hampir seluruh kalangan dari berbagai umur. Mulai dari remaja, pengusaha, karyawan, perusahaan, organisasi, pebisnis, bahkan ibu rumah tangga juga banyak yang membuat blog dengan berbagai macam tujuan.

Untuk itu, IdBloggers membuka kesempatan untuk anda yang ingin belajar, mengolah, serta menjadikan blog sebagai ladang uang yang berlimpah. Dalam Pelathian Blog tersebut anda akan diajarkan cara membuat blog dengan Blogger.com atau Wordpress.com.

training blog

Materi yang akan diajarkan meliputi :
  • Cara Membuat Blog
  • Stucture XML
  • Bahasa Pemrograman HTML dan CSS
  • Cara Mengedit Blog
  • Praktek : Mengoprek Template Blog
  • Mempelajari elemen-elemen blogger
Harga 1x Pelatihan ini sangat murah dan terjangkau hanya Rp50.000,-/org.

Info lebih lanjut kunjungi pada halaman blog baru kami di :
http://www.idbloggers.com/2013/09/pelatihan-blog-di-idbloggers.html

Durasi Pelatihan : 2jam.
Target Prioritas : Karyawan, Pelajar, Mahasiswa, Ibu Rumah Tangga

Persyaratan Personal :
- Sudah sering menggunakan Internet dan mengenali fungsi setiap halaman-halaman suatu situs seperti Navigasi, Kotak Search, Menu, dsb.
- Menggunakan kemeja dan sepatu.

Pelatihan Blog dengan Blogger ini akan diajarkan oleh saya langsung. Supported : IdBloggers

Senin, 26 Agustus 2013

Cara Membuat Label di Blog Menjadi Optimal

Label di Blog ada yang berbentuk bulat, kotak, cloud, bright style, warna warni dsb. Mempercantik tampilan label menjadi keren mungkin perlu dilakukan. Label atau lebih dikenal sebagai kategori merupakan kumpulan artikel yang diklasifikasikan kepada subject dari topik utama artikel tersebut agar mudah dikelompokkan. Fungsi label adalah mempermudah pengunjung menemukan artikel berkaitan di sebuah blog selain itu juga sebagai sitelinks yang nanti dapat dibaca search engine.
label blog design
Cara Membuat Label tentu mudah, tidak seperti membuat kue, makanan, membuat gambar dengan corel draw, membuat website dengan Framework, mempelajari Java OOP dan lainnya. Hanya dengan memanfaatkan sedikit tambahan class CSS3 kita dapat memodifikasi label menjadi menarik, cantik, serta keren.
label blog
Contoh demo dari pemasangan label bisa dilihat seperti gambar yaitu dengan pilihan list pada option Tampilkan di label, bisa juga apabila memilih cloud.

Tahap Cara Membuat Label Blog :
1. Log In Blogger
2.  Pilih Blog Yang Akan Di Edit
3 . Pergi Ke Template
4 . Klik Edit HTML
5 . Centang Expand Template Widget
6 . Cari Tulisan ]]></b:skin> ( Tekan Ctrl + F Atau    F3 Di Keyboard Untuk Mencari )
7 . Pasang Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>
.Label a{ background:#00FFFF; padding:0 20px; color:#000!important; padding-left:20px; border-radius:90px; -moz-border-radius:90px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }
8. Simpan Template
9. Masuk ke Tata Letak / Layout
10. Tambahkan widget dengan cara cari letak posisi label yang diinginkan, klik add a gadget.
11. Pilih LABEL
12. Atur sesuai keinginan anda, isikan Judul widget dengan Label atau Kategori.
13. Save.

Untuk tutorial lainnya dapat dilihat pada artikel Label Box Style with CSS3 Efek. Lihat hasilnya, selamat menyelesaikan cara membuat label menjadi optimal ya. See you !

Minggu, 25 Agustus 2013

Cara Membuat Artikel Terkait di Blog Tanpa Gambar

Salah satu hal yang diperlukan pengunjung saat membaca suatu artikel di blog kita adalah navigasi / kemudahan menemukan artikel terkait lainnya. Oleh karena itu, dibutuhkan sebuah gadget atau widget yang bernama Related Posts. Bagaimana cara membuatnya, mari ikuti panduan kali ini !
related posts design
Postingan sebelumnya, memang membahas hal serupa yaitu Cara Membuat Related Posts dengan Gambar Thumbnail. Perbedaannya adalah pada artikel tersebut fungsi artikel terkait dijadikan dengan gambar artikel sedangkan postingan ini hasilnya akan menampilkan beberapa judul artikel yang memang mempunyai hubungan keterkaitan berdasarkan label.

Artikel terkait pada umumnya diletakkan pada bagian bawah posting suatu artikel. Hal ini akan mempermudah pengunjung yang ingin membaca artikel selanjutnya lengkap sesuai dengan kategori label yang sama. Artikel yang muncul sesuai dengan postingan terbaru dari masing-masing label itu. Contohnya dibawah ini :
related posts
Artikel terkait tersebut, terbentuk dari susunan label Gadget and Widget. Cara membuatnya, mari simak panduan berikut :
1. Login ke Blogger untuk membuka blog anda.
2. Buka Menu 'Template'
3. Lalu klik 'Edit Html' (Anda bisa menekan tombol CTRL+Z untuk kembali, meskipun template telah disave. Dan Sebelum mulai, harap backup template yang digunakan agar dapat di restore kembali jika ada masalah dalam pemasangan).
4. Cari kode berikut : </head> (Pakai Ctrl+F untuk mempermudah)
5. Copy Paste kode di bawah ini tepat di atas </head>

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;}}}}
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];}}
    relatedTitles = tmp2;
    relatedUrls = tmp;}
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;}
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' +
    relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;}
    i++;}
    document.write('</ul>');}
    //]]>
    </script>

6. Cari kode berikut : <data:post.body/> (Pakai Ctrl+F untuk mempermudah)
7. Copy Paste kode dibawah ini kemudian letakkan di bawah <data:post.body/>
Catatan : Biasanya terdapat 2 buah <data:post.body/> Pakai kode yang kedua lalu paste di bawahnya ya.

    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
    </b:if>
    </b:loop>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>

8. Klik Save.

Cara kerja Related Posting ini cukup mudah singkat, merujuk pada label yang diterapkan pada postingan. Artikel yang memiliki label yang sama akan tercantum secara otomatis pada Artikel yang sedang dibuka.

Keterangan :
Jika artikel terkait muncul juga di halaman utama (homepage) blog anda, tambahkan kode ini diatasnya ( Langkah 7) :
<b:if cond='data:blog.pageType == "item"'>
dan berikan kode </b:if> pada paling akhir.

Angka berwarna merah menunjukkan jumlah artikel yang akan ditampilkan.
Demikian cara membuat artikel terkait di blog tanpa gambar yaitu hanya link text beserta judul artikel saja.

Sabtu, 03 Agustus 2013

Ebook Tutorial Membuat Blog Lengkap Tips SEO

Cara Terbaik untuk menulis artikel salah satunya melalui Blog. Jika anda ingin memulai membuat sebuah blog, ada beberapa hal yang harus diperhatikan. Sebelum membahas ke Tutorial Membuat Blog Lengkap Tips SEO dengan Ebook, ada baiknya kita lihat sedikit keragaman dunia blogger saat ini.

Persiapan yang harus dilakukan untuk memulai membangun sebuah blog yaitu :
1. Tentukan tujuan membuat blog tersebut.
2. Dimana tempat membuat blog gratis.
3. Bagaimana cara membuatnya serta apa saja yang dipersiapkan.
4. Siapkan Nama Blog Pribadi anda, Logo Blog, dan Tentukan materi serta isi pokok apa saja yang akan dipublikasikan kepada para pengunjung.
5. Pemilihan template yang berkualitas dengan desain menarik, elegant, user friendly.
6. Tentukan jadwal untuk membuat artikel.
7. Siapkan social media untuk berbagai serta promosi.
8. Lakukan pengoptimalan pada search engine untuk meningkatkan pengunjung.
9. Berikan artikel yang bermanfaat tanpa duplikasi karya orang lain.
10. Konsisten, Percaya Diri, Terbuka, Tanggung Jawab dan Ramah merupakan sifat terpenting.

Itulah beberapa tips-tips dan kiat untuk membuat sebuah blog yang baik. Mungkin, bahasan tadi akan menjadi langkah serta tahap anda ke depannya menjadi seorang blogger sukses di dunia. Ayo kita awali topik utama kita yang dapat menambah referensi anda ke depannya.
design blogger
Buat anda yang masih Pemula, yuk sama-sama baca artikelnya pada halaman Tutorial Membuat Blog Lengkap dengan Mudah. Nah, yang ingin mendownload ebook cukup duduk manis dan bertahan ya disini.
hehehe.

Ebook adalah buku elektronik. Ebook merupakan buku yang hanya dapat dibaca pada perangkat elektronik, seperti halnya Komputer, Gadget, Tablet, Smartphone, IPad, dan sebagainya. Buku ini bisa didapatkan dengan gratis dengan hanya membutuhkan koneksi internet untuk mengunduhnya.

Ebook ini memiliki berbagai macam isi seputar dunia blogging yang lengkap, mulai dari Cara Pembuatan Blog, Langkah Sukses di Blogger, Cara Mendapatkan Uang melalui Blog, Tips Mengoptimalkan Blog pada search engine, Tutorial Promosikan Blog di Jejaring Sosial, Cara Mudah Meningkatkan pengunjung blog dan lain sebagainya.

Tentu dengan adanya buku ini, diharapkan dapat membantu anda membangun situs pribadi berupa blog, memulai usaha online, menunjukkan jati diri serta menjual atau mempromosikan diri tentang keahlian yang dimiliki.

Langsung saja, baca dan ikuti tutorialnya setelah anda download. ( format file : PDF )
- Ebook Cara Membuat Blog dengan Mudah hanya 3 Menit
- 3 Langkah Menjadi Seleb Blogger
- 30 Kiat Sukses Membangun Blog
- 99 Langkah Sukses di berbagai Search Engine.
- Cara Meningkatkan Pengunjung Blog
- Tips Mendapatkan Penghasilan $1000/bulan dari Google Adsense
- Google Adsense Secret versi Bahasa Indonesia
- Wawancara Edukatif bersama seorang Blogger Sukses

Kumpulan E-Book diatas bisa anda pelajari dengan seksama saat sedang santai dirumah. Disana berisi tips-tips terbaik yang dapat anda lakukan sendiri. Sedangkan khusus untuk SEO Checklist, silahkan kirimkan email anda agar dapat dikonfirmasi. Cara Mempercantik Tampilan Blog dengan Design Menarik baca juga ya.

Blogger adalah sebuah penyedia layanan blog gratis yang memungkinkan kita untuk bisa membuat blog di internet dengan mudah, cepat, praktis, dan gratis. Blogger ini adalah salah satu layanan product resmi Google dengan fasilitas yang bagus dan menarik. Nah, dengan memanfaatkan Blogger inilah kita dapat bebas berkreasi dalam konteks tulis menulis artikel ataupun untuk berbisnis.

Tunggu apalagi, Welcome To Create a Free Blog !

Cara Mengganti Background Header Blog Menarik

Tidak hanya untuk menggambar, melukis, mewarnai , background juga dapat didesain dengan bagus dan menarik. Pada sebuah blog, tampilan menjadi hal yang sangat penting untuk menunjang banyak pengunjung. Postingan sebelumnya telah dijelaskan bagaimana cara merubah background template pada blog dengan gambar.

Kali ini, merupakan artikel pelengkap yaitu Cara Mengganti Background Header Blog agar Menarik dan Dinamis.
backgrounds
Header Blog adalah bagian paling atas pada sebuah situs yang berisi nama situs, menu, tempat pencarian, lokasi situs, media iklan dan sebagainya. Apabila pada elemen header ini tidak menarik, langkah yang pas adalah dengan mengkombinasikan warna serta memberi background dengan tema dan layout yang sesuai. Jadi, tidak hanya body background yang kita modifikasi namun juga pada bagian header lah yang paling utama.

Agar background tersebut menarik, berilah gambar yang bagus atau bisa juga padanan gradiasi warna yang sesuai dan bisa juga animasi, atau bahkan hanya text saja. Hal ini akan menjadi pertimbangan untuk anda menentukan sesuatu yang cocok untuk dimasukkan kedalam latar belakang header tersebut.

Cara Mengganti Background pada Header melalui Edit HTML :
1. Pilih bagian Template di blogger.com
2. Klik Edit HTML, dan cari kode #header-wrapper atau #header
3. Maka, anda akan melihat susunan kode seperti
#header-wrapper{width:985px;padding:0 0 0px 5px;height:110px;background:#fff url(http://4.bp.blogspot.com/-o2zGkwcXhRg/UaBI_UXx3rI/AAAAAAAABCg/MeruBAHcw8/s1600/backgroundrs2.png);}

Keterangan : Yang berwarna orange, silahkan anda masukkan dengan URL Link foto/gambar/image background anda.

Sebelumnya, anda harus mempersiapkan gambar backgroundnya lalu upload di Google+, Photobucket, Flicker, atau lainnya. Bisa juga upload di blog pada saat posting artikel namun jangan di Publish. Lalu, ambillah alamat link url gambarnya.

Width : adalah lebar / panjang elemen header
Height : adalah tinggi header
#fff : kode warna ( putih ) yang berfungsi apabila gambar tidak muncul maka warna putih lah yang akan menjadi background sobat.

Jadi, anda harus menyesuaikan gambar yang anda buat dengan ukuran tersebut.

4. Save jika pengaturan diatas sudah selesai.

Cara Mengganti Background Header Blog pada Layout Blogger :
  • Masuk ke bagian Layout / Rancangan Design / Tata Letak pada menu Blogger.
  • Kemudian klik Edit pada bagian Header seperti terlihat pada gambar.

layout blogger
  • Maka akan terbuka sebuah popup window berisi tempat untuk melakukan upload gambar image anda.
  • Klik "Browse" untuk memilih gambar pada komputer anda, yang secara otomatis nanti akan terupload setelah dipilih.
  • Pilih Selain judul dan keterangan atau opsi no. 2 pada bagian yang diberi kotak kuning.
  • Sedangkan, kotak hijau berfungsi untuk meletakkan alamat link url gambar anda saja.

background header blog
Klik Save jika sudah selesai.

Itulah cara mudah merubah tampilan background pada header blog menjadi menarik. Jika anda ingin mengetahui penggunaan background silahkan baca disini. Anda juga bisa membuat gradiasi warna linear background.

Kamis, 01 Agustus 2013

Cara Membuat Tulisan Berjalan dengan Efek Marquee

Di beberapa forum atau website berita, sering kita lihat tulisan berjalan pada bagian atas menu / header dari nama situs tersebut. Tulisan berjalan itu biasanya digunakan untuk memberitahukan pengunjung mengenai informasi Update, Maintenance, Breaking News, dan lain sebagainya.

Untuk membuat tulisan berjalan dengan cantik dibutuhkan efek Marquee pada penggunaan kode HTML. Marquee adalah efek yang dapat diisi tulisan atau angka sehingga dapat bergerak atau berjalan pada satu baris. Seperti garis horizontall, line vertical, dan diagonal namun yang kita lihat lebih sering berjalan dalam bentuk horizontall.
efek marquee
Langsung ke tutorial cara membuatnya, seperti berikut ini :

Cara Membuat Tulisan Berjalan dengan Efek Marquee :
1. Silahkan anda isi/edit pada bagian "Tulisan Anda" dengan kata atau angka yang ingin dibuat berjalan.
2. Kemudian copy paste script codenya.
3. Tambahkan pada Gadget/Widget di Blog anda dengan cara Tambah Gadget > HTML/Javascript > Masukkan kode > Save.

- Efek Marquee sederhana ( Berjalan Terus Menerus )
<marquee> Tulisan Anda </marquee>

- Jika ingin tidak terlihat bosan, kita dapat menambahkan background dibelakang baris tulisan yang berjalan, dengan kode :
<marquee bgcolor="blue">Tulisan Anda dengan Latar Belakang berwarna Biru </marquee>

- Untuk mengatur Arah Gerakan ( top / left / bottom / right )
<marquee direction="up">Tulisan Disini ke Atas</marquee>

- Membuat Text Berjalan berdasarkan perulangan yang ditentukan. Akan berhenti jika perulangan selesai.
<marquee loop"5"> Text ini berjalan dan AKAN BERULANG 5x  </marquee>

- Membuat Text berjalan pada setengah bagian lebar halaman / media / lebar layar.
<marquee width="50%">TEXT BERJALAN DALAM 50% Bidang</marquee>

- Tulisan Berjalan dengan Kecepatan
<marquee scrollamount="10">TULISAN ANDA BERJALAN DENGAN KECEPATAN 10 </marquee>

- Membuat Text Berjalan ke Kanan atau Kiri.
<marquee direction="right">TEXT BERJALAN KE KANAN</marquee>
kalau ke kiri tinggal ganti right dengan left.

- Berjalan Bolak Balik Terus Menerus
<marquee behavior="alternate">TEXT BERJALAN BOLAK BALIK</marquee>

- Script selanjutnya, adalah menampilkan tulisan berjalan muncul dari atas lalu bergerak ke arah bawah.
<marquee direction="down" height="50">TEXT BERJALAN KE BAWAH</marquee>

Untuk mengatur ukuran tingginya ganti angka 50 dengan ukuran tinggi keinginan anda.

- Tulisan berhenti ketika tersentuh mouse.
<marquee behavior"alternate" onMouseOver="this.stop()" onMouseOut="this.start()">TEXT BERJALAN MENUNGGU MOUSE</marquee>

- Text berjalan disertai URL Link, contohnya untuk registrasi, login dan pemberitahuan lain.
<marquee><a href="http://impoint.blogspot.com">Nama Linknya / Nama Halaman Anda</a></marquee>

Anda juga dapat memodifikasi tampilan text berjalan marquee ini dengan elemen html lainnya yang dapat dikombinasikan. Contohnya seperti memberi warna tulisan, merubah ukuran huruf, membuat text berkedip-kedip, membuat tulisan huruf tebal, miring, dan bergaris bawah, serta masih banyak lagi.

Contohnya dengan menambahkan kode style disertai kode css apa yang akan digunakan.
<blink><marquee style="font-size: 30px; color:black; font-style:italic;">Kombinasi Tulisan Berjalan Efek Marquee</marquee></blink>

Sekian dahulu artikel cara membuat tulisan berjalan atau cara membuat text berjalan di blog atau menu , bidang dan sebagainya.

Minggu, 28 Juli 2013

Mengembalikan Domain TLD ke Subdomain Blogspot

Cara Mengembalikan Domain TLD ke Subdomain blogspot/blogger telah resmi dilakukan juga pada blog ini. Mengapa balik lagi ke domainnya google? Alasannya akan dijelaskan lengkap pada tahap-tahap di bawah ini. Untuk anda yang ingin mengembalikan domain TLD ( Top Level Domain ) ke semula, caranya sangat mudah dan hanya membutuhkan satu buah click.
pemindahan server blogger
Langkah-langkahnya :
1. Login to Blogger.com
2. Pilih blog anda yang ingin dikembalikan, kemudian Pilih Menu Setting.
3. Kemudian klik Publikasi.
4. Selanjutnya, klik tanda silang pada bagian dekat redirects domain, disamping kanan nama domain TLD anda ( .com, .net, .org )
5. Save

Sangat mudah dan simple kan. Lanjut mengenai masalah pemindahan yang terjadi pada blog ini, yaitu dikarenakan adanya tindakan kejahatan yang dilakukan oleh anonymius terhadap server serta menyangkut akun di Google Adsense. Karena adanya tindakan tersebut, google melakukan banned ke semua blog yang terdapat di akun saya serta membanned akun adsense saya yang kurang lebih berjumlah sekitar USD $810. Bulan ini seharusnya payout $487 dan bulan berikutnya $336. Bagaimana perasaan anda jika hal ini terjadi, apakah jungkir balik dikasur atau gigit sedotan setiap hari. hahaha, saya juga manusia biasa.

Nah, untuk teman-teman sahabat Media Blogger semua yang baik hati mohon maaf atas ketidaknyamanan ini. Mungkin banyak link yang belum diupdate karena masih menggunakan link url lama yaitu mediabloger.com ( karena ganti lagi jadi subdomain blogspot padahal baru sebulan punya domain TLD ).

Dan kalau berkenan, tolong dukung kami agar selalu bersemangat di kancah dunia blogger ini. Salam satu perjuangan Media Blogger ^^

Jumat, 19 Juli 2013

Panduan Mengedit Blog bagi Pemula

Semoga sahabat Media Blogger sehat semua dan siap untuk mengikuti panduan serta tutorial seo blogger kali ini. Buat anda yang masih baru belajar serta masih pemula, yuk kita belajar mengedit template yang berekstensi XML khususnya di blogger. Sering ya kita, melihat blog pribadi dengan template yang bagus serta tampilan yang easy going. Tentu, anda juga ingin punya blog seperti itu bukan?
helper edit blog

Untuk mendesain sebuah interface yang menarik, tentu anda harus mengetahui serta menguasai kode-kode yang digunakan beserta pendukungnya seperti HTML 5, CSS3, Javascript, JQuery, Ajax, ASP, PHP dan konsep OOP apabila anda ingin membuat sebuah website.

Oleh karena itu, Media Blogger menyediakan tempat pelatihan belajar blog online melalui blog ini, hanya saja dalam melakukan proses editing sebuah elemen, widget, atau gadget blog sering kali terjadi error. Hal ini disebabkan bukan karena saya yang memberikan tutorial itu salah, bukan juga karena anda sudah teliti serta benar dalam mengeditnya. Namun, beberapa template memang didesain oleh author yang memiliki ciri khas yang berbeda baik itu penempatan kode, struktur pemilihan, gaya menulis serta lainnya.

Hal ini membuat beberapa nama id pada suatu elemen berbeda sehingga sulit bagi pemula untuk mengetahui dimana kode yang dicarinya tidak ditemukan, atau letak kesalahan yang tidak terdeteksi.

Oleh sebab itu, saya memberikan jasa untuk memodifikasi tampilan situs blog aja menjadi menarik. Contohnya pada saat anda melakukan :
Dan masih banyak lagi....
Silahkan anda komentar untuk memesan, mau dibuat bagaimana blog anda atau mau ditambahkan fungsi/fitur lain.
Harga pemasangan dimulai dari Rp. 10.000 - Rp. 249.000

Saya juga menerima jasa pembuatan Google Adsense dan akan blognya akan dipandu untuk mendapatkan akun Full Aprove agar pendapatan blog anda menjadi maksimal.
Harganya : Rp. 120.000 ( Garansi 4bulan )
Akun Google Adsense + Menaikkan BPK/CPC hanya 249.000 ( Garansi 1bulan )

Blog anda akan dimonitori terus, apabila terjadi kesalahan yang dilakukan oleh anda maka garansi tersebut tidak berlaku. Selamat membaca panduan mengedit blog bagi pemula di artikel lainnya, Terimakasih.

Senin, 17 Juni 2013

Cara Membuat Menu Bootstrap pada Blogspot

Cara Membuat Menu Bar di Blog - Tentu anda sudah mengenal dan mengetahui dengan istilah Menu / Menu Bar ? Menubar adalah sebuah kotak tab disertai dengan bingkai garis yang berisi daftar isi mengenai kategori, istilah, komponen, dll yang berisi navigasi link. Fungsi dari menu ini akan memudahkan pengunjung saat membaca sebuah artikel dan ingin mencari sesuatu yang lainnya yang diinformasikan oleh menu bar tersebut.
cara membuat menu
Manfaat penting dari memasang menu horizontall ( berbentuk memanjang ke samping ) adalah akan memberikan kemudahan dalam mengarahkan pembaca menuju halaman-halaman lain di blog yang kita buat mulai dari Halaman Utama ( Homepage ), Contact Us, Sitemap, Tentang Kami, Ketentuan dan lain sebagainya. Membuat menu sangatlah penting karena dijadikan sebagai navigasi penunjuk utama untuk mengarahkan link yang satu dengan link lainnya.

Kesempatan singkat ini Media Blogger akan memberikan pengarahan Cara Memasang Menu yang lebih cantik, keren, dinamis dan menarik. Salah satunya adalah Menu Dropdown mirip fasilitas Bootstrap. Berikut ini adalah contoh hasil dari menu tersebut.
menu dropdown bootstrap
Anda juga dapat mendownload source code dan contoh demonya pada link ini.

Menubar ini juga bisa diisi bagian-bagian submenu lain yang dapat anda optimalkan. Jadi, ketika anda mengarahkan kursor di salah satu daftar menu tersebut, akan muncul submenu lainnya. Kesimpulannya, jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Menubar ini sudah dibuat agar responsive terhadap penampakan di browser lainnya. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan disini. Sudah tau kan bagaimana tampilan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok dan terbilang sederehana. Mau tau cara pembuatannya? Yuk, ikuti tutorial singkat panduan berikut :

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
    color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
    color: #fafafa;
}

#menu li:hover > ul{
    display: block;
}

/* Sub-menu */
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
6. Langkah selanjutnya, carilah kode <div id="content-wrapper">
7. Pasang kode dibawah ini diatas kode yang berwarna merah tersebut :
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Graphic design</a></li>
            <li><a href="#">Development tools</a></li>
            <li><a href="#">Web design</a></li>
        </ul>
    </li>
    <li><a href="#">WorkShop</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://impoint.blogspot.com">Search Engine Optimization</a></li>
</ul>

8. Bagi kamu yang tidak menemukan kode di tahap ke 6, bisa mencari kode <div id='header....>
Anda dapat menaruh kodee no. 7 pada bagian div lainnya contohnya header-wrapper dll itu tergantung dari nama ID yang digunakan pada template kalian. Biasanya sang creator template memberi nama yang sama.
Letakkan kode no. 7 di bawah <div id='header> atau <div id='header-wrapper'> atau diatas kode <div id='main

Simpan template dan lihat hasilnya.
Untuk membuat submenu (menu dropdown) anda peerlu menambahkan kode <ul> sebelum diakhiri penutup </li> dari menu utama. Contohnya pada script nomor 7, saya beri warna biru.

Pada umumnya setiap menu itu dibentuk atas perintah kode <li><a href.......>Nama Menu</a></li>
Jadi, untuk memasukkan submenu dibutuhkan script bagian <ul> dan penutup </ul>

Sedangkan untuk memasukkan link, silahkan ganti tanda pagar diatas dengan url link yang anda tujukan.
Ketelitian dan kecermatan dalam memasang menu bar akan membuat menu anda terpasang rapih dan teratur. Anda dapat mengubah sereta mencocokkan warna, style , text ( bentuk huruf ), ukuran pada template blog dan sebagainya. Semoga panduan dan tutorial singkat mengenai cara membuat menu dropdown bootstrap pada blogspot ini dapat bermanfaat banyak bagi semua orang.

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Sabtu, 01 Juni 2013

Cara Memasang Menu Dropdown Horizontall di Blog

Membuat / Memasang Daftar Isi yaitu dengan membuat menu. Contohnya Menu Dropdown Horizontall di Blog dengan cara mudah. Dropdown Menu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul submenu lainnya yang memanjang kebawah. Untuk contohnya anda bisa lihat menu drop down yang terletak di blog saya ini.
menu dropdown
Sub Menu tersebut merupakan bagian dari super menu diatasnya. Jadi anda harus menyesuaikan serta memadukan kategori apa yang cocok dan sesuai antara super menu dengan sub menu. Disini anda dapat melakukan pengaturan sendiri yaitu dengan memberikan nama, url link, dan title pada daftar isi menu tersebut.

Berbeda pada tahap sebelumnya yaitu Cara Memasang Menu Playlist Musik MP3 di blog, Menu Dropdown harus diletakkan di dalam pengeditan template bukan sebuah widget. Bagaimana, apakah anda sudah mengerti apa yang dimaksud dengan menu drop down? Saya anggap anda sudah mengetahui dan mengerti tentang apa yang saya maksud. Lalu Bagaimana cara memasang menu drop down di blog kita? Untuk memasang menu drop down di blog kita caranya dapat mengikuti langkah-langkah berikut ini :

Tahap-tahap memasang menu drop down di blog :
1. Login ke akun blogger
2. Klik Template
3. Cari kode ]]></b:skin>
4. Jika kode tersebut sudah ditemukan, copy kode CSS berikut ini diatas kode ]]></b:skin> :
#cssmenu ul,#cssmenu li,#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 35px;
  border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  -webkit-border-radius: 0px 0px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #ff4500;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Domine, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 35px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ff4500;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 0px 0 0 0;
  -moz-border-radius: 0px 0 0 0;
  -webkit-border-radius: 0px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 0px 0 0;
  -moz-border-radius: 0 0px 0 0;
  -webkit-border-radius: 0 0px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #ff4500;
  border-bottom: 1px solid #aad06d;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #ff0000;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #ff0000;
  border-bottom: 1px solid #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #345105;
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}
}

5. Jika telah anda temukan, lanjutkan langkah selanjutnya adalah dengan mencari kode </header>
6. Jika kode tersebut sudah ditemukan, kemudian copy kode dibawah ini, lalu letakan tepat dibawah kode </header> :
<div id='cssmenu'>
<ul>
<li class='active '><a href='/'><span>Home</span></a></li>
<li class='has-sub '><a href='http://impoint.blogspot.com/'><span>BLOG</span></a>
<ul>
<li><a href='http://impoint.blogspot.com/2013/05/cara-mengedit-template-blogger-terbaru.html'><span>Tutorial Blog</span></a></li>
<li><a href='http://impoint.blogspot.com/search/label/Tips%20and%20Trick/'><span>Tips Menu Dropdown</span></a></li>
</ul>
</li>
<li class='has-sub '><a href='http://impoint.blogspot.com/'><span>SEO</span></a>
<ul>
<li><a href='http://impoint.blogspot.com/search/label/SEO%20Friendly'><span>SEO Friendly</span></a></li>
<li><a href='http://impoint.blogspot.com/search/label/Download%20Template'><span>Template SEO</span></a></li>
</ul>
</li>
<li><a href='http://impoint.blogspot.com/2013/01/cara-membuat-contact-us-blog-seo-optimization.html'><span>Contact Us</span></a></li>
</ul>
</div>
Ganti Kode HTML tersebut (warna hijau) denegan url blog anda. Ganti kode warna merah dengan Judul Nama Daftar Menu anda.

Demikianlah cara memasang/membuat menu dropdown di blog. Semoga dapat bermanfaat untuk semuanya.

Kamis, 30 Mei 2013

Cara Memasang Musik Playlist Lagu MP3 di Blogger

membuat musik mp3 playlist di blog
Setelah kita mengenal cara memasang lagu di blog, tutorial pembahasan topik kali ini adalah mengenai Playlist MP3 Musik layaknya seperti di Media pemutar musik/video seperti Winamp, GOM Player, KM Player dan lainnya. Pada contoh Media Player tersebut terdapat sebuah Playlist yaitu kumpulan musik yang dapat kita pilih dan anda mainkan.

Hanya saja playlist disini hanya dapat dimainkan auto / otomatis, dan hanya dapat menekan tombol nextplay yaitu untuk mengganti ke lagu berikutnya secara berurutan. Memasang Widget/Gadget Musik Player di Blogger memiliki kelebihan dan kekurangan. Semuanya tergantung pada user / pengguna yang mendengarkan lagu tersebut, apakah cocok atau tidak.

Selain itu faktor lainnya adalah akan sedikit menambah beban berat loading blog. Tetapi apabila pengunjung menggunakan koneksi internet yang stabil maka akan mudah, enak dan cpat untuk mendengarkan musik yang tlah tersedia. Menuju ke cara memasang dan membuat playlist pada topik ini.

1. Silahkan anda pergi ke website scmplayer.net
2. Anda akan melihat tampilan sperti gambar diatas, lalu pilih Choose Skin.
    Kamu dapat memilih tampilan yang sesuai dengan tema blog dan bebas memilih skin playlist / warna yang tersedia.
3. Kemudian klik bagian selanjutnya yaitu Edit Playlist.
4. Di dalam kotak tersebut terdapat 2 pilihan.

  • Manual Playlist = Memasang lagu dengan url manual. Jadi kita perlu melakukan upload terlebih dahulu, atau bisa juga melalui website lain seperti 4hared,beeMP3,MP3Skull, dll.
  • RSS Podcast / SoundCloud Set / Youtube Playlist = Disini terdapat 3 opsi yang dapat dilakukan salah satunya bisa melalui Youtube. Jadi, kita hanya prlu mencari video / lagu yang ingin dicari. Nanti pada saat dimainkan di blog, hanya audio / suara saja yang akan terdengar. Videonya tidak akan ditampilkan. Carilah lagu yang video nya asli biar suara musik tersebut bagus dan belum diedit orang lain.

Perhatikan pada gambar yang saya lingkari merah, disini terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari diyoutube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video). Pastikan anda memasukkan url dengan benar agar mp3 tersebut dapat muncul dan berjalan di blog.
cara memasang musik mp3 di blog

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Jika sudah selesai, klik tombol Done atau Save. Kemudian copy script code mp3 yang diberikan.

Langkah terakhir anda hanya perlu memasukkan kode tersebut ke dalam Widget anda.
Caranya :
1. Masuk ke Blogger.com
2. Pilih Layout / Design / Tata Letak, kemudian pilih letak yang sesuai dan klik Tambah Gadget / Widget.
3. Pilih HTML/Javascript
4. Masukkan kode yang tadi di copy dan letakkan di dalam kotak kedua (yang besar).
5. Save Template.

Semoga Cara Memasang Musik MP3 Playlist di Blogger ini dapat bermanfaat. Untuk memberikan dukungan positif terhadap artikel ini, silahkan klik link berikut.

Selasa, 28 Mei 2013

Cara Membuat Artikel Terkait dengan Gambar

Salah satu cara yang relatif tepat untuk meningkatkan aktivitas dari pengunjung adalah dengan membuat Artikel Terkait / Related Posts. Baik itu dengan Gambar / Thumbnail atau url link biasa yang disertai dengan Judul Artikel. Beberapa saat lalu, Media Blogger juga sudah memberikan cara yang mudah untuk memasang artikel terkait ini hanya saja belum disertai Gambar.
cara membuat artikel terkait dengan gambar

Fungsi dari penggunaan gambar Thumbnail itu sendiri lebih ke arah pmbuatan tampilan yang menarik sehingga meningkatkan minat dan simpati pengunjung untuk membaca artikel / postingan lain yang telah saudara buat. Contoh dari hasil pemasangannya adalah sebagai berikut :
Cara Membuat Artikel Terkait (Related Post) dengan Gambar Tumbnail
Sebenarnya sobat dapat memanfaatkan fasilitas daripada Linkwithin, hanya saja terkadang disaat server sedang down akan membuat loading blog anda menjadi lebih lambat. Untuk mengoptimalkannya terlebih lagi dalam hal Search Engine Optimization (SEO), sahabat semua harus lebih meningkatkan kinerja pada blog anda.
Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan menjadi antusias meneliti lebih lanjut setiap halaman yang berkaitan di dalam posting artikel anda.

Cara Membuat Artikel Terkait (Related Posts) dengan Gambar Thumbnail :
1. Pada dashboard di blogger.com pilih menu Template > Klik Edit Template agar bidang kerja pengeditan sudah aktif.
2. Kemudian tekan CTRL + F, dan cari code ]]></b:skin>
    Setelah ketemu, COPAS kode berikut ini di atas / dibawah kode ]]></b:skin>
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rj9hO2U276zSGk4mfr6dsKM6clnR1db1wjfHo3siBvhIVLiBid5QegX1KWI615kS0NXREItDsUUUvjojejR4sKT7qriCsxaU39lQbBLykpHt4N7cjiD0ex95Y9foNyEyoUMqq27lwZo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

Penerapan Kode HTML Artikel Terkait Bergambar
Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna yang dapat anda EDIT serta disesuaikan sendiri berdasarkan keinginan, caranya

    Silahkan Anda cari kode <data:post.body/>
    Kemudian letakan kode di bawah ini setelah kode <data:post:body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

Simpan Template Anda.

Keterangan Mengenai Kode Artikel Terkait Bergambar
1. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.
2. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.
3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya.
4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.
5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.
Demikian artikel tentang Cara Membuat Artikel Terkait dengan Thumbnail Gambar. Semoga dengan tutorial blogger / blogspot ini dapat bermanfaat dan menambah wawasan anda. Semangat Blogging For Media Blogger.

Minggu, 12 Mei 2013

Cara Mengedit Template Blogger Terbaru

Setelah membahas mengenai Panduan Edit HTML Blog, Tutorial kali ini membahas Cara Mengedit Template Blogger Terbaru untuk membantu proses pencarian kode yang ingin ditemukan, dan bagaimana menemukan kode <data:post.body/> di dalam edit template.

Karena pada pembahasan sebelumnya anda sudah mengetahui fitur-fitur dan fungsi dari menu-menu dan istilah di dalam pengeditan template, topik saat ini mengacu pada proses penemuan sebuah kode-kodee yang ingin dicari.

Langkah dan tahapan untuk menggunakan Kotak Search di dalam Edit HTML :
1. Masuk ke Menu Template di dalam Blogger.
2. Pilih Edit HTML.
edit html

3. Letakkan pointer mouse di dalam kotak Edit HTML tersebut. Klik Edit Template terlebih dahulu.
4. Klik di dekat kode apapun seperti terlihat pada contoh gambar :
mengedit template terbaru
5. Untuk melihat keseluruhan kode, silahkan klik icon logo hitam kecil berbentuk tombol play.
6. Untuk melakukan pencarian kode CSS / HTML, silahkan tekan CTRL + F.
search html code
7. Letakkan kode yang ingin dicari di dalam kotak tersebut.
8. Selesai.

Untuk Menemukan kode <data:post.body/> cara manual :
1. Masuk ke Edit HTML di Template.
2. Cari Kode Blog1 dan klik tanda tombol hitam di sebelah kirinya untuk menemukan semua kode.
mengedit template
3. Kemudian, Klik pada bagian post seperti terlihat di gambar.
    Maka anda akan menemukan kode-kode yang berkaitan dengan tampilan artikel posting.
data post body

Sebenarnya untuk menemukan kodee <data:post.body/> anda bisa menggunakan kotak search seperti pada panduan pertama, tetapi jika ingin menggunakan cara manual maka dilakukan dengan panduan yang kedua.

Semoga dengan artikel ini dapat membantu anda mengedit template, edit html blog,dan cara mengedit template terbaru yang mudah. Cara Mengedit Template Blogger memang terlihat agak sulit namun apabila sudah sering dicoba pasti akan terlihat mudah.

Rabu, 08 Mei 2013

Membuat Social Icon Keren Spesial Gratis

Lama gak sempet buat postingan baru soalnya sibuk banget gan. Nah kebetulan sekarang ada waktu jadi gw pengen share yang keren ni gan, pasti loe demen. Pada kesempatan kali ini gw pengen share bagaimana cara membuat social icon keren hanya dengan CSS gan. Kalo di postingan yang laen gw udah share cara membuat social icon mobil bergerak, yang ini beda lagi gan.


Contoh social iconnya seperti yang ada di blog ini, kalo di sentuh ada efek slidingnya gan. Cuma info aja social icon ini murni CSS gak pake gambar icon beneran gan. Social icon keren ini hasil karya gw sendiri, dan sempat pengen gw pake buat guest post di blog laen tapi gak jadi gan.

Kalo loe tertarik dengan social icon ini silahkan aja disimak langsung cara membuatnya gan. Cara buatnya gampang, tinggal nambahin widget aja di blog gan. Tanpa banyak basa-basi lagi, langsung kita praktekan aja gan.



Membuat Social Icon Keren Hanya Dengan CSS



  • Pertama loe masuk ke Blogger lalu pilih Layout dan klik Add a Gadget terus tambahkan widget HTML/JavaScript gan. Lalu copy dan pastein kode yang gw kasi di bawah ini di widget baru itu gan.
  • Kalo kalian mau pasang di Wordpress langkahnya sama, tinggal nambahin Text Widget ke sidebar blog Wordpressnya, dan copy paste kode dibawah ini gan.


<!-- Social Icon Keren Dengan CSS Efek Sliding by http://www.seociyus.blogspot.com/ -->

<style type="text/css">

/*start Facebook Icon*/
#SC a.sos1{
opacity:0.7;
margin:5px 5px 20px 20px;
padding:7px 5px 5px 5px;
background:#0282c2;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8m1VxNjG4ipRQis__-7T1ZxVuSlLqu3IZlg9aVK_-DyiogE5YOybbZ1Imh2W9TAuJr8lref59hD-S5aUZy0mnyPZzb5aIdsSJoOHOyTHPFu97e9_3_HYuBg1tlLlnhCOSBjQjI0UrY7lo/s1600/Web-Facebook+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos1:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Facebook Icons*/

/*Start Google+ Icons*/
#SC a.sos2{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#d44137;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC7ed65vVtrq6F28Xh-Y0V3Q8Q65H8ba6U_CZxv_7UOKFBisQMxrfSMNdwc8W-rweAfEFVuy0ZPkAtZXPEJNKDF5D7U8jnikUJHDD8I2qW_6c41RO05abv7t9_k1cVvwtpx-18VR1_I_sJ/s1600/Web-Google+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos2:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Google+ Icons*/

/*Start Twitter Icons*/
#SC a.sos3{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#63c8f7;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP77wVQPYvHF9lZzu0NMLMhYoPN3WfSxWmC9q6QEh6j-_pSVokNGLRBD63QRtrhfMgnvYCIhwgKb22YbFKsbdylBQ4m-KfRYLghb-_rW0YkmTG-Tq816UFewptbC5zUm7psFjWGV1J_HJN/s1600/Web-Twitter+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos3:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Twitter Icons*/

/*Start RSS Icons*/
#SC a.sos4{
opacity:0.7;
margin: 5px;
padding:7px 5px 5px 5px;
background:#fc9c14;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfZZiC2S3LmzyKF3T3W2_hcgBOnPNo4nRus-a8pf00Z9HyS3qm4T2IrHCqDE9YExJVWcTZqtrdGzrTzwPtRiyzp_Lp0De4KUcPjA3MRfShM5dn5JIHglpA0yy8YxKF9EsYuu5v2cMlrpz/s1600/Web-RSS+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos4:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End RSS Icons*/
</style>

<center><div id="SC">
<a href="URL-FACEBOOK-PROFILE" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a>
<a href="URL-GOOGLE PLUS-PROFILE" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>
<a href="URL-TWITTER-PROFILE" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>
<a href="URL-RSS-FEED" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>
</div></center><div align='right'><a href='http://seociyus.blogspot.com/2013/05/membuat-social-icon-keren-spesial-gratis.html' target='blank'><small>[Get This Icon]</small></a></div>

<!-- Jangan Dirubah-rubah Kodenya Nanti Tampilannya Gak Karuan Gan -->


  • Sekarang tinggal ganti aja tulisan yang gw highlight dengan alamat akun sosial media dan rss feed blog loe, kalo udah beres tinggal di Save gan. Jangan dirubah-rubah kodenya dan juga ganti tulisan Icon karena bakal bikin tampilan social iconnya jadi berantakan gan.


Sekarang coba di buka blognya buat ngeliat hasil dari social icon kerennya gan.Cuma sekedar info kalo social icon keren ini gak suport di browser IE gan.


Note : Tolong jangan dihapus link ke postingan ini ya, kalo gak suka di isi nofollow aja gan.


Sekian dulu yang bisa gw share kali ini, semoga kalian suka dengan social icon keren CSS ini. Kalo ada masalah dalam membuat atau memasangnnya silahkan ditanyakan dan jangan lupa ninggalin sepatah dua patah kata di kotak komentar di bawah gan.

Selasa, 07 Mei 2013

Cara Membuat Blog

Cara Buat Blog Gratis dengan Mudah dan Cepat - Cara Membuat Blog pada umumnya relatif mudah dilakukan. Hal ini karena kita tidak membutuhkan modal, tidak membutuhkan tempat kerja, dan tidak membutuhkan berbagai macam barang. Karena sifatnya seperti virtual, kita dapat membangun sesuatu yang nanti akan bermanfaat untuk kita. Contohnya membuka toko online, mengikuti program affiliate, belajar di e-learning, membuka pelatihan, dan lainnya. Pada umumnya cara membuat sebuah blog tidak membutuhkan waktu terlalu lama dan dapat dibuat dengan gratis. Beberapa penyedia layanan pembuatan blog yang gratis diantaranya adalah Blogger.com , Wordpress.com , Multiply dan lainnya. Sedangkan untuk yang berbasis framework dan berbayar seperti Wix, Codeignitier, Joomla dan lain sebagainya.
membuat blog gratis

Berbeda dengan membuat website yang membutuhkan beberapa program pendukung, dalam membuat blog tidak membutuhkan apapun karena semua komponen telah tersedia berdasarkan layanan yang digunakan.

Buat Anda yang sudah memahami tentang cara membuat blog, artikel ini boleh dibaca atau juga tidak tetapi untuk yang masih pemula silahkan ikuti panduan dan tutorial lengkap mengenai cara buat blog gratis dengan platform Blogger ini. Mengapa saya merekomendasikan kepada kalian semua harus memilih blogger?

Beberapa alasan mengapa Anda membuat blog gratis dengan Blogger.com adalah :
  • Blogger merupakan Product dari Google.
  • Support ke semua layanan Google, seperti Gmail, Google Plus, Google Analytics dan sebagainya.
  • Mudah untuk melakukan pengeditan ( HTML 5 dan CSS )
  • Tampilan yang simple dan mudah digunakan serta dipahami.
  • Memiliki berbagai macam jenis template gratis yang dapat anda gunakan dimanapun.
  • Plugin dan Gadget telah ada di dalam blogger tersebut hanya tinggal kita tambahkan atau tidak.
Sebenarnya ada banyak sekali layanan blog gratis yang bisa kita pakai, tetapi untuk yang belum bisa membuat blog lebih baik membuat blog di blogger.com saja, karena menurut saya blogger.com sangat cocok sekali untuk yang baru belajar. Untuk cara membuat blog gratis di layanan seperti wordpress dan blogdetik insya Allah akan saya bahas ditulisan yang lainnya.

Cara Membuat Blog Gratis di Blogger.com :
Beberapa hal yang harus diperhatikan dalam membuat blog yaitu :
Judul Blog adalah sebuah judul yang merupakan sebuah kata utama mengenai isi blog Anda. Jadi, apabila anda ingin membuat blog untuk berjualan maka buatlah judul yang berkaitan dengan kata jualan. Hal ini akan sangat berpengaruh bagi kesuksesan blog Anda.
URL adalah alamat blog anda. Alamat ini digunakan untuk melihat blog Anda dan mengarahkan pencarian search engine ke halaman kalian.
Template Blog adalah bagian antarmuka dari tampilan blog Anda yang akan diperlihatkan ke publik atau semua orang.
Tahapan membuat blog di blogger.com:
1. Anda harus sudah memiliki akun Gmail, jika belum silahkan buat email baru gmail, caranya klik pada link tersebut
2. Anda sudah menentukan tema blog yang akan di buat, apakah tentang kesehatan, agama, tips memasak, bisnis online, atau sekedar mengisi artikel yang temanya bebas. (saya harap tidak), dan hendaknya anda memilih tema yang anda kuasai dan anda senangi agar anda bisa dengan mudah merawat dan mempertahankan blog tersebut dengan perasaan hati yang senang.

3. Pilih nama alamat blog (nama domain) yang sesuai dengan tema blog anda, singkat, mudah di eja (diketik), mudah diingat, dan termasuk kata yang sering dicari pada tema tersebut, misal anda membuat bisnis online tentang jasa pelayanan penerbangan, maka anda bisa menggunakan nama domain: terbangmurah.com atau terbangmurah.blogspot.com Tapi jika tidak bisa karena sudah banyak yang menggunakan kata tersebut maka carilah kata yang unik.

Dan usahakan pula tidak menggunakan angka atau tanda penghubung (-) karena ternyata banyak yang mudah melupakan angka tersebut dan juga kata yang terletak setelah tanda penghubung (-). Mungkin ada yang bertanya mengapa harus mengusahakan demikian? jawabannya: ya untuk mempermudah pengunjung anda kembali ke blog anda karena alamat blognya mudah diingat. Selain itu Mesin Penelusuran Google senang dengan bahasa yang baku jadi ini termasuk optimasi SEO karena saudara menggunakan kata kunci tema blog saudara sebagai alamat blog (nama domain). Intinya adalah sebuah harapan agar banyak yang datang ke blog anda melalui jalur Pencarian di Google.

Fungsi dan kegunaan membuat blog dapat anda rasakan. Mulai dari berbagi pengalaman, berbagi ilmu, motivasi hidup, mencari keuntungan, dan mencari hiburan.
Untuk melihat tutorial cara membuat blog terlengkap silahkan baca artikel Cara Buat Blog Pribadi Gratis Lengkap dengan Gambar.

Jumat, 26 April 2013

Cara Membuat Kotak Komentar Google Plus

Beberapa saat lalu, blogger telah memperbaharui editor html pada template blog. Sekarang, Kotak Komentar Google+ juga merupakan perangkat tambahan terbaru. Bagaimana cara membuatnya ? Sebelum mengikuti setiap langkah, kita harus mengetahui terlebih dahulu fungsi dari komentar dengan memanfaatkan jejaring sosial google plus.
google+ comments

Fitur Komentar System di Google+ :
1. Semua Aktifitas dalam satu Media.
Setiap kali kita melakukan share yaitu pada saat mempublikasikan artikel posting terbaru anda maka secara otomatis anda akan berbagi ke semua orang. Setiap jejak komentar atau juga menambah plus button akan menghasilkan komentar mereka masuk ke dalam feed anda. Dengan ini, situs anda akan menjadi praktis dan muncul juga di komentar blog anda.

2. Menambah jumlah traffik dan lalu lintas
Seperti yang kita ketahui, hampir semua produk dari Google diberikan keistimewaan swasta tersendiri. Dengan memanfaatkan setiap produk yang dimilikinya maka secara otomatis situs yang kita buat menjadi lebih maksimal dan semakin meningkatkan pengunjung.

3. Interface yang Interaktif

 Komentar yang muncul dalam urutan yang sistematis berdasarkan tanggal diterbitkan sehingga pengguna dapat menjawab atau menambahkan satu komentar. Anda dapat dengan mudah chat / balas komentar seperti merasa seolah-olah Anda sedang mengobrol dengan teman-teman dekat atau sahabat sekolah.

4. Bersifat Publik

Sekarang pembaca Anda akan dapat memposting komentar umum atau pribadi kepada orang-orang dalam lingkaran Google mereka. Selain itu, ketika orang browsing komentar mereka dapat melihat semuanya, sebagian sebagai orang, atau hanya dari orang-orang di lingkaran mereka.

5. Admin Comment System
Anda sebagai pemilik blog akan memiliki hak penuh terhadap setiap komentar yang masuk karena anda adalah seorang author. Anda dapat dengan menghapus, mengedit dan menambah komentar sesuai dengan keinginan.

Cara Membuat Kotak Komentar Google Plus Berdampingan dengan Blogger :
1. Silahkan anda masuk ke Google+. Klik More. Yaitu kita akan membuat halaman yang nantinya sebagai tempat untuk mengarahkan kepada situs anda.
more pages blog

Silahkan anda klik More dan pilih Pages.
Kemudian buatlah halaman baru dan isi sesuai dengan data blog anda seperti terlihat pada gambar di bawah ini.
create page
2. Kemudian jika sudah selesai, silahkan Simpan.

3. Masih di Google+, klik Profile lalu pilih About dan cari di bagian kanan seperti gambar berikut.
edit profile
4. Pada bagian Link, Isi Other Profiles, Contributor To, dan Links dengan memasukkan url blog anda.
5. Simpan Profile apabila telah selesai edit.

6. Login ke Blogger.com
7. Klik Google+ pada daftar menu elemen blogger.
blogger google+

8. Setelah anda masuk, lalu akan muncul sebuah tampilan. Disana terdapat identitas profile Google+ Anda dengan Blogger.

Klik Use Google+ Comments in Your Blog
Jika anda telah melakukan langkah 1 dan 5 dengan benar, maka dibagian bawah foto profile akan terdapat page blog anda.

Seperti terlihat pada gambar terdapat Media Blogger page milik saya.

Setelah diklik makan akan tersimpan secara otomatis oleh sistem.

9. Barulah kita akan masuk ke bagian pengeditan HTML.
10. Masuk ke Template, Pilih Edit HTML, Klik Edit Templates untuk melakukan pengeditan.
      Untuk berjaga-jaga silahkan backup (download terlebih dahulu) template anda.
11. Anda dapat melakukan pencarian kode dengan mengklik dimana saja pada bagian dalam lembar kerja berbentuk kotak di edit html tersebut kemudian tekan CTRL + F.
12. Cari kode <div class='post-footer'>
13. Copy script kode berikut di bawahnya.
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>
14. Kemudian cari lagi kode <b:includable id='threaded_comments' var='post'>
Silahkan anda lihat atau download terlebih dahulu scriptnya di Comments Hack Tutorial V2
[ untuk mendownload, kik link diatas dan tunggu 5 detik lalu klik skip ad ] Comments Script Bot Cbox Link2

15. Hapus kode yang berada di bawah kode <b:includable id='threaded_comments' var='post'> sampai kode </b:includable>
edit script html

16. Letakkan script yang didownload tadi dibawah <b:includable id='threaded_comments' var='post'>
delete script
17. Selanjutnya cari kode <b:includable id='comment_picker' var='post'> dan hapus sampai kode </b:includable> seperti pada gambar.
comment picker
18. Ganti dengan kode berikut ini :
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

19. Selesai dan Simpan Template Anda.

Cukup panjang pada tutorial kali ini, semoga dapat dilakukan dengan mudah dan benar. Source by mbloggerlab. Baca juga artikel Cara Merubah Kotak Komentar Blogger Keren. Tolong kepada para pengunjung hargailah usaha saya untuk memposting dengan tutorial yang lengkap ini. Jangan copy paste terus, karena setelah saya tinjau banyak sekali artikel saya yang dicopy paste hingga 16ribu posting artikel yang sama. Kalau bisa seharusnya kamu mengklik iklan google adsense saya agar lebih semangat lagi posting ^^ Just Kidd .