Tips Blog: Cara membuat lagu di Blog.(Auto Play)

Blog kalian mau di tambahin lagu yang nyala sendiri? Biar pengunjung lebih nyaman berdiam di blog kalian.
Berikut adalah langkah-langkahnya:

1.Login ke blogger kalian.
2.Pergi ke Tata Letak.
3.Klik "Tambahkan Gadget"
4.Pilih "HTML/JavaScript"
5.Masukan Script dibawah ini kesana.
Click here to view Script
Penjelasan:
Code: "http://greencall.co.kr/.p/we_will_not_go_down.swf" itu adalah link lagunya, dan formatnya harus .swf agar busa auto play alias nyala sendiri saat blog dibuka. Kalau ingin dengar lagunya bisa buka new tab dan taruh link di atas untuk mendengar lagunya.
6.Simpan dan lihat hasilnya.
 

Read More

Tips Blog: Cara membuat Spoiler di Artikel Blog.

Cara membuat Spoiler di Artikel Blog seperti gambar diatas, berikut adalah cara-caranya..

1.Copy Script dibawah ini:

Click to Copy Script

2.Masukan Script tersebut kedalam artikel blog bagian HTML.
3.Edit tulisan "Masukkan tulisanmu di sini" Sesuai yang kalian inginkan.
4.Lihat hasilnya.

Read More

Tips Blog: Cara membuat Social Profile Widget.

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger

1.Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
2.Copy dan paste kode berikut pada kolom konten:

Script

3.Ganti tulisan "EDIT DISINI" dengan url profile sosial media kalian.
4.Simpan dan lihat hasilnya.

Read More

Tips Blog: Cara membuat Spoiler pada Artikel Blog

Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler:

Script

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoilernya</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Taruh isinya disini!! www.djogyz.blogspot.com

 <br>
</div>
</div>
</div>

5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Contoh:

Klik:

Read More

Tips Blog: Cara merubah tulisan Older Posts/Posting Lama menjadi angka.

Biar tampilan blog menjadi lebih menarik, salah satunya yaitu dengan merubah tulisan Older Posts atau Posting Lama menjadi urutan Angka seperti gambar dibawah ini.


Berikut adalah langkah-langkah memasang ke blog kalian:
1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

Script

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

Script

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->

Kalau sudah silahkan, Silahkan liat hasilnya :)

Read More

Tips Blog: Membuat Artikel Terkait dengan Gambar (related post thumbnail)

Cara membuat artikel terkait dengan gambar atau related post thumbnail - Artikel terkait pastinya kamu sudah tau dong, artikel terkait atau related post adalah artikel yang saling berhubungan atau yang di kelompokan di dalam label blog kamu, Dengan memasang artikel terkait ini juga kita dapat menambah jumlah pageview blog karna bukan tidak mungkin pengunjung akan melihat juga artikel terkait tersebut yang mungkin berhubungan dengan artikel kamu.

Ok kita mulai saja.
1. Login ke blog kamu
2. Klik Template > Edit HTML centang Expand Template Widget
3. Cari </head> Copy code di bawah ini lalu paste kan tepat di atas </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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.3em;
font-weight: bold;
color: #000000;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000000;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://eflianda-blogzzz.googlecode.com/files/relatedthumbs.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Selanjutnya Cari <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/> Biasa nya terdapat masing-masih 2 buah code di atas tersebut di dalam template, kamu letakan saja di bagian yang pertama. Lalu kamu copy code di bawah ini dan paste kan diatas code <div class='post-footer'> atau <div class='post-footer-line post-footer-line-1'/>

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Baca juga Artikel Terkait yang mungkin kamu cari&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

5. kalau sudah jangan buru-buru di simpan, klik Pratinjau dulu untuk mengurangi kesalahan bila saja terjadi kesalahan dalam penempatan. kalau tidak ada pesan error baru kamu Simpan atau Ok.
6. Selesai,
sekarang coba kamu buka salah satu artikel untuk melihat apakah pekerjaan kamu berhasil atau tidak.

Silahkan ganti var maxresults=5; untuk jumlah artikel yang ingin di tampilkan.

Ok mungkin segitu aja dulu cara membuat artikel terkait dengan gambar (related post thumbnail) semoga berhasil dan bermanfaat. kalau ada pertanyaan silahkan tinggalkan komentar dibawah.

Sumber

Read More

Tips Blog: Mengatasi duplicate meta descripstion dan title tags (100% WORK)

Cara Mengatasi Duplicate Meta Description dan title tags - Dalam dunia ilmu seo sering saya membaca orang telah banyak membahas efek buruk dari duplicate meta deskripsi maupun meta title tags, ya walau pun saya sendiri kurang begitu paham dalam dunia seo namun dampak dari duplicate meta deskripsi maupun meta title tags ini akan terlihat dari posisi postingan di serp yang melemah, karena search engine seperti google akan menganggap postingan kita sebagai duplicate konten. Sama seperti hal nya duplicate meta tags google juga sangat tidak menyukai blog yang terdapat banyak broken link atau link rusak, baca Cara menghapus broken link di blog.

