Cara Membuat Halaman 404 Error/Tidak Ditemukan

Tidak semua halaman yang dikunjungi pengunjung dapat diakses di situs, akan tetapi terkadang menemukan halaman yang tidak ditemukan ( Page Not Found ). Dengan mendesign, merancang, dan membuat halaman error 404 Redirect ke halaman utama atau berdasarkan arahan, kita dapat mengatasi masalah ini serta membuatnya agar error tersebut dapat memudahkan pengunjung menemukan apa yang dicarinya.

Terdapat halaman error 404 ini bisa disebabkan oleh beberapa faktor yaitu feed yang tidak ditemukan, script javascript pada komentar yang kurang baik,  penghapusan artikel oleh admin, penggantian URL halaman, salah mengetikkan URL oleh pengunjung dan yang lain sebagainya.

Oleh sebab itu, maka pada kesempatan kali ini saya akan berbagi kepada kalian tentang bagaimana cara membuat halaman error 404 tersebut dengan meredirect mereka ke halaman beranda atau homepage pada blog / halaman posting konten lainnya. Redirect halaman ini konsepnya hampir sama dengan Desain / Design Halaman Error 404 Page Not Found yang pernah saya bahas sebelumnya, tetapi perbedaannya yakni pada penerapannya, dimana Desain Halaman Error 404 membutuhkan partisipasi visitor untuk mengklik sebuah link untuk kembali ke homepage, sedangkan Redirect Error Page ke Homepage yakni membawa pengunjung ke hompage atau halaman lain secara otomatis tanpa melakukan klik apa-apa.

Cara Membuat Halaman 404 Page Not Found :

• Login ke Blogger
• Pilih Setelan » Preferensi Penelusuran » Kesalahan dan Pengalihan » Pesan Khusus untuk Laman Tidak Ditemukan » Edit (Lihat gambar di bawah untuk lebih jelasnya)

Di dalam kotak tersebut, anda dapat memberikan kode HTML sesuai dengan design anda.

Cara membuatnya adalah dengan melakukan design di halaman posting. Jadi, buat terlebih dahulu artikel baru di menu Post. Setelah itu anda bisa memberikan kata-kata dan apapun sesuai keinginan anda dngan tampilan bagus, kemudian klik HTML di ojok kiri atas pada toolbar posting. Copy script HTML tersebut dan masukkan ke dalam kotak custom page not found tersebut.

Anda juga bisa menggunakan script di bawah ini, sebagai contoh :
<p align='center'><strong>
<font color='#ff0000' size='25px'>
Error 404<br/>[Page Not Found]...!!!
</font></strong></p>
<br/>
<p align='center'><font color='#0000ff' style='font-size: 25px'><strong>Kami mohon maaf atas ketidaknyamanan ini.</strong></font></p><br/>
<p align='center'><font color='#000' style='font-size: 15px'>Dalam beberapa saat, sobat akan dialihkan ke halaman lain secepatnya...!!!</font>
<script type = "text/javascript">
//Redirect Page Not Found - Error 404 By Lostsector
LS_redirect = setTimeout(function() {
location.href= "Masukkan URL Redirect tujuan Anda disini"
}, 5000);
</script>

Gantilah kode berwarna biru diatas dengan url halaman yang anda tuju. Lalu klik Save.

Demikian tutorial blogger dan tahapan kali ini mengenai pemasangan kode untuk meredirect halaman error 404 page dan mendesignnya. Terimakasih dan semoga bermanfaat.

Cara Mengganti Logo Favicon Blog pada Browser

Favicon hampir serupa dengan sebuah logo. Favicon adalah icon atau gambar yang menjadi sebuah ciri khas dari setiap situs yang muncul pada tab browser. Logo Favicon ini pada blog diiniliasasikan sebagai bentuk lambang dari nama sebuah website. Untuk anda yang belum mengganti favicon ini, yuk ikuti cara mudah membuat favicon logo di blog.

Setelah di postingan sebelumnya Media Blogger mengulas Cara Membuat Menu Bootstrap pada Blogspot, melangkah ke bagian Tutorial Blogger selanjutnya yaitu mengenai icon di blog. Sebelum melangkah ke cara pemasangannya, secara berurutan dan terperinci kita buat dulu favicon ini.

Untuk membuatnya kita dapat menggunakan gambar dalam format PNG,JPEG etc. atau bisa juga dengan sebuah logo .ICO. Bagaimana caranya? Liat dulu contoh gambar favicon berikut :

 Cara Membuat Logo :
1. Untuk membuatnya caranya mudah, pertama kita install terlebih dahulu program untuk membuat logo.
Anda bisa mendownloadnya disini.
2. Disana terdapat design, serta fasilitas yang tersedia yang akan mempermudah proses membuat logonya.
Pokoknya mudah deh ukurannya softwarenya juga kecil.

Cara Membuat Gambar untuk Logo :
1. Persiapkan terlebih dahulu ukuran untuk dijadikan favicon di blogger yaitu 53x53 pixels.
2. Buat icon tersebut sesuai dengan ciri khas blog anda.
3. Simpan gambar.

Setelah gambar image / icon logo tadi sudah jadi serta siap dipakai, langkah selanjutnya adalah mengupload hasil karya anda tersebut. Lalu ambil deh URL Link yang diupload tadi.

Cara Upload gambar dapat melalui media hosting, website, dan bisa juga melalui blog kita sendiri. Bisa di upload di Photobucket.com . Kalau upload di blog caranya cukup masuk ke menu Posting. Masukkan gambar / logo yang ingin diupload. Ambil url nya di bagian kiri atas sebelah Kotak Judul Posting, ada Compose dan HTML. Klik HTML.

Langkah terakhir, adalah memasangnya ke dalam Edit HTML Template blog.
Masukkan kode di bawah ini di dalam meta tag anda atau di bawah kode <b:include data='blog' name='all-head-content'/> bisa juga taruh di bawah <head>

<link href='http://1bp.blogspot.com/images/RP%20Logo%20Square%20.25x2400.jpg' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Ganti kode warna merah dengan url link gambar anda yang telah diupload tadi.
Simpan Template.

