Latest Article Get our latest posts by subscribing this site

Cara Membuat Tampilan Label Blog Menjadi Dua Kolom

Jika agan ingin menampilkan kategori/Label blog sobat bergaya 2 kolom seperti pada blog saya ini, silahkan ikuti langkah-langkah berikut ini :
  •  Login dulu ke akun blogger agan
  • Setelah itu, silahkan masuk pada menu Template > edit HTML.
  • Cari kode ]]></b:skin>
  • Setelah ketemu, Pastekan kode berikut ini di atas ]]></b:skin> :
#Label1 li { float:left;width:45%;}
  • Save / Simpan template dan silahkan lihat hasilnya.
Semoga bermanfaat dan jika anda suka dengan artikel ini jangan lupa klik tombol "LIKE" berikut atau dibawah ini:

(source)

Membuat Floating Social Bookmark dengan Efek Easing

Berikut ini adalah tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing dengan penggunaan image yang lebih sedikit (hanya satu).

Silahkan lihat dulu screenshot dan demo nya di blog lokamovie:
Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
  • Login ke Blogger
  • Masuk ke Template >> Edit HTML (centang expand widget templates)
  • Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
.social-buttons {
    position: fixed;
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
}
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon {
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}
  • Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum atau di atas </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
  • Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='http://www.facebook.com/lokamovie' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/https://twitter.com/Lokamovie' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/107027860436573593329' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/channel/UCIHTnhGP86RX8IeFlj90Ifw' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/lokamovie' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>
Ganti tulisan warna biru diatas dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
  • Terakhir, Save Templates.
Semoga bermanfaat dan jika anda suka dengan artikel ini jangan lupa klik tombol "LIKE" berikut atau dibawah ini:

(source)

Cara Membuat 2 (dua) Kolom Gadget Dibawah Header

Berikut ini adalah langkah - langkahnya:
  • Masuk / Login ke akun blogger
  • Pilih menu "template" kemudian "Edit HTML" dan centang "Expand Template Widget"
  • Cari kode ]]></b:skin> (tekan tombol CTRL + F untuk menggunakan fitur pencarian cepat di browser agan)
  • Copy paste kode berikut ini dan letakkan diatas kode ]]></b:skin>
#box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
  • Selanjutnya cari kode <div class='main-outer'> atau jika agan pengguna template lama cari kode <div id='main-wrapper'>
  • Copy paste kode berikut dan letakan diatas kode <div class='main-outer'> atau kode <div id='main-wrapper'>
</div> <div id='box-kolom-widget'> <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/> </div> <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/>
  • Terakhir save template / simpan template.
Semoga bermanfaat dan jika anda suka dengan artikel ini jangan lupa klik tombol "LIKE" berikut atau dibawah ini:

Cara Kembali ke Tampilan Tata Letak Klasik di Blogger

Mungkin ada di antara agan - agan sekalian yang sedang mencari cara untuk mengembalikan tampilan layout atau tata letak di blogger menjadi tampilan klasik (tampilan versi terdahulu) entah untuk apapun tujuannya :D. Kalau yang saya alami sih tujuan ingin kembali ke tampilan tata letak layout klasik di blogger itu adalah untuk merubah logo blog atau judul blog di bagian header. Sebenarnya caranya sangat mudah, yaitu kita tinggal mengedit sedikit alamat / URL di bar address browser kita disaat sedang membuka tata letak / page elements blogger. Lebih detilnya berikut ini:

  • Klik menu Tata Letak / Layout yang terletak disebelah kiri blogger agan.
  • Perhatikan alamat URL di address bar browser agan, alamat nya misalnya seperti ini: "www.blogger.com/blogger.g?blogID="
Sebelum
  • Kemudian ganti tulisan yang saya beri tanda merah nya dengan "rearrange" sehingga hasilnya menjadi seperti ini: "www.blogger.com/rearrange?blogID=" kemudian tekan enter di keyboard. maka hasilnya tampilan layout / tata letak blogger agan akan kembali ke tampilan klasik.
Sesudah
Semoga bermanfaat dan jika anda suka dengan artikel ini jangan lupa klik tombol "LIKE" dibawah ini:

Cara Submit Blog ke Search Engine Google & Yahoo

