Mungkin rekan blogger pernah melihat tutorial ini, memang setau saya ada yang lebih rumit menggunakan banyak kode,
tapi disini saya coba memberikan tips yang lebih mudah dan sangat simple bahkan bagi anda blogger yang baru mengenal pengkodean pasti bisa melakukannya,


ok saya "Kang Yasin" akan segera memberikan tutornya, nih ikutin saja langkahnya :

1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
2. Masuk ke Tab Tata Letak
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan Copy kode di bawah ini kedalamnya yah

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YJUCSZ1smoPCvLK3t3vz_JgjHaMY8xUx6VWR40Y1G9BDFOOUogxQ3uno2JJlX5KUUVob98o_3CzcpkDaKEoi_3bKOcdrgVdZ2NPG0YBH1NzPQkvQNKesVt6riJzdHv1WFMjenSyPmrY/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0YJUCSZ1smoPCvLK3t3vz_JgjHaMY8xUx6VWR40Y1G9BDFOOUogxQ3uno2JJlX5KUUVob98o_3CzcpkDaKEoi_3bKOcdrgVdZ2NPG0YBH1NzPQkvQNKesVt6riJzdHv1WFMjenSyPmrY/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

 
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

6. Simpan

Semoga BERHASIL :)

Read More :

Membuat "Bubble Tool Tips" 100% menggunakan CSS

Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan. Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya. Untuk lihat live previewnya silahkan klik aja link ini .

Penerapan trik ini pake CSS, dan ini dia codenya:

/*---------- balon tips -----------*/

a.bt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/

a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.bt:hover span.atas{

display: block;

padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86r3jGu896FVE3kC_NIbqxa4Bmny7hoiyFygC-CAbGbMgEQR7wSDUkcyccgjtDkMxBhlAopJhhS5KLcHawgKuuSNocpUaUfyvvP9DKqVqo0qd1no1uysYQWbDbflyc57opDViFNrL4UA/) no-repeat top;

}

a.bt:hover span.tengah{

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucWr57qv0P3kqLBFq8M3o8NQaiavS_NYok4v9pTTdyA1MS_y6mdqiGYv09ezk4pp-d2te4cYg1qeCB-YeVkQY2Ljk5AVCyCEcPDski3Ms-K_99dRYcmLbQm5b1s2SNjisucMmZVprdhw/) repeat bottom;

}

a.bt:hover span.bawah{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86r3jGu896FVE3kC_NIbqxa4Bmny7hoiyFygC-CAbGbMgEQR7wSDUkcyccgjtDkMxBhlAopJhhS5KLcHawgKuuSNocpUaUfyvvP9DKqVqo0qd1no1uysYQWbDbflyc57opDViFNrL4UA/) no-repeat bottom;

}

/*---------- balon tips END-----------*/

Untuk penggunaannya:


1. Link yang udah dibuat di kasih deklarasi class="bt".

Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a> Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>


2. Deklarasikan balontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. Masukkan diantara code link.


3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".


4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.


5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".


Contoh penulisan code bisa dilihat disini:

<a class="bt" href="URL SOBAT">
kata-kata terserah deh..

<span class="balontips">

<span class="atas">

</span>

<span class="tengah">

Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon

</span>

<span class="bawah">

</span>

</span>

</a>

Read More : Membuat "Bubble Tool Tips" 100% menggunakan CSS

Fungsi Kode Untuk Mengatur Tampilan Content Blog

Seperti yang kita ketahui, template blog dengan gaya Magazine Style merupakan salah satu favorit template yang sering di pakai oleh para blogger. Salah satu ciri template blog dengan gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog
<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas main post akan menghilang.

2. Kategori Post dan Single Post

<b:if cond='data:blog.url != data:blog.homepageUrl'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).
Contoh penggunaan kode ini bisa Anda lihat pada demo blog tadi dimana ketika sobat mengklik kategori post atau membaca postingan secara keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman utama blog.

3. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType != &quot;item&quot;'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori post dan akan menghilang ketika membaca postingan secara keseluruhan.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu navigasi), maka widget tersebut akan menghilang.

4. Single Post

<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri dengan judul Blog Template dimana saat sobat membaca suatu postingan secara keseluruhan, maka widget tersebut baru muncul.

5. Halama Utama Blog dan Kategori Post
<b:if cond='data:blog.pageType == &quot;index&quot;'>
Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan Tertentu Saja
<b:if cond='data:blog.url == &quot;URL_POST_TERTENTU&quot;'> ... </b:if>
Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday. Anda akan melihat widget blog dengan judul Templates By DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.