Kode script type='image/vnd.microsoft.icon' adalah agar logo favicon dapat muncul di semua browser. Baik itu browser Google Chrome, Mozilla Firefox, Safari, Opera Mini, dan lain sebagainya.

Demikian lah cara mengganti logo favicon blog pada browser. Panduan Cara Membuat Halaman Blog dengan Mudah dapat anda baca sebagai referensi pengetahuan anda.

Cara Membuat Iklan Melayang Dengan Tombol Close

Sebagai seorang penayang jaringan iklan ( Publisher ), menempatkan iklan pada posisi yang tepat tentu sangat diperlukan. Selain dengan faktor design template, anda juga harus cermat agar pengunjung merasa nyaman dan tidak terganggu munculnya tampilan iklan yang kita pasang. Oleh karena itu, pada malam hari ini Media Blogger akan memposting "Cara Membuat Iklan Melayang dengan Tombol Close".

Menempatkan iklan melayang dapat diletakkan pada Header, Footer, Sidebar ( Kanan dan Kiri ) , atau bisa juga membuat iklan melayang di tengah halaman tentunya dengan tombol close 1x click. Artinya dengan bantuan tombol penutup ini dapat mempermudah pengunjung menutup iklan yang mungkin menggangu sebuah elemen pada posisi artikel.

Salah satu keunggulan dari memasang iklan pada footer blog adalah iklan teman-teman dapat dilihat lebih jelas pada setiap postingan. Cara ini dianggap lebih unggul daripada memasang iklan pada sidebar. Ini karena pengunjung akan lebih banyak melihat ke bawah saat sedang membaca postingan atau ingin berkomentar daripada melihat ke samping.

Cara Membuat Iklan Melayang di Footer dengan Tombol Close :
1. Login ke blog anda.
2. Masuk ke bagian Tata Letak / Layout , klik Add a gadget.
3. Pilih HTML / Javascript
4. Kemudian letakkan kode berikut di dalamnya.
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {width: 100%; bottom: 0; left: 0; position: fixed; opacity: 0.9;}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 100px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 6px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-TNhPQzB8_OYZnqIkB5LBqNM4hdFN0SfAprSprzyx504SJqFCOg8w4NmGbVhS_bUv7l7VrK9OSXeMrAAwz8Whpo8tMiZdoX_FbbCBhQ3ofzCuRm86YMqDXnViFkfRpNLrVCjknbZVwdf/s1600/close-icon.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>
Masukan kode script iklan anda di sini
</center></p>
</p>
</div>

5. Save Widget tersebut.

Keterangan Pemasangan Iklan :
Ganti tulisan warna hijau diatas dengan script iklan anda.

Untuk di Kanan / Kiri silahkan baca Cara Menempatkan Iklan di Tengah Postingan. Cara Pasang Iklan Otomatis di Postingan.
Membuat Iklan Melayang ( Floating Ads ) memang tidak terlalu sulit, selamat mencoba.

Cara Membuat Menu Bootstrap pada Blogspot

Cara Membuat Menu Bar di Blog - Tentu anda sudah mengenal dan mengetahui dengan istilah Menu / Menu Bar ? Menubar adalah sebuah kotak tab disertai dengan bingkai garis yang berisi daftar isi mengenai kategori, istilah, komponen, dll yang berisi navigasi link. Fungsi dari menu ini akan memudahkan pengunjung saat membaca sebuah artikel dan ingin mencari sesuatu yang lainnya yang diinformasikan oleh menu bar tersebut.

Manfaat penting dari memasang menu horizontall ( berbentuk memanjang ke samping ) adalah akan memberikan kemudahan dalam mengarahkan pembaca menuju halaman-halaman lain di blog yang kita buat mulai dari Halaman Utama ( Homepage ), Contact Us, Sitemap, Tentang Kami, Ketentuan dan lain sebagainya. Membuat menu sangatlah penting karena dijadikan sebagai navigasi penunjuk utama untuk mengarahkan link yang satu dengan link lainnya.

Kesempatan singkat ini Media Blogger akan memberikan pengarahan Cara Memasang Menu yang lebih cantik, keren, dinamis dan menarik. Salah satunya adalah Menu Dropdown mirip fasilitas Bootstrap. Berikut ini adalah contoh hasil dari menu tersebut.

Anda juga dapat mendownload source code dan contoh demonya pada link ini.

Menubar ini juga bisa diisi bagian-bagian submenu lain yang dapat anda optimalkan. Jadi, ketika anda mengarahkan kursor di salah satu daftar menu tersebut, akan muncul submenu lainnya. Kesimpulannya, jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Menubar ini sudah dibuat agar responsive terhadap penampakan di browser lainnya. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan disini. Sudah tau kan bagaimana tampilan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok dan terbilang sederehana. Mau tau cara pembuatannya? Yuk, ikuti tutorial singkat panduan berikut :

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menu{
    width: 100%;
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
    background: #111;
    background: -moz-linear-gradient(#444, #111);
        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 50px;
    border-radius: 50px;
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
    float: left;
    padding: 0 0 10px 0;
    position: relative;
}

#menu a{
    float: left;
    height: 25px;
    padding: 0 25px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
    color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
    color: #fafafa;
}

#menu li:hover > ul{
    display: block;
}

/* Sub-menu */
#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a{
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
}

