Bagaimana Cara Membuat Signature Pada Setiap Postingan Blog di Blogspot Secara Otomatis

Hey, kini saatnya mempercantik postingan blog kamu dengan menambahkan signature ala kamu. Lalu bagaimana cara membuat signature pada setiap postingan blog di blogspot secara otomatis? OK, saya asumsikan kalau kamu sudah siap dengan signature image kamu ya bisa dalam format JPEG, PNG atau GIF.
How to make signature on blog post blogspot!

1| Upload Signature Image And Get Image URL
Untuk mendapatkan image URL sebenarnya bisa dilakukan dengan berbagai cara, diantaranya bisa dengan mengupload signature image kamu ke photobucket atau flickr ataupun dari postingan blog kamu. Dan dapatkan link URL image tersebut.

2| Backup Your Blogger Template
Sebelum memasukan code atau sebelum melakukan add or delete code, alangkah baiknya kamu mem-backup terlebih dulu template blog kamu. Backup template bisa dilakukan di menu Template > Backup/ Restore > Download Full Template.

3| Add a Signature After Your Post Content
Nah, sekarang saatnya menyisipkan signature image dibawah postingan kita dengan cara klik menu Template > Edit HTML. Kemudian pada keyboard tekan Ctrl + F untuk melakukan pencarian code. Masukkan/ cari code berikut :

<div class='post-body entry-content'>
<data:post.body/>

<data:post.body/>  ini mungkin letaknya berbeda setiap blog tergantung template yang digunakan. Dan mungkin akan terdapat lebih dari satu <data:post.body/>. Code dibawah ini saya letakkan di bawah <data:post.body/> yang ke-2. Untuk kamu bisa dicoba-coba sendiri, tapi jangan lupa lakukan backup template terlebih dahulu ya.

Dan pastekan code berikut dibawah <data:post.body/> :

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='text-align: center;'><img src='DIRECT URL HERE' style='border: none;'/></div></b:if>

Pastekan signature image URL kamu di tulisan berwarna merah di atas. Ini signature ala saya:

 Signature handdriati blog


Mudah sekali bukan? Yuk bikin signature ala sendiri supaya postingan kita lebih terlihat cantik.

Image Source: foto by Staffage via kaboompics with graphics added by handdriati
Source Code : Carrieloves

Hope you enjoy this post! :)

31 comments

  1. Wah thanks untuk tipsnya ya mak..

    ReplyDelete
    Replies
    1. sama-sama maks, semoga membantu dan bermanfaat ya :)

      Delete
  2. Replies
    1. bisa kok mba...coba buka link source code di atas disitu dijelasin untuk WP juga hehe...

      Delete
  3. Wahhh. Keren Mbak.
    Baca yang buat WP ahhh.

    Febriyanlukito.com

    ReplyDelete
    Replies
    1. hihihi...monggo-monggo mas ryan, semoga bermanfaat ya :)

      Delete
  4. Thanks infonya :) Bedanya sama kalo kita masukin foto sendiri sebagai pengganti daripada harus upload ke photobucket apa?

    Btw, rekues dong, bagaimana cara bikin menu Home, About Me, Contact seperti punya kamu di atas. Terus juga cara link-nya ke masing-masing fungsinya gimana. Misalnya About Me, trus page About Me nya bikin dimana. Hehehehe.... Maaf ya banyak maunya :D

    ReplyDelete
    Replies
    1. gak ada bedanya sih sebenarnya, yang penting image URLnya valid aja.
      siap mba lia, kapan-kapan saya posting gimana bikin header menu hihihi...makasih sarannya :)

      Delete
  5. Thanks for sharing ya, Mbak.. :D

    ReplyDelete
  6. uwaaa...makasih mak buat tutorialnya^^
    salam kenal

    ReplyDelete
    Replies
    1. sama-sama mak hm zwan, salam kenal juga hihi... :)

      Delete
  7. sipp... makasi mak sharingnyaa

    ReplyDelete
    Replies
    1. sama-sama mak jade ayu, semoga bermanfaat ya :)

      Delete
  8. Udah lama penasaran dengan cara membuat signature. Pernah cari di internet, yang muncul malah tutorial signature email... :v

    Tfs ya mbak! Saya mau coba. Mudah-mudahan bisa. tapi sebelumnya, bikin gambar dulu yak? haduh... *males repot* ckckck

    ReplyDelete
    Replies
    1. Haha...Iya mbak yanet, kudu bikin gambar dulu hihi...

      Delete
  9. hiks aku WP :( :( :(
    eniwei.. jatuh cinta sama tiap design gambar2 kamu Hand :)

    ReplyDelete
    Replies
    1. ada kok mba caranya buat yang WP tinggal kunjungi aja itu aku uda kasih linknya di bagian source code :)

      aw aw...makasih mbak keke, itu gambarnya gratisan kok cuma aku modif aja biasanya dikasih tulisan2 hehe... :D

      Delete
  10. nnti aku coba lah biar jd blogger kekinian.. hihi

    ReplyDelete
  11. Makasih tipsnya. Bookmark dulu ah sambil buat signature yang kece

    ReplyDelete
  12. Mba, mungkin gak sih ya kalo di edit HTML blog aku, gak nemu code yang harus dicari?

    Aku coba ctrl F, tapi kok gak nemu ya?

    ReplyDelete
    Replies
    1. mungkin aja mba, karena biasanya kalau misal templatenya gak sama ada yang beda htmlnya...tapi kalau mencari html yg memang standarnya sih harusnya ada...

      Delete
  13. yang ini bener-bener puyeng aku mbak, rada pusing kalo udah berhubungan sama kode HTML.. signature itu kayak fiture image bukan sih mbak? yang misal kalo kita share ke sosial media bakal muncul gambarnya itu?

    ReplyDelete
  14. mba aku udah edit htmlnya trus cara nampilin di postinganna gimana ya manggilnya? makasih mba

    ReplyDelete
  15. Tapi gimana cara buat signature seperti itu mba T___T aku masih bingung....

    ReplyDelete
  16. Hai mba, salam kenal aku berhasil mempraktikkannya. Tp btw kalo di versi mobile kok gak nampil yah. Gimana caranya ya supaya tampil juga di mobile? makasih.

    ReplyDelete
    Replies
    1. hallo mba dewi, iya nih untuk sekarang baru bisa tampil di tampilan desktop aja :)

      Delete
    2. Eh punya aku bisa tampil di mobile juga ding mbak :) Kemaren salah liat hehee

      Delete
  17. Hai mba handriati, aku kirim email,jika berkenan mohon dibalas ya mba. makasih sebelumnya :)

    ReplyDelete
  18. Wah kerennnn. Makasih ilmunya ya mba. Mau otak atik blog lagi abis ini hihi. Salam kenal

    ReplyDelete
  19. terimakasih tutornya kak. work hehe ^^

    ReplyDelete

Terimakasih sudah berkomentar yang sopan dan membangun. Jangan bosan untuk berkunjung lagi ya. :)