Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts

Cara Menempatkan Iklan Adsense di Tengah Artikel Blog

1:41 AM Add Comment
Para publisher Adsense tentunya akan mencari cara agar mendapat jumlah klik yang maksimal. Bagaimana tidak, besar maupun kecil pendapatan Adsense bergantung dari jumlah klik yang diterima dari pemasangan iklan di blog. Dan yang harus digaris bawahi adalah dimana penempatan iklannya yang memiliki potensi untuk di klik iklan tersebut.

Oleh karenanya, kita harus pintar-pintar memilih penempatan iklan di blog agar mendapatkan jumlah klik semaksimal mungkin. Ada berbagai cara untuk meningkatkan performa iklan Adsense, terutama dengan menempatkan iklan ditengah postingan atau artikel dalam blog. Cara itu cukup efiseien dikarenakan pada posisi iklan ditengah artikel, para pembaca blog kita dapat melihat jelas iklan yang tertera, dan besar kesempatan pula iklan yang muncul dapat diklik jika para pembaca merasa sesuai dengan yang imereka butuhkan.

Untuk menempatkan iklan diposisi manapun sebenarnya tidaklah sulit. Kita hanya perlu mengetahui kode script html agar kita dapat menyesuaikan penempatannya. Setelah itu juga kita harus tau ukuran iklan dari Adsense yang sesuai template blog yang kita gunakan.

Ada dua cara untuk meletakkan iklan Adsense ditengah artikel. Caa yang pertama ialah menggunakan widget dalam tata letak settingan template. Namun sayangnya tak semua template support untuk menempatkan iklan Adsense melalui penambahan fitur widget dalam tata letak pada template blogger. Kita bisa menggukan metode yang kedua untuk menempatkan iklan Adsense di tengah artikel, yaitu dengan cara penambahan script html. Untuk mengetahui caranya, ikuti langkah-langkah yang kami berikan.


  1. Login terlebih dahulu ke akun Blogger Anda
  2. Pada pilihan menu yang tampil di sisi kiri pili bagian tab Template, lalu pilih Edit HTML untuk menuju ke bagian editor blog template
  3. Dalam mode editor HTML, gunakan ctrl+F untuk mempermudah pencarian, kemudian ketikan <data:post.body/> lalu ganti kode <data:post.body/> dengan script di bawah ini:

  4. <div expr:id='"ads1" + data:post.id'></div>
    <div style="clear:both; margin:10px 0">
    SCRIPT IKLAN ADSENSE YANG TELAH DIPARSE
    </div>
    <div expr:id='"ads2" + data:post.id'><data:post.body/></div>
    <script type="text/javascript">
    var obj0=document.getElementById("ads1<data:post.id/>");
    var obj1=document.getElementById("ads2<data:post.id/>");
    var s=obj1.innerHTML;
    var t=s.substr(0,s.length/2);
    var r=t.lastIndexOf(" ");
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
    </script>
    Catatan: Biasanya terdapat beberapa kode <data:post.body/>, carilah tag <data:post.body/> yang diapit oleh tag kondisional <b:if cond=’data:blog.pageType == &quot;item&quot;’>. Umumnya tag tersebut berada pada kode <data:post.body/> yang ke dua.
  5. Setelah copy-paste kode script diatas ke dalam editor html blog, save terlebih dahulu
  6. Login ke Google Adsense, lalu pilihlah kode iklan Adsense yang sesuai dengan blog yang kamu kelola, dan copy kode iklan yang Anda pilih
  7. Sebelum paste kode iklan di editor html pada blog, Anda perlu parse kode iklan tersebut di website yang menyediakan free parse html seperti Blogrowds. Paste kode iklanmu kemudian mulailah parse script iklannya, lalu copy script iklan yang telah diparse
  8. Kembali ke editor html pada Blogger, lalu letakan kode iklan yang telah di parse di bagian "SCRIPT IKLAN ADSENSE YANG TELAH DIPARSE", kemudian klik save.