*html #menu ul a{ /* IE6 */
    height: 10px;
    width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
    height: 10px;
    width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
    background: -moz-linear-gradient(#04acec,  #0186ba);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background: -webkit-linear-gradient(#04acec,  #0186ba);
    background: -o-linear-gradient(#04acec,  #0186ba);
    background: -ms-linear-gradient(#04acec,  #0186ba);
    background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

6. Langkah selanjutnya, carilah kode <div id="content-wrapper">
7. Pasang kode dibawah ini diatas kode yang berwarna merah tersebut :
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Categories</a>
        <ul>
            <li><a href="#">CSS</a></li>
            <li><a href="#">Graphic design</a></li>
            <li><a href="#">Development tools</a></li>
            <li><a href="#">Web design</a></li>
        </ul>
    </li>
    <li><a href="#">WorkShop</a></li>
    <li><a href="#">About</a></li>
    <li><a href="http://impoint.blogspot.com">Search Engine Optimization</a></li>
</ul>

8. Bagi kamu yang tidak menemukan kode di tahap ke 6, bisa mencari kode <div id='header....>
Anda dapat menaruh kodee no. 7 pada bagian div lainnya contohnya header-wrapper dll itu tergantung dari nama ID yang digunakan pada template kalian. Biasanya sang creator template memberi nama yang sama.
Letakkan kode no. 7 di bawah <div id='header> atau <div id='header-wrapper'> atau diatas kode <div id='main

Simpan template dan lihat hasilnya.
Untuk membuat submenu (menu dropdown) anda peerlu menambahkan kode <ul> sebelum diakhiri penutup </li> dari menu utama. Contohnya pada script nomor 7, saya beri warna biru.

Pada umumnya setiap menu itu dibentuk atas perintah kode <li><a href.......>Nama Menu</a></li>
Jadi, untuk memasukkan submenu dibutuhkan script bagian <ul> dan penutup </ul>

Sedangkan untuk memasukkan link, silahkan ganti tanda pagar diatas dengan url link yang anda tujukan.
Ketelitian dan kecermatan dalam memasang menu bar akan membuat menu anda terpasang rapih dan teratur. Anda dapat mengubah sereta mencocokkan warna, style , text ( bentuk huruf ), ukuran pada template blog dan sebagainya. Semoga panduan dan tutorial singkat mengenai cara membuat menu dropdown bootstrap pada blogspot ini dapat bermanfaat banyak bagi semua orang.

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

Cara Memasang Musik Playlist Lagu MP3 di Blogger

Setelah kita mengenal cara memasang lagu di blog, tutorial pembahasan topik kali ini adalah mengenai Playlist MP3 Musik layaknya seperti di Media pemutar musik/video seperti Winamp, GOM Player, KM Player dan lainnya. Pada contoh Media Player tersebut terdapat sebuah Playlist yaitu kumpulan musik yang dapat kita pilih dan anda mainkan.

Hanya saja playlist disini hanya dapat dimainkan auto / otomatis, dan hanya dapat menekan tombol nextplay yaitu untuk mengganti ke lagu berikutnya secara berurutan. Memasang Widget/Gadget Musik Player di Blogger memiliki kelebihan dan kekurangan. Semuanya tergantung pada user / pengguna yang mendengarkan lagu tersebut, apakah cocok atau tidak.

Selain itu faktor lainnya adalah akan sedikit menambah beban berat loading blog. Tetapi apabila pengunjung menggunakan koneksi internet yang stabil maka akan mudah, enak dan cpat untuk mendengarkan musik yang tlah tersedia. Menuju ke cara memasang dan membuat playlist pada topik ini.

1. Silahkan anda pergi ke website scmplayer.net
2. Anda akan melihat tampilan sperti gambar diatas, lalu pilih Choose Skin.
    Kamu dapat memilih tampilan yang sesuai dengan tema blog dan bebas memilih skin playlist / warna yang tersedia.
3. Kemudian klik bagian selanjutnya yaitu Edit Playlist.
4. Di dalam kotak tersebut terdapat 2 pilihan.

• Manual Playlist = Memasang lagu dengan url manual. Jadi kita perlu melakukan upload terlebih dahulu, atau bisa juga melalui website lain seperti 4hared,beeMP3,MP3Skull, dll.
• RSS Podcast / SoundCloud Set / Youtube Playlist = Disini terdapat 3 opsi yang dapat dilakukan salah satunya bisa melalui Youtube. Jadi, kita hanya prlu mencari video / lagu yang ingin dicari. Nanti pada saat dimainkan di blog, hanya audio / suara saja yang akan terdengar. Videonya tidak akan ditampilkan. Carilah lagu yang video nya asli biar suara musik tersebut bagus dan belum diedit orang lain.

Perhatikan pada gambar yang saya lingkari merah, disini terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari diyoutube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video). Pastikan anda memasukkan url dengan benar agar mp3 tersebut dapat muncul dan berjalan di blog.

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Jika sudah selesai, klik tombol Done atau Save. Kemudian copy script code mp3 yang diberikan.

Langkah terakhir anda hanya perlu memasukkan kode tersebut ke dalam Widget anda.
Caranya :
1. Masuk ke Blogger.com
2. Pilih Layout / Design / Tata Letak, kemudian pilih letak yang sesuai dan klik Tambah Gadget / Widget.
3. Pilih HTML/Javascript
4. Masukkan kode yang tadi di copy dan letakkan di dalam kotak kedua (yang besar).
5. Save Template.

Semoga Cara Memasang Musik MP3 Playlist di Blogger ini dapat bermanfaat. Untuk memberikan dukungan positif terhadap artikel ini, silahkan klik link berikut.

Cara Membuat Artikel Terkait dengan Gambar

Salah satu cara yang relatif tepat untuk meningkatkan aktivitas dari pengunjung adalah dengan membuat Artikel Terkait / Related Posts. Baik itu dengan Gambar / Thumbnail atau url link biasa yang disertai dengan Judul Artikel. Beberapa saat lalu, Media Blogger juga sudah memberikan cara yang mudah untuk memasang artikel terkait ini hanya saja belum disertai Gambar.

Fungsi dari penggunaan gambar Thumbnail itu sendiri lebih ke arah pmbuatan tampilan yang menarik sehingga meningkatkan minat dan simpati pengunjung untuk membaca artikel / postingan lain yang telah saudara buat. Contoh dari hasil pemasangannya adalah sebagai berikut :

Sebenarnya sobat dapat memanfaatkan fasilitas daripada Linkwithin, hanya saja terkadang disaat server sedang down akan membuat loading blog anda menjadi lebih lambat. Untuk mengoptimalkannya terlebih lagi dalam hal Search Engine Optimization (SEO), sahabat semua harus lebih meningkatkan kinerja pada blog anda.
Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan menjadi antusias meneliti lebih lanjut setiap halaman yang berkaitan di dalam posting artikel anda.

Cara Membuat Artikel Terkait (Related Posts) dengan Gambar Thumbnail :
1. Pada dashboard di blogger.com pilih menu Template > Klik Edit Template agar bidang kerja pengeditan sudah aktif.
2. Kemudian tekan CTRL + F, dan cari code ]]></b:skin>
    Setelah ketemu, COPAS kode berikut ini di atas / dibawah kode ]]></b:skin>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts{float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px}
