Cara Membuat Tombol Demo dan Download di Postingan Blog

Cara Membuat Tombol Demo dan Download di Postingan Blog

Tombol Demo dan Download punya banyak kegunaan pada dunia blog. Bagi setiap blogger, tombol ini digunakan untuk keperluan masing-masing. Kebanyakan, tombol ini digunakan untuk menampilkan halaman demonstrasi atau link download dari pokok bahasan yang sedang diulas disatu postingan.

Kebanyakan blogger mengulas pemasangan tombol ini dengan mengharuskan kita masuk ke halaman HTML. Kali ini kita akan memasang tombol Demo dan Download dengan cara mudah. Tombol yang akan kita buat tampilannya seperti dibawah ini :

Pemasangan dengan cara konvensional mengharuskan kita masuk ke akun blogspot dan memilih tab Edit HTML pada tab Template. Setelah didalam kita diminta untuk mencari kode ]]></b:skin> dan mempaste script dibawah ini tepat dibawahnya.

Namun ada cara lebih mudah, jika Anda merasa kurang percaya diri bertamu dengan halaman HTML. Kita pilih tab Sesuikan yang tepat disebelah tab Edit HTML, dimana tampilannya lebih interaktif.

Setelah itu, pilihan selanjutnya adalah Tindak Lanjut dan Tambahkan CSS. Pada kotak isian CSS, masukkan script dibawah ini.