Cara mudah dan cepat mensubmit blog ke berbagai search engine (Google, Yahoo, Bing) atau cara agar / supaya blog bisa terindex search engine. Search Engine seperti Google, Yahoo, bing, ask dkk merupakan salah satu sumber traffic dari blog atau web kita, oleh karena itu tidak heran kalau ada ilmu yang disebut dengan SEO (Search Engine Optimization). Dan search engine merupakan sumber traffic terbesar yang dimanfaatkan oleh para webmaster saat ini. Tapi bagaimana caranya agar sebuah blog bisa memperoleh traffic dari search engine? Gampang saja, kuasailah ilmu SEO, hehe.. 

Tapi untuk belajar ilmu SEO juga dibutuhkan ketekunan dan kesabaran karena ilmu SEO itu ada yang menganggap rumit dan ada juga yang menganggap mudah, tergantung dari kita menyikapinya. Nah, submit blog ke search engine merupakan salah satu langkah SEO bagi seorang webmaster, dikarenakan dengan mensubmit blog atau web kita ke search engine, maka blog atau web kita akan diindex oleh search engine begitu juga dengan semua halaman-halamannya, dengan begitu kita akan mendapatkan pengunjung dikarenakan halaman-halaman kita banyak yang diindex. Lantas, bagaimana cara mudah mensubmit blog search engine? Mudah, sobat tinggal kunjungi url yang saya sediakan di bawah dan setelah sampai di situ, sobat tinggal memasukkan url blog sobat dan klik tombol submit yang disediakan, lalu tunggu beberapa hari sampai URL blog anda terindex di search engine. Oke, berikut alamatnya:
  1. Google : http://www.google.com/addurl
  2. Yahoo dan Bing (2 search engine ini telah bergabung dan bekerja sama) : https://ssl.bing.com/webmaster/SubmitSitePage.aspx
    • Cara Submit:
      • Masuk ke url tersebut diatas.
      • Sign In (jika belum punya akun, klik sign up).
      • Setelah berada di dashbor bing - pilih add site.
      • Lalu pilih cara verifikasi menggunakan meta content / yang lain, atau pilihan option yang kedua.
      • Copy paste / letakkan kode meta msvalidate.01 yang diberikan di pilihan / option kedua tersebut ke bawah <head> di template anda.
      • Jika sudah diletakkan / dicopas ke template blog, klik tombol verify di webmaster bing.
      • Tunggu beberapa hari sampai bing mengindex blog anda. Semoga bermanfaat..

Cara Submit Blog ke 37530 Website Sekaligus Dengan Sekali Klik


Cara Submit Blog ke 37530 Website Sekaligus ini adalah cara Submit Express dan simpel banget. Agan tidak perlu repot - repot submit Blog / Website punya agan sendiri tanpa harus submit satu - satu yang bisa menyebabkan capek dan menyita banyak waktu agan.

Karena submit ke 10 Website saja biasanya butuh waktu kira - kira 30 Menit ( Bayangkan apabila Submit Blog ke 37530 page Website Satu persatu ) bisa berapa hari agan menyelesaikannya? :D . Di Artikel Kali Ini saya ingin memberitahukan Langkah Mudah Submit Blog Ke 37530 page Website Sekaligus. Kita hanya disuruh menunggu hasilnya.

Caranya sebagai berikut :

  1. Masuk ke http://www.imtalk.org/cmps_index.php?pageid=IMT-Website-Submitter
  2. Geser ke bawah, Isi Data Blog Agan.
  3. Pada Pilihan Limit the number of created pages, biarkan saja kosong untuk submit ke 37530 page website.
  4. Klik Submit. Tunggu Hingga Proses Selesai.( jangan tutup browser agan sebelum prosesnya selesai).

Hasil Akhirnya seperti ini :


Cara Setting / Mengatur Custom Domain Blogger dari Intuit

Bagi agan - agan yang kebetulan tertarik mau atau sedang menggunakan domain ".COM" gratis melalui Intuit dan masih bingung dengan cara setting / custom domain ke Blogger nya, berikut adalah caranya (silahkan ikuti langkah - langkahnya) :

1. Daftar dulu di DNS Afraid.
2. Jika sudah berhasil daftar, klik "Domains" kemudian klik tulisan "Add A Domain into FreeDNS".

3. Masukkan nama domain Agan di kolom domain. ( Misalnya: lokamovie.com )
    • Atur Shared State: Private
    • Yang lain biarkan saja.
    • Kemudian klik "Submit". 