#related-posts h2{font-size:1.6em; font-weight:bold; color:black; font-family:Georgia,Times New Roman,Times,serif; margin-bottom:0.75em; margin-top:0em; padding-top:0em}
#related-posts a{color:black}
#related-posts a:hover{color:black}
#related-posts a:hover{background-color:#d4eaf2}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rj9hO2U276zSGk4mfr6dsKM6clnR1db1wjfHo3siBvhIVLiBid5QegX1KWI615kS0NXREItDsUUUvjojejR4sKT7qriCsxaU39lQbBLykpHt4N7cjiD0ex95Y9foNyEyoUMqq27lwZo/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

Penerapan Kode HTML Artikel Terkait Bergambar
Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna yang dapat anda EDIT serta disesuaikan sendiri berdasarkan keinginan, caranya

    Silahkan Anda cari kode <data:post.body/>
    Kemudian letakan kode di bawah ini setelah kode <data:post:body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
<div style='clear:both'/>
</b:if>

Simpan Template Anda.

Keterangan Mengenai Kode Artikel Terkait Bergambar

1. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.
2. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.
3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya.
4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.
5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikian artikel tentang Cara Membuat Artikel Terkait dengan Thumbnail Gambar. Semoga dengan tutorial blogger / blogspot ini dapat bermanfaat dan menambah wawasan anda. Semangat Blogging For Media Blogger.

Cara Membuat Kotak Komentar Google Plus

Beberapa saat lalu, blogger telah memperbaharui editor html pada template blog. Sekarang, Kotak Komentar Google+ juga merupakan perangkat tambahan terbaru. Bagaimana cara membuatnya ? Sebelum mengikuti setiap langkah, kita harus mengetahui terlebih dahulu fungsi dari komentar dengan memanfaatkan jejaring sosial google plus.

Fitur Komentar System di Google+ :
1. Semua Aktifitas dalam satu Media.
Setiap kali kita melakukan share yaitu pada saat mempublikasikan artikel posting terbaru anda maka secara otomatis anda akan berbagi ke semua orang. Setiap jejak komentar atau juga menambah plus button akan menghasilkan komentar mereka masuk ke dalam feed anda. Dengan ini, situs anda akan menjadi praktis dan muncul juga di komentar blog anda.

2. Menambah jumlah traffik dan lalu lintas
Seperti yang kita ketahui, hampir semua produk dari Google diberikan keistimewaan swasta tersendiri. Dengan memanfaatkan setiap produk yang dimilikinya maka secara otomatis situs yang kita buat menjadi lebih maksimal dan semakin meningkatkan pengunjung.

3. Interface yang Interaktif

 Komentar yang muncul dalam urutan yang sistematis berdasarkan tanggal diterbitkan sehingga pengguna dapat menjawab atau menambahkan satu komentar. Anda dapat dengan mudah chat / balas komentar seperti merasa seolah-olah Anda sedang mengobrol dengan teman-teman dekat atau sahabat sekolah.

4. Bersifat Publik

Sekarang pembaca Anda akan dapat memposting komentar umum atau pribadi kepada orang-orang dalam lingkaran Google mereka. Selain itu, ketika orang browsing komentar mereka dapat melihat semuanya, sebagian sebagai orang, atau hanya dari orang-orang di lingkaran mereka.

5. Admin Comment System
Anda sebagai pemilik blog akan memiliki hak penuh terhadap setiap komentar yang masuk karena anda adalah seorang author. Anda dapat dengan menghapus, mengedit dan menambah komentar sesuai dengan keinginan.

Cara Membuat Kotak Komentar Google Plus Berdampingan dengan Blogger :
1. Silahkan anda masuk ke Google+. Klik More. Yaitu kita akan membuat halaman yang nantinya sebagai tempat untuk mengarahkan kepada situs anda.

Silahkan anda klik More dan pilih Pages.
Kemudian buatlah halaman baru dan isi sesuai dengan data blog anda seperti terlihat pada gambar di bawah ini.

2. Kemudian jika sudah selesai, silahkan Simpan.

3. Masih di Google+, klik Profile lalu pilih About dan cari di bagian kanan seperti gambar berikut.

4. Pada bagian Link, Isi Other Profiles, Contributor To, dan Links dengan memasukkan url blog anda.
5. Simpan Profile apabila telah selesai edit.

6. Login ke Blogger.com
7. Klik Google+ pada daftar menu elemen blogger.

8. Setelah anda masuk, lalu akan muncul sebuah tampilan. Disana terdapat identitas profile Google+ Anda dengan Blogger.

Klik Use Google+ Comments in Your Blog

Jika anda telah melakukan langkah 1 dan 5 dengan benar, maka dibagian bawah foto profile akan terdapat page blog anda.

Seperti terlihat pada gambar terdapat Media Blogger page milik saya.

Setelah diklik makan akan tersimpan secara otomatis oleh sistem.

9. Barulah kita akan masuk ke bagian pengeditan HTML.
10. Masuk ke Template, Pilih Edit HTML, Klik Edit Templates untuk melakukan pengeditan.
      Untuk berjaga-jaga silahkan backup (download terlebih dahulu) template anda.
11. Anda dapat melakukan pencarian kode dengan mengklik dimana saja pada bagian dalam lembar kerja berbentuk kotak di edit html tersebut kemudian tekan CTRL + F.
12. Cari kode <div class='post-footer'>
13. Copy script kode berikut di bawahnya.
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>
14. Kemudian cari lagi kode <b:includable id='threaded_comments' var='post'>
Silahkan anda lihat atau download terlebih dahulu scriptnya di Comments Hack Tutorial V2
[ untuk mendownload, kik link diatas dan tunggu 5 detik lalu klik skip ad ] Comments Script Bot Cbox Link2

15. Hapus kode yang berada di bawah kode <b:includable id='threaded_comments' var='post'> sampai kode </b:includable>

16. Letakkan script yang didownload tadi dibawah <b:includable id='threaded_comments' var='post'>

