Pilih Warna Baground Yang Anda Suka
Latest

4 Situs Pembuat Banner Online Gratis

kevinservis 31 Mar 2013




www.rocketbanner.com
Situs ini menyediakan fasilitas pembuatan banner yang sederhana. Anda tinggal memilih background, mengubah teks, memilih warna dan jenis font. Setelah cocok, klik tombol Generate. Jreengg.. jadilah banner anda. Anda bisa menyimpannya dengan klik kanan-save picture atau copy kode html dan taruh di web / blog anda.
Fasilitas banner yang disediakan situs ini agak bagus, berbentk flash banner. Pertama anda klik tombol Create. Pilih ukuran banner yang dikehendaki, mulai yang kecil sampai yang panjang. Pilih background yang anda inginkan. Ada banyak background dengan berbagai macam kategori. Anda juga bisa mengupload gambar dan foto sebagai background. Klik tombol Create lagi, anda akan dibawa ke sebuah jendela editing. Jika anda terbiasa dengan program prentasi, anda pasti bisa menyunting bagian ini. Anda tinggal pilih animasi teks, ganti teks anda. Anda bisa menambah slide sesuai keinginan. Setiap slide terdiri atas backgorund, teks dan animasinya. Setelah jadi anda bisa langsung download bannernya dalam bentuk flash.

Nama siutsnya agak aneh, seperti hendak menjadikan banner sebagai makanan ringan. Untuk membuat banner di situs ini anda harus mendaftar dulu atau masuk menggunakan akun facebook anda. Setelah masuk di dashboard, anda memilih kran banner. Tinggal pilih template yang sudah disediakan, atau memulai dengan blank banner. Anda akan dibawa ke jendela editor yang lengkap. Silahkan mengisi teks, mengganti gambar, atau mengatur efek. Setelah jadi anda bisa menyimpan banner itu. Sayangnya, anda tidak bisa mendownloadnya dalam bentuk gif maupun flash sebelum upgrade menjadi premium member alias bayar. Anda bisa copy kode html-nya, itupun akan diberi watermark pada bannernya. Tapi anda bisa copy linknya dan meletakkan pada blog / web anda.
Situs yang ini juga mudah membuat bannernya. Tidak perlu mendaftar. Anda tinggal pilih template sesuai ukuran, lalu edit teksnya. Anda jga bisa mengganti backgrond image dengan gambar / foto anda. Setelah cocok, klik tombol Generate. Anda bisa download file banner dalam bentuk flash. Atau anda bisa copy kode html-nya. Tapi banneranda akan disertai teks dari situs ini, letaknya biasanya di pojok dan kecil. Kalau anda ingin teks ini tidak tercantum, anda harus mendaftar dan membayar. 
read more
 

Cara Membuat Email Subscribe di Bawah Postingan Blog

kevinservis 28 Mar 2013


Hanya sekedar mengisi waktu jeda sambil mengumpulkan ide untuk menulis artikel baru, pada kesempatan kali ini saya akan berbagi kepada sobat tentang bagaimana cara membuat email subscribe tepat di bawah postingan yang dilengkapi dengan fitur social bookmark lainnya seperti tombol like fans page facebook, twitter, google plus & rss feedburner.

Widget yang satu ini tidak kalah menarik dari widget popup like box fans page facebook with timer countdown, popup email subscribe dan widget social bookmarking all in one yang telah saya posting beberapa waktu yang lalu. Namun bedanya, widget yang satu ini penempatannya tepat di bawah postingan atau artikel sehingga lebih mudah dilihat oleh para pengunjung ketika selesai membaca artikel pada blog.

Cara Membuat Email Subscribe di Bawah Postingan Blog


Baiklah, setelah sobat melihat gambar di atas dan demonya, langsung aja yuk simak bagaimana cara memasang widget tersebut pada blog. Simak baik-baik ya, jangan sampai ada yang ketinggalan (hehehe).
  • Login ke Blogger 
  • Template » Edit HTML » Expand Template Widget
  • Copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
