Cara Membuat Gambar Berputar pada Widget Popular Posts

Gambar pada Widget Popular Posts mempunyai efek berputar, akan mempercantik tampilan Blog. Ketika cursor disentuhkan pada gambar di widget popular posts, gambar tersebut akan berputar. Mudah-mudahan dengan ini dapat mengurangi kejenuhan pada tampilan Blog sobat.
Memang tampilan pada blog tidak terlalu dipentingkan. Yang penting itu kerapihan, konten-konten yang berkualitas, dan SEO yang baik. Namun tidak ada salahnya untuk mempercantik tampilan blog. Asalkan tidak memasang widget yang tidak perlu dan malah memberatkan Blog sobat ketika dimuat.
Ok, jika sobat ingin membuat gambar pada widget popular posts berputar, beginilah langkah-langkahnya:
1. Login ke akun Blogger sobat.
2. Pastikan widget popular posts telah terpasang di Blog sobat. Jika belum pasanglah terlebih dahulu. Saya yakin hal tersebut gampang dan tidak perlu panduan khusus.
3. Jika telah terpasang, sobat masuk pada bagian template.
4. Klik Edit Template.
5. Cari kode ]]></b:skin> , agar lebih mudah gunakan tombol ctrl+F.
6. Masukan kode berikut diatas kode ]]></b:skin>.

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

7. Klik simpan.

Selesai, silakan lihat hasilnya. Gampang sekali kan sob.

Read more

Cara Memasang Widget Readers by Feedburner di Blog

Readers by Feedburner adalah aplikasi dari Feedburner yang berfungsi untuk menghitung jumlah pembaca Blog yang dikirim ke e-Mail mereka (subscribers) melalui Feedburner.
Aplikasi ini juga dapat dijadikan widget di Blog sobat untuk mempermudah sobat mengetahui jumlah pembaca Artikel Blog sobat di Feedburner. Namun sebelum sobat memperoleh Widgetnya, terlebih dahulu sobat harus mendaftarkan Blog sobat ke Google Feedburner. Silakan Baca Cara Mendaftarkan Website/Blog di Google Feedburner.
Jika sobat telah mendaftarkan Blog sobat ke Google Feedburner, maka sobat dapat mengikuti langkah-langkah untuk memperoleh widget Readers by Feedburner.
1. Login ke akun http://feedburner.google.com/.
2. Pilih dan klik Blog yang sobat perlukan untuk Widget Readers by Feedburner.

3. Masuk pada tab "publicize", pilih "Feedcount", kemudian atur warna body dan text widget, setelah selesai klik "Activate".

4. Sobat akan diberikan kode HTML dari Feedburner. Coppy kode tersebut.

5. Login pada akun Blogger sobat.
6. Masuk pada bagian Tata Letak.
7. Klik Tambah gadget di posisi yang akan dipasang Widget Readers by Feedburner.
8. Pilih HTML/Javascript.
9. Pastekan kode HTML dari Feedburner.
10. Klik Simpan.

Selesai, widget telah terpasang di Blog sobat.

Read more

Cara Memasang Widget Alexa Rank di Blog

Alexa rank merupakan sebuah metode peringkat yang akan memantau perkembangan blog sobat dari analisa traffic, keyword dan memberikan Rangking pada Blog sobat menurut alexa.com. Situs Alexa ini juga merupakan yang paling popular dan banyak digunakan para Blogger untuk memantau Website/Blog mereka.
Alexa juga menyediakan widget Alexa Rank untuk dipasang di Blog sobat agar mempermudah sobat melihat hasil pantauan Alexa Rank terhadap Blog sobat. Sebelum sobat memasang widget ini, terlebih dahulu sobat harus mendaftarkan Blog sobat di Alexa.com. Baca Cara Mendaftarkan Website/Blog ke Alexa.com.
Setelah sobat telah mendaftarkan Blog sobat ke Alexa.com., maka kita bisa memulai membahas langkah-langkah memasang Widget Alexa Rank di Blog:

• Memasang widget Alexa Rank di Blog.

1. Masuk ke Halaman Alexa Site Widget, http://www.alexa.com/siteowners/widgets.
2. Sobat akan diberikan beberapa pilihan kolom. Masukan URL Blog sobat pada salah satu kolom yang sobat inginkan dan klik Build Widget.