17. Selanjutnya cari kode <b:includable id='comment_picker' var='post'> dan hapus sampai kode </b:includable> seperti pada gambar.

18. Ganti dengan kode berikut ini :

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
    <b:else/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
      <b:else/>
        <b:include data='post' name='threaded_comments'/>
      </b:if>
    </b:if>
  </b:if>
</b:includable>

19. Selesai dan Simpan Template Anda.

Cukup panjang pada tutorial kali ini, semoga dapat dilakukan dengan mudah dan benar. Source by mbloggerlab. Baca juga artikel Cara Merubah Kotak Komentar Blogger Keren. Tolong kepada para pengunjung hargailah usaha saya untuk memposting dengan tutorial yang lengkap ini. Jangan copy paste terus, karena setelah saya tinjau banyak sekali artikel saya yang dicopy paste hingga 16ribu posting artikel yang sama. Kalau bisa seharusnya kamu mengklik iklan google adsense saya agar lebih semangat lagi posting ^^ Just Kidd .

Cara Merubah Kotak Komentar Blogger

Memodifikasi tampilan blog merupakan suatu hal yang perlu dilakukan. Hal ini dilakukan agar blog atau toko online yang kita buat diminati banyak pengunjung. Oleh karena itu, desain adalah hal pokok yang harus diperhatikan. Salah satu cara agar tampilan blog terlihat cantik adalah dengan memodifikasi kotak komentar standart menjadi kotak komentar facebook.

Cara pembuatannya sangat mudah yaitu hanya menambahkan kode css tanpa perlu mengedit elemennya. Bahkan kita harus menghapus kode-kode yang memiliki kesamaan agar tidak akan merubah hasil akhirnya. Contoh dari tutorial membuat komentar blogger menjadi facebook dapat dilihat pada gambar.

Banyak tutorial CSS untuk merubah tampilan standart blogger Thread comments yang lain. Berikut panduan cara memasangnya :
1. Login Ke Blogger.com
2. Pilih Template > Klik Edit Template ( agar kita dapat mengedit template )
3. Klik tanda panah hitam pada bagian <b:skin> .... ]]></b:skin>
4. Download CSS Script Code Facebook V2 .
5. Letakkan script tersebut diatas kode ]]></b:skin> atau bisa didalam <b:skin>
6. Simpan Template anda.

Jika ada perbedaan, berarti ada beberapa kode yang sama dari template bawaan sebelumnya. Sedangkan untuk menambahkan kotak komentar facebook yang asli silahkan baca di Forex Comment.

Cara Mempercantik Blog dengan Tampilan Menarik

Banyak cara mempercantik blog dengan tampilan menarik, unik, rapih, dan dinamis. Karena menurut pengamatan saya, apabila pengunjung mengunjungi sebuah halaman blog yang acak-acakan meskipun dari segi non interfacenya bagus maka secara otomatis mereka akan cepat pergi. Oleh karena itu, pada artikel ini saya akan membagikan tips seputar blogging.

Di sini saya akan berbagi trik bagaimana cara agar blog yang kita punya menjadi lebih cantik, keren, unik dan membuat nyaman para pembaca menelusuri setiap bagian halaman. Penasaran kan?

Oke langsung ke topik utama isi artikel. Ada beberapa fitur yang bisa kamu tambahkan untuk mempercantik blog kalian. Beberapa aspek yang penting dan harus anda perhatikan adalah :

Template, Widget, Warna Tulisan, Warna Background, Artikel, dan Navigasi.

6 elemen inilah yang harus anda optimalkan guna memberikan kenyamanan bagi para pembaca.
Mungkin secara detailnya tidak akan saya bahas secara lengkap hanya dalam satu buah artikel ini, tetapi saya akan bahas di kesempatan berikutnya dengan beberapa aspek. Mengoptimalkan Score Card di Google Adsense pada saat ini menjadi top hitz untuk mengoptimalkan design blog dan mempercantiknya.

Beberapa tips mengoptimalkan design dan mempercantik blog :

1. Gunakan template sesuai dengan isi dari blog.
2. Pasang Widget Fans Page Like Box Facebook.
3. Memasang Keterangan Waktu baik itu Jam, Tanggal, Hari, Kalender dan sebagainya.
4. Gunakan widget Shoutbox atau Buku Tamu agar pengunjung dapat berinteraksi.
5. Pakai Sharethis Button di setiap artikel.
6. Jangan gunakan warna Judul Posting atau warna Text Body halaman blog kamu dengan warna terang dan silau.
7. Jangan menggunakan animasi flash/ jQuery yang membuat beban loading blog kamu menjadi berat.
8. Berikan artikel yang berkualitas dan bermanfaat.
9. Jangan tidak menghiraukan Judul. Semakin menarik judul, semakin besar kemungkinan untuk dibaca oleh pengunjung.
10. Tambahkan navigasi mengenai status dimana pengunjung berada, dan kemudahan pengunjung untuk menemukan informasi yang dicari.

Dengan memperhatikan semua kriteria pengoptimalan tampilan blog seperti diatas, diharapkan mampu meningkatkan jumlah Pageviews anda per user. Fungsi Sitemap, Link Exchange, Cara Membuat Halaman Blog.

Pengunjung akan dengan mudah menyukai sebuah halam blog apabila memberikan informasi mengenai apa yang sedang dicarinya. Agar informasi dapat dilihat dan ditemukan dengan mudah tentu kualitas artikel, navigasi yang baik, dan design yang bagus sangat dibutuhkan.

Membuat Tombol Share dibawah Posting

Tombol banyak digunakan sebagai salah satu alternatif seperti guest book, read more, dll. Artikel Cara Membuat Tombol Share dibawah posting ini terinspirasi dari multifungsi sebuah blog sebagai media untuk mempublikasikan artikel ke social networking agar menjadi lebih bermanfaat dan berguna untuk orang banyak.

Membuat Tombol Share Facebook, Google+, Pinterest, di Blog memang mudah. Postingan sebelumnya kita juga sudah membahas Cara Membuat Efek Salju, Daun Melayang, Bintang Berjatuhan di Blog.

