Cara Membuat Widget Label Seperti Iklan Link Tautan Responsive

www.azid45.web.id - Cara Membuat Widget Label Seperti Iklan Link Tautan Responsive. Assalamualaikum.Wr.Wb, sudah lama saya tidak posting artikel baik itu tutorial maupun ilmu umum. Baik, kali ini saya akan share buat teman-teman barangkali tertarik dengan tampilan widget label seperti link tautan.

Widget label atau kategori dalam bahasa wordpress sering diditampilkan pada blog untuk mempermudah pengunjung mengklik kategori atau label yang diinginkan. Widget ini selain berfungsi demkian, juga sebagai syarat diterima oleh google adsense menurut saya dari yang saya pahami pada kebijakan adsense. Mengapa demikian?, dari sekian eksperimen yang saya lakukan ketika daftar adsense tidak menampilkan label sering kali ditolak kemudian saya tampilkan label langsung diterima oleh google adsense, mungkin itu salah satu faktor dari faktor lain.

Baca juga: optimasi kecepatan blog dengan lazy load adsense work 100%

Label bawaan blogger sesungguhnya bisa tidak digunakan karena pada menu header kebanyakan blog sudah menggunakan navigasi dimana pada navigasi tersebut sudah mengkelompokkan kategori. Dengan navigasi tersebut tentunya akan lebih mudah dipahami dan terlihat cantik. Akan tetapi kembali lagi pada point yang saya jelaskan tadi, bahwasannya jika anda ingin daftar google adsense setidaknya setidaknya label ini sangat diperlukan.

Disamping itu, jika anda ingin meningkatkan penghasilan anda dengan iklan google adsense ternyata ada trobosan baru. Dari eksperimen saya ternyata label bisa juga di sisipkan iklan didalam widget tersebut sebagaimana pada widget popular post. Jadi iklan yang sesuai digunakan pada widget label ini adalah iklan link tautan. Dengan iklan link tautan dan widget label tentunya dapat menyamarkan iklan bagi pengunjung sehingga pengunjung bisa jadi tidak sengaja mengklik iklan link tautan bukan label lantaran dari judul iklan link tautan tersebut sangat menarik dan perhatian bagi pengujung. Dengan begitu, tentunya pendapatan anda akan semakin meningkat.

Baca juga: membuat iklan ditengah artikel secara otomatis dengan java script

Dari pengalaman mas timon juga, kebanyakan dari pendapatan mas timon akhir-akhir ini ia peroleh dari link tautan. Oleh karena itulah setidaknya ada terobosan baru untuk mendesain ulang tampilan label agar sesuai dengan link tautan agar. Dengan tampilan yang mirip dengan link tautan ditambah lagi juga terdapat kode iklan link tautan tentunya akan lebih menarik dan enak dipandang. Hal tersebut tentunya akan berbeda jika label kita standar kemudian di tempatkan iklan link tautan. Coba anda bayangkan, setidaknya selain kelihatan perbedaan bahwa itu adalah sebuah iklan link dan label juga tidak enak dipandang.

Baiklah, jika anda ingin membuat widget label seperti link tautan dan menempatkan iklan link tautan pada widget label. Anda dapat mengikuti tutorialnya dibawah ini:

Baca juga: 3 template premium bisa download secara gratis salah satunya kompiajaib versi 3

Pertama, anda bisa masuk pada login blogger terlebih dahulu kemudian klik menu theme atau template setelah itu pilih edit HML

Kedua, hapus css label pada blog anda agar tidak tabrakan atau saling tertimbun setelah itu ganti dengan css label dibawah ini


/* Label */
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {
font-size:100%;
opacity:10
}
.cloud-label-widget-content {
text-align:left
}
.label-size {
transition: all 0.25s;
-moz-transition: all 0.25s;
-webkit-transition: all 0.25s;
line-height:1.2;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #444444;
font-size: 13px;
text-transform: uppercase;
border: 1px solid #444444;
}
.label-size a,.label-size span{
display: inline-block;
color: #444444;
padding: 6px 8px;
}
.label-size:hover {
border: 1px solid #444444;
}
.label-size:hover a, .label-size:hover .label-count {
color: #444444;
}
.label-count {
margin-left: -12px;
margin-right: 0px;
}
.list-label-widget-content ul li {
width: 100%;
height: 35px;
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: #00acc1;
border: 1px solid #00acc1;
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;
font-weight: normal;
font-family: arial, sans-serif;
font-size: 16px;
margin: 5px auto;
}
.list-label-widget-content ul li a{color:#ffffff!important}
.list-label-widget-content ul li:hover {background-color:#ffffff}
.list-label-widget-content ul li a:hover{color:#00acc1!important}
.list-label-widget-content ul li a{color:#ffffff!important}
.list-label-widget-content ul li:last-child {
margin-bottom: 10px
}
.height100{height:100px}
.displayblock{display:block}


KETERANGAN: untuk color (warna) bisa anda sesuaikan sendiri dengan tampilan iklan link anda. Kreasikan desain warna label sesuai keinginan anda.

Ketiga, setelah anda copas kode css tersebut langkah selanjutnya pastikan sobat juga menghapus widget label pada blog anda terlebih dahulu, dengan cara pada edit HTML di atas ada menu widget pilih aja label maka langsung menuju pada kode widget label. Hapuslah widget label tersebut dan ganti dengan kode widget dibawah ini:


  <b:widget id='Label1' locked='false' title='Kategori' type='Label' version='1'>
    <b:widget-settings>
      <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
      <b:widget-setting name='display'>LIST</b:widget-setting>
      <b:widget-setting name='selectedLabelsList'>Download,Ilmu,Pendidikan,Penelitian,Seputar Islam,Tutorial</b:widget-setting>
      <b:widget-setting name='showType'>USER_SELECTED</b:widget-setting>
      <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<ins class='adsbygoogle displayblock height100' data-ad-client='ca-pub-xxxxxxxx' data-ad-format='link' data-ad-slot='xxxxxxxxx' data-full-width-responsive='true'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
  </b:widget>


Keempat, pada widget tersebut sudah saya sisipkan kode iklan, jadi anda tinggal mengganti tanda xxxxxx dengan ca-pub dan kode slot anda. Jika anda belum memiliki layanan iklan google adsense anda bisa menghapusnya script tersebut.

Kelima, jika dirasa sudah semuanya disetting maka langkah selanjutnya adalah Save Template anda setelah itu F5.

Terakhir, cobalah lihat atau preview dengan melihat tampilan blog anda. Jika menu label tidak muncul maka anda bisa menuju pada menu layout disana ada widget label, klik edit dan simpan.

Demikianlah artikel saya tentang Cara Membuat Widget Label Seperti Iklan Link Tautan Responsive. Semoga bermanfaat. Amin.