Cara Memasang Tanda Tangan di Akhir Blog Post Secara Otomatis

Beberapa waktu yang lalu ada yang bertanya pada saya bagaimana cara membuat tanda tangan di akhir postingan saya. Wah, ada yang memperhatikan ternyata, hihi. Tiap postingan saya di sini memang selalu ditutup dengan “Salam, Reisha Humaira”. Tulisan “Reisha Humaira”-nya sendiri berupa gambar .png yang teksnya saya buat menggunakan font tertentu sehingga kesannya seperti tanda tangan. Tanda tangan saya mah aslinya ga seperti itu, hehe.

Sebenarnya mudah saja untuk menambahkan tanda tangan itu, karena tinggal taruh teks atau gambarnya di akhir tulisan. Hanya saja jadinya ribet karena tiap posting mesti insert tanda tangannya melulu, dan tulisan yang lama pun tidak akan punya tanda tangan karena dulu tidak dipasang. Kita maunya yang praktis toh, sekali bikin, otomatis ada di semua postingan, baik yang lama ataupun yang akan ditulis ke depannya.

Jadi, bagaimana cara memasang tanda tangannya secara otomatis? Nanti saya jabarkan di bawah ya. Mau blognya pakai Blogspot atau WordPress, lengkap di sini tutorialnya #tsaaah. Yuk mari merapat.

Baca juga: Perbandingan Lengkap Platform Blogger vs. WordPress.org vs. WordPress.com

Cara Membuat Tanda Tangan untuk Blog

Cukup banyak blogger yang menaruh signature di akhir postingannya. Bentuknya pun beragam, ada yang teks biasa, ada yang pakai teks tapi dibuat jadi gambar, ada juga teks yang dilengkapi dengan gambar-gambar. Sesuai kreativitas masing-masing pokoknya.

Mau membuat tanda tangan berupa gambar? Bebas deh pakai apa saja. Bisa pakai editor gambar apapun. Yang perlu diperhatikan adalah:

• Sebaiknya gambarnya menggunakan format PNG dengan background transparan. Kenapa? Template blog macam-macam ya, warna latar belakangnya bisa beda-beda. Jika kita bikin tanda tangan pakai background warna putih, tapi background blognya pink misalnya, nanti bakal kelihatan putihnya. Jelek deh. Kecuali memang desain tanda tangannya memang mau dikasih warna background.
• Jika membuat sendiri gambarnya, nanti kita perlu meng-upload gambar tersebut di suatu tempat. Kita membutuhkan URL atau link gambarnya agar bisa dimunculkan di blog. Bisa di-upload di blog sendiri kok gambarnya. Pastikan URL-nya valid ya. Cara ceknya tinggal buka browser, masukkan URL yang kita copy. Jika gambarnya muncul dengan baik, berarti sudah benar.

Di WordPress, upload gambar seperti biasa di Media > Library. Di detail gambarnya, ada beberapa baris field. URL gambarnya adalah yang berada di field Copy Link. Cirinya dimulai dengan http atau https, diakhiri dengan nama file gambar yang kita upload.

Di Blogspot, buatlah sebuah Post baru. Untuk draft aja kok, ga perlu di-publish setelahnya, hehe. Upload gambar seperti biasa, masukkan ke draft, lalu ubah text editor ke mode HTML. Cari tag img, URL gambarnya adalah yang berada di antara tanda petik setelah atribut src.

Mau yang lebih praktis tanpa upload? Bisa coba bikin signature di fontmeme.com/signature-fonts. Tinggal masukkan nama, pilih font, pilih ukuran font, pilih efek, pilih warna; lalu klik tombol Generate untuk melihat preview-nya. Jika sudah selesai, klik tombol Embed. URL gambarnya bisa di-copy dari field Direct Image Link. Praktis memang, hanya saja style-nya terbatas.

Cara Memasang Tanda Tangan di Blogspot

Di Blogspot ini rada tricky sebenarnya. Ada beberapa tutorial berbeda yang saya temukan, tapi belum tentu bisa dipakai semua. Kenapa? Karena di Blogspot ini sangat tergantung dengan theme yang digunakan. Ada yang memberi instruksi menaruh kode di dalam div dengan class tertentu, padahal class itu bisa aja tidak ada di semua theme.

Cara yang sepertinya bisa diterapkan di theme Blogspot apapun sebagai berikut.

1. Klik menu Theme di Dashboard. Karena kita bakal utak-atik kode HTML theme-nya, sebaiknya backup dulu theme yang sekarang. Tinggal klik tombol Backup / Restore, akan muncul popup, lalu klik tombol Download Theme.
2. Klik tombol Edit HTML yang berada di bawah preview theme yang dipakai sekarang. Nanti akan muncul text editor kode theme-nya.
3. Klik di dalam text editor untuk meletakkan kursor, lalu Ctrl+F untuk mencari kode <data:post.body/>. Kode ini bisa saja jumlahnya lebih dari satu, terutama jika theme-nya menggunakan Read More otomatis. Katanya cukup pilih kode yang kedua, atau kalau ntar gagal bisa trial error nanti di bagian kode yang lain, hehe.
4. Tambahkan kode HTML tanda tangan berikut di bawah kode <data:post.body/> lalu klik tombol Save Theme.