3.Sobat akan diberikan beberapa kode Widget. Pilih salah satu kode Widget yang sobat inginkan dan coppy kode tersebut.

4. Login ke akun Blogger sobat.
5. Masuk pada bagian Tata Letak.
6. Klik Tambah Gadget di posisi yang sobat inginkan.
7. Pilih HTML/Javascript.
8. Pastekan kode Widget dari Alexa disini.

Nah, selesai sob. Semoga bermanfaat...

Read more

Cara Membuat Tab Multi Widget di Blog

Tab Multi Widget adalah penggabungan beberapa Widget pada satu kolom dengan Tab. Tab Multi widget ini sangat berguna jika Blog sobat mempunyai terlalu banyak widget. Sobat bisa menggabungkan widget-widget tersebut pada satu kolom dengan Tab diatasnya. Jadi sobat tidak perlu menyediakan area yang luas untuk widget yang banyak.
Oke langsung saja ke langkah-langkah pembuatanya.

• Widget tanpa kode HTML/Javascript.

1. Login ke kaun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> , di atas kode </head>.
6. Klik simpan Template.
7. Selanjutnya masuk ke bagian Tata Letak.
8. Klik Tambah Gacget di posisi yang sobat inginkan.
9. Pilih HTML/Javascript.
10. Masukan kode berikut.

<style type="text/css">

        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}

        html .blogtabs h2.active {background: #fff;}

        .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}

        .btab, #showtabs {display:none;}

        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {

        $('#showtabs').simpleBlogTab ({organictabs: 3});

        });

        </script>

        <div id="showtabs"></div>

Keterangan, kode berwarna biru adalah kode-kode warna, kode berwarna hijau adalah kode-kode ukuran yang bisa sobat ubah. Sedangkan kode ({organictabs: 3}) adalah jumlah tab yang akan digabungkan dan sobat bisa sesuaikan.

11. Klik Simpan.
12. Letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.

Selesai, sobat dapat lihat hasilnya.

• Widget dengan kode HTML/Javascript.

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode </head> .

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>

6. Cari kode ]]></b:skin>,  agar lebih mudah gunakan tombol ctrl+F.
7. Masukan kode berikut di atas kode  ]]></b:skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

8. Klik Simpan Template.
9. Selanjutnya, Masuk ke bagian Tata Letak.
10. Klik Tambah gadget di posisi yang sobat inginkan.
11. Pilih HTML/Javascript.
12. Masukan kode berikut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterengan, kode warna merah adalah kode-kode ukuran, kode warna biru adalah kode-kode warna yang bisa sobat ubah. Masukan judul Tab pada tulisan berwaana hijau. Dan masukan kode HTML widget pada tulisan warna ungu.

Selesai, sobat dapat lihat hasilnya.

Demikian pembahasan tentang Membuat Tab Multi Widget di Blog. Semoga memberikan manfaat untuk sobat-sobat sekallian.

Read more

Cara Menghapus Widget pada Blog yang Sulit Dihapus

Pada Blog sobat terdapat widget yang sulit untuk dihapus? Sobat ingin menghilangkan widget tersebut atau ingin menggantinya dengan widget lain namun widget tersebut tetap bandel tidak mau hilang. Widget tersebut sobat anggap tidak berguna hanya membuat Blog sobat seakan menjadi sempit, segeralah menghapusnya.
Sedikit penjelasn dulu ni, agar jangan asal mengikuti langkahnya. Lebih baik lagi kalau disertai pemahaman. Pada bagian Tata Letak terdapat gadget yang tidak dapat dihapus contohnya widget Header, yang jika kita klik edit tidak ada pilihan hapus. Maka sobat harus edit HTML dulu agar gadget dapat dihapus.
1. Login pada akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Sentuhkan Cursor pada tulisan Edit di widget yang tidak dapat dihapus. Saya berikan contoh dibawah ini adalah pada Header Blog. Hal ini dilakukan untuk mengetahui nama Widget dalam script.