form.feedburner {margin: 20px 0 0;display: block;clear: both;}
.lostsectorstyle {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXBmBkXTrwchfyODiHgWZON2xlDPH1ckN3c8odmZC8kO20IvX4mn0aU0alDaoZwtRYEF9UTz04TrtQ6B2bvYi8En8v2KlFQkLoy3rjawWPkrKOBXcQduksJ81RDtwuBDDLDyWQYFwtOxg/s1600/lostsector.blogspot.com-email-icon.png) no-repeat scroll 4px center transparent;padding: 7px 15px 7px 35px;color: #666;font-weight: bold;text-decoration: none;border: 1px solid #D3D3D3;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
.lostsectorsubmit {color: #666;font-weight: bold;text-decoration: none;padding: 6px 15px;border: 1px solid #D3D3D3;cursor: pointer;-moz-border-radius: 4px;-webkit-border-radius: 4px;-goog-ms-border-radius: 4px;border-radius: 4px;background: #fbfbfb;background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);}
#lostsector-widget {-moz-border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;-goog-ms-border-radius: 10px 10px 10px 10px;border-radius: 10px;
background: none repeat scroll 0 0 transparent;border: 1px solid #D3D3D3;padding: 8px;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;width: 480px;-webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);-moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);-webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;}
#lostsector-widget:hover {background: none repeat scroll 0 0 #FFF;-moz-box-shadow: 1px 1px 2px #CCC inset;-webkit-box-shadow: 1px 1px 2px #CCC inset;box-shadow: 1px 1px 2px #CCC inset;}
#lostsector-widget td {padding: 3px 0;}
</style>
<center><br/><div id='lostsector-widget'>
 <div id='emailwidget'>
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
  <tbody>
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
     Get free daily email updates!
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=http://kevinservis.blogspot.com/feeds/posts/defaul&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='http://kevinservis.blogspot.com/feeds/posts/defaul'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='lostsectorstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
     <input alt='' class='lostsectorsubmit' title='' type='submit' value='Submit'/>
    </form>
   </td>
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/http://kevinservis.blogspot.com/feeds/posts/defaul' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmsR8nuYMn-3CwT0tGYB9BIzuNYhcxV8mk2g61KEVrP0sDT27DJljSTSgeugFMSvnOQ-2Rr1XN3vE0NmeCy7uF-pFLYmjTjbRpC3ljp5ndWZ3w31UCAQ8hG8i8H3_qo-gLjYR5ihKyRhQ/s1600/lostsector.blogspot.com-rss-icon.png'/></a>
    <a href='http://twitter.com/isbernendi' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFgK2BTinObqhdhQB-hhMR6fFb2_acaWk4h0j-aa8zl0RP8452pl5Cu0yYGqysn98XpvQ1gCAQ1D013NfAlc4Ha325B9jlKpVWNDegc1apYzeEQBeWL-Ka1K7lBc_tZr-QhkK1JGwMrkI/s1600/lostsector.blogspot.com-twitter-icon.png'/></a>
    <a href='http://www.facebook.com/http://www.facebook.com/pages/Service-center/511635435549312?ref=hl' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw3sza_7wWu0L5cG1mewLun4pyWvRG_ZpcuPnlHWb-PQctRs0tbatWAbT3qVmMs8bWV7hfN5mQh6i3BI5-deIbnScEoIZdFDJIMsp3YhOitPL2gS_hyphenhyphen2XuI3iRiwzqm9d4ipbZX1vTjA8/s1600/lostsector.blogspot.com-fb-icon.png'/></a>
    <a href='https://plus.google.com/106198054042140408383/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2c5lkFbSghbBAXf-p4QA8UJP9-zGLr50fivBYksaYSmB1Te3BKSeOTENB3oTiGpri8NmOfc2fHv2w69j7ACZtkQXPK4m8vt7GqZlPj_0DbbovbXIQ4Ch2hFk-3114RSqJAtuNLxGUk-I/s1600/lostsector.blogspot.com-g+-icon.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://lostsector.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <div class='fb-like' data-href='http://www.facebook.com/http://www.facebook.com/pages/Service-center/511635435549312?ref=hl' data-layout='button_count' data-send='false' data-show-faces='false' data-width='80'/><br/>
  <a class='twitter-follow-button' href='http://twitter.com/isbernendi' rel='nofollow'/>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
 </div>
</div>
</center>
</b:if>
Keterangan :
Ganti KUNING dengan username feedsburner
Ganti BIRU MUDA dengan username twitter
Ganti BIRU TUA dengan username facebook fans page
Ganti MERAH dengan id profil google plus yang sobat punya
  • Langkah terakhir, simpan template
Selamat mencoba dan semoga bermanfaat buat sobat. Jika ada kendala dalam pemasangan widget ini, silahkan memberikan komentar di bawah, Insya Allah saya akan membantu sobat untuk memasang widget tersebut. Terima kasih dan salam bloggers...!!!


read more
 

Membuat Spoiler Pada Blog

kevinservis

Sobat sudah pasti mengenal yang namanya spoiler apalagi yang sering main di forum-forum. Fungsi dari spoiler ini sangatlah penting, bukan hanya di forum-forum maupun untuk blog dan jika sobat belum mengerti apa itu spoiler, saya akan menjelaskan sedikit tentang spoiler ini. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. 

Selain bisa dipasang pada postingan, spoiler ini juga bisa dipasang di sidebar atau widget. Tinggal bagaimana sobat mengkreasikan sendiri dan kode yang digunakan juga sama serta tidak ada kode tambahan yang dibutuhkan...!!!

Berikut contoh spoiler :
Judul Spoiler:
Letakkan teks atau kode script (gambar atau video) di sini

Cara Menggunakan!

Nah, untuk pembuatan spoiler ini sendiri sangatlah mudah. Berikut langkah-langkahnya :
  • Login ke blogger
  • Pilih New Post atau Entri Baru seperti membuat postingan biasa
  • Pilihlah pada mode Edit HTML saat membuat postingan
  • Gunakan kode script berikut ini untuk membuat spoiler:
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
</div>
</div>
</div>
  • Teks yang berwarna merah di atas bisa sobat ganti sesuai dengan keinginan sobat.
  • Pilih Publikasikan atau Pratinjau untuk melihat hasilnya..

 

 

read more
 

Effect Shadow Di Bawah Sidebar Blog

kevinservis

Sobat sedang membaca artikel tentang Effect Shadow Di Bawah Sidebar Blog.yang kami publikasikan pada 23 Maret 2013 Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah Mahfid Mayanto berkunjung kembali ke blog sobat.

Sidebar icon
S
ebenarnya ada bagian draf yang harus Kang Mahfid publikasikan ,tapi biarlah saya tunda dulu ,mengingat teman adalah segala galanya maka aku penuhi dulu permintaan teman yang pingin tahu cara membuat Effect Shadow Di Bawah Sidebar Blog,
kalau belum jelas silahkan sobat lihat pada bagian sidebar blog ini atau lihat screenshoot di samping .Sebelum nya sedikit info saja buat sobat yang akan melakukan trik ini ,akan lebih jelas /bagus jika warna background sidebar/sidebar berwarna putih atau transparent dengan bagian body berwarna background #fff (putih/white).
Oke untuk sobat yang ingin pasang trik ini silahkan ikuti tutorialnya yang akan saya jabarkan secara lengkap seperti di bawah ini

  1. Loggin ke blogger  dengan ID sobat
  2. Saat ada di dasboard pilih template >>Edit Html >> ingat download lengkap dulu template untuk menjaga kemungkinan salah dalam pengeditan..
  3. Expand Template Widget 
  4. Cari kode ]]></b:skin> taruh kode css berikut tepat di atas nya (gunakan Ctrl + F untuk mempermudah pencarian) berikut kode nya :
  5. #shadow2 {   background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivPOwdA0VLaqtyQokXBKpCsgfW0hw_Rxd1LW9OAK1TTlpG86I8XuI41VsR6BKbZa0up975mkAQGKf7he5x2YN5NgXcJTgOdlXZszHEgk2tDVXAluSSQLIAqye6f7rIiaoQCGbfMHrVDec/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent;   height: 20px;   width: 300px; }
  6. Nah kode Css nya sudah di pasang sekarang penempatan shadownya untuk hal ini saya contohkan yang akan di beri shadow adalah Resent Post seperti gambar di atas maka gunakan Crtl + F cari kode Resent Post maka contoh kode nya kurang lebih akan seperti di bawah ini 
  7. <b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
    <div style='overflow:auto; width:auto;height:200px;'>
      <div class='widget-content'>
        <data:content/>
      </div></div>
    <div id='shadow2'/>
  8. Perhatikan kode yang diseleksi berwarna pink adalah nama widget yang akan di beri effect shadow,sedangkan kode yang diseleksi berwarna kuning adalah tambahan saja agar widget sidebar ada fungsi scroll nya ,jadi jika sidebar sobat tidak menggunakan fungsi scroll maka kode ini tidak akan ada (disarankan pasang fungsi scroll agar widget sidebar tidak terlalu panjang)
  9. Nah untuk kode yang berwarna merah adalah kode shadow hasil dari pemanggilan kode Css di atas .
  10. Jadi kesimpulan nya jika sobat akan menggunakan kode ini pada widget yang lain seperti Popular Post ,kolom komentar ,widget follower,dll lakukan hal yang sama seperti di atas dan letak kan kode    <div id='shadow2'/></div>   tepat setelah kode penutup </div> seperti contoh di atas ,tapi ingat karena pengeditan langsung pada Template lakukan Preview terlebih sebelum template di Save .