Seperti itulah cara untuk meletakan iklan Adsense ditengah artikel. Jika belum memahami sepenuhnya, Anda bisa berkomentar dalam postingan ini. Sekian dari kami untuk tutorial cara meletakan iklan Adsense ditengah artikel.



Cara Manual Membuat Link Terbuka Di Tab Baru

6:46 PM Add Comment
"Target Blank" merupakan code yang memiliki fungsi sebagai memeritahkan agar link yang ada pada saat diclick akan membuka secara otomatis di tab baru.Adapun manfaat metode tersebut ialah, guna memperkecil nilai bounce rate, karena visitor banyak meng-klik blog Anda tanpa meninggalkan laman yang sedang dilihat.

Dalam hal ini yang harus dilakukan ialah, menambahkan kode<target="_blank"> pada link. Jika pada link standar adalah:

<a href="http://seooptimalisasi.blogspot.co.id">Contoh</a>

Maka untuk mebuat link terbuka di tab baru dibutuhkan kode "Target Blank". Seperti contoh diatas, jika difungsikan untuk membuka link di tab baru maka penulisannya:


<a href="http://seooptimalisasi.blogspot.co.id" target="_blank">Contoh</a>

Namun jika Anda ingin menulisnya dalam postingan blog di Blogger, cukup ketik kata yang ingin dimasukan hyperlink, lalu seleksi bagian kata itu, klik Link dibagian atas saat menulis posting. Masukan halaman tautan yang ingin dituju pada kolom Web Adress, dan centang bagian "Open this link in a new window".
Hal yang sama jika Anda ingin memasukan link pada bagian gambar. Seperti itulah Cara Manual Membuat Link Terbuka Di Tab Baru. Selamat mencoba, see you.
ads

Cara Membuat Kotak Quote Dengan Fungsi Scroll Up/Down

12:30 AM Add Comment
 Bagi Anda ingin membuat quote yang "hemat" dalam sebuah postingan, Anda bisa menggunakan quote yang bisa di gulir ke atas dan ke bawah. Quote dalam bahasa Indonesia diartikan sebagai kutipan atau mengutip. Mengutip dalam sebuah postingan mempunyai banyak cara, tapi disini hanya ingin memberi tahu apa yang pernah saya pelajari. Kalau Anda belum tahu seperti apa bentuk quote dalam kotak yang bisa scroll up/down, Anda bisa lihat contoh dibawah ini

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium augue vel erat auctor scelerisque facilisis id nisi. Nullam vulputate luctus dictum. Aenean consectetur nibh felis, sed tristique quam tincidunt quis. Nam lacinia, diam ut viverra sodales, lorem dui sagittis tellus, vel congue ipsum orci ultricies odio. Duis sed tincidunt enim, quis tincidunt tortor. Sed id ligula massa. Vestibulum nec dui leo. Phasellus auctor lectus eros, vitae consectetur augue feugiat at. Praesent pharetra quam vel lectus mollis, sed cursus diam gravida.
Praesent diam quam, tempus at nibh non, accumsan gravida ex. Donec commodo lectus ut leo vehicula, nec interdum neque aliquet. Nam vel porta enim. Phasellus non porta nulla. Vestibulum lacus lorem, dictum vel interdum at, aliquam eget nibh. Sed et malesuada velit. Etiam venenatis, justo at elementum varius, ex risus ultricies felis, sit amet ullamcorper lorem ex ut augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum laoreet placerat fringilla. Maecenas semper lacinia dictum. Morbi efficitur ipsum sit amet purus venenatis, eu dictum sapien imperdiet.

Dari contoh diatas saya mengambil dua paragraf dari Lorem Ipsum atau sebuah dummy text yang biasa dijadikan contoh kalimat saat membuat website, dari dua paragraf tersebut Anda bisa melihat kotak kutipan yang bisa sroll up/down. Untuk cara membuatnya cukup mudah, buat saja postingan baru, lalu saat menulis postingan klik "HTML", lalu copy-paste kan script di bawah ini ke dalam HTML postingan Anda:

