Bagi anda yang blognya menjadi penayang iklan dari google adsense, tentu tidak asing lagi dengan jenis iklan yang disebut iklan link/ tautan. Jenis iklan ini memang cukup efektif untuk menampilkan beberapa buah link yang menuju langsung ke situs pengiklan. Tampilannya yang sederhana juga cukup ringan sehingga hampir selalu muncul di setiap postingan. Pengunjung pun lebih mudah tertarik pada iklan jenis ini karena isinya sering kali sesuai dengan topik yang dibaca.
Nah, pada postingan kali ini, saya akan berbagi cara untuk membuat tampilan link/ iklan seperti iklan tautan adsense di blog secara manual. Tampilan ini nantinya bisa anda isi dengan iklan mandiri yang berasal dari produk anda ataupun dari pengiklan yang mengiklankan produknya di blog anda. Tujuannya tentu saja untuk meningkatkan jumlah pengunjung blog sehingga harapannya bisa ikut mendongkrak penghasilan dari pemasangan iklan yang ditampilkan di blog anda.
Gambar ilustrasi di atas adalah tampilan iklan tautan mandiri yang hendak kita buat pada tutorial kali ini. Bagaimana cara membuatnya?, simak langkah-langkahnya di bawah ini.
Cara Membuat Tampilan Link/ Iklan seperti Iklan Tautan Adsense
1. Buka akun blogger anda.
2. Pilih menu thema dan klik edit html.
3. Cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut ini di atasnya.
.link-btn{ width:100%; position:relative; padding-top:15px } .link-btn:after { clear: both; content: ""; display:block; } .label-link-btn{ font-size:12px; color:#333; position:absolute; top:0; left:0; line-height:1; } .label-link-btn svg{ width:15px; height:15px; vertical-align:-3px; } .label-link-btn svg path{ fill:#00aecd; } .link-btn-left,.link-btn-right{ width:calc(50% - 10px); float:left } .link-btn-left{ margin-right:10px } .link-btn-right{ margin-left:10px } .tombol-link { width: 100%; height: 41px; display: block; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; text-align: center; line-height: 41px; box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.35) inset, 0px 1px 1px rgba(0, 0, 0, 0.3); align-items: center; justify-content: center; background-color: #ffffff; border: 1px solid #48d; border-radius: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; color: #ffffff; font-weight: normal; font-family: arial, sans-serif; font-size: 16px; margin: 5px auto; } .tombol-link:hover { background-color: #48d; color: #333; } @media screen and (max-width:640px){ .link-btn-left,.link-btn-right{ width:100%; float:none; margin:0 auto; } }
4. Untuk penempatan iklannya terserah mau anda letakkan di mana. Kode bisa anda masukkan lewat menu layout ➡ tambahkan gadget atau bisa juga diletakkan di dalam area postingan lewat menu edit html (<data:post.body/>). Kodenya adalah sebagai berikut:
<div class='link-btn'> <div class='link-btn-left'> <a class='tombol-link' href='#' target='_blank'>Link Iklan Disini</a> <a class='tombol-link' href='#' target='_blank'>Link Iklan Disini</a> </div> <div class='link-btn-right'> <a class='tombol-link' href='#' target='_blank'>Link Iklan Disini</a> <a class='tombol-link' href='#' target='_blank'>Link Iklan Disini</a> </div> <a href='#' target='_blank' title='Iklan oleh https://santossalam.blogspot.com'> <div class='label-link-btn'> <svg x='0px'> <path d='M7.5,1.5a6,6,0,1,0,0,12a6,6,0,1,0,0,-12m0,1a5,5,0,1,1,0,10a5,5,0,1,1,0,-10ZM6.625,11l1.75,0l0,-4.5l-1.75,0ZM7.5,3.75a1,1,0,1,0,0,2a1,1,0,1,0,0,-2Z'/> </svg> Iklan oleh Santos Blog </div></a> </div>
Keterangan:
- Silahkan ganti alamat link dan kalimatnya sesuai kebutuhan.
- Jumlah linknya bisa ditambahkan lagi sesuai kebutuhan.
6. Simpan kembali template anda dan lihat hasilnya.
Demikianlah tutorial tentang cara membuat tampilan link/ iklan seperti iklan tautan adsense di blog. Selain untuk pemasangan link iklan, tampilan di atas juga bisa anda gunakan untuk pemasangan link lainnya seperti untuk laman kontak, about, disclaimer (halaman statis) dan sebagainya. Semoga bermanfaat.