<div style='display:block; margin: 15px 0px;'>
<img alt='' src='ISI URL GAMBAR DI SINI' style='border: none !important;' />
</div>

Jika sudah selesai, cek beberapa postingan blog untuk memastikan apakah tanda tangan sudah terpasang dengan baik.

Cara Memasang Tanda Tangan di WordPress Self-Hosted

Untuk blog yang menggunakan WordPress Self-Hosted, caranya sedikit lebih advance #halah karena kita bakal utak-atik kode PHP WordPress-nya. Sebelum utak-atik, backup dulu blognya, tinggal gunakan fitur backup yang ada di CPanel.

Langkah-langkah menambahkan tanda tangannya sebagai berikut.

1. Masuk ke File Manager di CPanel, di situ kita bisa melihat folder dan file kode WordPress.
2. Masuk ke folder wp-content > themes. Di dalam folder themes mungkin ada lebih dari satu folder. Jika ada lebih dari satu, masuk ke folder theme yang sedang digunakan saat ini. Di dalamnya ada banyak file. File yang perlu kita edit adalah file functions.php.
3. Pilih file functions.php lalu klik tombol Edit, akan muncul text editor kodenya.
4. Kita bisa taruh kode untuk tanda tangan berikut di awal file setelah <?php, atau di akhir file sebelum ?>. Yang penting bukan di tengah-tengah kode yang sudah ada. Kode yang sudah ada jangan diutak-atik ya, salah-salah blognya jadi error nanti. Jika sudah selesai, klik tombol Save Changes.

// Add signature image after single post add_filter('the_content','add_signature');
function add_signature($text) {
global $post; if(($post->post_type == 'post'))
$text .= '<div style="display:block; margin: 15px 0px;"><img src="ISI URL GAMBAR DI SINI" style="border: none !important;"></div>';
return $text;
}

Beres deh. Selanjutnya tinggal cek beberapa postingan blog untuk memastikan apakah tanda tangan tadi sudah terpasang dengan baik.

Oia perlu diingat bahwa jika kita mengedit file functions.php dari theme utama, ketika theme itu di-update, maka kode yang kita tambahkan akan hilang karena update-an theme akan mengganti file tersebut dengan file baru.

Solusinya adalah dengan memakai child theme, tapi ini panjang lagi bahasanya. Baca-baca dari web WordPress-nya langsung aja ya seputar child theme, hehe. Intinya child theme itu semacam theme turunan dari theme utama (parent theme). Child theme ini tetap mewarisi style dari parent theme-nya, tapi segala customization yang kita lakukan di child theme tidak akan hilang ketika parent theme di-update.

Cara Memasang Tanda Tangan di WordPress.com 

Untuk blog yang dibuat di WordPress.com, sayang sekali kita tidak bisa menambahkan tanda tangan secara otomatis karena kita tidak bisa utak-atik kode apapun. Yaa kecuali jika pakai business plan yang memungkinkan untuk edit kode, tapi biayanya sangat mahal menurut saya.

Jadi yang memungkinkan hanyalah kita menambahkan tanda tangan secara manual setiap posting. Untuk postingan lama, kalau mau ya berarti mesti diedit semua, heuheu.

Jika sudah menggunakan editor Gutenberg, kita bisa bikin tanda tangannya sebagai Reusable Block sehingga lebih praktis saat menambahkan tanda tangan di postingan yang lain. Caranya mudah saja.

1. Saat membuat Post baru, tambahkan teks atau gambar yang akan dijadikan tanda tangan.
2. Pada block tanda tangan tersebut, klik icon titik tiga di atas block, lalu pilih Add to Reusable Blocks. 
3. Masukkan nama untuk Reusable Block ini, misalnya signature. Lalu klik tombol Save yang ada di sampingnya.

Nanti di postingan lain, kita tinggal pakai Reusable Block tersebut. Caranya tinggal klik icon tambah untuk Add Block, lalu cari signature. Atau praktisnya ketik aja /sig, nanti sambil ngetik akan muncul autocomplete pilihan block-nya. Klik pilihan block signature tadi, beres deh.

—

Sekian tutorial dari #tipsbloggingalareisha kali ini. Ceileh ada hashtag segala, haha. Di atas asumsi saya tanda tangannya pakai gambar ya. Kode HTML untuk gambar signature-nya saya bikin simpel aja. Kalau mau pakai teks aja tinggal hilangkan tag <img ... /> lalu diisi dengan teksnya. Kalau ngerti HTML dan CSS, boleh banget lho ditambahkan dengan hal lain, seperti salam, link ke media sosial, dll. Saya sendiri menambahkan kode Google Adsense setelah tanda tangan blog saya, hehe.

Ada yang sudah mempraktikkan? Ada masalah? 😀

Salam,