"Berbagi itu Indah" Begitulah kata yang tepat untuk menu tutorial blogger kesempatan pagi ini. Bagaimana cara pemasangannya, yuk ikuti panduannya berikut ini :

1. Masuk ke menu template di dalam blogger, pilih EDIT HTML ,Klik dimana saja pada kotak edit template agar pointer mouse ada di dalamnya.
2. Copy kode di bawah ini dan letakkan diatas kode ]]></b:skin> ( Dapat dengan menekan CTRL + F di Keyboard anda )

#post-share-button{margin-top:25px;background:#fafafa;padding:10px 10px 5px 15px;width:95%}

3. Lalu cari lagi kode yang seperti ini <div class='post-footer-line post-footer-line-3'>,letakkan kode di bawah ini diatas kode tersebut.

<div id='post-share-button'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
<span style='margin-left:15px'><a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/></span>
<span><span id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</span>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>

function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> </span>
</div>

4. Simpan Template Anda.

Demikian tutorial singkat mengenai pemasangan Tombol Share This di bawah Artikel. Untuk anda yang ingin merubah tampilannya menjadi lebih bagus dan cantik disertai icon dapat menuju ke artikel Share Button Beautifull in Bottom Article.

Membuat Tombol Back To Top Blogger

Berbagai macam cara dilakukan untuk mempermudah pengunjung saat mengunjungi halaman blog kita. Tombol Back To Top adalah salah satu yang sering digunakan dan berfungsi untuk mempercepat proses scroll ke bagian atas. Biasanya button ini terpasang di sebelah kanan atau kiri bagian bawah widget. Pembuatannya cukup mudah dan simple, karena hanya menggunakan script CSS biasa tanpa menggunakan JQuery. Bagaimana cara memasangnya? Ikuti panduannya yang akan saya jelaskan berikut ini.

Cara Membuat Tombol Kembali Ke Atas di Blogspot :
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget, anda dapat menaruhnya bebas di letak apapun.
4. Pilih HTML/Javascript.

Copy Kode berikut : <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="link URL gambar" /></a></div>

5. Save Template.
Anda dapat mengganti link URL gambar dengan gambar panah ke atas yang anda inginkan. Atau dapat menggunakan opsi ke 2.

Add Go To Top Button with CSS for Blogger :
1. Login ke akun blogspot anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </body> dengan menggunakan CTRL + F (Search Find)
4. Letakkan kode berikut diatasnya atau sebelum kode </body>

<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>

5. Simpan Template.

Demikian tutorial blogspot yang mudah dan simple mengenai Cara Memasang Tombol Back To Top. Anda dapat mengikuti panduan menarik lainnya yang dapat anda pahami dengan mudah seperti Cara Membuat Efek Zoom Pada Gambar , Benarkah Keyword Density tepat untuk SEO, dan Download Prmeium Template Free .

Membuat Gadget Widget Blogspot Terlengkap

Tutorial cara memasang widget / gadget banyak dijelaskan oleh para bloggers. Dalam membuat widget, tidak hanya keren, cantik, menarik, simple, dan terlengkap yang dibutuhkan. Kita memerlukan beberapa faktor penting seperti posisi penempatan widget, fungsi dari widget tersebut, dan script html yang digunakan.

Agar gadget blog yang kita pasang jauh lebih optimal kita dapat memperkecil ruang untuk setiap widget tersebut dengan baik. Bukan hanya dari segi ruang, tetapi juga dari susunan script HTML/Javascript , CSS, JQuery dan lainnya yang kita gunakan.

Subscribe Widget Blogspot di Btemplate yang sangat elegan, cantik, dan keren tentu akan menarik untuk anda seperti terlihat pada gambar diatas. Bagaimana cara pembuatan dan pemasangannya? Mari ikuti, tutorial membuat widget blogspot berikut ini.

Membuat Gadget/Widget Blogspot Beautifull :
1. Login ke Blogger.com
2. Masuk ke bagian Layout / Design Rancangan
3. Pilih posisi gadget yang ingin anda tempatkan, pilih tambah widget.
4. Kemudian pilih HTML/Javascript.
5. Copy kode di bawah ini, dan masukkan di kotak tersebut. Dan beri Nama Gadget tersebut (kosong tidak apa).

<style type="text/css">
/*<!CDATA[*/
#mediablogger{width:300px;margin:auto;padding:0;}
.mediablogger-googleplus {height: 57px;}
.mediablogger-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.mediablogger-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.mediablogger-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.mediablogger-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.mediablogger-twitter a.twitter-follow-button {display: block;}
.mediablogger-twitter iframe {margin: 9px 11px;}
.mediablogger-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.mediablogger-sociallinks a {text-shadow: 1px 1px white;}
.mediablogger-sociallinks .mediablogger-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.mediablogger-sociallinks .mediablogger-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjALE-cfmGhIAUdvD9IwX1qS_ET868pHOcuhtfAXwwpxBSszFInmFA3zvxC9QRZ-gN324_ugkU-9LIr__YwjuDDa112S_0v43GxtdKsT9288F-5TWR_-Z3SRd9Yhvqw_AxnKK7-fvT6Lg/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.mediablogger-sociallinks .mediablogger-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.mediablogger-sociallinks .mediablogger-social li a:hover {text-decoration: underline;}
.mediablogger-sociallinks .mediablogger-social li.technorati {background-position: 0 -180px !important;}
.mediablogger-sociallinks .mediablogger-social li.rss {background-position: 0 -240px !important;}
.mediablogger-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.mediablogger-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.mediablogger-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.mediablogger-emailbox input.emailu:focus {color: #333;}
.mediablogger-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.mediablogger-emailbox input.submitu:hover {text-decoration: none;}
.w2bOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.w2bOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.mediablogger a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="mediablogger">
<div class="mediablogger-googleplus">
   <script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
   var po = document.createElement("script");
   po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(po, s);
})();
/*]]>*/
   </script>
   <div class="g-plus" data-href="https://plus.google.com/114260774078734881680" data-width="300" data-height="69" data-theme="light"></div>