4. Selanjutnya buka dan Sign in laman Intuit: https://websites.intuit.com/, 
    • Di bagian Domain Control klik "Edit your nameserver"
    • Setting Nameserver nya menjadi:
    ns1.afraid.org
    ns2.afraid.org
    ns3.afraid.org
    ns4.afraid.org 


5. Kemudian buka tab baru di browser anda dan Login ke Blogger.
6. Pilih blog yang akan menggunakan nama domain baru anda.
7. Pergi ke Setelan > Dasar
8. Pada bagian "Penerbitan" klik "Tambahkan domain khusus"
9. Sekarang klik pada bagian "Alihkan ke setelan lanjutan", ketik URL nama domain baru kamu menggunakan awalan "www" *misalnya: www.suwanditea.com
10. Klik "Simpan". Kemudian blogger akan menampilkan error. Tepatnya seperti ini: "Kami tidak dapat memverifikasi otoritas Anda untuk domain ini. Kesalahan 14."
11. Perhatikan dua kode yang disorot pada gambar. Itu adalah CNAME kepemilikan domain agan yang nantinya akan digunakan untuk verifikasi kepemilikan domain. 

12. Kemudian buka "tab halaman" DNS Afraid yang tadi di browser agan, kemudian "manage domain".
13. Atur seperti ini, masukkan IP Blogger & CNAME Blogger kamu yang tadi.
  • Settingannya lihat gambar diatas.
  • Untuk menambah DNS Record Domain nya klik "[add]" 
  • IP Blogger:
    • 216.239.32.21
    • 216.239.34.21
    • 216.239.36.21
    • 216.239.38.21
14. Selanjutnya ke Blogger lagi (buka tab halaman Blogger di browser agan), masukkan domainnya & Simpan.

15. Jika berhasil, klik "edit" dan centang tulisan "Alihkan....ke domain anda", Selesai. Jika masih menampilkan pesan error, tunggu beberapa jam, kemudian ulangi lagi menambahkan nama domain pada pengaturan Blogger.

Sekarang blog agan sudah menjadi Top-Level Domain. Semoga bermanfaat.

Cara Membuat Menu Horizontal Melayang Disebelah Atas Blog

Klik image untuk memperbesar gambar.


Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Apabila sekarang kita berbicara dan membahas mengenai navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi untuk bagian tersebut yaitu dengan cara menambahkan navbar baru yang lebih ‘cantik’ bila dibandingkan dengan navbar standar Blogger. Dan untuk mempermudah pemahaman mengenai navbar baru yang dimaksud di sini, maka Agan dapat melihatnya pada gambar di tas (yang diberi tanda lingkaran warna merah). Apabila tertarik untuk membuat atau hanya sekedar mencobanya, silahkan ikuti langkah - langkahnya dibawah ini:
  • Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.
  • Cari kode ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atas ]]></b:skin>.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
Keterangan:
Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah berikutnya dibawah ini.
  • Copy dan Paste kode CSS berikut ini tepat di atas ]]></b:skin>
.bilah-menu-atas {
width: 100%;
min-width: 960px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #336699;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
box-shadow: 0px 2px 0px rgb(14, 90, 140);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kolom-utama {
-moz-transition: all 0.2s linear 0s;
width: 960px;
height: auto;
margin: 0px auto;
}
.kolom-menu {
width: 521px;
height: auto;
margin: 0px 0px 0px -41px;
float: left;
display: inline;
}
.kolom-menu ul {
height: auto;
margin-top: 0px;
}
.kolom-menu ul li {
float: left;
position: relative;
list-style: none outside none;
}
.kolom-menu ul li:first-child {
border-left: 1px solid rgba(30, 30, 30, 0.125);
}
.kolom-menu ul li a {
color: #ffffff;
font-weight: bold;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
text-decoration: none;
display: inline-block;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
position: relative;
border-right: 1px solid rgba(30, 30, 30, 0.125);
box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}
.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
background-color: rgba(255, 255, 255, 0.125);
}
Keterangan:
Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang sudah saya beri tanda biru. Oke lanjut..
  • Cari kode <body> kemudian letakkan / copy paste kode berikut ini tepat di bawah <body>.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://suwanditea.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1J65-lJAL93u5SgktBygfS_s5-7HpSS1uxTsxdK06_0tzMDwIzhKfJyejFkLzoEveY7GeK8CdhZBJI5vvVaPfLmqBX2ccBSif5gmDzC0KNTU5LrA8FRg5QdTt26VzWC3IDbWscLXyAs/s800/Beranda.png' width='20px'/></a></li>