read more
 

Cara Merubah Sidebar Dengan Warna Yang Berbeda

kevinservis

Cara Merubah Sidebar Dengan Warna Yang Berbeda - Silahkan sahabat baca terlebih dahulu artikel sebelumnya : Cara Merubah Background Blog , Cara Membuat Slider Gambar Pada Blog. Sekarang kita akan belajar memodifikasi Warna Pada Sidebar. Disini kita akan merubah warna sidebar berbeda dengan sidebar yang lainnya, misalnya pada halaman homepage ada beberapa sidebar : Katagori , Arsip, Follower, dan lain-lain.
Cara Merubah Sidebar Dengan Warna Yang Berbeda - Dalam satu sidebar terdiri dari tiga komponen yaitu : Kotak Widget, Judul Widget, dan Isi Widget. Nah sekarang kita akan memberi sedikit sentuhan warna pada ketiga Background diatas, perhatikan langkah berikut ini :
1. Login terlebih dahulu ke akun Blogger
2. Klick Rancangan
3. Lalu Pilih HTML
4. Setelah itu sahabat harus menentukan terlebih dahulu Widget apa yang ingin sahabat rubah warnanya, dengan cara klick pada ID Widget Contoh ( HTML1, HTML2, HTML3 dst )
5. Sebagai contoh sahabat akan merubah warna Widget Katagori dengan ID Widget HTML2, maka caranya :
6. Buatlah sebuah kode script pada notepad seperti dibawah ini :