</div>
<div class="mediablogger-facebook">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fpemakan.wortell&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="mediablogger-gplusone">
   <script type="text/javascript">/*<![CDATA[*/
     (function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();/*]]>*/
   </script>
   <div class="g-plusone" data-size="medium" data-href="http://impoint.blogspot.com/"></div>
   <span>Recommend on Google</span>
</div>
<div class="mediablogger-twitter">
   <a href="https://twitter.com/ravdania" class="twitter-follow-button" data-show-count="true">Follow @ravdania</a>
   <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="mediablogger-sociallinks">
   <ul class="mediablogger-social">
<li class="technorati"><a href="http://technorati.com/blogs/impoint.blogspot.com">Technorati</a></li>
<li class="rss"><a href="http://impoint.blogspot.com/feeds/posts/default">RSS</a></li>
   </ul>
</div>
<div class="mediablogger-emailbox">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mediablogger1', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
   <tr>
<td>
   <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
   <input class="submitu w2bOrange" type="submit" value="Subscribe"/>
</td>
   </tr>
</table>
<input name="uri" type="hidden" value="mediablogger1"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div>
<div class="mediablogger">
   <a href="http://impoint.blogspot.com/">Get this Gadget</a>
</div>
    </div>

6. Ganti kode yang diberi warna dengan keterangan sebagai berikut :

• Ganti kode warna merah dengan ID Google Plus anda.
• Kode warna biru : Ganti dengan ID Facebook anda.
• Kode warna hijau : Ubah dengan nama akun twitter anda.
• Kode warna biru tua : Ubah dengan url blog anda.
• Ganti kode warna orang : dengan ID Feedburner Google anda.

Dengan memaksimalkan tempat, tentu akan menghemat elemen sidebar, footer, header ,body dan lainnya sesuai dengan pengaturan di blog / website anda. Jika anda ingin menambahkan widget lain yang keren dan minimalist dapat membaca artikel berikut :

1. Cara Membuat Kotak Komentar Facebook di Blog
2. Cara Mengganti Background Blog
3. Cara Memasang Musik MP3 Blog 

Cara Membuat Efek Zoom pada Gambar

Seperti yang kita ketahui, Photoshop adalah software untuk mengolah, mengedit, dan desain gambar. Berbagai macam efek seperti Brush, Clone Stamp, Magic Blur, Krop, dan sebagainya, tetapi tidak dengan efek zoom di Blogger. Karena efek zoom lebih kepada gambar yang ditampilkan lalu apabila dilihat akan membesar secara otomatis pada blog.

Zoom berfungsi untuk memperbesar atau memperkecil penglihatan sebuah gambar. Dengan memberi efek zoom di gambar artikel kita, maka akan membuat blog kita lebih terlihat menarik dan juga mengurangi berat loading blog apabila menggunakan gambar yang besar.

Cara pembuatannya cukup mudah dan simple, langsung ke tips cara membuatnya. Artikel Cara Merubah Background Blog dengan Gambar dapat anda baca juga.

Cara Membuat Efek Zoom pada Gambar :

1. Login ke akun blogger.com
2. Template >> Edit Html >> Lanjutkan >> Beri centang "Expand Template Widget".
3. Letakkan kode berikut ini tepat diatas kode ]]></b:skin> untuk caranya dengan menekan ctrl+F

    .post img:hover {
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.3); }

4. Klik "Simpan Template" dan lihat salah satu postingan blog anda.

Begitulah cara sederhana untuk menampilkan gambar posting membesar apabila tersentuh mouse di blog. Semoga panduan dan tutorial cara membuat efek zoom pada gambar tersebut dapat bermanfaat.

Cara Membuat Efek Salju, Daun, Bintang Berjatuhan

Berbagai macam widget dan gadget banyak digunakan untuk menghiasi dinding halaman blog. Efek Salju, Dau, dan Bintang bertaburan lalu berjatuhan adalah yang sering digunakan. Layaknya seperti di musim semi daun berjatuhan dengan indahnya.

Cara Membuat Efek Salju, Daun, dan Bintang berjatuhan sebenarnya mudah. Widget bertebaran ini akan membuat pengunjung menjadi tidak bosan mengunjungi halaman kita. Cara Pembuatan dan cara memasangnya adalah sebagai berikut :
Memasang Efek Salju Bertaburan / Berjatuhan :
1. Login ke Blogger.com
2. Klik Nama Blog Anda.
3. Kemudian pilih Template.
4. Lalu Edit HTML dan Centang Expand Widget Template
5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>
6. Simpan Template.

Membuat Efek Daun Berjatuhan di Blog :
Caranya sama seperti langkah 1 sampai 4 diatas.
Lalu copy kode ini diatas </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Cara Memasang Efek Bintang berjatuhan di Blog :
Copy kode berikut dan letakkan diatas kode </head>
1. <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>

Anda dapat menggunakan kode pertama atau kedua sesuai keinginan Anda. Untuk mengganti warna lainnya anda dapat mengunjungi halaman Kumpulan Efek Melayang di Blog.
Tunggu 5 detik dan klik skip add di pojok kanan atas untuk melihatnya.

Cara Membuat Tombol Like Facebook, Twitter, Google+ Blogspot
Source : softwaremaniapc

Cara Membuat Like Facebook dan Follow Twitter Melayang

Cara Membuat Tweet Box Melayang di sebelah kanan Blog merupakan widget yang banyak dipasang. Media Blogger juga akan memberikan informasi mengenai Cara Membuat Tombol Like Facebook dan Follow Twitter di blogspot.

Social networking memang merupakan kegiatan banyak orang di era teknologi saat ini. Bagaimana tidak? Kecanggihan transaksi secara online, menghubungi kerabat dan saudara, mendapatkan penghasilan di internet dapat dilakukan dengan media social.

Untuk itu apabila anda ingin lebih memajukan blog anda dan agar lebih dikenal, bisa juga dengan menambahkan sebuah kotak yang dapat menghubungkan mereka dengan anda. Bagaimana cara memasang widget tersebut, langsung saja ikuti tips dan tutorialnya.