<li><a href='URL'>Menu Kiri 1</a></li>
<li><a href='URL'>Menu Kiri 2</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='URL'>Menu Kanan 1</a></li>
<li><a href='URL'>Menu Kanan 2</a></li>
</ul>
</div>
</div>
</div>
Keterangan:
Ganti http://suwanditea.blogspot.com dengan URL blog Anda. Ganti pula URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.
  • Simpan template.
Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Apabila belum sesuai dengan keinginan, maka silakan ubah/edit seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat :)


(source)

Cara Memasang Custom Google Translate Widget Pada Bilah Menu Blog

Seperti yang kita tahu bahwa ketika kita menerbitkan artikel dengan menggunakan bahasa tertentu, maka belum tentu semua pengunjung blog mengerti dan memahami bahasa yang kita gunakan dalam artikel tersebut. Hal ini disebabkan karena begitu artikel diterbitkan, maka semua pengguna internet di seluruh dunia dapat mengakses artikel yang kita terbitkan. Dan bisa jadi pengguna internet yang membuka serta membaca artikel yang kita terbitkan tersebut berasal dari negara lain yang belum mengerti dan memahami sama sekali dengan bahasa yang kita gunakan.

Ada beberapa browser yang mendukung penerjemahan bahasa secara otomatis ketika artikel yang dibuka berisikan konten dalam bahasa yang berbeda dengan bahasa yang digunakan pengunjung blog saat itu. Namun beberapa browser yang lain yang tidak memiliki fitur tersebut tidak akan menerjemahkan bahasa secara otomatis sehingga konten artikel tetap akan ditampilkan dalam bahasa yang digunakan pada artikel tersebut.

Berdasarkan uraian di atas, maka tidak ada salahnya bila kita memasang perangkat penerjemah di halaman blog yang kita kelola, sehingga bila artikel kita dibuka dengan menggunakan browser yang tidak memiliki fitur terjemahan otomatis, maka pengunjung dapat dengan mudah menerjemahkan konten artikel dengan memanfaatkan perangkat penerjemah yang terpasang.

Dan selanjutnya, terkait dengan cara memasang Custom Google Translate Widget pada bilah menu blog yang kita kelola, langkah-langkahnya adalah seperti dalam uraian di bawah ini.

  • Login ke akun Blogger Anda.
  • Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
  • Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
  • Centang pilihan ‘Expand Template Widget’.
  • Cari kode <li><a expr:href='data:link.href'><data:link.title/></a></li> dan bila sudah ketemu maka perhatikan bahwa di bawah kode tersebut terdapat kode </b:if> dan </b:loop>. Yang selanjutnya tepat di bawah kode </b:loop> sisipkan kode di bawah ini.
<div class='alt2' style='border: 0px inset; padding-bottom: 3px; padding-left: 3px; padding-right: 16px; padding-top: 3px; text-align: right;'><div id='google_translate_element'/><script>function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: &#39;id&#39;, layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, &#39;google_translate_element&#39;);}</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div>
  • Simpan template.
Dengan demikian maka setelah template disimpan dan blog ditampilkan, pada bilah menu blog yang kita kelola akan dimunculkan Custom Google Translate Widget yang terletak di bagian kanan bilah menu blog.

Bila Anda ingin melakukan kustomisasi pada model Google Translate Widget yang akan digunakan, maka silakan buka https://translate.google.com/manager/website/ untuk mendapatkan kode widget sesuai dengan kustomisasi yang diinginkan. Karena perlu diketahui bahwa widget tersebut tidak hanya dapat diletakkan sebaris dengan konten, namun dapat pula diterapkan dalam bentuk tab mengambang di sisi halaman blog. Yang tentunya bila widget tersebut ditampilkan dalam bentuk tab mengambang, maka cara yang digunakan pun akan berbeda pula.

Cara Membuat komentar FB Berdampingan dengan Komen Blog

Berikut ini adalah langkah - langkahnya:
1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>
.comments-page { background-color: #ffffff;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}
7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<meta content='Link ID/NamaPengguna FB Anda' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Perhatikan tulisan yang berwarna merah di atas, ganti dengan Alamat ID facebook Anda, misalkan https://www.facebook.com/NamaPenggunaAnda. Cara mengetahuinya anda lihat di "pengaturan akun" FB anda disana ada tertera nama pengguna. Udah ngertikan ? jika sudah maka Akan saya lanjut.



8. Kemudian cari kode  <div class='comments' id='comments'>
*Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='2' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>
Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='2' width='400'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'><div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)
9. Kemudian klik save, dan lihat hasilnya.
jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja. Selamat mencoba :)