Umumnya yang sering terjadi di blog yang memakai blogspot duplicated deskripsi maupun title tags di akibatkan oleh googlebot yang mengindeks ?m=0 dan archive, untuk archive sendiri sebenarnya blogger sudah menyiapkan cara yang dapat kita gunakan untuk tidak mengindeks nya dengan cara pergi ke dasbor blog > Preferensi Penelusuran > Tag Header robot khusus, disitu kamu bisa mensetting nya untuk menyuruh atau perintahkan robot search engine untuk tidak mengindeks atau mengcrawl archive.
atau dengan cara memasang
Disallow: /*archive.html di Robot.txt Khusus,
Atau bisa juga memasang
<meta content='NOARCHIVE' name='robots'/> di HTML blog.

sedang kan untuk ?m=1 atau ?m=0 versi mobile nya ini lah yang paling banyak menyebabkan duplicate deskripsi dan title tags diblog setelah archive "ini menurut saya". Untuk mengatasi nya mungkin kamu bisa memasukan
Disallow: /?m=1
Disallow: /?m=0
Di dalam Robot.txt khusus.

atau kamu bisa mengikuti robot,txt saya untuk mengatasi duplicate yang di akibatkan oleh ?m=0 dan archive, yang sudah saya buktikan bagaimana efeknya setelah menggunakan beberapa syntax di bawah ini.

User-agent: Googlebot
Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0
Disallow: /*?
Disallow: /search
Disallow: /*archive.html
Allow: /atom.xml?*
Allow: /

User-agent: *
Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0
Disallow: /*?
Disallow: /search
Disallow: /*archive.html
Allow: /atom.xml?*
Allow: /

Sitemap: http://eflianda.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

Ganti yang berwarna merah dengan URL blog kamu atau ganti dengan sitemap kamu.
Kenapa ada 2.?
yang pertama di khususkan untuk bot google User-agent: Googlebot
dan yang kedua untuk Semua/Seluruh bot search engine User-agent: *
Disallow: /?m=0 untuk menyuruh bot memblokir /melarang URL yang memiliki akhiran ?m=0
Disallow: /*?m=0 untuk memblokir atau melarang seluruh URL yang mengandung ?m=0
Disallow: /*archive.html untuk melarang bot mengindeks archive
Disallow: /search ini boleh digunakan juga boleh tidak ini untuk melarang/memblokir mesin pencari yang ada di dalam blog untuk di indeks
Allow: /atom.xml?* untuk mengurangi terjadi nya masalah saat mengirim sitemap di webmaster search engine dan di izinkan untuk di indeks.
dan terakhir Allow: / untuk mengizinkan bot search engine mengindeks homepage atau halaman depan,

Sebenarnya banyak yang bisa ditambahkan di robot.txt ini mana yang boleh untuk di indeks dan mana yang tidak boleh, sebagai contoh google.com/robot.txt kamu akan melihat berapa banyak yang di gunakan google untuk memblokir dan mengiznkan apa yang boleh di indeks dan mana yang tidak.
itu lah yang dulu sering saya lakukan ketika ingin menguji robot.txt saya dengan cara mengintip/survei robot.txt web atau blog orang lain dan akhirnya mendapatkan hasil seperti syntax di atas.

Ok lah mungkin segitu aja dulu yang dapat saya sampaikan dalam Cara Mengatasi Duplicate Meta Description dan title tags ini, Semoga dapat bermanfaat.
Dan kalau ada yang tidak setuju dangan cara penulisan syntax robot.txt saya silahkan ngomel-ngomel di bawah..

Sumber

Read More

Tips Blog: Cara Memasang iklan Di dalam postingan blog

Cara Memasang iklan Di dalam postingan blog - Selamat sore sobat..

Ok lah kita langsung kepembahasan tentang cara memasang iklan di postingan blog, soalnya sudah jauh dari judul postingannya. Sebenarnya postingan ini sudah saya tulis di blog saya satu lagi, tapi gak apa la ya say postng ulang disini.
mungkin diantara sobat sudah pada ada yang tau cara memasang kode iklan di dalam blog, jadi kalau sobat sudah tau bagus dilewati saja dan baca postingan saya yang lainnya, Pasang iklan di dalam postingan cara ini saya rasa cukup ampuh apa lagi untuk sobat yang bermain dengan iklan PPC terutama google adsense, dengan cara ini jadi akan lebih memaksimalkan jumlah klik yang didapat, karena pengunjung akan langsung melihat iklan tersebut.

Nah untuk memasang iklan didalam blog
1. Login ke blog kamu.
2. Klik Template > Edit HTML jangan lupa centang  Expand Template Widget.
3. cari <data:post.body/> agar lebih cepat dalam mencari kode tersebut gunakan Ctrl+F
4. Setelah ketemu copy kode di bawah ini dan paste kan di atas <data:post.body/>

      <div style='float: left;'>Letak Kode Iklan Disini</div>

biasa nya terdapat lebih dari satu  <data:post.body/> di dalam template apa lagi untuk kamu yang memakai readmore otomatis, jadi kamu letakkan saja kode di atas itu di bagian 2 atau 3 nya <data:post.body/>
Left bisa kamu ganti denga right
5. Namun sebelum kamu memasukkan kode iklan di tempat yang berwarna merah sebaiknya kode tersebut di parse terlebih dahulu di www.blogcrowds.com/resources/parse_html.php agar tidak terjadi kesalahan dan error.

Ok lah mungkin segitu aja dulu cara memasang iklan di dalam postingan blog
semoga dapat bermanfaat.


Sumber

Read More

Tips Blog: Cara Pasang Iklan Melayang Kanan dan Kiri Blog

Cara pasang iklan melayang kanan dan kiri blog - Hallo sob, Setelah beberapa hari tidak posting disini kali ini saya akan share salah satu Bagaimana Cara pasang iklan melayang kanan dan kiri blog. Sebelum nya saya juga sudah pernah membuat postingan mengenai Cara memasang iklan di dalam postingan blog beberapa waktu lalu.

Nah untuk memasang iklan di kanan kiri blog ini cara nya sangat lah simple, dan cara membuat nya pun hampir sama seperti tutorial lainnya yang banyak di pencarian google cuma yang membedakannya adalah saya tidak memakai java script, karna saya sudah membuang atau menghapus kode java script yang dapat memberatkan blog.


Untuk kamu yang ingin membuat atau menyediakn space iklan di dalam blog saya rasa cocok menggunakan cara ini untuk menarik pelanggan agar mau memasang iklan di blog kamu. atau baca postingan saya yang sebelum nya Cara membuat kotak space iklan di dalam blog seperti yang ada disidebar blog ini.

Ok lah kita langsung saja ke cara pembuatan nya.
1. Langkah pertama silahkan Login ke blog kamu.
2. Masuk ke Tata Letak > Tambahkan Gadget.
3. Cari HTML/Java Script lalu copy paste kan kode di bawah ini dan klik Simpan.

<!--start: floating ads-->
    <div id="teaser2" style="width:auto; height:auto; text-align:left; display:scroll;position:fixed; top:0px;left:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser2').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiez2UkmvdozIAVCLvFk3k77l75QuMk9BXXC2EIvNBIC6t3TE3KGkcn1eJ2owhRfqAwU07AgmjnK3Ty4teYzs7yLI8VfVC17ur4UmF1fiXY6kAMxDuS6pvrKGHdfnLBaUe7J8CWOP-qF58b/s1600/PhoXo2.png'/></center></a></div>
    <!--Mulai-->
    <a target="_blank" href="http://djogyz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EIrqYClspAjYdET20ij6F6DNw0OXJA2xbNj2tINJ_IH91xLBir2lng_4r_BXS6JIcmVHtmdkspT8iYRBvnj-a2ELDvI8CQbUr0zakP8-CiupBZhngsYtS8SPmMMzQdnCPxIGFZsT4Fg/s1600/Eflianda_BlogZz.gif" border="0" alt="Iklan Kiri" /></a>
    <!--Akhir-->
    </div>
    <!--end: floating ads-->

   <!--start: floating ads-->
    <div id="teaser3" style="width:auto; height:auto; text-align:right; display:scroll;position:fixed; top:0px;right:0px;">

    <div><a href="#" id="close-teaser" onclick="document.getElementById('teaser3').style.display = 'none';" style="cursor:pointer;"><center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiez2UkmvdozIAVCLvFk3k77l75QuMk9BXXC2EIvNBIC6t3TE3KGkcn1eJ2owhRfqAwU07AgmjnK3Ty4teYzs7yLI8VfVC17ur4UmF1fiXY6kAMxDuS6pvrKGHdfnLBaUe7J8CWOP-qF58b/s1600/PhoXo2.png'/></center></a></div>

    <!--Mulai-->
    <a target="_blank" href="http://djogyz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4EIrqYClspAjYdET20ij6F6DNw0OXJA2xbNj2tINJ_IH91xLBir2lng_4r_BXS6JIcmVHtmdkspT8iYRBvnj-a2ELDvI8CQbUr0zakP8-CiupBZhngsYtS8SPmMMzQdnCPxIGFZsT4Fg/s1600/Eflianda_BlogZz.gif" border="0" alt="Iklan Kanan" /></a>
    <!--Akhir-->

    </div>
    <!--end: floating ads-->

Silahkan kamu ganti yang berwarna Merah dengan URL blog kamu dan ganti yang berwarna Biru dengan UL gambar kamu.

Sekarang coba kamu buka blog kamu apakah sudah jadi.? dan coba kamu beda mana yang lebih cepat menggunakan java script atau yang tidak menggunakan javascript seperti cara di atas ini.
Ok lah mungkin segitu aja dulu untuk postingan singkat kali ini tentang Cara pasang iklan melayang kanan dan kiri blog  semoga dapat bermanfaat.
Terima Kasih.

Sumber

Read More

Tips Blog: Cara Merubah Domain Blogspot dengan Domain TLD Sendiri (Custom Domain)

Cara merubah domain blogspot dengan domain TLD sendiri (Custom Domain) - Selamat Siang sob, kali ini saya ingin membagikan sedikit cara untuk mengganti domain blogger dengan dengan domain sendiri yang biasanya di sebut custom domain, Sebenarnya postingan kali ini untuk melanjutkan postingan saya sebelum nya mengenai Cara Mendapatkan Domain .com .org .net .info .biz (TLD) secara Gratis yang dulu pernah saya tulis di blog ini yang mengguakan cara dari http://www.putra.la. Silahkan baca mumpung cara tersebut masih bisa berjalan/work dan cara yang akan saya bagikan kali ini masih menggunakan cara dia juga

Keuntungan custom domain ke blogger adalah kita tidak perlu lagi memikirkan biaya bulanan untuk menyewa hosting alias gratis, ya walau pun sekarang sudah terdapat banyak penyedia jasa hosting gratis tentu nya pasti kita akan di beri batasan dalam penggunaan nya. Nah sekarang tinggal kalian saja yang bisa menentukan pilihan yang terbaiknya. apakah ingin Custom domain ke blogger, menggunakan hosting gratisan, atau menyewa web hosting sendiri.

Ok lah Sekarang kita mulai saja Cara custom domain ke blogspot.
Disini saya menggunakan penyedia jasa DNS gratis dari http://freedns.afraid.org karna saya juga mengunakan jasa tersebut untuk domain blog saya yang didapat dari intuit. Sebenarnya cara nya hampir sama saja seperti menggunakan web hosting yaitu mengganti Name Server agar terhubung dan dapat dijalankan domainnya cuma bedanya disini kita menggunakan Name Server dan IP dari blogger.

Ok langkah pertama
1. Silahkan kamu daftar terlebih dahulu Klik Disini
2. Setelah selesai Selanjutnya klik Domain > Add A Domain into FreeDNS

Lalu masukan domain kamu seperti gambar di bawah dan klik Submit

Sebelumnya simpan atau catat terlebih dahulu NameServer nya yang akan kita gunakan untuk di intuit nantinya.
ns1.afraid.org
ns2.afraid.org
ns3.afraid.org
ns4.afraid.org

3. Login ke intuit atau ke akun tempat kamu membeli domain tersebut. Klik Edit Your NameServers
Lalu masukan Nameserver dari afraid.org yang telah kamu catat tadi seperti gambar di bawah ini.

4. Login ke blog kamu klik Setelan > Dasar > kemudian klik Tambahkan Domain Khusus > Alihkan Ke Setelan Lanjutan.
Lalu masukan domain kamu menggunakan awalan "WWW", Nanti akan ada pesan kesalahan seperti gambar dibawah ini yang menunjukkan CNAME domain kamu yang akan kita gunakan di afraid.org.
Silahkan catat dan simpan yang saya beri tanda kotak.

5. Sekarang masuk lagi di afraid.org > Domain > Manage

6. Sekarang klik ADD lalu masukan kan IP blogger di bawah ini satu persatu seperti gambar di bawah ini.
216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

Type : A
Subdomain Biarkan saja kosong
Domain masukan domain kamu tanpa "WWW"
Destination masukan IP blogger tadi
ulangi cara tersebut sampai 4x sesuai jumlah IP blogger tadi

7. Lalu untuk setting CNAME nya perhatikan gambar di bawah ini.
Type ganti "A" dengan "CNAME"
Subdomain masukan "WWW"
Destination masukan "ghs.google.com" yang kamu dapat dari blogger tadi lalau klik save.

Sama seperti di atas klik lagi ADD
Ganti Tipe menjadi "CNAME"
Subdomain masukan yang kam dapat dari blogger tadi 2zt7t3ae437h "Liat gambar"
Destination juga masukan kode yang kamu dapatkan dari blogger tadi, biasa nya akan terdapat Titik ( . ) di akhirannya. perhatikan jangan sampe terikut juga Titik. lalu klik Save

Kalau sudah sesuai semuanya masuk ke blogspot kamu lagi. masukan domain kamu seperti cara di Poin ke 4 tadi lalu klik Simpan

Kalau tidak ada pesan kesalahan lagi berarti kamu sudah berhasil melakukan Custom Domain ke blogspot. sekarang tinggal menunggu beberapa jam sampai doman kamu aktif.
ini domain saya yang sudah di custom ke blogger www.eflianda.com

Ok lah mungkin segitu aja dulu cara merubah domain blogspot dengan domain TLD sendiri (Custom Domain) semogga dapat bermanfaat.

Sumber 

Read More

Tips Blog: Mengatasi Error Pada Tombol Reply Komentar yang Tidak Bisa di Klik

 Hal ini disebabkan ada perubahan pada JavaScript threaded comment.

Untuk mengatasi hal ini, ikuti langkah-langkah di bawah ini :

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
2. Menjaga kegagalan, backup dulu template anda ---> Download Template Lengkap
3. Centang Expand Template Widget

4. Cari kode dibawah ini :

<b:includable id='threaded_comment_js' var='post'>
  <script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = &#39;<data:post.id/>&#39;;
      var feed = &#39;<data:post.commentFeed/>&#39;;
      var authorName = &#39;<data:post.author/>&#39;;
      var authorUrl = &#39;<data:post.authorUrl/>&#39;;
      var blogId = &#39;<data:top.id/>&#39;;
      var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

      // Configure commenting API:
      var configJso = {
        'maxDepth': 2
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

5. Ganti semuanya dengan kode dibawah ini :

<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

6. Save Template

Kalau masih ada masalah, silahkan share di kolom komentar

 Sumber

Read More

Tips Blog: Membuat Kotak Komentar Facebook untuk Blogger / Blogspot

Facebook kini menjembatani para blogger dan web develover dengan membuat berbagai social plugins. Diantaranya adalah Kotak komentar facebook.

Akhir-akhir ini sering kita temui web yang menggunaka aplikasi ini, diantara keuntungannya adalah memberikan komentar yang lebih banyak, karena pengguna facebook lebih banyak tentunya dari blogger.
Diantara kemudahan yang diberikan, pengunjung tidak usah menulis web, email, dll. Mereka cukup login ke facebook dan memberikan komentar.

Dibawah ini adalah tutorial yang sangat mudah tentang cara membuat kolom/kotak komentar facebook untuk pengguna blogspot/blogger.
Namun harap di ingat, menggunakan komentar facebook akan menyembunyikan komentar yang telah ada di blog.

Langkah ke-1: Login ke dasbor anda, kemudian klik Pengaturan>Komentar, pilih sembunyikan.

Langkah ke-2: Kunjungi Halaman Facebook Develover, tulis Nama Situs, URL situs, dan Lokasi kemudian klik Buat Aplikasi

Copy ID Aplikasi ke notepad

Langkah ke-3: Kembali ke Blogger, klik Rancangan>Edit HTML, centang Expand Template Widget. Cari kode <data:post.body/> atau <div class=’post-header-line-1′/> dan paste kode dibawah ini, tepat setelah <data:post.body/> atau <div class=’post-header-line-1′/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p align='left'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8NG57GjyOjj5_sphRdzZ06TI2YTjiPm1u-EgFqjK4V4A-0zua5O4qWIkIPzD-F1uoiWnv4oKT8kukzAVKbWCR0oI1tmS457KCYqItXD0khfhgEVpcwGTg-RS_5cXSYWS1iJpakLw9XXk5/s1600/comment.png'/></p>
  <div id='fb-root'/>
  <script>
  window.fbAsyncInit = function() {
  FB.init({appId: &#39;164624843561195&#39;, status: true, cookie: true,
  xfbml: true});
  };
  (function() {
  var e = document.createElement(&#39;script&#39;); e.async = true;
  e.src = document.location.protocol  +
  &#39;//connect.facebook.net/id_ID/all.js&#39;;
  e.async = true;
  document.getElementById(&#39;fb-root&#39;).appendChild(e);
  }());
  </script>
  <fb:comments/>
  </b:if>

ganti ID Aplikasi (yang berwarna merah), dengan ID Aplikasi anda .

Simpan dan lihat hasilnya. masih ada masalah?

Sumber 

Read More

Tips Blog: Kaskus Emoticon untuk Blogger Threaded Comment

kali ini saya akan menjelaskan cara menambahkan Kaskus emoticon pada komentar baru Blogger atau threaded comments.

Sebetulnya konsepnya JavaScriptnya sama saja dengan Yahoo smiley, namun untuk JavaScript Kaskus emoticon ini bukan buatan saya, tapi buatan Joe. Script ini telah diuji coba di blognya sendiri, dan berhasil. Namun tidak semua emoticon Kaskus ini semua masuk, hanya sebagian saja.

Tampilan emoticonnya kurang lebih seperti screen shoot di bawah ini :

Cara Pasang Emoticon pada Komentar

1. Masuk ke Dasbor
2. Edit HTML
3. Cari kode </body> (biasanya paling bawah)
4. Simpan kode dibawah ini sebelum </body>

<script src="http://4blogspottutorial.googlecode.com/files/kaskus_emoticon.js" type="text/javascript"></script>

5. Simpan / Save

Dengan 5 langkah diatas, emoticon Kaskus sudah bisa berfungsi di Blog anda. Namun kita perlu menambahkan gambar dan kode, supaya pengunjung mengetahui 'Kode Emoticon Kaskus' ini.

Cara Menambahkan Kode di atas Kolom Komentar

1. Kembali ke Edit HTML
2. Cari kode

<div class='post-footer-line post-footer-line-3'/>
    </div>
  </div>

3. Simpan kode ini dibawah </div> yang ke-dua

<!-- Kaskus Emoticon by JOE http://4blogspottutorial.blogspot.com/ Star-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:center;font-weight:bold;font-size:16px;color:#FF3000;margin-top:15px; margin-bottom:10px;'>
Kalau mau komentar pake emote KASKUS... Silahkan pilih gan..
</div>
<div style='background-color:#F5F8FA; border:2px solid #D7E8F0; width:550px; padding:10px; height:100px; overflow:auto;'>
<div class='kaskusemoticon'>
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sumbangan/15.gif'/> :)
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sumbangan/14.gif'/> :D
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/jempol1.gif'/> :thumbup
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/jempol2.gif'/> :2thumbup
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/I-Luv-Indonesia.gif'/> :iloveindonesia
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_sm_ilovekaskus.gif'/> :ilovekaskus
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/cewek.gif'/> :kiss
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_sm_maho.gif'/> :genit
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/marah.gif'/> :marah
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/berduka.gif'/> :berduka
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/najis.gif'/> :najis
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/malu.gif'/> :malu
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/ngakak.gif'/> :ngakak
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_sm_repost1.gif'/> :repost
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sundul.gif'/> :sup2:
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/s_big_batamerah.gif'/> :batabig
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/takut.gif'/> :takut
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/ngacir2.gif'/>  :ngacir
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/shakehand2.gif'/>  :shakehand
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/bingung.gif'/> :bingung
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/cekpm.gif'/> :cekpm
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/capede.gif'/> :capedeh
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/hammer.gif'/> :hammer
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/peluk.gif'/> :peluk
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/toastcendol.gif'/> :cendol
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/hoax.gif'/> :hoax
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/selamat.gif'/>  :selamat
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/matabelo1.gif'/> :matabelo
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/mewek.gif'/> :mewek
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/request.gif'/> :request
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/sorry.gif'/> :sorry
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/salah_kamar.gif'/> :salahkamar
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/rate5.gif'/> :rate5
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/cool2.gif'/> :cool
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/fd_5.gif'/> :sup:
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/fd_4.gif'/> :kbgt
<img alt='' class='kaskus' src='http://static.kaskus.us/images/smilies/nohope.gif'/> :nohope
</div></div>
</b:if>
<!-- Kaskus Emoticon End-->

4. Simpan dan Selesai.

Untuk melihat demo cara memasang / menambahkan emoticon Kaskus pada blogger threaded comment ini, silahkan kunjungi pemilik tutorial.


Sumber

Read More

Tips Blog: Custom Domain Blogger Error

Custom Domain Blogger/Blogspot Error. Beberapa minggu ini banyak blogger yang mengalami kegagalan untuk custom domain. Hal ini dikarenakan Blogger menambahkan verifikasi domain untuk domain yang di redirect ke Blogger.

Bagi anda yang melakukan domain dengan sistem lama, akan mendapatkan pesan seperti ini :
We have not been able to verify your authority to this domain. Error 12. Please follow the settings instructions, atau We have not been able to verify your authority to this domain. Error 32. Please follow the settings instructions,  atau pesan lainnya.

Solusinya, Anda harus menambahkan CNAME untuk verifikasi domain Anda. Setiap blog mempunyai kode verifikasi yang berbeda. Lakukan hal ini pada DNS Management kontrol panel domain Anda. Untuk lebih jelasnya, silahkan ikuti tutorial cara custom domain blogger terbaru.

Custom Domain Blogger Terbaru

1. Login ke Blogger, klik Setelan pada blog yang akan di custom domain.
2. Isi nama domain, kemudian klik petunjuk setelan

3. Tandai on a top-level domain, copy kode yang digaris bawahi ke notepad

4. Masuk ke DNS Management pada Control Panel domain.
5. Tambahkan CNAME

• Host Name : www
• Value          : ghs.google.com

dan yang tadi di copy ke notepad, contoh:

• Host Name : 3YTK3KE713LM
• Value          : gv-BLDJKADADKHI7824JKJ2JJJJDSDSD04JJKHSD6KHA7.domainverify.googlehosted.com.

contoh :

6. Tambahkan A RECORD, buat 4 A record dan diarahkan ke IP:

• 216.239.32.21
• 216.239.34.21
• 216.239.36.21
• 216.239.38.21

contoh :

7. Tunggu beberapa jam, kemudian masuk kembali ke blog.
8. Masuk kembali ke Setelan
9. Isikan domain dengan WWW, Tandai pengalihan dan Simpan.

Semoga Custom Domainnya sukses... !

Sumber 

Read More

Trik Blog: Recent Comments Widget dengan Avatar untuk Blogger / Blogspot

Recent Comments widget dengan Avatar untuk Blogger / Blogspot. Dengan hadirnya fitur baru yaitu Threaded Comments, Blogger pun mengubah Comments API yang memungkinkan menampilkan avatar pada widget Recent Comments / Komentar Terakhir.

Script untuk menampilkan avatar pada komentar terakhir atau recent comment, dibuat oleh Harish. Saya share disini buat-rekan rekan blogger. Contohya pada gambar dibawah ini, atau lihat Komentar Sahabat di blog ini.

Cara menampilkan Avatar pada Reccent Comments Blogger

1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget, berikan judul terserah anda.

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

3. Perhatikan kode diatas, kode yang berwarna merah bisa disesuaikan dengan selera Anda :

numComments  = 5, (jumlah komentar yang ditampilkan)
showAvatar  = true,
avatarSize  = 30, (ukuran avatar dalam pixel)
roundAvatar = true,
characters  = 30, (jumlah karakter yang ditampilkan)
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true;

4. Ganti djogyz.blogspot.com dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang 
    ditampilkan.
5. Simpan.

Semoga tutorial cara menampilkan avatar pada recent comments blogger ini bisa membantu mempercantik blog anda.

Sumber 

Read More

Tips Blog: Membuat Sticky Widget Sidebar di Blogspot/Blogger

Sticky dalam Bahasa Indonesia artinya menempel. Dalam istilah website Sticky berarti berada di depan atau selalu mengikuti walaupun mouse terus di scroll. Sedangkan Sticky Widget Sidebar berarti membuat widget yang selalu menempel walaupun mouse kita scroll.

Pertama kali mengacak-acak kode sticky ini ketika saya diminta bantuan oleh 7O3 Blogger Tuts  dalam template Cemungudh Blogger Template. Karena terasa menarik, maka saya aplikasikan juga dalam blog saya ini.

Untuk lebih memahami apa itu sticky widget sidebar, silahkan scroll kebawah dulu sampai habis, (nanti kembali lagi ke sini... ) Anda akan menemukan widget yang terus mengikuti seperti dibawah ini

Untuk membuat Sticky widget ini, ada tiga langkah mudah, silahkan simak satu persatu
1. Menambakan kode CSS
2. Menambah kode JavaScript
3. Menambahkan kode HTML

Menambah kode CSS

1. Login ke Blogger
2. Klik Template > Edit HTML > Lanjutkan
3. Tambahkan kode CSS, contoh kode seperti ini :

#catcher{
height:780px;/* tinggi catcher */
}