#HTML2 {
Background : #ff8000 ;}
#HTML2 h2{
Background : #ffffff ; }
#HTML2 .widget-content {
Background : #000000 ; }



Keterangan :
HTML2 adalah kode widget yang akan dirubah warnanya
Warna Biru adalah Background kotak widget
Warna Merah adalah Judul Widget
Warna Hijau adalah Isi Widget
Warna Hitam, adalah Warna Background Widget
(sahabat bisa melihat kode warna DISINI)

7. Setelah selesai silahkan sahabat cari kode ]]></b:skin> dan letakan kode yang telah dibuat tadi tepat diatas kode ]]></b:skin>
8. Lakukan hal yang sama untuk Merubah Warna Widget yang lainnya.
9. Simpan Template dan lihatlah hasilnya
Nah itu pembahasan tentang Cara Merubah Sidebar Dengan Warna Yang Berbeda yang dapat Saya share, semoga dapat membantu sahabat. untuk pertanyaan, saran dan kritiknya silahkan poskan pada kotak komentar dibawah ini. tengkyu
 
 
 
read more
 

Cara Memberi Warna Background Pada Judul Widget / Gatget blog

kevinservis


Baiklah Langsung Saja Caranya Ya Sob...

1. Login/Masuk pada blogger
2. Pilih Rancangan kemudian Edit/HTML Centang "Expand Template Widget"
3. Cari kode ]]></b:skin> Copy kode dibawah ini dan Paste diatas kode ]]></b:skin>
4. Tekan Ctrl+F untuk mempermudah mencari kode berikut ]]></b:skin>


.sidebar h2 {
background:#009900;
color: #000000;
margin: 0px 0px 5px 0px;
padding: 3px 0px 3px 10px;
text-align:left;
}





Save Dan Lihat Hasilnya

Ubah #009900 Dengan warna yang Sesuai 
 
 
 
read more
 

Cara Memasang Tombol Share LinkedIn Pada Blogger

kevinservis


tombol share linkedin
LinkedIn adalah situs jejaring sosial untuk tujuan bisnis. Situs ini didirikan pada tahun 2002 dan saat ini memiliki sekitar 100 juta pengguna aktif di seluruh dunia. Counter ini sering tidak ditambahkan oleh blogger dan sering diabaikan. Tetapi dengan 48 juta pengunjung unik setiap bulan, pastikan bahwa Anda tidak kehilangan sumber lalu lintas untuk web dan blog Anda. Untuk menambahkan counter LinkedIn pada blog Anda, silahkan ikuti langkah-langkah mudah di bawah ini.

Rekomendasi artikel untuk Anda: Cara Memasang Tombol Google +1 Pada Blog Anda

Menambahkan Counter LinkedIn di Blog Anda
1.  Login dulu ke akun Blogger Anda kemudian pilih Template
template blogger
2.  Backup template Anda jika memang perlu
3.  Klik Edit HTML kemudian centang "Expand Widget Templates"
4.  Cari kode ini
<data:post.body/>

Untuk menambahkan tombol share LinkedIn di bawah judul postingan maka letakkan kode yang saya berikan tepat di atas kode pada langkah #4. Namun juka Anda menginginkan tombol share LinkedIn berada di bawah postingan maka letakkan kode yang saya berikan di bawah kode pada langkah #4.
Vertical Count
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="top"></script>

Horizontal Count
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-counter="right"></script>

No Count
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>

5.  Simpan Template Anda dan selesai!
Silahkan lihat blog Anda, maka Anda akan menemukan tombol share LinkedIn berada tepat pada posisi yang Anda inginkan.
 
 
read more
 

1000 Tema Background Untuk Memperindah Kotak Komentar Blog Anda

kevinservis


1000 comment box
Apakah Anda menyukai bunga, Greenery, latar belakang gelap dan terang, atau juga motiv-motiv yang indah? Nah sekarang Anda dapat menambahkan itu semua pada background kotak komentar Anda. Kode yang disediakan di bawah ini dapat digunakan untuk memberikan pola latar belakang pada kotak komentar dan Anda dapat memilih mana yang Anda sukai. Untuk menambah pola latar belakang yang berbeda sesuai pilihan Anda, maka Anda dapat mencarinya di BackgroundLabs yang merupakan sumber yang bagus untuk memilih background dan pola yang disediakan secara gratis. Anda dapat memilih dari ribuan rasa yang berbeda dari kategori Background. Langkah-langkah untuk memasang latar belakang ini pada kotak komentar blog Anda sangat sederhana sekali. Mari saya tunjukkan untuk Anda!
Baca juga Artikel ini untuk referensi tambahan:
Cara Merubah Tema Background Pada Kotak Komentar Blog
Cara Memasang Tema Background Pada Kotak Komentar Blog
  • Login ke akun Blogger Anda dan masuk ke Template
  • Backup dulu Template Anda bila perlu
  • Klik Edit HTML
  • Klik Expand Widget Templates pada pojok kiri atas
  • Cari kode ini (gunakan CTRL + F untuk memudahkan pencarian)
]]></b:skin>

  • Letakkan kode di bawah ini tepat di atas kode ]]></b:skin> tadi
