Script Untuk Membuat Halaman/Widget About Us Keren, Cantik & Manis
 |
| About Us Widget |
About Me atau Tentang Saya adalah sebuah keterangan berupa biodata dari seorang bloger/penulis yang isinya bisa beragam, biasanya akan terdapat sebuah foto dari pemilik/admin, bisa juga sebuah logo dari blognya tersebut, bahkan beberapa keterangan singkat tentang biografi pemilik dan tidak ketinggalan juga terdapat beberapa link media sosial yang ditampilkan dengan deretan icon-icon imut nan cantik kayak si dia 😄
Fungsi dari pembuatan About Me ini juga beragam. Ada yang difungsikan untuk memperkenalkan personal diri sang penulis agar lebih dekat kepada para pembaca/visitor, ada yang menceritakan sekilas tentang niche pada sebuah blog atau pada topik apa sebenarnya yang dibahas oleh blog yang dituju, dan ada yang digunakan sebagai personal branding yang ditujukan kepada pihak ketiga, dengan harapan blog yang kita kelola mendapatkan endorsment untuk pemasaran suatu produk atau jasa. Ya, walaupun blog kita masih sangat jauh dari kata itu.
Hal yang tidak kalah pentingnya dengan menampilkan keterangan About Me adalah blog/website kita akan dipandang baik oleh pihak Google, agar tidak dianggap sebagai blog spam alias ilegal, karena begitu banyaknya situs-situs spam yang bertebaran di internet. Tentunya kita sangat ingin agar blog kita semakin berkembang kedepannya bukan? dan inipun menjadi salah satu syarat penting disaat kita akan melakukan pengajuan sebagai pengiklan Adsense.
Walaupun sebenarnya Blogspot telah memberikan fitur untuk halaman About me ini pada setiap templatenya dan dapat kita tampilkan juga sebagai widget, namun menurut saya tampilannya sangat monoton dan sederhana sekali. Jadi tidak ada salahnya jika membuat manual tampilannya agar terlihat lebih keren.
Baiklah untuk membuatnya, silahkan copy contoh kode script berikut ini dan akan kita lakukan pengeditan:
<div class="separator" style="clear: both; color: white; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; color: white; text-align: center;">
<img border="0" data-original-height="764" data-original-width="764" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRvnGcs2UuX263xE_MextXn8JmAUdS8a0eEfAN2IOLUasL3FTIlGw8qGHOYpkDMJVhT6JGxWE3mFdDS5iRg5eqx9cWDWaK2DnCRzm_qcpX3uRRcWYWffGaTLkzdHcBkpMc-6C_c1IpO0/w151-h151/12733503_102431766813461_5425326778052232675_n.jpg" width="151" /></div>
<div style="text-align: center;">
<br /><b><span style="color: #ffa400;"><a href="https://www.blogger.com/profile/01036155011069598221">Spiders</a></span></b><br />
<a href="https://labalabawirata.com" style="color: white;">www.labalabawirata.com</a>
<br /><br /></div><div style="text-align: center;">
<span style="color: white; font-size: x-small;">Blog yang berbagi tentang tentang tips dan trik internet & technology
</span><div style="color: white; text-align: center;"><span style="font-size: x-small;">
Tips dan trik internet terbaru, Download Aplikasi Android, Download Software PC Gratis, Tutorial Reparasi Ponsel, Tutorial Blogger, dll.</span></div><div style="color: white; text-align: center;"><br /></div><div style="text-align: center;"><span><span style="color: #04ff00;">🏡 </span><u><span style="color: #04ff00;">Lampung - Indonesia</span></u></span></div><div style="color: white; text-align: center;"><br /></div>
<div style="border-bottom: 2px solid rgb(204, 204, 204); color: white; margin-bottom: 5px; padding: 3px; text-align: center;">
</div>
<a href="https://www.facebook.com/spiderrsss" style="color: white;" target="_blank" title="like/follow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx5P_A5J9u3vgxeb9Bh9dmeA4XUGm9gCGrvsTgze6ewiCUJzOx_rtNxnBM7xXZEnoSzDE6NJ0fPf1o4RegUByqF5G17k3ORhyphenhyphen7ouKlvGGtFeXhyRnMyixgz5ItRGmSq4QBfyzG80oYfhg/s1600/facebook.png" style="border: medium none; position: relative;" /></a>
<a href="https://twitter.com/" target="_blank" title="Follow Me"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFuHi_gQ-Nl7SRX6tSl2-zdfAMaXFZGx2bQKzYy45D4QSLMzPvJJoDznshxvd6ctRE3WfzvCONd9koNLh5joNGxtrxmodBhxmdOvNcLrjGf3nhBqiB3KKuFVxUO-CCoouI0H7wVGXDKjs/s1600/twitter.png" style="border: medium none; position: relative;" /></a>
<a href="https://pinterest.com/labalabawirata" style="color: white;" target="_blank" title="Follow"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUbyirw00cc5mtJ3PfQktqmBIJ18wmS6MIihP6i1yV3NJEMyjmhQYJm6ybmd7LfzCBz2of25VlciE3H7zyhLhtdy2IqHL1MxbenLhmBf_W2vY3XJ-LUW_6ja4Z1WuNFqZneHQw6tASzkY/s1600/pinterest.png" style ="border: medium none; position: relative; " /> </a>
<a href="https://www.tumblr.com/spidermanis1-blog" style="color: white;" target="_blank" title="Visit"> <img border ="0" src ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxo9hETQ6cuPVinJjwaVgwsfYi9c4KHFWEcYWVsjuKLPjtMS3C0E4jfeA3VsP1wvWK-a12d6RTgtlBKwVV4sLX4nI-X3eB9POa4B-zwaEr-CuGtftspR3yDWVLBudAURNJtO9HdXou-0M/s1600/tumblr.png" style="border: medium none; position: relative; " /> </a>
Keterangan:
Untuk mempermudah pengeditan, saya sarankan untuk menempel kode script di atas pada halaman posting di pengeditan HTML lalu kita dapat merubah tampilan warna dan link pada bagian Compose Teks, lalu kita dapat juga melihat hasilnya dengan memilih menu preview.Kode di atas adalah untuk tampilan foto profil, silahkan diganti pada angka yang saya tandai cokelat untuk menyesuaikan ukuran gambarnya, height = tinggi dan width = lebar. Kita dapat melakukannya dengan mudah pada menu compose teks tinggal ditarik geser saja.
Sebelumnya ganti terlebih dahulu link gambarnya yang saya tandai biru muda, seperti contoh di atas adalah link foto yang saya unggah pada profil bawaan Blogspot. Atau kita dapat menggantinya dengan link foto pada situs lainnya yang telah kita persiapkan sebelumnya, seperti situs-situs pengolah gambar online di internet.
<br /><b><span style="color: #ffa400;"><a href="https://www.blogger.com/profile/01036155011069598221">Spiders</a></span></b>
<br /><br /></div>
Kode di atas sebenarnya optional, namun saya menyematkannya untuk mengarahkan link ke halaman profil pengguna bawaan blogspot, tinggal diganti saja link-link yang saya tandai berwarna kuning.
Tips dan trik internet terbaru, Download Aplikasi Android, Download Software PC Gratis, Tutorial Reparasi Ponsel, Tutorial Blogger, dll.</span></div><div style="color: white; text-align: center;"><br /></div><div style="text-align: center;"><span><span style="color: #04ff00;">🏡 </span><u><span style="color: #04ff00;">Lampung - Indonesia</span></u></span></div>
Untuk kode yang ini silahkan diganti teks yang saya tandai berwarna pink sesuai kebutuhan ya guys.. Sebenarnya saya ingin menuliskan I Love U.. tapi si dia.. 🙈😥
Kita dapat menampilkan About Us ini sebagai sebuah page/halaman mandiri pada blog kemudian hanya menambahkan sebuah teks link pada bagian sidebar maupun footer atau kita juga dapat langsung menampilkan widgetnya pada sidebar.
.png)
Komentar
Posting Komentar