Cara Membuat Emoticons / Emotions di Komentar Blog

Cara Membuat Emoticons / Emotions di Komentar Blog

Tentunya kamu tahu apa yang dimaksud dengan emoticon, emoticon adalah lambang yang menunjukkan suatu ekspresi dari seseorang, seperti sedih, tertawa, tersenyum. marah, dan masih banyak lagi variasi yang lainya.

Kerap kali kita menemui blog-blog yang telah mengaplikasikan fungsi dari emoticon ini. Penerapan fungsi emoticon pada komentar blog ini bertujuan agar penampilan blog lebih unik dan semakin user friendly. Berikut ini adalah cara memasang Emotions di komentar Blog.

Cara Membuat Emotions / Emoticons Pada Komentar Blogger


Cara Memasang Emotions Di Komentar Blog
Emotions Pada Komentar


1. Blog kamu di Blogger
2. Masuk ke menu Template ➔ Edit Html
3. Letakan kode dibawah ini, diatas kode  ]]></b:skin>

.emoWrap{ background-color:#fff;  border:2px solid#0054BB; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;  padding:10px 14px;  color:black;  font:bold 12px Tahoma,Arial,Sans-Serif;  text-align:center}
img.emo, input.emoKey{ display:inline-block;  *display:inline;  vertical-align:middle}
input.emoKey{ border:1px solid #ccc;  background-color:white;  font:bold 11px Arial,Sans-Serif;  padding:1px 2px;  margin:0px 0px 0px 2px;  color:black}

4. Selanjutnya letakan kode berikut ini di bawah kode </head>

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://cdn.rawgit.com/Brando07/haisob/newbe/emoticon-haisob.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

4. Save template.

Catatan:
Perhatikan kode berwarna hijau di atas, jika sudah ada kode yang sama maka tidak perlu di pasang lagi.

Sekian mengenai cara memasang Emotions di komentar blog. Salam Bloggers.
Animasi Cubes 3D Menggunakan CSS

Animasi Cubes 3D Menggunakan CSS

Pada kesempatan ini saya akan membagikan cara membuat / menampilkan animasi CSS Cubes 3D di Blogger. CSS selalu menjadi pilihan terbaik buat berekspresi dan sangat menantang untuk mencobanya. Dan berikut ini adalah CSS 3D Cubes yang terinspirasi dari Denzdii Gn.

Penggunaan CSS akan erat sekali dengan peran CSS-Transform. untuk menghasilkan perputaran efek animasi. Mungkin bisa sebagai pelajaran untuk membuat coding CSS Animation menggunakan CSS transform.

Animasi Cubes 3D menggunakan CSS keyframe
CSS Cubes 3D 

CSS Cubes 3D


#viewport { background-color:#000000; width:600px; height:350px; margin:0 auto; position:relative; -webkit-perspective:700px; -webkit-perspective-origin:50% 50%; -moz-perspective:700px; -moz-perspective-origin:50% 50%; -ms-perspective:700px; -ms-perspective-origin:50% 50%; }
.cube { position:absolute; left:50%; top:50%; margin-left:-50px; margin-top:-50px; width:100px; height:100px; -webkit-animation:test 5s infinite; -webkit-transform-origin:50% 50%; -webkit-transform-style:preserve-3d; -moz-animation:test 5s infinite; -moz-transform-origin:50% 50%; -moz-transform-style:preserve-3d; -ms-animation:test 5s infinite; -ms-transform-origin:50% 50%; -ms-transform-style:preserve-3d; }
@-webkit-keyframes test {
    0% { -webkit-transform:rotateX(0deg) rotateY(-45deg); } 50% { -webkit-transform:rotateX(90deg) rotateY(315deg); } 100% { -webkit-transform:rotateX(180deg) rotateY(-45deg); }
}
@-moz-keyframes test {
    0% { -moz-transform:rotateX(0deg) rotateY(-45deg); } 50% { -moz-transform:rotateX(90deg) rotateY(315deg); } 100% { -moz-transform:rotateX(180deg) rotateY(-45deg); }
}
@-ms-keyframes test {
    0% { -ms-transform:rotateX(0deg) rotateY(-45deg); } 50% { -ms-transform:rotateX(90deg) rotateY(315deg); } 100% { -ms-transform:rotateX(180deg) rotateY(-45deg); }
}
.cube .plain { position:absolute; display:block; content:""; width:100px; height:100px; background:rgba(0,0,0,0.75); border:2px dashed #fff; -webkit-box-sizing:border-box; -webkit-transform-origin:50% 50%; -webkit-transform-style:flat; -webkit-animation:bordercolor 5s infinite; -moz-box-sizing:border-box; -moz-transform-origin:50% 50%; -moz-transform-style:flat; -moz-animation:bordercolor 5s infinite; -ms-box-sizing:border-box; -ms-transform-origin:50% 50%; -ms-transform-style:flat; -ms-animation:bordercolor 5s infinite; }
@-webkit-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
@-moz-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
@-ms-keyframes bordercolor {
    0% { border-color:#0cf; } 50% { border-color:#fff; } 100% { border-color:#0cf; }
}
.cube .plain:nth-child(1) { -webkit-transform:rotateY(-90deg) translate3d(0,0,100px); -moz-transform:rotateY(-90deg) translate3d(0,0,100px); -ms-transform:rotateY(-90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(2) { -webkit-transform:rotateY(90deg) translate3d(0,0,100px); -moz-transform:rotateY(90deg) translate3d(0,0,100px); -ms-transform:rotateY(90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(3) { -webkit-transform:rotateX(-90deg) translate3d(0,0,100px); -moz-transform:rotateX(-90deg) translate3d(0,0,100px); -ms-transform:rotateX(-90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(4) { -webkit-transform:rotateX(90deg) translate3d(0,0,100px); -moz-transform:rotateX(90deg) translate3d(0,0,100px); -ms-transform:rotateX(90deg) translate3d(0,0,100px); }
.cube .plain:nth-child(5) { -webkit-transform:rotateX(180deg) translate3d(0,0,100px); -moz-transform:rotateX(180deg) translate3d(0,0,100px); -ms-transform:rotateX(180deg) translate3d(0,0,100px); }
.cube .plain:nth-child(6) { -webkit-transform:translate3d(0,0,100px); -moz-transform:translate3d(0,0,100px); -ms-transform:translate3d(0,0,100px); }

HTML Cubes 3D


<div id="viewport">
    <div class="cube">
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
        <div class="plain">
        </div>
    </div>
</div>

Live Demo:




Penggunaan CSS akan erat sekali dengan peran CSS-Transform. untuk menghasilkan perputaran efek animasi. Mungkin bisa sebagai pelajaran untuk membuat coding CSS Animation menggunakan CSS transform @ keyframe.
Cara Daftar Adfly Lengkap Screenshot Terbaru 2018

Cara Daftar Adfly Lengkap Screenshot Terbaru 2018

Adfly merupakan situs jasa pemasangan iklan yang akan membayar publisher / penerbit iklannya jika telah mencapai titik payout via Paypal dan via Payoneer. Cara mendaftar di Adfly cukup mudah, siapa saja bisa mendaftar dan berpartisipasi dalam program periklanan Adfly untuk mendapatkan penghasilan tambahan dari internet.

Adfly merupakan situs yang memungkinkan kita mendapatkan uang dari setiap pengunjung yang meng-klik link yang di persingkat menggunakan pemendek link Adfly.

Cara mendaftar di Adfly


Jika kamu ingin menjadi penerbit iklan Adfly , silahkan simak baik baik cara daftar Adfly dan panduan cara menggunakan Adfly dibawah ini :

1. Masuk ke alamatnya di sini : Adf.ly

Halaman adfly
Klik Join Now

2. Kamu bisa mendaftar menggunkan Facebook atau bisa juga klik Join Now
3. Jika mendaftar dengan mengklik Join Now maka akan muncul:

Daftar di Adfly
Isikan data kamu

Keterangan :
  • Your Name : Tulis dengan Nama lengkap kamu
  • Username : ID yang nanti dipake buat masuk (Biasanya menggunakan E-mail)
  • Email : Masukkan alamat email
  • Retype Email : Masukan kembali email tadi
  • Password : Password yang kamu pake login nanti
  • Retype Password : Ulangi password tadi
  • Human Check : Masukkan text yang tertera (Jangan sampai salah)
4. Jika semua data sudah di isi silahkan Ceklis pada I aggre To the Terms and Conditions dan klik Join.
5. Nanti akan ada email konfirmasi dari Adfly ke email kamu(jika tidak ada, periksa di folder spam).
6. Kunjungi URL yang diberikan Adfly (Link Aktifasi) dan masukan kode konfimasi yang diberikan adf.ly. Klik Confirm Registration.

Konfirmasi
Konfirmasi

7. Akan muncul keterangan "Acount Confirmed, your acount has been successfully confirmed" tandanya akun sobat telah berhasil dibuat.

Cara mendapatkan Dollar dari Adfly


1. Copy link yang ingin kamu pendekkan, lalu pastekan di kotak yang tersedia
2. Jika kamu telah mendapatkan link dari Adfly, Copy dan Paste link tersebut ke sosial media atau blog kamu


3. Contoh link yang di perpendek di adfly : http://dashsphere.com/7V9L
4. Setelah seseorang mengklik link tadi, nanti akan munsul iklan dan akan menunggu 5 detik lalu akan keluar tulisan skip add.
5. Selamat sobat sudah mendapatkan dollar dari orang yang mengeklik link yang sobat pendekkan tadi.

Untuk mendapatkan dollar yang lebih dari Adfly, pendekkan link yang banyak pula dan juga sebarkan di mana-mana seperti jejaring sosial, blog atau apapun itu.

Situs ini akan membayar publisher / penerbit iklannya jika telah mencapai titik PayOut dengan bayaran minimal 5 USD via Paypal dan minimal 10 USD via Payoneer.

Sekian cara mendaftar di Adfly, semoga bermanfaat.
Cara Daftar Adfoc us Lengkap Screenshot Terbaru 2018

Cara Daftar Adfoc us Lengkap Screenshot Terbaru 2018

Adfocus merupakan situs jasa pemasangan iklan yang akan membayar publisher / penerbit iklannya jika telah mencapai titik payout via Paypal. Cara mendaftar di Adfocus cukup mudah, siapa saja bisa mendaftar dan berpartisipasi dalam program periklanan Adfoc.us untuk mendapatkan penghasilan tambahan dari internet.

Adfocus merupakan situs yang memungkinkan kita mendapatkan uang dari setiap pengunjung yang meng-klik link yang di persingkat menggunakan pemendek link Adfocus.
Cara daftar Adfoc.us
Cara daftar Adfoc.us

Langkah-langkah cara daftar di Adfocus


1. Kunjungi alamatnya disini atau klik Join disini.
2. Seperti pada gambar di bawah klik salah satu tulisan SIGN UP

Langkah ke 2 cara daftar di Adfoc.us
Sign Up

3.  Masukkan data-data yang diperlukan,  jika semua data sudah di isi silahkan Ceklis pada I aggre To the Terms and Conditions dan klik Join Now

Langkah ke 3 cara daftar di Adfoc.us
Join Now

4. Buka email milik kamu yang tadi kamu daftarkan. Pada email terdapat Username dan Password yang nantinya akan kita pakai untuk login di AdFoc.us
5. Masuk kembali ke halaman AdFfoc.us
6. Pada halaman bagian bawah segera isikan alamat email dan password kamu sesuai yang kamu daftarkan atau yang ada pada pesan email yang dikirim oleh AdFoc.us kemudian klik Login

Langkah ke 6 cara daftar di Adfoc.us
Login

7.  Klik lagi account setting untuk melengkapi dan memperbaharui data-data kamu.

Langkah ke 7 cara daftar di Adfoc.us
Account Setting

8. Jika telah tampak pesan seperti gambar di bawah ini maka kamu sudah bisa mempergunakan akun kamu untuk berburu dollar dari AdFoc.us

Langkah ke 8 cara daftar di Adfoc.us
Successfully update

9. Masukan alamat URL apa saja lalu klik SHRINK untuk memperpendek link,

Langkah ke 9 cara daftar di Adfoc.us
SHRINK

10. Share URL yang sudah di SHRINK tadi dimana saja, misalnya di MedSos, Blog dan lain sebagainya.

Begitu orang mulai mengklik URL pendek yang kamu buat di AdFoc us, kamu mulai membuat uang! AdFoc us menentukan pembayaran berdasarkan tarif pengiklan yang membayar untuk iklan interstisial ditampilkan ketika pengunjung mengklik URL yang kamu persingkat di Adfocus.
CSS Margin dan Padding

CSS Margin dan Padding

Tentu saja bagi kamu yang sudah berpengalan dengan kode css, sudah biasa otak-atik template pastilah sudah tidak asing dengan margin dan padding ini, tapi mungkin saja sahabat-sahabat lain masih bingung dengan margin dan padding ini. nah berikut saya akan coba jelaskan dengan singkat tentang CSS margin dan padding.

MARGIN


MARGIN
Margin

Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain.

Contoh:

#element { margin: 10px;} 

Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; } 

Ini berarti elemen memiliki: -margin-top, margin-bottom:"10px" dan -margin-left, margin-right:"20px"

#element { margin: 10px 20px 5px 15px; } 

Elemen ini memiliki -margin-top:10px, margin-right:20px,  margin-bottom:5px, margin-left:15px

Atau bisa dengan versi panjangnya:

#element { margin-top:10px; margin-right:5px; margin-bottom:5px; margin-left:10px;} 

Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative.

PADDING


PADDING
Padding

Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside space dari suatu elemen yang diatur disekitar area konten. Padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar. Padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi dan isi dari elemen.

Contoh:

#element { margin: 10px;} 

Ini berarti elemen memilki Padding yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; } 

Ini berarti elemen memiliki: -Padding-top, Padding-bottom:"10px" dan -Padding-left, Padding-right:"20px"

#element { margin: 10px 20px 5px 15px; } 

Elemen ini memiliki -Padding-top:10px, Padding-right:20px,  Padding-bottom:5px, Padding-left:15px

Atau bisa dengan versi panjangnya:

#element {Padding-top:10px; Padding-right:5px; Padding-bottom:5px; Padding-left:10px;} 

Nah semoga kamu dapat lebih memahami margin dan padding dalam mengedit css di blog kamu.
Cara Pasang Efek Loading Weather Loader di Blogger

Cara Pasang Efek Loading Weather Loader di Blogger

Hai Sobat apa kabar? Pada kesempatan saya akan brtbagi tutorial cara membuat efek loading page weather loader di Blog. Oh ya, pada waktu yang lalu saya telah membagikan cara membuat efek loading jam dan tanggal di blog, siapa tahu sobat tertarik langsung cek aja artikelnya.

Sambil menunggu konten blog di load keseluruhnya animasi loading ini akan di perlihatkan kepada pengunjung, begitu pula setiap berpindah halaman maka animasi loading ini akan di tampilkan.

Memasang Efek loading (Weather Loader) di Blogger
 Efek loading Blog - Weather Loader

Cara Membuat Efek Loading Weather Loader di Blogger


1. Di Blog Blogger.
2. Pilih menu Template ➔ Edit Html
3. Selanjutnya, letakkan javascript dibawah ini tepat diatas kode </head>

<script src='https://cdn.rawgit.com/Brando07/share/newbe/load-seocips.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='https://cdn.rawgit.com/Brando07/share/newbe/seocipsWeatherLoader.css' rel='stylesheet' type='text/css'/>

4. Kemudian letakan kode di bawah ini di bawah <body>

<div id='load-page-seocips'>
<div class='preloader-seocips' style='opacity: 1; '>
  <svg enable-background='new 0 0 10 10' height='10px' id='sun-seocips' style='opacity: 1; margin-left: 0px; margin-top: 0px;' version='1.1' viewBox='0 0 10 10' width='10px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
    <g>
      <path d='M6.942,3.876c-0.4-0.692-1.146-1.123-1.946-1.123c-0.392,0-0.779,0.104-1.121,0.301c-1.072,0.619-1.44,1.994-0.821,3.067C3.454,6.815,4.2,7.245,5,7.245c0.392,0,0.779-0.104,1.121-0.301C6.64,6.644,7.013,6.159,7.167,5.581C7.321,5,7.243,4.396,6.942,3.876z M6.88,5.505C6.745,6.007,6.423,6.427,5.973,6.688C5.676,6.858,5.34,6.948,5,6.948c-0.695,0-1.343-0.373-1.69-0.975C2.774,5.043,3.093,3.849,4.024,3.312C4.32,3.14,4.656,3.05,4.996,3.05c0.695,0,1.342,0.374,1.69,0.975C6.946,4.476,7.015,5,6.88,5.505z' fill='none'/>
      <path d='M8.759,2.828C8.718,2.757,8.626,2.732,8.556,2.774L7.345,3.473c-0.07,0.041-0.094,0.132-0.053,0.202C7.319,3.723,7.368,3.75,7.419,3.75c0.025,0,0.053-0.007,0.074-0.02l1.211-0.699C8.774,2.989,8.8,2.899,8.759,2.828z' fill='none'/>
      <path d='M1.238,7.171c0.027,0.047,0.077,0.074,0.128,0.074c0.025,0,0.051-0.008,0.074-0.02l1.211-0.699c0.071-0.041,0.095-0.133,0.054-0.203S2.574,6.228,2.503,6.269l-1.21,0.699C1.221,7.009,1.197,7.101,1.238,7.171z' fill='none'/>
      <path d='M6.396,2.726c0.052,0,0.102-0.026,0.13-0.075l0.349-0.605C6.915,1.976,6.89,1.885,6.819,1.844c-0.07-0.042-0.162-0.017-0.202,0.054L6.269,2.503C6.228,2.574,6.251,2.666,6.322,2.706C6.346,2.719,6.371,2.726,6.396,2.726z' fill='none'/>
 <path d='M3.472,7.347L3.123,7.952c-0.041,0.07-0.017,0.162,0.054,0.203C3.2,8.169,3.226,8.175,3.25,8.175c0.052,0,0.102-0.027,0.129-0.074l0.349-0.605c0.041-0.07,0.017-0.16-0.054-0.203C3.603,7.251,3.513,7.276,3.472,7.347z' fill='none'/>
 <path d='M3.601,2.726c0.025,0,0.051-0.007,0.074-0.02C3.746,2.666,3.77,2.574,3.729,2.503l-0.35-0.604C3.338,1.828,3.248,1.804,3.177,1.844C3.106,1.886,3.082,1.976,3.123,2.047l0.35,0.604C3.5,2.7,3.549,2.726,3.601,2.726z' fill='none'/>
 <path d='M6.321,7.292c-0.07,0.043-0.094,0.133-0.054,0.203l0.351,0.605c0.026,0.047,0.076,0.074,0.127,0.074c0.025,0,0.051-0.006,0.074-0.02c0.072-0.041,0.096-0.133,0.055-0.203l-0.35-0.605C6.483,7.276,6.393,7.253,6.321,7.292z' fill='none'/>
 <path d='M2.202,5.146c0.082,0,0.149-0.065,0.149-0.147S2.284,4.851,2.202,4.851H1.503c-0.082,0-0.148,0.066-0.148,0.148s0.066,0.147,0.148,0.147H2.202z' fill='none'/>
 <path d='M8.493,4.851H7.794c-0.082,0-0.148,0.066-0.148,0.148s0.066,0.147,0.148,0.147l0,0h0.699c0.082,0,0.148-0.065,0.148-0.147S8.575,4.851,8.493,4.851L8.493,4.851z' fill='none'/>
 <path d='M5.146,2.203V0.805c0-0.082-0.066-0.148-0.148-0.148c-0.082,0-0.148,0.066-0.148,0.148v1.398c0,0.082,0.066,0.149,0.148,0.149C5.08,2.352,5.146,2.285,5.146,2.203z' fill='none'/>
 <path d='M4.85,7.796v1.396c0,0.082,0.066,0.15,0.148,0.15c0.082,0,0.148-0.068,0.148-0.15V7.796c0-0.082-0.066-0.148-0.148-0.148C4.917,7.647,4.85,7.714,4.85,7.796z' fill='none'/>
 <path d='M2.651,3.473L1.44,2.774C1.369,2.732,1.279,2.757,1.238,2.828C1.197,2.899,1.221,2.989,1.292,3.031l1.21,0.699c0.023,0.013,0.049,0.02,0.074,0.02c0.051,0,0.101-0.026,0.129-0.075C2.747,3.604,2.722,3.514,2.651,3.473z' fill='none'/>
 <path d='M8.704,6.968L7.493,6.269c-0.07-0.041-0.162-0.016-0.201,0.055c-0.041,0.07-0.018,0.162,0.053,0.203l1.211,0.699c0.023,0.012,0.049,0.02,0.074,0.02c0.051,0,0.102-0.027,0.129-0.074C8.8,7.101,8.776,7.009,8.704,6.968z' fill='none'/>
 </g>
  </svg>
  <svg enable-background='new 0 0 10 10' height='10px' id='cloud-seocips' version='1.1' viewBox='0 0 10 10' width='10px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'>
    <path d='M8.528,5.624H8.247c-0.085,0-0.156-0.068-0.156-0.154c0-0.694-0.563-1.257-1.257-1.257c-0.098,0-0.197,0.013-0.3,0.038C6.493,4.259,6.45,4.252,6.415,4.229C6.38,4.208,6.356,4.172,6.348,4.131C6.117,3.032,5.135,2.235,4.01,2.235c-1.252,0-2.297,0.979-2.379,2.23c-0.004,0.056-0.039,0.108-0.093,0.13C1.076,4.793,0.776,5.249,0.776,5.752c0,0.693,0.564,1.257,1.257,1.257h6.495c0.383,0,0.695-0.31,0.695-0.692S8.911,5.624,8.528,5.624z' fill='none'/>
  </svg>
  <div class='rain-seocips'>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
    <span class='d-seocips'/>
  </div>
  <div class='text'>
    LOOKING OUTSIDE FOR YOU... ONE SEC
  </div>
</div>
</div>

4. Save template, dan lihat hasilnya.
Cara Memasang Iklan Di Tengah Postingan Tanpa Merusak Gambar

Cara Memasang Iklan Di Tengah Postingan Tanpa Merusak Gambar

Sebenarnya tutorial ini sudah pernah saya bagikan di postingan yang berjudul cara memasang iklan di tengah postingan, tapi karena pada tutorial sebelumnya ada kekurangannya yakni gambar yang letaknya di tengah postingan akan bentrok dengan iklan sehingga membuat gambar di tengah postingan jadi rusak. Nah oleh karena itu pada kesempatan ini saya akan membagikan tutorial cara memasang iklan di tengah postingan / artikel tanpa merusak gambar yang ada.

Dengan cara di bawah ini diharapkan iklan yang terpasang tidak akan bentrok dengan gambar yang ada di tengah postingan sehingga mungkin ini cara terbaik jika kamu ingin meletakan iklan ditengah postingan khusunya untuk kamu pengguna Blogger.

Cara Memasang Iklan Di Tengah Postingan Tanpa Merusak Gambar
Cara Memasang Iklan Di Tengah Postingan

Cara Membuat Iklan Tampil di Tengah Postingan Tanpa Merusak Gambar


Siapkan script iklan yang ingin kamu pasang di blog kamu. Usahakan pilih iklan yang ukurannya sesuai dengan lebar postingan.

1. Convert script / kode iklan di sini: Parse Script Iklan.
2. Lalu kalian copy kode iklan kalian dan kemudian pastekan di kotaknya lalu klik convert.
3. Setelah di klik convert maka kamu akan mendapatkan kodenya.
4. Jika sudah, Pilih menu Template ➔ Edit HTML
5. Cari kode <data:post.body/> yang di tandai tag kondisional yang menunjukan post body yang akan ditampilkan di halaman posting ( bukan di homepage ) contohnya seperti dibawah ini:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

6. Tambahkana kode <div id='jobmiddlenew'> dan kode penutupnya  </div> dibawahnya, sehingga menjadi :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='jobmiddlenew'>
<data:post.body/>
          </div>
 </b:if>

7. Selanjutnya cari kode </body> dan letakan kode dibawah ini diatasnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#addcodemiddle{display: none;}
</style>
<div id='addcodemiddle'>
IKLAN DISINI    </div>
 <script type='text/javascript'>
var str1=document.getElementById(&quot;jobmiddlenew&quot;).innerHTML;
var str2=str1.length;
var str3=str2/2;
var substr = str1.substring(str3, str2);
var n = substr.search(&quot;&lt;br&gt;&quot;);
if(n&lt;0)
{
n = substr.indexOf(&#39;.&#39;);
if(n&lt;0)
{
n=0;
}
var firsthalf = str1.substring(0, str3+n+1);
var secondhalf = str1.substring(str3+n+1, str2);
}
else
{
var firsthalf = str1.substring(0, str3+n+4);
var secondhalf = str1.substring(str3+n+4, str2);
}
var addcode=&quot;<center>&quot;+document.getElementById(&quot;addcodemiddle&quot;).innerHTML+&quot;</center><br/>&quot;;
var newbody=firsthalf+addcode+secondhalf;
var strnew=document.getElementsByClassName(&quot;post-body entry-content&quot;);
strnew[0].innerHTML=newbody;
document.getElementById(&quot;addcodemiddle&quot;).innerHTML=&quot;&quot;;
</script>
  </b:if>

8. Ganti tulisan IKLAN DISINI dengan kode script iklan milikmu yan sudah di parse tadi.
9. Save dan lihat hasilnya.

Salah satu penempatan iklan terbaik adalah memasang iklan yang bisa menarik perhatian pembaca. Misalnya dengan membuat iklan tampil di tengah postingan artikel blog. Sehingga, memberikan peluang untuk memperbesar penghasilan jika memasang iklan jenis PPC seperti adsense dan sejenisnya.

Sekian, semoga bermanfaat.