#gnr-form iframe{
background:#ffffff url(IMAGE-LINK) repeat;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#2F97FF;
width:560px; height:213px !important;
}
#gnr-form a{
color:#fff;
}

Ganti Image-Link dengan salah satu URL background yang saya share di bawah ini atau yang Anda dapatkan dari website BackgroundLabs.
Untuk mengganti warna "comments as", gantilah kode #2F97FF dan untuk menrubah lebar dari kotak komentar Anda etitlah kode width:560px.
  • Setelah itu cari kode ini
<div class='comment-form'>

  • Ganti dengan kode di bawah ini
<div id='gnr-form'>

  • Simpan template Anda dan Selesai!
Pilihan Pola Background (URL)

Selamat Natal
IMAGE LINK:
http://www.backgroundlabs.com/backgrounds/318.jpg
comment box 1

GARDEN

http://www.backgroundlabs.com/backgrounds/40.jpg
comment box 2

AQUA
http://www.backgroundlabs.com/backgrounds/434.gif
comment box 3

BLUE OCEAN
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsovbqQXQVv71tNFbzKDoCXWRyU2FX_nHdAIwW-R79Olj98K68RgO8NkKjtWFt-UX0pR8jSdFy9Wk8t3ebUvn4AigCVYIB-8GtwgAxXAc6xw5FArdvBYrWZaYPHHca-xSgg-znGxuJA34f/s400/1.png
comment box 4

CHECKER
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiih9WztjtyvKC1fE1whD5pOXQH1NLqP7zCgxRQMQIXmgl2fZxuBfB9c9nuGNwovwGEukZCJpV2CgQvK1FY3KwP6COZFwc60CKc88kMW2VkCmFBBsJHlYkp99iXM-fJwHGN6ohtTQopF6Rt/s400/2.png
comment box 5

CHALK
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZABYZDVy-a7zsbuvxy4Ye7LbhF9K1sMpKGEtJdow-SKA5jxJGv0uYghJVXibnUhbZoyJeHVkDymJX7xsFJCJuvxdJrYL1N0AT-dZavfxZlIGGlbAMiXsZoGvOhrY9H6cpFNZjEpXVDf9m/s400/4.png
comment box 6

WOODEN
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiExDHntErQ7a_6ZznCIVRpyuNd2X4S6GoeMMutsuOwVeIVofcdg_HsQBbzjGvbLd5fAz-1y1oFcfOg2K52Q-OEjk9zJ1c-1Pz_DZsDWEu3JmN_dwH2lU7uKLIeMhJ75vjsrR_E7ArQnadB/s400/7.png
comment box 7

BLOCKS
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFCDMSlTiKfOZozpmNDOPe6tXf0hQ1hwgMjYjlNa9C1di-f0WBhAUEfDh8NuaCj-tdmBme-8Wv5qukWaYpfKKxLbcPfSVbg7N-Z1K75Z4v3xxy8IPocs_FngniVqCuixo6XDH4cHlfWWS/s400/9.png
comment box 8

TILES
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJCeqU_76J4QxbvXua46U036061ttjlZIQhphcbCRvQaC2T7nHyaeVrj-aazxEDrwKNMDs5yZaEcTdUwRexY0FtFDuBwMUqT8bxE9VUzKPW-z7YjoWyIdJFLeSY2ykNV_RJBksEho1wGfO/s400/8.png
comment box 9

METALLIC
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhVrdQ2Ar1XMCh35L1jO4ffwgZCxC9XQqB0uDQ7Xlptk_iK2riZrFYWXZKobj7RCuAIDYMZwIe_5xc2VKAlu62BtC8MBmUOr8zgV6mTt0ws5kOQELiUAfezI98EGfERK2iXpPpOCG2W3Ag/s400/12.png
comment box


Baiklah kawan, cukup itu saja tutorial saya kali ini silahkan Anda eksplorasi gambar-gambar dan pola background untuk kotak komentar dari BackgrounLabs. Pilihlah gambar lain sesuai keinginan Anda dan tema blog Anda. Nantikan postingan dan tutorial menarik lainnya dari blog ini. Jangan lupa like jika Anda menyukai Artikel ini. :)

read more
 

Meningkatkan Traffic Blog Dengan Optimasi Gambar Sebelum Diupload

kevinservis