/* -- http://blogosmile.blogspot.com/ --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

Tarus dimana saja. Namun jika telah banyak menyimpan script CSS didalamnya, pilihlah tempat dibagian bawah. Lihat Gambar.

Setelah itu simpan dan kembali ke dhasbor. Setiap kali ingin menampilkan tombol Demo dan Download pada postingan, sisa memasukkan script dibawah ini kedalam postingan dengan mode HTML.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blogosmile.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://blogosmile.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Kode berwarna mewah pada script diatas silahkan ganti dengan halaman demo yang telah Anda buat. Anda juga bisa menghapus tombol Demo atau Download jika ingin menampilkan satu saja. Caranya hapus satu baris dari <li> sampai </li>.

Jika punya pertanyaan, tak perlu sungkan untuk meninggalkan komentar dibawah ini. Semoga bermanfaat.

Cara Daftar Google Adsense dari Blogspot

Cara Daftar Google Adsense dari Blogspot

Menjadi seorang blogger, selain sebagai hobby juga bisa menghasilkan keuntungan finansial. Jika ada anggapan, ngeblog hanya menghabis-habiskan duit membayar warnet atau kopi (warung kopi wifi) bisa menjadi salah besar.

Karena sebenarnya, Google telah menyediakan layanan earning di flatform blogspot. Mungkin Anda sudah sering mendengar cara mencari uang melalui internet atau blog. Ada banyak sekali pilihan diluar sana. Namun tidak akan kita bahas pada postingan kali ini.

Salah satu yang menjadi unggulan mencari uang lewat internet adalah Google Adsense. Selain karena nama besar Google sebagai penyedia layanan, Adsense juga memiliki daya tarik bagi banyak blogger.

Bagaimana tidak, caranya sangat gampang, kita dibayar oleh Google hanya kalau ada orang yang mengklik iklan yang kita pasang di blog. Pembahasan lebih jauh soal Adsense akan kita bahas terpisah.

Untuk kali ini kita akan bahas cara mendapat penghasilan dari blogspot melalui jasa Google Adsense. Kita akan mendaftar Adsense dari blogspot, Ikuti langkah-langkahnya sebagai berikut:

Cek Ketersediaan Adsense

Jika selama ini Anda ngeblog menggunakan bahasa Indonesia hingga pengaturannya pun berbahasa Indonesia, dipastikan tab pada Dasboard blogspot Anda tidak tersedia layanan Penghasilan. Olehnya itu kita harus mengaktifkannya. Caranya :

1. Masuk ke Dasboard blogspot Anda, lalu pilih tab Setelan dan pilih menu Bahasa dan Pemformatan.

• Pada menu pilihan bahasa, rubah format Bahasa Indonesia menjadi Bahasa Inggris, baik Amerika atau Inggris United Kingdom. Setelah itu Save. 

• Refrest Dasboard blogspot Anda, sekarang akan muncul tab baru yakni Penghasilan dan isinya Adsense. 

• Selanjutnya melihat ketersediaan layanan untuk blog Anda. Jika Anda membuka tab Penghasilan dan dibagian bawah kotak terlihat tampilan seperti dibawah ini, maka urungkan dulu niat Anda. Tunggu hingga tombol Mendaftar Adsense tidak buram lagi dan tak ada tulisan disampingnya. 

Daftar Adsense Melalui Blogspot

• Jika tombol Mendaftar Adsense telah bisa ditekan. Lakukan pendaftaran. Gambarnya seperti dibawah ini. 

• Ada tiga tahap melakukan pendaftaran Adsense melalui blogspot. Di langkah pertama Anda akan diberi pilihan menggunakan akun email seperti yang sedang digunakan, atau menggunakan email lain. Silahkan pilih Ya, Gunakan (email Anda). 

• Tahap kedua, hanya menjabarkan informasi tentang blog Anda. Pilih bahasa yang Anda gunakan di blog Anda, lalu klik Lanjutkan. 

• Tahap ketiga dan terakhir adalah formulir permohonan. Isi semua pilihan, mulai Negara atau wilayah, Zona waktu dan Jenis akun (personal atau bisnis). Pilih sesuai pilihan yang ada dan paling sesuai dengan Anda. sementara untuk keterangan pribadi, usahakan isi dengan keterangan Asli, Nama, Alamat, Kota, Provinsi, Kode Pos dan Telepon, setelah itu tekan Kirim Permohonan Saya. 

1. Kini formulir Adsense Anda telah dikirim ke Google. 
2. Tunggu 1 kali 24 jam atau paling lama 1 minggu untuk mendapatkan jawaban. 
3. Dari pengalaman blogosmile ~ mendaftar Adsense, setelah mengirimkan formulir, beberapa jam kemudian surat cinta dari google tiba. Jawaban apakah Anda diterima atau tidaknya menjadi penyedia layanan iklannya.Kelihatan memang mudah melakukan pendaftaran, dan kemudahan itu tidak segampang diterima oleh Google. Oleh karena itu ada banyak hal yang harus diperhatikan jika hendak menggunakan layanan Adsense.
4. Selanjutnya, share pengalaman Anda mendaftar di Adsense pada kolom komentar dibawah ini. Kita berbagi pengalaman untuk saling menguatkan. Terima kasih 

good luck & happy blogging:)

Cara Mudah Verifikasi PIN Google Adsense

♞Cara Mudah Verifikasi PIN Google Adsense

Walau terbilang lama, namun PIN (Personal Identification Number) atau Nomor Pengenal Pribadi dari Google Adsense datang juga. Akun Adsense bloGoooblok ~ menerima pemberitahuan pengiriman PIN pada 12 Maret 2015. PIN tersebut akhirnya tiba 10 April 2015.

Walau hampir satu bulan lamanya, namun PIN yang dinanti-nanti akhirnya tiba juga. Sebenarnya hampir menyerah untuk menunggu, karena pengalaman pertama di 2009 silam, PIN yang ditunggu tak kunjung datang. Pikirnya juga akan bernasib serupa. Tapi ternyata tidak.

Sebelum jauh membahas tentang cara melakukan verifikasi alamat menggunakan PIN, ada baiknya membahas apa kegunaan PIN Adsense ini.

Bagi Anda publisher Adsense, pasti akan dihadapkan pada verifikasi PIN ini. Adsense punya aturan verifikasi untuk ambang batas penghasilan. Jumlah ambang batas verifikasi ini berbeda-beda tiap negara. Khusus di Indonesia, jika penghasilan Adsense telah mencapai $10 maka harus diverifikasi.

Verifikasi ini dilakukan Google secara manual. Artinya, pihak Google akan mengirimkan PIN verifikasi ke alamat yang didaftarkan. Jika PIN tersebut tidak diterima selama 6 bulan sejak diterbitkan, maka penghasilan dari Google Adsense tidak bisa dicairkan. Seberapa pun besarnya.

Jika PIN telah dikirim oleh Google, maka dashboard Adsense Anda akan muncul pemberitahuan berwarna merah. Pemberitahuan ini baru akan hilang jika Anda telah melakukan verifikasi.

Pihak Google Adsense memberi kita keleluasaan untuk meminta PIN sebanyak tiga kali. Namun, jika PIN tidak juga diterima dan proses verifikasi tidak dilakukan, maka bersiaplah menangis sendu, karena akun Google Adsense Anda akan dibanned atau dinonaktifkan.

Untuk penjelasan lebih lengkapnya, silahkan baca di Support Google.

Cara Verifikasi Alamat dengan PIN Adsense

Karena surat Google Adsense telah tiba ditangan. Maka langkah selanjutnya adalah menyelesaikan proses verifikasi. Setelah membuka dengan hati-hati (bahagia tiada tara) maka muncullah PIN yang begitu berharga.

Proses verifikasinya ikuti langkah-langkah berikut ini:

• Buka surat dari Google Adsense
• Kemudian login ke akun Google Adsense Anda
• Ada beberapa langkah untuk mengakses bagian verifikasi Adsense. Namun yang paling mudah adalah mengklik bagian notifikasi yang muncul di dashboard Adsense. Anda juga bisa mengakses bagian Account Settings dan cari bagian Verifikasi Alamat

• Jika telah muncul, maka tampilannya akan seperti gambar berikut. 

• Silahkan masukkan PIN Anda pada form Masukkan PIN. Hati-hati jangan sampai salah memasukkan PIN sebanyak tiga kali. Jika sudah yakin dengan PIN yang dimasukkan silahkan klik Kirim PIN. 
• Jika berhasil, maka Anda akan dihadapkan pada informasi akun. Itu artinya PIN yang Anda masukkan sukses. 

Lalu, setelah verifikasi akun telah berhasil, apa yang akan dilakukan. Tentu saja, langkah selanjutnya adalah meningkatkan penghasilan. Dengan begitu, Anda akan lebih cepat mendapatkan dollar dari Google Adsense.

Harus diingat, bahwa Google Adsense bukan cara menghasilan uang dengan cepat di internet. Semua juga harus diusahakan. Salah langkah, bisa-bisa Anda kehilangan segalanya. Jadi rawatlah akun Adsense Anda dengan baik agar bisa terus berpenghasilan.

Salam sukses!

good luck & happy blogging :)

Cara Mudah Membuat Kotak Subscribe Keren di Blog

♥ Cara Membuat Kotak Subscribe Keren di Blog

blogosmile image

Kotak langgaran artikel atau subscribe bagi blogger memiliki banyak fungsi. Apalagi bagi blogger yang jumlah pengunjungnya cukup tinggi. Kotak langganan ini bisa membantu sekaligus meningkatkan jumlah pembaca.

Postingan kali ini, BS akan membahas cara pembuatan kotak langganan dengan bentuk yang keren. Sebelumnya, kita pernah juga membuat kotak langganan serupa namun bentuk yang sederhana.
Kotak Subscribe yang akan kita buat kali ini modelnya seperti berikut:

Selain bentuknya lebih menonjol di blog, karena berwarna cerah dan punya gambar gif, kotak Subscribe ini juga sekaligus menyertakan tombol RSS, Twitter dan Google Plus. Dengan begitu pengunjung akan lebih dimudahkan berinteraksi dengan kita melalui media sosial.

Tapi sebelum membuatnya, ada baiknya Anda mengenal dulu: Apa Itu FeedBurner dan Bagaimana Membuatnya?. Hal ini penting karena kotak subscribe ini akan bertautan dengan FeedBurner.

Baiklah, untuk memasang kotak subscribe keren ini di blog Anda, ikuti langkah berikut.

• Login ke akun blogspot Anda dan masuk ke halaman layout / tata letak. 
• Klik Add a Gadget / Tambahkan Gadget
• Klik HTML/JavaScript

• Lalu copy paste script berikut dan save. 

<style>
    #dgenera-blog {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }

    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}

#email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
  
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
    
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{
  
        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
  
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow li {

        display:inline;
        border:0;
      }

    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7xsPWn1LNY6W76S1EU6rrTvkAu1f4Bl27VwiFLap0TTywHmM837yvAQXuXbMQUOHuS1QEoMpABE4eVD_M2y_LkJlMOv6mHSaVrB4uBVQJa_ALuIdtuIJTmMm2IGzGcXMxFXKFcMHiGg/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmLVqDlGHsynbwi3ufxccGYSwAVz6rVOOhiEus4l03pe4ZABQADHzVHhSDWJlBRfPmyZ2fgJ8mbx8p6Pt2ummC7ZxReuikuXECgOmmSguZRrDKzlD1oFjZT7H0TxlQ4ft-UDJDs30qjE/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJTHafUGaHQ-j_rPNIpRc1YCPbeeGZ1rauJPGYQAQvroT85sEi3aXibZ80Bs2mNNtzoTznWXMrOSErczSJJAKN4UO35xVLBvwq3aJkKRJp5o8Ns1ApMcVyzkBHGotLZbb6iCwzsvS0E8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5IukfssKIjF-GLPaHyQ8gil7WrL6GfVBBZxF7fvoMkkEDYb-I9qoRabSLIaA6Fhf9TMBWhJK96SXSXjhEGxT02UXZ9McPc9fiNXMmrfL3q8K9XFUHD6HS_xmM0iRyqITokZOHAbnq0L1/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family:  impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
    </style>
    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #333;
        }
    </style>
    <![endif]-->

<div id="Blogoooblok-blog" >

<div class="emailicon"><p>Dapatkan Update Artikel Gratis! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogosmile', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter Email Anda Disini..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />

<input type="hidden" value="blogosmile" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/blogosmile" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/blogoooblok"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author"href=https://plus.google.com/u/0/+wisarahardi1/poststarget="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

• Pada script diatas, perhatikan yang ditandai warna merah. Ganti dengan alamat FeedBurner Anda.
• Tulisan yang ditandai Kuning ganti dengan alamat Twitter dan Google Plus Anda.
• Tulisan yang dicetak tebal bisa Anda ganti dengan kata-kata Anda sobat sendiri

Jika telah selesai di simpan,maka hasilnya akan nampak seperti gambar diatas. Mudah bukan !!!

good luck & happy blogging :)