4. Nama widget telah diketahui yaitu, Header1.
5. Masuk pada bagian Template.
6. Pilih dan klik Edit HTML. 
7. Cari kode 'Header1', agar lebih mudah gunakan tombol ctrl+F. Pada lanjutan kode tersebut akan terdapat kode <b:widget id='Header1' locked='true'.
8. Ubah kode true menjadi false.
9. Simpan Template
Belum selesai nih sob. Sekarang gadget headernya sudah dapat dihapus.
10. Masuk pada bagian Tata Letak.
11. Klik Edit pada header yang akan dihapus.
12. Klik hapus pada gadget header tersebut.
Selesai, Lihat hasilnya.

Read more

Cara Memasang Sitemap/Daftar Isi di Blog

Sitemap/Daftar isi ini menampilkan seluruh konten-konten pada Blog sobat menurut label dan secara Alphabetis. Dan memberi tanda pada posting yang baru sobat buat.Sitemap dengan cara ini otomatis memperbrui ketika sobat membuat konyen baru pada site sobat. Dan sitemap sangat berguna untuk membantu pengunjung mempermudah menemukan informasi yang dicari pada Blog soba.
Sebelum membuat widget Sitemap, ada baiknya sobat mengoptimasi dahulu sitemap tersebut. Mengoptimasi sitemap dipercaya dapat menaikan pagerank Blog sobat. Baca Cara Mengoptimasi Sitemap Blog.
Kita dapat memasang Sitemap atau Daftar isi ini pada widget atau pada halaman di Blog sobat. Saya akan jelaskan kedua caranya. Simak baik-baik ya sob.

OK, kita mulai saja. Cara membuat Widget Sitemap di Blog:
1. Masuk ke akun Blogger sobat.

• Untuk versi Widget.

2. Masuk ke bagian Tata Letak.
3. Klik tambah gadget di posisi yang sobat inginkan untuk memasang sitemap. (lebih baik di bawah postingan sob, agar tersedia ruang yang luas)
4. Pilih HTML/Javascript.
5. Masukan Kode di Bawah ini.

<div style="border: 1px solid rgb(255, 255, 255); height: 400px; overflow: auto; padding: 10px; text-align: justify; width: 200px;"> <script src="http://ariflawblog.googlecode.com/files/daftar%20isi%20blog.js.js">
</script><script src="http://regibrader-free.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

#Ubahlah ukuran pada kode warna biru dengan yang sobat inginkan. Dan ubah kode warna merah dengan URL Website sobat.

6. Klik Simpan.

• Untuk versi Laman.

2. Masuk pada bagian Laman.
3. Klik Laman Baru dan pilih Laman Kosong.
4. Masukan Judul Laman seperti "Sitemap" atau "Daftar Isi".
5. Isi Post dengan mode HTML.
6. Masukan kode Berikut.

<script src="http://ariflawblog.googlecode.com/files/daftar%20isi%20blog.js.js">
</script><script src="http://regibrader-free.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

#Ubah kode warna merah dengan URL Website/Blog sobat.

7.Klik Publikasikan.

Selesai, sitemap telah terpasang. Semoga bermanfaat...

Read more

Cara Membuat Widget Like Box Facebook di Blog

Manfaat widget Like Box Facebook di Blog adalah pengunjung pada Blog sobat tau bahwa Blog tersebut juga mempunyai halamanya di Facebook dan pengunjung dapat menyukai halaman Blog sobat di Facebook dengan sekali klik.
Sebelum membuat Widget Like Box Facebook di Blog, sobat terlebih dahulu harus mempunyai halaman Blogspot sobat di Facebook. Jika sobat belum punya halaman Blogspot di Facebook, sobat bisa baca panuduan ini, Cara Membuat Halaman Blog di Facebook. Baca juga untuk tampilan lebih sederahana yaitu Tombol Like Facebook di Blog. Jika sobat telah mempunyai halaman Blogspot sobat di Facebook, maka membuat Like Box Facebook di Blog dapat dimulai.
OK, mulai saja sob. Cara membuat Like Box Facebook di Blog:
1. Login ke Facebook dengan akun sobat.
2. Isikan URL http://developers.facebook.com/docs/reference/plugins/like-box/ dan langsung kunjungi URL tersebut.
3. Atur Tampilan.
Masukan URL halaman blogspot sobat di Facebook.
Width, atur lebar Widget.
Height, atur panjang Widget.
Show Faces, menampilkan foto Profil Likers atau tidak.
Color Scheme, pilih antara dark atau light.
Stream, tampilkan ringkasan halaman Facebook atau tidak.
Border Color, tentukan warna garis luar.
Show header, tampilkan header atau tidak.
4. Setelah selesai klik Get Code untuk mendapatkan kode HTML widget Like Box.