optimasi gambar
Google memperkenalkan perubahan baru pada sektor pencarian gambar seperti yang telah dibahas pada postingan saya sebelumnya. Dan menurut Google hal itu dapat meningkatkan Click-Through-Rate sehingga juga meningkatkan traffic. Kami membahas bagaimana cara optimasi gambar dengan tag ALT yang dapat menempatkan hasil pencari yang baik untuk gambar Anda, hasil yang sama ditambahkan dari nama gambar itu sendiri. Ketika Anda men-download gambar, mereka kadang tersimpan dengan nama yang cukup aneh yang tidak masuk akal. Karena dulu tidak semua orang menggunakan tag ALT sebelum Google memperkenalkan fitur Image Search. Jika Anda meng-upload gambar dengan nama yang tidak jelas dan tidak membubuhkan kata kunci yang kaya, maka Anda kehilangan peluang peringkat yang lebih baik. Bingung? Mari saya jelaskan.
Optimasi Gambar Sebelum Diupload
Misalkan saya download wallpaper indah 2012 dari pencarian gambar Google dan sekarang saya ingin meng-upload ke blog saya untuk berbagi dengan semua orang. Nama gambar yang muncul misalnya seperti image23.png, setelah diupload ini akan muncul pada URL / link seperti yang ditunjukkan di bawah ini.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJqbWTKpy-znnvERa6iKjB55nA-ELUYcpZ2cSDbE-O2lXxaG5jYvRL7DsxqFt5PXnyu-BRs8xyGK-UAG8zdWJ50wS_Ne09Vr2SDEmCwuWnQ8FNWTYI3GsBRofP0ODPBSVWIeZo_-61po/s1600/image32.png


Catatan: Contoh-contoh di sini adalah untuk blog blogspot, namun konsep yang sama berlaku untuk blog host dan situs juga.

Terlihat nama link gambar di atas berakhiran image23.png. Bagian akhir dari URL ini sangatlah penting karena semakin memperkuat deskripsi gambar Anda. Ketika seseorang mencari wallpaper 2012, Google akan mencari gambar yang lebih relevan yang dapat memberikan pengguna dengan hasil pencarian terbaik. Karena gambar Anda berakhir sebagai image23 bukannya wallpaper-2012.png, gambar Anda memang sama sekali tidak layak untuk dipajang atau ditampilkan di halaman hasil pencarian karena deskripsi gambar Anda menunjukkan image23 bukan wallpaper-2012.

Mulai sekarang Anda harus merubah kebiasaan Anda untuk memberi tag ALT pada gambar-gambar yang akan Anda upload di blog. Tetapi yang dimaksud optimasi adalah membuat konten Anda lebih SEO frindly dan memungkinkan. Misalkan seseorang memiliki gambar dengan nama URL dan tag alt yang benar, sementara gambar Anda hanya memiliki tag alt yang benar, maka yang memiliki kesempatan lebih besar untuk diambil oleh robot pencarian dan ditampilkan adalah yang memiliki nama URL dan tag ALT yang benar.

Lihat Contoh Ini
Sebuah pencarian gambar akan menunjukkan beberapa gambar yang tidak relevan muncul ketika Anda mencari sesuatu yang Anda inginkan. Lihatlah gambar ini:

cara optimasi gambar
Contoh 1

Ketika saya mencari 'picture' ternyata saya mendapatkan gambar kupu-kupu muncul sebagai thumbnail pertama. Terlihat jelas pada nama gambar yang menunjukkan nikon_p90_picture.jpg yang memiliki keterangan gambar di dalamnya dan itu adalah salah satu alasan mengapa itu muncul di halaman hasil pencarian. Tapi bisakan gambar ini ditampilkan ketika saya mengetikkan kupu-kupu? Karena orang tidak akan mengetik kata Picture untuk mencari gambar kupu-kupu. Coba kita lihat!

optimasi gambar blog
Contoh 2

Saya tidak menemukan gambar pada contoh 1 itu muncul! Ini adalah apa yang harus kita pelajari dan pahami, bahkan walaupun Anda meng-upload ribuan gambar setiap harinya tapi jika pemberian nama dan tag ALT tidak Anda perhatikan, tetap tidak bisa meningkatkan traffic yang ditargetkan.

Tips Untuk Mengoptimasi Nama Gambar
Mari kita sekarang mempelajari beberapa tips dasar yang dapat membantu Anda untuk mengubah nama gambar Anda dengan cara yang benar sebelum meng-upload. Klik kanan gambar Anda dan 'rename' dengan mengikuti tips di bawah ini:
  • Ubah nama gambar Anda dengan tidak lebih dari 3 kata. Sedikit itu lebih baik.
  • Gunakan kata kunci yang kaya dan bukan kata-kata sederhana seperti kata hubung misalnya "lalu, maka, adalah, untuk, antara, oleh, dll".
  • Jangan menandai foto dengan kata-kata tidak masuk akal. Jika gambar didapat dari screenshot langkah instalasi Windows 7. Berilah nama dengan kata kunci kaya seperti "Pengaturan windows7" atau "instalasi windows7". 
  • Hindari penggunaan karakter khusus seperti %, $, #, @, &, -, _, dll.

Harapan saya, panduan yang sedikit ini dapat membantu Anda. Have fun. ^^

read more
 

Cara Membuat Widget Subscription Box Menarik Untuk Blogger

kevinservis


