Cara Membuat Postingan Gambar Menjadi Responsive

Cara Membuat Postingan Gambar Menjadi Responsive - Responsive berarti bisa menyesuaikan ukuran berdasarkan device apapun. Jadi jika membuat postingan berupa gambar, akan lebih baik jika gambar tersebut mampu menjadi responsive, sehingga ukuran nya dapat menyesuaikan sesuai dari mana pengunjung mengakses situs sobat, entah itu dari PC, Laptop,Mobile, dll, intinya gambar tersebut dapat menyesuaikanya.

Untuk membuat Gambar Menjadi Responsive, ternyata tidaklah begitu sulit, cobalah tips ini, sobat tinggal menambahkan kode CSS kedalam template blogspot yang sobat gunakan. Bagaimana Caranya ?? Yuk lihat dibawah ini :

1. Masuk ke mode Edit HTML pada template

2. Letakkan kode css dibawah ini tepat diatas </style> atau ]]</b:skin>

.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

3. Langkah Terakhir save template.

Itulah tips singkat  Cara Membuat Postingan Gambar Menjadi Responsive, semoga bermanfaat.

Cara Mudah Memasukan File PDF,EXEL,POWERPONT Ke Dalam Postingan Blog

Cara Mudah Memasukan File PDF,EXEL,POWERPONT Ke Dalam Postingan Blog - Siapa tahu sobat blogger ingin memasukan file seperti exel,powerpoint,pdf kedalam postingan blog nya, apabila belum tahu caranya silahkan ikuti postingan saya kali ini. Sesekali mungkin perlu juga kita menambahkan file pendukung kedalam postingan kita agar pembaca blog kita semakin betah membaca artikel kita, semakin lengkap artikel kita maka akan semakin baik dimata pembaca dan juga mbah google.

Okey langsung saja ya berikut cara nya bagaimana cara memasukan file pdf,dll, kedalam postingan blog kita :

1. Pertama : Login dulu ke email gmail
2. Kedua : Setelah login masuk ke https://drive.google.com
3. Ketiga : Setelah login, pilih file yang akan diupload. Lihat gambar :

Upload File

Pilih File

Proses Upload Berjalan

4. Langkah Keempat : Setalah upload selesai klik file yang sudah kita upload dan Klik Share.

5. Langkah Kelima : Setelah itu pilih Press Change dan Pilih Public On The Web

6. Langkah Keenam : Setelah itu klik quick acces tool bar dan pilih  Embed Code dan Copy kodenya kedalam postingan HTML blogspot.

7. Langkah Ketujuh : Paste kode hasil embed kedalam postingan blogspot, pakai HTML ya jangan pilih yang compose.

Oke cukup sekian artikel Cara Mudah Memasukan File PDF,EXEL,POWERPONT Ke Dalam Postingan Blog. Semoga bermanfaat.

Cara Membuat Widget Iklan Menarik Seperti Google Adsense

Cara Membuat Widget Iklan Menarik Seperti Google Adsense - Membuat tampilan iklan memang gak bisa asal-asalan ya sob, selain penempatan iklan yang tepat, penampilan iklan yang menarik juga menjadi faktor penentu agar pengunjung mau mengeklik iklan yang ada di blog atau web kita.

Iklan - iklan yang ada biasanya berbentuk banner dan juga iklan berbentuk text. Untuk iklan berbentuk banner, untuk membuat nya agar terlihat menarik sepertinya lebih mudah, kita tinggal membuat banner semenarik mungkin maka selesai deh iklan banner kita. Lalu bagaimana kalau kita mau menampilkan jenis iklan berbentuk text tapi bisa terlihat menarik, mungkin kita bisa mencontoh nih, iklan text milik nya Google Adsense, penampilanya terlihat menarik walaupun hanya berbentuk text. Lihat penampakanya dibawah ini :

Okey,,menarik kan ?? Lalu bagaimana cara membuatnya ?? Yuk kita bahas dibawah ini :



1. Login ke Akun Blogger Anda. Lalu Masuk ke Dashboard >> Template >> Edit HTML
2. Masukan Script Berikut diatas Code </head>

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

3. Lalu Masukan Code CSS Berikut Tepat diatas Code ]]></b:skin> atau </style>

* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

3. Lalu Buatlah Sebuah Widget HTML/Javascript lalu isi dengan Code Berikut :


<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
            <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Kang Ismet</span>
    <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCd_BqtXKtwhceZtm-3hqTzHU6vAJitBsfErFb7cLoWiKp6Chtm77F0t7EaEpBrMC51lKSZ8k45zt0UCP1AoXDnwxo8xo5I26VQD4ZvINGGO6Ljyntw2LtoilSGGDFnmlvCA0xz9lC5ks/s1600/info-iklan.png'/></a></span>    