5. Mendapatkan kode html Like Box, agar lebih mudah masuk pada bagian iFrame. Coppy seluruh kodenya.

6. Selanjutnya, masuk pada akun Blogger sobat.
7. Masuk pada bagian Tata Letak.
8. Kllik tambah gadget, pilih posisi mana yang sobat inginkan untuk memasang Widget Like Box.
9. Pilih HTML/Javascript.
10. Pastekan kode iFrame dan klik simpan.

Selesai, Widget Like Box Facebook telah berhasil dipasang pada Blog sobat. Silakan lihat hasilnya.

Read more

Cara Memasang Widget Chat Box yang Tersembunyi di Kanan

Beberapa waktu lalu saya saya bahas cara buat widget chat box di blog. Nah kali ini saya akan bahas cara memasang widget chat box yang tersembunyi di kanan Blog. Dan keluar masuk ketika sobat klik ikon chat box-nya. Caranya gampang kok sob, ikuti langkah-langkahnya.
Yang pertama dan utama adalah sobat terlebih dahulu harus mempunyai kode html chat box tersebut. Salah satu caranya adalah dengan mempunyai akun pada situs cbox. Untuk langkah-langkah pembuatan akunnya sobat bisa klik disini. Atau langsung saja masuk ke situs cbox, klik disini.
OK, jika sobat telah mendapatkan kode html-nya, langsung saja sob ini dia langkah-langkahnya:
1. Masuk akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget di posisi mana saja.
4. Pilih HTML/Javascript.
5. Masukan kode html berikut.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:400px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwAki0q-wyKD-_hxifYSAh31ydROHF6qKtB4YiduibrXai7sgPTlWFdUn3js7DWi1y7ZSeWro3IBxbQDwy8Y-PH33ePspj0bYYKfkMHzOVgip1yBQcVpOEcMZVObtOdK2moUVISMXS-s8/s1600/Bukutamu6.gif') no-repeat;}.gbcontent{ float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
 </div>
<div class="gbcontent">

MASUKAN KODE CHAT BOX DISINI

<div style="text-align: center;">
<span style="font-size: 10px;"><span style="font-family: "Trebuchet MS",sans-serif;">Mau Widget Ini? <a href="http://regibrader-free.blogspot.com/2013/02/cara-memasang-widget-chat-box-yang_18.html" target="_blank">Klik Disini</a></span></span></div>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

6. Atur ukuran dan posisi pada kode berwarna biru.
7. Ganti tulisan warna merah dengan kode html chat box sobat.
8. Ganti URL gambar pada kode warna ungu dengan gambar yang sobat inginkan. Namun bila sobat tidak menggantinya hasilnya akan seperti berikut.
9. Atur warna background dan warna border pada kode warna hijau.