Trik Supaya Semua Link di Blog Dibuka di Tab Baru Secara Otomatis


Berikut langkah - langkahnya:
  • Login ke blog anda dulu.
  • Lalu ke Edit HTML
  • Klik ctrl + f. Lalu cari kode <head>
  • Lalu masukan kode berikut ini tepat dibawah kode <head> :
<base target='_blank' />
  • Save dan buka link yang ada pada blog anda untuk mencobanya. 

Cara Membuat Kotak Pencarian / Search di Blogger

Sebenarnya banyak cara untuk membuat kotak pencarian di blogger yang bisa kita coba, di kesempatan ini saya akan coba berbegi cara membuat kotak pencarian / search yang paling mudah, simpel tapi tampilannya pun tidak kalah menarik dari yang lainnya.

Oke langsung saja ya ikuti langkah-langkahnya dibawah ini,
  •  Log in ke blogger
  • Klik Layouts pada menu dashboard
  • Klik Add a gadget
  • Klik atau pilih HTML/Javascript
  • Kemudian masukan kode dibawah ini;
Kode:
<form action="http://alamatblogAnda.blogspot.com/search" id="searchthis" method="get" style="display: inline;">
<input id="b-query" maxlength="255" name="q" size="20" type="text" /> <input id="b-searchbtn" type="submit" value="Search" />

  • Ganti kode yang berwarna merah dengan alamat blog anda sendiri.
  • Kalian juga bisa mengubah ukuran kotak pencarian itu nya dengan mengedit size nya
  • Klik Save dan letakan di sidebar. 
  • Kurang lebih hasilnya akan seperti dibawah ini;

  • Mudah kan?? Selamat Mecoba.. :)

Cara Membuat Fitur Spoiler di Blogger

Apakah agan tahu apa itu "Spoiler"? Sebenarnya saya sendiri tidak tahu secara lisan apa arti dari spoiler itu sehingga saya tidak bisa menjelaskannya sekarang karena takut salah dalam menyampaikannya, hehe..
Tapi gak usah khawatir, masih banyak jalan ke Roma. Tidak bisa menjelaskannya apa itu spoiler, maka saya langsung kasih contohnya saja ya, berikut ini adalah contoh spoiler (klik tombol open):
Contoh Spoiler:
Ini dia sob yang dinamakan spoiler. he.. :D
Gimana, sekarang sudah tahu kan seperti apa itu spoiler?  fungsi utama spoiler itu sendiri adalah untuk mengurangi beban loading page, biasanya yang dimasukin ke dalam spoiler adalah image dengan resolusi besar, jadi dengan spoiler image tidak akan diload secara langsung yang dapat mempercepat waktu loading. Fungsi lainnya tentu dengan spoiler kita dapat menghemat space dan posting terlihat lebih rapi. Oke, langsung saja ya. Buat agan yang tertarik cara membuatnya, silahkan ikuti langkah-langkahnya:

Membuat spoiler dalam artikel/posting Blogger sangat mudah dan simpel,

>> Saat agan sedang membuar artikel baru untuk diposting, dan agan mau menyertakan sebuah spoiler dalam artikel tersebut, agan tinggal klik tombol "HTML"
    Gambar:
>> Kemudian letakkan kode berikut ini kedalam artikel yang sedang agan buat:

Kode Untuk Membuat Spoiler:
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan isi spoiler anda disini. dapat diisi berupa gambar, kode html, paragraf dan lain-lain....

</div>
</div>
</div>