Cara Membuat Twitter Box Melayang di Blog :
1. Silahkan buat terlebih dahulu tampilan widget tersebut di http://twittercounter.com/
2. Login dengan menggunakan akun Twitter anda.
3. Jika sudah Lalu klik My Widget, Lalu Klik Widget Setting and Code, sesuaikan dengan selera dan tampilan blog kita, jika sudah cocok lalu copy kode script widget yang telah disediakan.
4. Masuk ke Blogger.
5. Pilih Dashboard, lalu klik Layout / Tata Letak.
6. Tambahkan Gadget Baru dengan klik Add a Widget / Add a Gadget.
Sesuaikan dengan posisi letak yang ingin anda pasang.
7. Pilih HTML/Javascript.
8. Ganti kode warna merah pada script berikut ini dengan kode yang tadi diperoleh dari twittercounter.com

<style type="text/css">
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoUBodC0L62wEOys8DxwteTVtfKC-pja9oBiB1Qvsezf_vxS70aVhzAfmAWHO2e1teF-Kw-za21i8dayVwAVyoWeZzE-3YEsBv9zGEToiEupPHpWFDLbn5dxvTLOAM_NLgZF8aP9sofxK/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPxcAZBAkrumh-tI79V_M2MDAnbsIS44FBCKwH6XPnVKP0HMcIukgrewAsHHukMLnwtQitKjBYcaTnpRkTuyNitSOumvQA1p7lu0y1HExbmO8kMZe0zST-2yOWNgx6M_0KHcyFvxjYY-q/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
PASTEKAN KODE SRIPT TwitterCounter
</div>
</div>

9. Setelah anda ganti, copy semua kode yang telah digabungkan dengan twittercounter diatas.

10. Masukkan ke dalam kotak HTML/Javascript di Blogger tadi.

11. Save Widget.

Maka pada halaman anda, telah terpasang box twitter melayang di blog.

Source : abufarhan

Cara Memasang Tombol Like Facebook dengan Follow Twitter Simple :

1. Masuk ke Blogger.com

2. Pilih Blog Anda, lalu ke Layout / Tata Letak

3. Tambah Widget anda.

4. Pilih HTML/Javascript

5. Copy kode CSS dan HTML berikut :

<style type="text/css">

#AGCnavbar3{border:4px solid #000;border-radius:5px; width:155px; height:57px; margin-bottom:460px; margin-left:10px; font-family:Comic Sans Ms; color:white;text-align:left; background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYYlt9inexvDNXiAFPoZf03ViS9jrZACjCIEsv5kgq-wtKNZWFc-KRarJ0BWCp5CyPNih8jQwXw3dPqCXsF1mmTXUCIgr_T6-JaoyQkstdcfxN-HYE3v0S-XPkee60uqGBTHQ_n4_wRWQ/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYYlt9inexvDNXiAFPoZf03ViS9jrZACjCIEsv5kgq-wtKNZWFc-KRarJ0BWCp5CyPNih8jQwXw3dPqCXsF1mmTXUCIgr_T6-JaoyQkstdcfxN-HYE3v0S-XPkee60uqGBTHQ_n4_wRWQ/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYYlt9inexvDNXiAFPoZf03ViS9jrZACjCIEsv5kgq-wtKNZWFc-KRarJ0BWCp5CyPNih8jQwXw3dPqCXsF1mmTXUCIgr_T6-JaoyQkstdcfxN-HYE3v0S-XPkee60uqGBTHQ_n4_wRWQ/s1600/grid.png"); padding:2px; z-index:999; bottom:1px; left:1px; right:1px; position:fixed;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}

#AGCnavbar3 .left{float:left; text-align:left; font-family:Supermercado; font-size:10px; font-style:normal; font-weight:normal; color:White; padding:2px 10px}

#AGCnavbar3:hover{box-shadow:1px 1px 5px black;font-size:20px; font-style:bold; width:155px; height:57px; margin-bottom:460px; margin-left:10px; margin-right:120px;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}

</style>

<div id='AGCnavbar3' style='position:fixed;'>

<span class='left'><img src='' title=''/>

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/http://impoint.blogspot.com&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:85px; height:21px;'/>

<div style='margin-right:3px;margin-left:2px;'>

<a class='twitter-follow-button' data-lang='id' data-show-count='false' href='https://twitter.com/ravdania'>Ikuti @Media Blogger</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></div>

</span></div>

Keterangan :

• Ganti kode berwarna hijau dengan ID Facebook Anda / URL Fans Page FB kalian.
• Ganti kode berwarna orange dengan kode tombol twitter anda.

Anda dapat mengganti nama twitter di widget tersebut dengan nama twitter anda (di dalam kode warna orange).

Itulah tadi berbagai macam jenis widget tambahan yang dapat anda gunakan agar memudahkan pengunjung mencari atau melakukan contact dengan anda. Semoga Cara Membuat Tombol Like Facebook dan Twitter Box ini dapat bermanfaat.

Merubah Warna Judul Posting Berwarna warni

Cara Membuat Judul Berwarna-Warni di Blog - Judul adalah sebuah inti mengenai isi dari berbagai gagasan utama di suatu halaman. Dalam pembuatan artikel di blogspot, Judul merupakan hal yang sangat penting. Judul yang menarik, maka akan banyak dibaca oleh pengunjung.

Untuk membuat judul yang menarik caranya adalah sebagai berikut :
      1. Membuat Judul dengan Kontroversi
      2. Mengubah Warna, Link, atau tampilannya menarik.
      3. Buat Judul yang sedang menjadi topik utama.
      4. Judul harus memiliki sifat mengajak, bertanya, analisa, memberikan informasi dan sebagainya yang berfungsi untuk menarik pembaca.
Namun, pada kesempatan hari ini saya akan membahas Cara Merubah Warna Judul Posting di Blog menjadi Pelangi ( Warna-Warni ).

1. Login ke Blogger

   2. Masuk ke Rancangan → Edit HTML
       3. Cari Kode </head>
   4. Kalau sudah anda temukan, copy script ini dan letakkan (paste) di bawah kode </head>
<script src='http://sites.google.com/site/muzzymusthofa/javascript/rainbow.js'/>

5. Save Template

Dengan menggunakan javascript diatas, maka secara otomatis warna judul blog anda akan berubah. Javascript tersebut sebenarnya berisi CSS dan HTML biasa, namun untuk memudahkan anda jadi di ringkas dan di simpan melalui Javascript di media Dokumen Google. Semoga Dapat bermanfaat :).