Url Gambar Lainya:

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhzxgsqFBZcJu00R9BqLU-OJii2svO27cQnTL2b6_WQq_-7NFaTMnNogAV22VEDuPZK_lq0qaWjZRvVDJKtiwlWDUwiq4T9f6qGPwbzTzPmGtewAqRV5YDfr3d65ReZbNrKgSWXL0gPlE/s1600/Chatbox.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nhndnwA7BU3QteUA3ygPzeZt73886fQ1lnMA6Qfhcbb-5DbAbvqmf3-NzCTjlRzyiWR5Mi9zX8tZX5nO_IHb0pTlsrOX7KrZsZvQ02iWV6jr7ORt-PUtqcS56RvkP2BkzufnWtNVHwo/s1600/Bukutamu3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLDuQvApu07pNY-ntQc3Bu1Jlli2hFCILuer1EgMTDutPUzqu3VzOoTM6nV_vW-2SRwdZgNcjSOUN6bxqq3Ypn88yOi55LQmegdJOV_8EX8fPBlhH7Cb8dEBKPiGYT1nE5Ur_zrJVx_gY/s1600/bukutamu2.gif
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknGNW3LjKC08psNcPbiPjUWGozmBNc38WX-rj-iyBR-CWQFIxjUHRtFeerQitWSWzgRpWTl7ylvE8M4c3OszxaXGJ4G-GsWSqVHJ8gfm-0G-cyA3uD92kMj9U2srxECpOq3u-jMDtZU0/s1600/bukutamu5.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiZpVk82XwmFem24fmmOUMFv8cXbaw3XUVvIQHRxdBP-lf6-y_AGA7bUQmnNc0u6fxDsmd-mG_u3EF8repigNV7GZ9Irw5N79TDw2T_RRp9Vyxaz9Zdkln08HSlV1LtZ_8KVYsRsHgiuk/s1600/2131wkl.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIQrba4DlegS-7RtCZqEcNGVamkLwuay0bzc05-s4q3jee3rvpJCuE3ZWWyLTSC4WRkXnKUDkkHGlPFOq-FaAQtGxmm-weu3Lt3S2gxT-SdVc1dxtveTOLAnyBL6kbVHmbd25plbl-c8/s1600/bukutamu4.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYhCXuu1uzkzPiRDancYqKDHG05HxdosmjTHodXvzohIFUgjtS3nlp_ZvEu0tNZGKtcI86Z4JPQ-6chs2dp7klcJjtrcQopU364uiqHgoi4zOMf0O9hwLcHkclqxPFhJc5vCzD44H_Rc/s1600/BukuTamu1.png

10. Klik Simpan dan selesai. Lihat Hasilnya.

Read more

Cara Membuat Banner Iklan di Blog

Hasil kerja Blogging sobat harusnya menghasilkan suatu keuntungan. Ngapain bersusah payah untuk Blogging namun tidak ada yang sobat hasilkan. Jadi apa keuntungan kita dari Blogging?

Salah satunya adalah dengan adanya iklan. Jadi, jika ada yang memasang iklan pada Blog sobat, maka si pemasang harus membayar dengan tarif yang telah ditentukan. Jadi kita para Blogger harus berusaha membuat Blog sebagus mungkin agar Blog kita ramai dan menarik seseorang untuk memasang iklan di Blog kita.

Untuk memudahkan para pemasang iklan memasang iklan di blog sobat, sobat baiknya menyediakan kotak banner iklan.

Membuat Banner Iklan:
1. Sediakan Gambar untuk Promosi pemasangan iklan. Sebaiknya gambar tersebut menarik seperti gambar animasi. Untuk membuat animasi dengan efek yang menarik, salah satu caranya adalah membuat banner animasi.
2. Jika Gambar telah siap, maka sobat login ke akun Blogger sobat.
3. Masuk ke bagian Template dan pilih Edit HTML.
4. Cari kode ]]></b:skin>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode ]]></b:skin>.
 

#super-beeads {margin:0px;padding:0px;text-align:center}
#super-beeads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#super-beeads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Sobat bisa membuat 4 kotak iklan sekaligus dengan posisi 2 baris x 2 kolom.
Untuk lebih jelasnya, beginilah contoh hasil pembuatanya:

Perhatikan, untuk kode berwarna merah adalah jarak antara kotak iklan atas dengan kotak iklan bawah, sedangkan untuk warna biru adalah jarak antara kotak iklan kiri dan kotak iklan kanan. Sesuaikan dengan keinginan sobat.

6. Setelah selesai, save Template sobat.
7. Tahap selanjutnya, sobat masuk ke bagian Tata Letak.
8. Klik tambah gadget pada bagian dimana sobat akan memasang kotak iklan.
9. Masukan kode berikut, (sesuaikan berapa kotak iklan yang akan sobat buat).

<div id="super-beeads">
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title=" Title-Iklan"><img alt="Alt/text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
<a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" border="0" src="Url Gambar" /></a>
</div>

Catatan, Untuk kode warna merah adalah Url tujuan gambar, untuk kode warna hijau adalah Title gambar, untuk kode warna kuning adalah Alt/Text Gambar, untuk kode warna biru adalah Url gambar.
Kode diatas akan menghasilkan 4 gambar dengan urutan: kiri atas, kanan atas, kiri bawah dan kanan bawah. Silakan hapus salah satu jika tidak diperlukan.
Sobat bisa memasukan Url promosi pemasangan iklan pada gambar, atau jika telah ada yang memasang iklan sobat masukan Url tujuan iklan gambar tersebut.