<div style="background-color: #d8d8d8; border: 1px solid black; height: 200px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN KUTIPAN ANDA DISINI</div>
Penjelasan untuk pengaturan:
  • Untuk merubah garis ketebalan, Anda bisa merubah bordernya menjadi yang Anda inginkinkan, diatas saya mencontohkan hanya 1px solid.
  • Untuk merubah warna garis, Anda bisa merubahnya sesuai dengan tema warna pada blog Anda. Kode d8d8d8 adalah kode warna untuk warna gray, untuk mencari kode warna, Anda bisa buka Photoshop ataupun semacamnya.
  • height: 100px dan width: auto adalah pengaturan tinggi dan lebarnya, Anda bisa sesuaikan.
Kalau Anda sudah copy-paste kan kode script tersebut didalam editor HTML, maka kembali untuk menulis postingan dengan mengklik "Compose". Jika Anda benar memasukkan kode script tersebut maka akan keluar kotak, lalu ketikkan yang ingin Anda tulis didalam kotak quote tersebut yang bertuliskan "MASUKKAN KUTIPAN ANDA DISINI!!". Saat tulisan melebihi ambang batas, fungsi scroll barua akan muncul.

Hanya begitu saja caranya, semoga bisa dipahami.

Cara Membatasi Jumlah Postingan Pada Label Dalam Halaman

12:30 AM Add Comment

Mengatur jumlah postingan yang akan ditampilkan pada halaman label sangatlah berguna. Jika tidak dibatasi jumlah postingannya, maka yang terjadi adalah saat membuka halaman label yang dipilih akan ditampilkan semuanya. Untuk itu diperlukan membatasi jumlah tampilan tersebut guna mempercepat proses loading apabila salah satu tag di dalam  blog dipilih.

Secara umum, link label berada pada bagian menu label, breadcrump , dan widget label. Secara manual, kita bisa membatasi jumlah postingan yang akan ditampilkan, caranya dengan menambahkan atribut max-result dan jumlah posting disetiap url label. Langkah yang harus dilakukan adalah:

  • Masuk ke akun blogger Anda, kemudian setting template dibagian edit html
  • Untuk membatasi jumlah postingan di bagian menu, tambahkan kode max-results=9 dibagian link seacrh label, contohnya seperti pada blog ini:

<a href='http://seooptimalisasi.blogspot.co.id/search/label/Blogging'>Blogging</a>


  • Tambahkan max-results=9 jika ingin membatasinya dengan jumlah Sembilan potingan, sebagai contoh:

<a href='http://seooptimalisasi.blogspot.co.id/search/label/Blogging?&amp;amp;max-results=9'>Blogging</a>

  • Tahap selanjutnya, untuk membatasi keseluruhan jumlah postingan label, maka terapkan sebagai berikut.
  • Masih pada bagian edit html, cari semua kode seperti:


expr:href='data:label.url'

  • Kemudian tambahkan max-results=9 disetiap kode tersebut menjadi seperti


expr:href='data:label.url + &quot;?&amp;amp;max-results=9&quot;'

  • Simpan Template

Catatan: Anda bisa merubah angka sesuai dengan jumlah postingan yang Anda inginkan

Seperti itulah Cara Membatasi Jumlah Postingan Yang Ditampilkan Di Halaman Search Label. Selamat mencoba, see you.
ads

Membuat Kotak Kutipan Di Blog