7. Menyembunyikan Widget Post Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'> ... </b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain. Untuk lebih jelasnya, sobat klik artikel post dengan judul DheTemplate.com - New Free Blogger Template Everyday dan bandingan jika sobat mengklik postingan dengan judul DheTemplate.com. Apa yang akan Anda dapat?? Widget blog dengan judul BlogList tidak muncul pada artikel postingan dengan judul DheTemplate.com - New Free Blogger Template Everyday dan widget tersebut baru muncul pada artikel postingan dengan judul DheTemplate.com. termasuk juga artikel postingan yang lain dan halaman utama dan kategori post

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Untuk penerapan kode-kode diatas ada 2 cara yaitu langsung pada widget dan secara kelompok (mungkin pada artikel selanjutnya). Semoga bermanfaat.

Read More : Fungsi Kode Untuk Mengatur Tampilan Content Blog

Membuat RSS Feed Untuk Website Yang Tidak Mendukung Feed

Website standar atau jadul biasanya tanpa dukungan Rss Feed, ini berbeda jika kita menggunakan platform blog seperti Blogger, Wodpress dan platform lainya yang memang sudah terlebih dahulu tertanam sindikasi Rss Feed. Keutamaan Rss Feed tidak lain adalah sebagai cara termudah agar pembaca (subscriber) feed via online dapat mengetahui update terbaru pada suatu situs, selain itu tentu saja peran Rss Feed sangatlah besar bagi spider search engine agar dapat mengindex semua halaman Website.

Tutorial kali ini saya akan menunjukan bagaimana mudahnya membuat Rss Feed dengan cepat tanpa harus menggunakan software tertentu atau tanpa harus menulis baris kode XML yang bikin kita pusing.


Tutorial Membuat Feed dengan Goolge Reader:




Langkah I:

1. Silahkan kunjungi Google Reader, login seperti biasa.

2. Tuju ke Notes

3. Arahkan mouse ke button Note In Reader, lalu drag and drop button tersebut dengan cara menahan klik dan arahan ke tab bookmark website rekan (dalam contoh saya menggunakan browser Flock)

Link Google reader yang sudah tersimpan dalam Bookmark

4. Sekarang buka website rekan yang ingin ditambahkan RSS Feed, Contoh disini saya menggunakan Premium template.

5. Blok sebagian tulisan yang menurut rekan penting, mulai dari title dan deskripsi singkat. Lalu klik Note in Reader yang ada dalam Bookmark

6. Akan muncul Dialog Box Google Reader disebelah kanan.

7. Disini silahkan hilangkan tanda Check untuk Add to shared items, Masukan nama Tag utama kedalam Add Tags (contoh: Zoom Premium), dan pastikan rekan menggunakan tag yang sama untuk setiap halaman yang akan rekan buat Feednya.

9. Klik tombol Post Items


Langkah II:

1. Tuju ke menu Settings, lalu klik Reader Settings

2. Pilih Tab Folder and Tags

3. Akan tampil nama tag yang sudah rekan buat, jangan lupa set feed berwarna abu-abu (private) ke Public

4. jangan lupa catat / copy alamat linknya.



Langkah III:

Langkah membuat feed sudah hampir selesai, sekarang kita membakar link Feed yang sudah rekan copy tadi dengan Feedburner. Maaf saya tidak menjelaskan panjang lebar tentang pendaftara Feedburner, disini saya anggap rekan sudah mengerti caranya :)


Langkah Terakhir:

Agar website langsung support Rss Feed, rekan hanya perlu menambambahkan kode di bawah ini kedalam website. Letakan diantara Tag <Head> </Head>

<link rel="alternate" type="application/rss+xml" title="Title website" href="http://feeds2.feedburner.com/feedburnerID" />

Note: Jika rekan ingin menambahkan Feed untuk halaman yang baru, rekan dapat dengan mudah mendistribusikannya melalui RSS feed dengan hanya mengulangi Langkah I

Credit By O-OM

Read More : Membuat RSS Feed Untuk Website Yang Tidak Mendukung Feed

Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Saya kurang tau apakah wordpress menggunakan plugin untuk menampilkan thumbnail yang berbeda pada halaman home, tapi itu bisa dilakukan dengan lebih mudah di blogger. Cukup dengan conditional Tag.

Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan menjelaskan pengaplikasiannya.

Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman artikel (item).

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang ingin dijadikan thumbnail.


Berikut total kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

.thumb {display:none}

</style>

</b:if>

Letakkan kode tersebut diatas </head>

***

<a class="thumb" onblur="try

{parent.deselectBloggerImageGracefully();} catch(e) {}"

href="...s1600/anonymous.png"><img style="display:block; margin:0px

auto 10px; text-align:center;cursor:pointer; cursor:hand;width:

35px; height: 35px;" src="...s400/anonymous.png" border="0"

alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>

Atau,

<img class="thumb" src="...s1600/anonymous.png" alt="" />

Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML diatas. Intinya adalah pada class="thumb". Commons ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.

Credit By :O-OM

Read More : Menampilkan Thumbnail yang Berbeda Pada Halaman Home