10. Simpan pekerjaan sobat dan lihat hasilnya.
sumber: Super-Bee

#Atau jika sobat akan memasang iklan dengan gaya standard, langsung saja tambahkan gadget di posisi yang sobat inginkan, pilih mode HTML/Javascript, dan masukan kode berikut. Tentunya sobat perhatikan dahulu besar sidebar harus dapat menampung besar gambar.

<a href="http://regibrader-free.blogspot.com/p/blog-page_1328.html" target="_blank" title="Pasang Iklan Disini"><img alt="Pasang Iklan Disini" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamdj4GamR810qB05BjY5nK4z1c6_4Ni8ms2oPALZDSB6CYpr-KsJFpMWGEAXEM7akJr9bf-ecWQxZyMbjT8Ff3plTcacFWPCAGRHA23NWv5V1IKAu-S8EQ8q-P5p9aTbFcM0czwImdOY/s1600/pasang+iklan+728x90.gif" /></a>

merah = URL tujuan iklan
biru = Url Gambar
hijau = Title
kuning = alt gambar

Semoga sobat mengerti dengan pembahasan ini, dan mudah-mudahan berhasil. Sukses untuk kita semua...

Read more

Cara Memasang Banner Iklan di Kiri dan Kanan Blog

Sobat Blogger, pasti ingin sekali blog sobat ditawarkan pemasangan iklan pada blog sobat. Pemasangan iklan pada website/blog dapat mendatangkan keuntungan pada si pemilik blog. Oleh karena itu sobat blogger semua mesti membuat blog yang bagus sehingga blog sobat menjadi ramai pengunjung. Dengan ramainya pengunjung, InsaAllah akan menarik para pemasang iklan yang ingin memasang iklan di Blog sobat. Saya sarankan agar sobat menyediakan kotak iklan di blog sobat yang terletak dikiri dan kanan blog. Kelebihan posisi ini adalah ketika halaman blog digulir, maka kotak iklan tersebut terus mengikuti dan akan terus terlihat di halaman blog. Sehingga para pemasang iklan tertarik untuk memasang iklan di blog sobat,

Berikut cara membuat/menyediakan kotak iklan di kiri dan kanan blog:
1. Login ke akun blog sobat.
2. Pada menu dropdown, masuk ke bagian Template dan pilih Edit Html.
3. Cari kode ]]></b:skin>, gunakan tombol ctrl+F untuk mempermudah pencarian. 
4. Masukan kode berikut di atas kode ]]></b:skin>.

#adslayoutleft {
position:fixed;
top:5px;
margin-left :-180px;
float:left;
z-index:10;
}
#adslayoutleft .iklankiri {
float:right;
clear:both;
}
#adslayoutleftright {
float:right;
position:fixed;
top:5px;
margin-left:990px;
z-index:10;
}
#adslayoutleftright.iklankanan {
float:left;
clear:both;
}

Perhatikan kode berwarna merah adalah jarak antara banner iklan dengan halaman blog, sobat bisa sesuaikan dengan template yang sobat gunakan.

5. Setelah selesai, klik simpan Template.

6. Masuk pada bagian Tata letak.

7. Klik tmabah gadget, di posisi mana saja tidak masalah.

8. Pilih HTML/Javascript.

9. Masukan kode berikut.

<div id='adslayoutleft'><div class='iklankiri'><a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" src="Url Gambar" /></a></div></div>
<div id='adslayoutleftright'><div class='iklankanan'><a href="Masukkan-Url" target="_blank" title="Title-Iklan"><img alt="Alt/Text Gambar" src="Url Gambar" /></a></div></div>

Catatan, Untuk kode warna merah adalah Url tujuan gambar, untuk kode warna hijau adalah Title gambar, untuk kode warna kuning adalah Alt/Text Gambar, untuk kode warna biru adalah Url gambar.

10. OK, semua sudah selesai. Sobat tinggal menyimpan pengaturan dan lihat hasilnya.

Read more