#sticky{
width:300px;/* lebar sticky */
height:auto;
}

Catcher adalah tinggi keseluruhan widget sebelum sticky, misalkan ada 3 widget sebelumnya pada blog anda. Recent Post, Follower dan Facebook Like Box. Tinggi widget Recent Post 250px, tinggi widget Follower 250px, dan Like Box 250px, jarak masing2 widget 10px, maka tinggi catcher 250+10+250+10+250+10 = 780px, supaya lebih jelas saya gambarkan seperti ini :

Kalau masih bingung dengan ketinggian widget anda, silahkan uji coba saja. Apabila menumpuk silahkan tambah ketinggian, apabila terlalu jauh, silahkan kurang ketinggian catcher.

Menambah Kode JavaScript

Tambahkan kode ini sebelum </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
        function isScrolledTo(elem) {
            var docViewTop = $(window).scrollTop(); //num of pixels hidden above current screen
            var docViewBottom = docViewTop + $(window).height();
            var elemTop = $(elem).offset().top; //num of pixels above the elem
            var elemBottom = elemTop + $(elem).height();
            return ((elemTop &lt;= docViewTop));
        }
        var catcher = $(&#39;#catcher&#39;);
        var sticky = $(&#39;#sticky&#39;);
        $(window).scroll(function() {
            if(isScrolledTo(sticky)) {
                sticky.css(&#39;position&#39;,&#39;fixed&#39;);
                sticky.css(&#39;top&#39;,&#39;0px&#39;);
            }
            var stopHeight = catcher.offset().top + catcher.height();
            if ( stopHeight &gt; sticky.offset().top) {
                sticky.css(&#39;position&#39;,&#39;absolute&#39;);
                sticky.css(&#39;top&#39;,stopHeight);
            }
        });
    });
</script>

Menambahkan kode HTML

Kode HTML nantinya seperti ini:

<div id='catcher'>
widget yang telah ada
</div>
<div id='sticky'>
isi sticky widget, baik FB Like Box, Banner, atau apa pun
</div>

Contoh Pengaplikasian

Contoh pengaplikasian pada template anda

<div id='sidebar'>
<div id='catcher'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>
<div id='sticky'>
<a href="http://blog.kangismet.net" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLUjbUJeYMC94TIj4CjWzM_U28y_3JQWxsrN-MHLOk7vDRYtA28CwtM-W0x9vnqML24Qk7y-W0P1rIVViGBEXX_yzFK-n-7Txtn1GEsHZddJMZJBsNZ17gwTBjCCuKtEaU9zxnqBpNdVA/s1600/kilogo.png" /></a>
</div>
<div>

Selamat berkreasi dengan Sticky widget.....

Sumber 

Read More

Tips Blog: Custom Domain di Intuit untuk Blogger / Blogspot

Custom Domain di Intuit untuk Blogger / Blogspot. Pada postingan sebelumnya (baca : Domain dot com gratis dari Intuit). Setelah mendapatkan domain dari intuit, tentunya kita harus mengarahkan domain tersebut, baik ke server berbayar atau gratis.

Saat ini saya akan menjelaskan bagaimana cara menghubungkan domain dari intuit ke blogger / blogspot atau istilahnya custom domain, agar blog sobat menjadi Top Level Domain (TLD). Namun sekali lagi saya ingatkan, harap bijak menggunakan domain gratis ini.

Cara setting Domain di Intuit untuk Blogger

1. Login ke Intuit dengan username dan password sobat.
2. Setelah login klik menu Domain
3. Klik Advance DNS Setting

4. Pada Form A Records Tambahkan kode ini

    216.239.32.21
    216.239.34.21
    216.239.36.21
    216.239.38.21

5. Pada CNames tambahkan ghs.google.com, seperti di atas.
6. Submit

Selanjutnya lanjutkan pengaturan di blog sobat :

1. Login ke Blogger
2. Klik Blog sobat
3. Klik Setelan > Tambahkan domain khusus

4. Klik Alihkan ke setelan lanjutan

5. Isi Nama domain > Simpan

6. Centang Mengarahkan domainanda.com ke www.domainanda.com
7. Selesai

Selamat, blog anda sekarang sudah berubah menjadi top level domain. Semoga tuturial custom domain di intuit untuk blogger / blogspot ini bermanfaat.

Sumber 

Read More

Tips Blog: Memasang Pin it Button pada Tiap Gambar di Blogger

Tutorial cara memasang atau menambahkan Pin it button pada tiap gambar/image di postingan Blogger/Blogspot. Pada postingan sebelumnya saya sudah menjelaskan bagaimana cara menambahkan pin it button pada postingan, kali ini agak sedikit berbeda. Kalau pada tutorial sebelumnya tombol Pin it hanya tampil pada akhir postingan, kali ini bagaimana caranya setiap gambar mempunyai tombol pin it (Pin it button).

Tuorial ini sangat cocok bagi sobat yang suka share foto-foto, baik desain, wallpapper, theme, dan lain-lain, karena tidak usah memilih foto yang akan di Pin.

DEMO

Kode ini saya dapatkan dari Code it Pretty, akan tetapi harus mengaktifkan timestamp. Setelah melakukan sedikit perubahan pada script, akhirnya berjalan walaupun tanpa memengaktifkan timestamp.

Ada tiga langkah  mudah untuk menambahkan Pin it button pada tiap image, yaitu :
1. Menambahkan kode jQuery
2. Menambahkan kode JavaScript
3. Menambahkan kode CSS

Menambahkan jQuery

1. Login ke Blogger
2. Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode <b:skin>, tambahkan kode ini diatasnya :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Lewati langkah ini apabila template anda sudah mempunyai jQuery

Menambahkan JavaScript

Tambah kode ini sebelum </body>

<script type='text/javascript'>
 $().ready(function() {
  
 $(&#39;.entry-content img&#39;).each(function(){
  var $permalink = $(location).attr(&#39;href&#39;);
  $(this).wrap(&#39;&lt;div class=&quot;pinme&quot; style=&quot;&#39; + $(this).attr(&#39;style&#39;) + &#39;&quot; /&gt;&#39;).after(&#39;&lt;a href=&quot;http://pinterest.com/pin/create/button/?url=&#39; + $permalink + &#39;&amp;media=&#39; + $(this).attr(&#39;src&#39;) + &#39;&amp;description=&#39; + $(this).attr(&#39;alt&#39;) + &#39;&quot; class=&quot;pin-it-button&quot; count-layout=&quot;horizontal&quot;&gt;Pin It&lt;/a&gt;&#39;);
 });
 
});

(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement(&quot;script&quot;);
        s.type = &quot;text/javascript&quot;;
        s.async = true;
        s.src = &quot;http://assets.pinterest.com/js/pinit.js&quot;;
        var x = document.getElementsByTagName(&quot;script&quot;)[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent(&quot;onload&quot;, async_load);
    else
        window.addEventListener(&quot;load&quot;, async_load, false);
})();
</script>

Menambahkan kode CSS

Tambahkan kode ini sebelum ]]></b:skin>

.pinme iframe { display: block; margin: 0 auto; }

Deskripsi Photo

Untuk menambahkan deskripsi secara otomatis gunakan tag alt pada photo
Contoh:

<img alt="The Beatles WPAP Design" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLzGxD_CGNhDiE1WU_EQ-XFL4R-UsLRT-tOrgUvjPYDpVHGrivaVE7o3OcYwvdxCRho3hYOOfdagrmNfh03a2G8MeVYb7_0hdZVIeFC5HCX9PWWti1RMjTY61RalxE9NRKMtC9cBrNpYoH/s1600/the_beatles_wpap.jpg" >

apabila tidak ditambahkan tag alt, maka tulisan yang akan muncul adalah 'undefined'.

Semoga bermanfaat!

Sumber 

Read More

Tips Blog: Cara Membuat Breadcrumbs / Navigasi di atas Postingan di Blogspot/Blogger

Cara Membuat Breadcrumbs SEO Friendly. Banyak tutorial yang menjelaskan cara membuat breadcrumbs di Blogspot/Blogger. Kali ini saya akan menjelaskan cara membuat breadcrumbs yang SEO friendly dan semua label terindeks oleh Search Engine.

Breadcrumbs merupakan menu navigasi yang berada di atas judul postingan seperti yang ada di blog saya. Struktur ini tentu berbeda dengan WordPress, yang bisa membuat child category. Struktur di bloger hanya Home kemudian Label. Apabila memiliki beberapa label, maka akan terbaca seperti ini :

Home > Label1 > Label2 > Label3

Cara Membuat Breadcrumbs SEO Friendly

1. Masuk ke Blogger
2. Klik Template > Edit HTML > Lanjutkan
3. Centang Expand Template Widget
4. Cari kode ]]></b:skin> dan simpan kode ini diatasnya:

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

5. Cari kode <b:includable id='main' var='top'>, ganti dengan:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

6. Simpan Template Anda.

Untuk mengeceknya silahkan kunjungi :

http://www.google.com/webmasters/tools/richsnippets

Untuk mencoba apakah tampil beberapa label, copy postingan Anda yang mempunya label lebih dari 1. dan klik Pratinjau. Kalau sudah berhasil berarti breadcrumbs terpasang dengan baik.

Sumber 

Read More