</div>

4. Save dan Lihat Hasilnya.

Okey sob,,cukup sekian artikel Cara Membuat Widget Iklan Menarik Seperti Google Adsense. Semoga tips ini bermanfaat.

Cara Menonaktifkan Komentar Link Aktif Di Blogspot

Cara Menonaktifkan Komentar Link Aktif Di Blogspot - Sangat menjengkelkan apabila ada blogger yang berkomentar meninggalkan live link/link hidup atau yang biasa disebut dengan istilah nyepam. Jika sobat memiliki blog yang sudah memiliki visitor lumayan tinggi, pasti akan semakin banyak blogger yang memberikan komentar pada blog sobat. Kita sebagai pemilik blog seharusnya senang dengan hal ini, tapi apa boleh buat, kenyataanya kita malah dibuat was-was akibat ulah beberapa blogger yang suka nyepam dengan meninggalkan link hidup saat komentar. Jika hal ini dibiarkan terus maka akan mengganggu kesehatan SEO sobat di mata mbah google.

Untuk itu kita perlu memberikan proteksi pada blog kita yang bisa secara otomatis membuat Link hidup tadi menjadi mati. Jadi sobat blogger gak perlu capek-capek lagi menghapus satu persatu komentar yang berisi Link hidup tadi. Contoh lihat screenshot milik saya dibawah ini :

Bagaimana cara membuat nya ?? Yuk kita lihat cara mudah dibawah yaitu Cara Menonaktifkan Komentar Link Aktif Di Blogspot :

1. Pertama Simpan salah satu JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script> 

2. Save atau simpan, dan lihatlah hasilnya.

Cukup mudah bukan ?? Dengan menggunakan cara ini sobat gak perlu khawatir lagi jika ada para blogger yang ingin nyepam di blog sobat.  Okey, selamat praktek dan selamat mencoba.

Happy Blogging

Cara Membuat Tombol Like To Download Di Blogspot

Cara Membuat Tombol Like To Download - Malam sob,, kali ini saya akan share salah satu tips yang bisa sobat gunakan untuk mendapatkan dan menambah Like fanpage sobat. Pernah gak sob lagi berkunjung ke sebuah blog, lalu kita ingin mendownload sesuatu tapi kita diminta untuk me like fanpage terlebih dahulu,baru setelah itu link download nya akan terbuka ?? Nah kalau sobat mengalami hal seperti ini, mau gak mau kan pasti kita akan mengikuti perintahnya terlebih dahulu untuk bisa mendapatkan file yang akan kita download. So, tips ini seperti nya lumayan cukup ampuh untuk menambah like fanpage kita.

Note : Sobat harus menyiapkan sesuatu ( Bisa ebook, video tutorial,dsb ) yang bisa membuat pengunjung me Like sebagai imbalan atas Like nya

Cara Membuat Tombol Like To Download :

1. Silahkan sobat masuk ke link ini Tombol Like To Download 
2. Kemudian Isi form yang diminta dan ikuti petunjuknya.

3.Setelah itu, sobat akan melihat preview dan kodenya. Salin kode embed dan tempel ke website atau blog.

4. Setelah menambahkan kode ke blog, pengunjung sobat akan melihat instruksi untuk me-”Like” sebelum download bisa dilakukan, dan setelah mereka mengklik “Like”, maka tombol download akan muncul.

Okey, sampai disini sudah selesai sob langkah pembuatanya. Bagaimana cukup mudah kan  Membuat Tombol Like To Download ? Jika ada yang kurang jelas dan ingin ditanyakan silahkan berkomentar dibawah sob. Trims

Cara Membuat Halaman Muka Blog Tersendiri

Tips Blog - Cara Membuat Halaman Muka Blog Tersendiri ini berguna buat sobat yang ingin menampilkan halaman muka blog sobat tanpa ada daftar postingan. Mugkin sekali-kali sobat ingin bereksperimen dengan blog kesayanganya untuk menciptakan sesuatu yang berbeda dari sebelumnya. Tips ini saya ambil blog DTE. Baik langsung saja berikut cara membuat nya :

Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>

 dan tepat di bawahnya, letakkan kode ini:

</b:if>

 sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section>
</b:if>

Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:

Dari elemen itu sobat bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka.Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.

Demikian sob tutorial Cara Membuat Halaman Muka Blog Tersendiri. Semoga Bermanfaat.

Source code : www.dte.web.id