6:42 AM Add Comment
Kolom quote atau yang sering di sebut kolom untuk mengutip memang terkadang dibutuhkan para penulis blogger. Metode ini adalah untuk memasukkan kata ataupun kalimat ke dalam sebuah kolom dalam postingan yang dibuat. Kolom quote biasa digunakan para blogger untuk menuliskan tutorialnya agar mudah dibedakan antara bait ke bait. Untuk membuatnya dibutuhkan kode/script HTML. Mungkin tutorialnya sudah banyak sekali disebar para blogger, namun tidak ada salahnya untuk menuliskan kembali untuk memberi tahu yang belum mengetahuinya.
Ada beberapa kode script yang diperuntukkan untuk membuat sebuah kolom dipostingan tertentu, tampilannyapun bisa berbeda-beda. Pada tutorial kali ini membahas tentang membuat kolom yang terlihat kotak atau persegi saja agar postingan tidak terlihat monoton.

Copy-paste kan saja script di bawah ini kedalam editor HTML saat menulis postingan:

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; background: #d8d8d8 none repeat scroll 0% 0%; border: 1px solid black; overflow: auto;">
    <blockquote>Masukkan Kutipan Anda Disini!!</blockquote></div>

Catatan:

  •  #d8d8d8 = untuk warna latar pada kolom quote
  •  border: 1px = Untuk ketebalan garis
  • black = Untuk warna garis

Warna pada kolom bisa Anda rubah sesuai dengan yang diinginkan. Jika Anda sudah meletakkan script tersebut. Jika penempatannya sudah benar, akan nampak tulisan "Masukkan Kutipan Anda Disini!!" dan mulailah untuk menulis yang ingin Anda kutip, agar lebih mudah, tulis quotenya di dalam editor compose, silahkan klik priview terlebih dahulu. Jika Anda kesulitan untuk menekan enter saat selesai menulis quote, tambahkan kode <br /> setelah kode </div> di editor HTML.
Semoga bisa dipahami, selamat mencoba.

Membuat Menu Dropdown Di Blogger

3:00 AM Add Comment
 Dropdown Menu kadang dibutuhkan dalam sebuah blog, terlebih untuk blog yang memiliki banyak katagori yang dibahas. Awalnya sempat dibuat pusing dengan templatte dari Blogger, karena saat beberapa kali memasukkan kode standar untuk membuat tabel menu dengan fungsi dropdown, alhasil fungsi tersebut tidak mau muncul pada menu navigasi yang dibuat.

Pada akhirnya mencoba untuk mengganti design templatte yang berbeda, tapi masih templatte bawaan yang diberikan oleh pihak Blogger, akhirnya berhasil. Pada satu kesimpulan ternyata tidak semua design templatte yang diberikan oleh pihak Blogger bisa membuat menu navigasi dengan fungsi dropdown, hanya templatte tertentu saja yang bisa.

Menu dropdown atau sub-menu biasanya tidak muncul dikarenakan tertutup oleh elemen body. Script HTML yang dimasukkan pada bagian head di templatte tertentu biasanya dibuat tidak setara dengan body, atau secara simpelnya elemen yang ada pada bagian atas dibuat paling dalam, sehingga fungsi dari menu dropdown tidak terlihat karena terhalang oleh latar utama pada bagian entry,

Untuk membuat menu navigasi dengan fungsi dropdown biasanya sama saja, hanya script nya saja yang sedikit berbeda. Kalau ingin mencoba debgan cara yang sederhana, bisa ikuti atau copy-paste saja script pada tutorial kali ini. Langkah-langkah yang harus dilakukan sebagai berikut:

  • Login ke Blogger
  • Masuk pada dashboard Blogger lalu pilih pada pilihan Templatte
  • Klik edit HTML, lau akan muncul script HTML keseluruhan
  • Klik sembarang pada bagian HTML, tekan tombol CTRL + F untuk mempermudah pencarian
  • cari atau ketikkan kode ]]></b:skin>
  • Copy-paste script di bawah ini