subscription box 2
Memiliki jumlah visitor yang tinggi adalah impian tiap Blogger sehingga membuat mereka berusaha sekuat tenaga untuk itu. Banyak cara sebenarnya untuk meningkatkan pelanggan blog Anda misalnya aktif di jejaring sosial, memasang widget facebook fan box, memasang tombol follow twitter, dan juga memasang kotak berlangganan untuk pengunjung. Nah, pada kesempatan kali ini saya akan berbagi tutorial tentang bagaimana cara membuat kotak Subscription yang menarik sehingga akan mengingatkan pengunjung Anda untuk berlangganan artikel Anda. Dengan hanya memasukkan script sederhana di bawah ini maka subscription box yang menarik akan tampil di blog Anda. Baiklah langsung saja kita kerjakan!

Memasang Subscription Box di Blogger
  • Login ke akun Blogger Anda dan masuk ke Layout
  • Klik Add a Gadget
subscription box 1
  • Pilih HTML/JavaScript
subscription box
  • Masukkan kode di bawah ini
<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/AVvXsEgOREPbvEcqTsc0j1r4ushSoLTJhokAe5RoifajGbOUTQJilxR9y10hZdawSaxeJ1WrVCPsAdLuqs8x4DvsHdfmw-VNZWtpqLBAwpU-aOwO7ryQw2F9xewYe2eZMXoacS3eiynjIiLFeCs/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/AVvXsEjO5rFQdg3liXbDDmYc3Gedy3mRnETJSiBbhcRFWyX28GX2_6JB-Tm5QWYdP-YXaF7Pwq9oqYRkhxVsUPgxXDADKbwAsX_aUD8yLwCmnA2SsGdbboiNtAz0nCxt4Ftw_E1oAFfXufRcBrA/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/AVvXsEhbCLhZ2TS2IhcXxgVdzzNvwnFS-Qqq4F7jFrcoj9CY3fWo5OnDo2fzTLhqo26LizWDJ1PoyQxdtUqKWHaRTX4JPpWHCqgsapobT8TeKwoEE7dhcDaNIli2rXZCRPe_IHvXtPmGalqWfzU/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/AVvXsEg0Dj_wtR5cOpSlxjjEzz9a1-bE-GSfxgY_HJQFbzRdef6L-9fNSSDIoxwhoNr_FS45o8JQJzPw-KLzOTnsG5Ktce7p3mnzyuAugV-lMmqG47PNC44doDiERJWRJyFksFRpBdLHQQJrW4zJ/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="dgenera-blog" >

<div class="emailicon"><p>Subscribe to our Free Email Updates! </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=Dgenera', '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 your email here..." 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="Dgenera" 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/Dgenera" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/DGeneraBlog"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/104725840255403357961 target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

  • Ganti DGenera dengan nama Feedburner Anda
  • Ganti yang berwarna orange dengan username twitter dan Google + Anda
  • Anda dapat mengganti kode yang bercetak tebal dengan kalimat sesuka Anda
  • Simpan widget Anda dan lihat perubahannya
Setelah semua selesai maka akan terlihat seperti gambar ini:
subscription box example
Segitu saja tutorial kali ini, untuk tutorial yang lainnya tunggu di postingan selanjutnya. Salam Blogger..:)
 
 
 
read more
 

Memasang Dan Kostumisasi Label Tag Cloud Pada Blogger

kevinservis

labels cloud customization
Blogger memiliki banyak widget resmi yang tersedia untuk penggunanya termasuk widget label cloud. Namun tampilannya hanya standard resmi dari blogger, jika kita ingin penampilan yang lebih maka kita harus melakukan kostumisasi dengan memasukkan beberapa script ke dalam template blog Anda. Pada artikel ini kami akan berbagi tutorial tentang cara membuat stylesheet sederhana yang akan mengubah label cloud menjadi lebih indah. Oleh karena itu Anda semua mendapat kesempatan untuk bermain-main dengan widget dan merubah mereka menjadi lebih indah dilihat. Saya sudah memastikan bahwa script ini kompatibel pada semua browser utama termasuk IE8+. Contoh tampilannya Anda dapat melihat pada gambar di bawah ini. Dan sekarang waktunya kita bekerja! ^^
Ini adalah widget label dalam tampilan cloud:
labels cloud widget
Ini tampilan setelah dilakukan kostumisasi:
labels cloud customization
Cara Kostumisasi Tampilan Label Cloud Di Blogger
Kode di bawah ini dapat disesuaikan dalam beberapa cara untuk membuat desain label lebih menarik. Anda juga dapat menambahkan gambar latar belakang mereka.
Ikuti langkah mudah berikut ini:
  • Login ke akun Blogger Anda kemudian masuk ke Layout
layout blogger
  • Klik Add a Gadget
add a gadget
  • Kemudian pilih Widget Label
labels widget
  • Di dalam pengaturan pastikan Anda memilih tampilan Cloud. Anda dapat mengatur opsi lain sesuai kebutuhan Anda. Lihat gambar di bawah sebagai contoh, Anda juga bisa mengaturnya seperti gambar ini.
customize labels cloud
Tampilkan paling banyak 25 label, karena jika terlalu banyak akan terlihat buruk.
  • Sekarang simpan widget Anda dan selanjutnya masuk ke Template