>> "Judul Spoiler" bisa anda ubah sesuai keinginan.
>> Ganti tulisan "Masukkan isi spoiler anda disini. dapat diisi berupa gambar, kode html, paragraf dan lain-lain...." dengan isi spoiler yang ingin anda masukkan.
>> Klik tombol "Compose" supaya kembali ke mode seperti biasa untuk melanjutkan menulis artikel anda.
    Gimana mudah kan? selamat mencoba, semoga bermanfaat...

    Cara Pasang Tombol Share Artikel/Posting ke Social Bookmarking di Blogger


    Salah satu cara meningkatkan pengunjung blog atau website adalah dengan mendaftarkan artikel-artikel anda ke dalam Situs Social Bookmarking, seperti; Social bookmarking Network, Favourite Bookmarking dan lain sebagainya. Contohnya mendaftarkan posting anda ke digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan situs social bookmarking lainnya. Saya akui cara ini sangat efektif untuk meningkatkan pengunnjung blog anda. Selain itu situs-situs social networking (situs pertemanan) seperti facebook, twitter, friendster dan lain-lain juga dapat dijadikan sebagai media promosi yang juga dapat meningkatkan pengunjung blog anda.

    Dan pada trik kali ini saya akan menjelaskan bagaimana memasang tombol sharing dan tombol submit ke social bookmarking ke dalam blog. Dengan sobat blogger memasang tombol submit/share ke situs social bookmarking seperti ini, akan memudahkan siapapun untuk share artikel/posting sobat langsung ke media bookmarking bila dirasa bermanfaat bagi yang lainnya, ini akan sangat bermanfaat untuk meningkatkan reputasi dan akan meningkatkan pengunjung ke blog sobat. Tombol share/submit yang akan dibuat disini saya rasa sangat lengkap mulai dari facebook, twiiter, digg, stumbleupon, ma.gnolia, delicious, furl, technorati, simpy, spurl, reddit, mybloglog, blogcatalog, dan masih banyak lagi.

    jika tertarik dan berminat memasang tombol tersebut, berikut saya akan jabarkan cara memasangnya ke blog, cekidot:

    1. Pertama, login dulu ke Blog
    2. Masuk ke menu "Edit HTML"
    3. Klik pada Expand Widget Templates
    4. Kemudian Carilah kode berikut ini:
    <data:post.body/>
    atau:
    <p><data:post.body/></p>

    (Note: Gunakan CTRL+F untuk mempermudah pencarian)
    Kode ini biasanya ada 2 buah, pilihlah yang lebih bawah

    5. Setelah ketemu, letakkan kode ini setelah kode <data:post.body/>

    <div style='border-top:0px solid #ccc;border-bottom:3px solid #FE9A2E; padding:10px 0px 10px 0px;margin:15px 0px 7px 0px;width:100%;float:left;height:23px;'>
    <div style='float:right;'>
    <span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
    </div>
    </div>

    6. Selesai, SAVE TEMPLATE anda dan lihat hasilnya. Selamat mencoba...

    Cara Menghilangkan / Menghapus Tulisan "Powered by Blogger"

    Mungkin buat sebagian teman-teman merasa tidak perlu untuk menghapus tulisan "Powered by Blogger" yang terletak dibagian bawah blog kita. Tapi entah kenapa buat saya pribadi selalu merasa tidak nyaman setiap saya melihatnya, maka dari itu saya sempat berfikir bagaimana cara menghilangkannya dan ternyata tutorialnya juga sudah banyak tersebar di internet. Tapi pas saya coba ternyata tidak semuanya efektif / bisa menyelesaikan masalah tersebut secara tuntas hingga akhirnya saya utak-atik dan ternyata berhasil hanya dengan melakukan sedikit perubahan dari yang apa sudah saya ikuti di tutorial yang sebelumnya sehingga hasilnya pun menjadi sempurna dan tidak perlu bolak-balik lagi untuk mencobanya.

    Buat agan-agan yang tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya sebagai berikut:

    1. Bila agan sudah menggunakan antarmuka Blogger yang baru, saya sarankan ganti dulu dengan antarmuka yang lama / lawas biar cara mengarjakannya lebih mudah.
    2. Selanjutnya masuk ke tab menu "Desain" / "Rancangan" kemudian klik menu "Edit HTML".
    3. Beri centang pada tulisan "Expand Widget Templates". 
    4. Jangan lupa download atau 'back up' dulu semua template anda untuk jaga-jaga bilamana nantinya terjadi kesalahan:
    5. Selanjutnya cari kode seperti di bawah ini : 
    6. <b:widget id='Attribution1' locked='true' title='' type='Attribution'>


      *Untuk mempermudah pencarian, tekan tombol "Ctrl" dan "F" kemudian paste kode tersebut di kotak pencariannya:
    7.  Hapus kode-kode berikut:
      <b:widget id='Attribution1' locked='true' title='' type='Attribution'>
      <b:includable id='main'>
      <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
      <data:feedbackSurveyLink/>
      </div>
      </b:if>

      <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
      <data:attribution/>
      </b:if>
      </div>

      <b:include name='quickedit'/>
      </b:includable>
      </b:widget>
    7. "Save" atau "Simpan Template"
    8. Silahkan lihat hasilnya.. "Selamat mencoba, semoga bermanfaat.." :)

    Cara Hapus Akun Blogger

    Untuk menghapus akun Blogger berikut langkah-langkahnya:
    • Langkah pertama anda harus login dulu ke akun blogger anda.
    • Jika sudah login, klik tanda panah yang terletak disebelah kiri tombol "View Blog" kemudian klik "Settings".
    Clik tanda panah > "Settings".
    • Klik menu "Other" yang terletak di bagian menu sebelah kiri.
    Click "Other".
    • Klik tombol "Delete Blog".
    Clik tombol "Delete blog"
    • Klik tombol "Delete This Blog".
    Click "Delete This Blog"
    • Selesai. Blog yang anda hapus dapat dikembalikan dengan menekan tombol "Undelete" seperti pada gambar dibawah sebelum 90 hari terhitung dari tanggal ketika anda menghapusnya.
    Undelete Blog
    Selamat Mencoba.. :)

    Membuat Statistik Visitor di Blogger



    Halo agan-agan, sharing lagi neeh.., hehe.. menanggapi request dari kevin cyber melalui fasilitas ShoutBox yang meminta suwanditea.com untuk meluncurkan tutorial mengenai memasang Statistik Visitor pada web/blog, maka dengan senang hati saya akan coba untuk bantu melalui artikel ini. Harapan saya semoga artikel suwanditea.com kali ini bisa menjawab permintaan dari agan "kevin cyber" dan tentu saja teman-teman Blogger lain yang juga memang sedang mencari tutorial statistik visitor bisa terbantu disini.
    Oke, pesan request dari agan "kevin cyber" tersebut lebih tepatnya adalah seperti ini: "kk, tolong dong Postkan cara membuat Visitor di Web/Blogg. makasih ya gan". Jadi silahkan ikuti langkah-langkahnya dan semoga bermanfaat, selamat mencoba yah... :) 
    • Buka alamat Histats.com disini.
    • Masukkan alamat blog anda pada kolom URL kemudian klik tombol "Pendaftaran".
    • Selanjutnya isi semua kolom data login nya denga data-data anda dan jangan lupa zona waktu nya sesuaikan dengan zona waktu daerah kita.
    • Masih di halaman data login (pada bagian bawahnya), centang pada tulisan "Saya telah membaca dan menyetujui Syarat Perjanjian Penerbit" dan isi kolom cptcha sesuai dengan kode yang muncul kemudian klik "Daftar".
    • Bila pendaftaran anda sudah berhasil, silahkan login menggunakan email dan kata sandi yang baru saja anda daftarkan tersebut.
    • Login sudah berhasil, selanjutnya klik tombol "+Add a website".
    • Silahkan isi site url nya dengan alamat blog anda dan lengkapi juga semua kolom yang disediakan kemudian klik "Lanjutkan".
    • Untuk mendapatkan Counter code nya, klik akun Url blog anda.
    • Klik "Counter CODE" yang terletak di sebelah pojok kanan atas.
    • Klik "add new counter".
    • Silahkan anda pilih model penghitung nya sesuai dengan selera anda.
    • Centang semua informasi yang akan anda tampilkan pada counter kemudian klik "simpan".
    • Klik counter id tersebut untuk melihat code nya.
    • Centang pada tulisan "Site use frames" dan silahkan Copy kode-kode nya.
    • Selanjutnya login ke akun blogger anda.
    • Pilih menu "Layout" kemudian klik "Tambah Gadget".
    • Muncul semacam pop up pada browser anda, pilih "HTML/JavaScript" (klik tanda "+" nya).
    • Paste Code statistik yang tadi sudah anda Copy di website Histats.com kemudian klik "SIMPAN"
    • Selesai, silahkan buka blog anda untuk melihat hasilnya. Selamat mencoba..
    *Terima kasih kepada kevin cyber atas requestnya, terus mampir ke blog ini yah dan saya siap untuk membantu semua teman-teman suwanditea.com apabila memang diminta (selagi masih bisa dan selama saya mampu tentunya, hehe...). Regards..

    Subscribe me

    Topics :
     
    Support : | Sepatu Kickers | Dealer Toyota
    Copyright © 2013. Sakha Prasraya's Blog - All Rights Reserved
    Support by Dealer Nissan Jakarta