#Menudp {
            background: #fff;
            width: auto;
            height: 35px;
            font-size: 12px;
            font-family: Impact;
            color: #fff;
            font-weight: bold;
            margin-bottom: 30px;
            padding: 2px;

        }
        #Box {
            width: 875px;
            float: left;
            margin: 0;
            padding: 0;
        }

        #punch {
            margin: 0;
            padding: 0;
        }
        #punch ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #punch li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #punch li a, #punch li a:link, #punch li a:visited {
            color: #333333;
            display: block;
            font-size: 16px;
            font-family: Impact, sans-serif;
            font-weight: normal;
            text-transform: none;
            margin: 0;
            padding: 9px 15px 8px;
        }
        #punch li a:hover, #punch li a:active {
            background: #e31d28;
            color: #fcfbf8;
            margin: 0;
            padding: 9px 15px 8px;
            text-decoration: none;
        }
        #punch li li a, #punch li li a:link, #punch li li a:visited {
            background: #fcfbf8;
            width: 150px;
            color: #eb2626;
            font-size: 14px;
            font-family: Impact;
            font-weight: normal;
            text-transform: none;
            float: none;
            margin: 0;
            padding: 7px 10px;
            border-bottom: 1px solid #FFF;
            border-left: 1px solid #FFF;
            border-right: 1px solid #FFF;
        }
        #punch li li a:hover, #punch li li a:active {
            background: #1f1e1e;
            color: #ffffff;
            padding: 7px 10px;
        }
        #punch li {
            float: left;
            padding: 0;
        }
        #punch li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 170px;
            margin: 0;
            padding: 0;
        }
        #punch li ul a {
            width: 140px;
        }
        #punch li ul ul {
            margin: -32px 0 0 171px;
        }
        #punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul {
            left: -999em;
        }
        #punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, #punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover ul {
            left: auto;
        }
        #punch li:hover, #punch li.sfhover {
            position: static;
        }
}

  • Save atau Simpan Templatte

Catatan:
Letakkan script tersebut tepat diatas kode ]]></b:skin>. Pada bagian warna bisa Anda rubah dan disesuaikan dengan tema warna yang anda gunakan, Pada script diatas menggunakan warna dasar merah(#e31d28), hitam(#333333), dan putih(#fff). Lanjut ke langkah berikutnya:

  • Lalu pindah pada pilihan Tata Letak di dashbooard
  • Pilih Tambahkan Gadget yang berada dibawah header
  • Pilih HTML/JavaScript
  • Judul biarkan saja kosong, pada bagian konten, masukkan script seperti dibawah ini


<div class="Menudp">
    <div id="Menu">
        <div id="Box">
              <ul id="punch">
                  <li><a href="Masukkan URL Yang Anda Tuju">Home</a></li>     
                  <li>
                    <a href="#">Dropdown Menu</a>
                        <ul>                    
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>            
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>                                                    
                        </ul>
                  </li>
                  <li><a href="Masukkan URL Yang Anda Tuju">Tanpa Dropdown</a></li>              
                  <li>
                        <a href="#">Dropdwn Menu 2</a>
                        <ul>                    
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>                
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>
                        </ul>
                  </li>                                                  
             </ul>
        </div>
    </div>
</div>

  • Klik save atau simpan

Catatan:
Utuk mempermudah mengeditnya, saya sarankan untuk copy-paste di Notepad terlebih dahulu agar lebih mudah merubahnya. Pada bagian "Masukkan URL Yang Anda Tuju" adalah dimana URL akan tertuju saat di klik. Pada bagian namanya, Anda bisa rubah sesuai yang Anda inginkan. Anda bisa menambahkan ataupun mengurangi pilihan pada menu. Untuk pilihan menu dengan pilihan dropdown tertulis:

                  <li>
                    <a href="#">Dropdown Menu</a>
                        <ul>                      
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 1</a></li>              
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 2</a></li>
                            <li><a href="Masukkan URL Yang Anda Tuju">Dropdown 3</a></li>                                                      
                        </ul>
                  </li>


Selamat mencoba