template blogger
  • Backup dulu template Anda jika diperlukan
  • Klik Edit HTML dan carilah kode ini (Gunakan fitur search CTRL + F untuk memudahkan pencarian)
]]></b:skin>

  • Setelah ketemu, letakkan kode CSS ini di atas kode ]]></b:skin> tadi
/*-----Labels Cloud widget http://d-genera.blogspot.com/----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px; 
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

  • Simpan Template Anda
  • Selesai!

Lihat blog Anda untuk memastikan sudah ada perubahan dan script tadi dapat bekerja dengan baik serta label berubah menjadi kotak persegi kecil yang rapi. Jika Anda ingin merubah tampilan label dengan ukuran yang acak, Anda hanya perlu menghapus font-size:10px; dari kode di atas.

Jika Anda menemui kesulitan dan membutuhkan bantuan, segera hubungi kami dari kotak komentar yang sudah disediakan. Selamat mencoba kawan.. ^^
 
 
 
read more
 

Cara Memasang Widget Twitter Fan Box Di Blog Anda

kevinservis


twitter follow box
Hai sobat setia D'Genera, saya menulis artikel ini untuk menunjukkan sebuah aplikasi twitter yang akan memungkinkan pengunjung website Anda mem-follow website tanpa harus meninggalkan situs Anda. Widget ini berkerja seperti Facebook Like Box yang telah Anda ketahui. Kode widget Twitter Fan Box atau kotak follow Twitter ini dibuat oleh Mark Carey. Anda dapat menggunakan Twitter fan Box ini untuk meningkatkan pengikut twitter website Anda. Pengguna twitter lainnya juga bisa melihat teman-teman mereka telah mengikuti blog atau website Anda sehingga memberikan sentuhan sosial untuk membantu dalam meningkatkan traffic website/blog. Ikuti langkah-langkah mudah di bawah ini untuk menambahkan widget Twitter Fan Box pada blogger.

Cara Memasang Twitter Follower Box di Blog
  • Masuk ke dasbor Blog Anda kemudian pilih Layout
kotak follow twitter

  • Klik Add a Widget kemudian pilih HTML/JavaScript

kotak follow twitter 1

script kotak follow twitter

  • Lalu masukkan kode di bawah ini di dalamnya
<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("DGeneraBlog");</script>

  • Ganti DGeneraBlog dengan username twitter website/blog Anda
  • Simpan widget Anda dan selesai
Begitu mudah dan sederhana, ketika seseorang telah mem-follow blog Anda maka kotak seperti ini akan diperlihatkan kepada pengunjung.

kotak follow twitter 2

Mirip kan dengan Facebook fan Box?
Jika Anda membutuhkan bantuan, jangan sungkan untuk bertanya di kotak komentar.
Salam Blogger..!! :)

read more
 

Cara Memasang Facebook Like Box/Facebook Fan Page di Blogger

kevinservis


facebook like box 1
Facebook Fan Page adalah salah satu cara terbaik untuk mempromosikan blog dan meningkatkan pengunjung. Facebook Like Box ini akan membantu pengunjung Anda untuk menjadi seorang pembaca reguler hanya dengan mengklik tombol Like. Dengan Facebook Like Box ini pembaca akan mendapatkan update artikel terbaru dari Facebooknya (ini lebih baik dari Email Newsletter). Setelah pada postingan saya sebelumnya membahas cara membuat Facebook Fan Page, kali ini akan saya berikan cara memasang Facebook Like Box di Blog Anda hanya dengan langkah yang mudah. Ikuti langkah berikut ini untuk memasang Like Box di blog.

Cara Membuat Facebook Like Box
  • Login dulu ke akun Facebook Anda
  • Klik link ini ==> Facebook Developers
  • Halaman yang tampil akan seperti ini, dan pada Facebook Page URL, Anda masukkan URL Facebook page blog Anda.
facebook like box
  • Untuk seterusnya Anda bisa sesuaikan menurut keinginan Anda. Saya lebih suka menggunakan pengaturan seperti gambar di atas.
  • Setelah Anda setting, klik Get Code dan Anda akan mendapatkan 2 kode seperti gambar di bawah ini.
script facebook like box
Keterangan: Kode pertama dan kedua penempatannya berbeda.
Bagaimana Meletakkan Kode?
1. Masuk ke Blogger > Template

template blogger

2. Backup dulu template Anda jika perlu
3. Klik Edit HTML
4. Cari kode <body>, gunakan fitur search (Ctrl + F) untuk mempermudah pencarian
5. Masukkan kode pertama tepat di bawah kode <body>


facebook fan page

6. Lalu Save template Anda
7. Sekarang masuk ke Layout
layout blogger
8. Klik Add a Gadget > pilih HTML/JavaScript

html/javascript

9. Masukkan kode kedua di situ kemudian klik Save. Lalu letakkan di tempat yang Anda inginkan dengan cara drag dan drop.
10. Selesai
Saya harap postingan ini dapat membantu Anda. Nantikan tutorial-tutorial selanjurnya

read more
 
 
Copyright © 2013. Cikevin - All Rights Reserved
Powered By Blogger