Cara memasang tombol bintang versi Outbrain

Widget Miniatur Outbrain ini sangat menarik, dan bisa kita dapatkan secarta gratis. Disamping kita bisa menampilkan tombol bintang yang berfungsi sebagai tombol rekomendasi pada pengunjung untuk memberi penilaian pada artikel kita, Widget Miniatur Outbrain ini juga dilengkapi fitur related post atau link terkait dan kita bisa memilih tampilan related post atau link terkait tersebut dalam bentuk hanya Link yang tampil atau kita pilih gambar beserta description yang tampil seperti pada blog ini.
Cara menginstalnya sangat sederhana dan secara otomatis akan menyesuaikan tampilan dan nuansa web atau blog  kita, dan tampil secara otomatis pula dibawah posting artikel kita. Silahkan anda lihat contohnya dibawah artikel ini.

Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Silahkan anda Daftarkan Blog anda di www.outbrain.com

2. Verifikasi Email, silahkan klik link yang diberikan lewat email.
3. Klik tab "Get Blog Widgets"

4. Pilih Platform.

5. Ikuti gambar berikut :

6. Kemudian, anda diarahkan ke blogger.com untuk Login:

7. Berikutnya :

8. Widget sudah ditambahkan:

Catatan : 

Anda bisa pindah widget tersebut kebagian bawah, atau dibiarkan saja...

9. Silahkan kembali ke Outbrain.com dan masuk ke Dashboard

10. Pada halaman berikutnya, silahkan anda seting tampilan sesuai selera anda dan SIMPAN :

11. Buka Blog anda dan Refresh..... jadiiii.......

OK..., Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

{

Cara memasang tombol bintang versi Outbrain

2012-01-30T14:53:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More

Cara menambah Icon sebelum judul posting

Menambah Icon sebelum judul posting juga menjadikan tampilan blog lebih mantab. Cara lama ini tetap saja ada yang mencari, tapi tidak masalah.... toh setiap hari selalu saja ada yang ingin belajar seputar blogger. Semoga tetap jadi ilmu yang selalu bermanfaat.... Amiin.
Nah...., bagi yang masih belum bisa dan ingin ikut menambah Icon sebelum judul posting , anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

Catatan:
Setiap template belum tentu sama, tapi biasanya perbedaan tidak jauh dari kode - kode diatas.

7. Silahkan copy kode dibawah ini, dan sisipkan pada kode diatas :

<img src="URL  ICON ANDA" style="border-width: 0px; padding: 5px 5px 0px 0px;" />

8. Hingga secara keseluruhan akan tampak seperti kode di bawah ini :

<b:if cond='data:post.url'>
<a expr:href='data:post.url'>

<img src="URL  ICON ANDA" style="border-width: 0px; padding: 5px 5px 0px 0px;" />

<data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

9. Simpan Template.

Selamat mencoba ya...
Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

{

Cara menambah Icon sebelum judul posting

2012-01-30T14:49:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More

Cara membuat random post dengan efek slide

Dilihat dari tampilannya, random post dengan menggunakan efek animasi slide memang sangat keren bila dipasang pada web atau blog kita. Sampai saat ini saya masih tetap tertarik dengan widget ini, makanya kali ini saya update kembali random post tersebut. random post ini sudah lama saya dapatkan dari blogger senior Abu Farhan (Tanks Bang...., sukses dan tetap berkarya selalu...)
Pada update kali ini, saya sedikit merubah tampilan widget random post tersebut, biar tampil beda, saya yakin sobat blogger suka. Silahkan anda LIHAT DEMO.

Bila anda berminat, silahkan ikuti langkah - langkah dibawah ini :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:10px;
padding: 0px;
height:280px;
}
#spylist ul{
width:275px;
overflow:hidden;
list-style-type: none;
padding: 0px;
margin:0px;
}
#spylist li {
width:240px;
padding: 7px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:65px;
overflow: hidden;
background: -moz-linear-gradient(center left, #727273 0%, #ccc 40%,#ccc 90%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #727273),color-stop(0.40,

#ccc),color-stop(0.90, #ccc),color-stop(1, #ffffff));
border-style:solid;
border-left-width:10px;
border-color:#ddd;
box-shadow: 3px 4px 3px #797979;
-webkit-box-shadow: 3px 4px 3px #797979;
-moz-box-shadow: 3px 4px 3px #797979;
}
#spylist li a {
text-decoration:none;
color:#000;
font-size:14px;
font-weight:normal;
font-style:normal;
text-shadow: 1px 3px 3px #fff;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 5px 0px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
#spylist li img {
float:left;
margin-right:7px;
margin-left:7px;
background:#EFEFEF;
border:2px solid #fff;
box-shadow: -3px 2px 2px  #000;
-webkit-box-shadow: -3px 2px 2px #000;
-moz-box-shadow: -3px 2px 2px #000;
}
.spydate{
overflow:hidden;
font-size:10px;
text-shadow: 1px 2px 2px #8EABFF;
color:#455D95;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
display:none;
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#fff;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#012EB0";
aBold = false;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 60;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "ULR BLOG ANDA";
limitspy=3
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js'

type='text/javascript'></script>
</div>

5. SIMPAN

Selamat mencoba ya...
Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

{

Cara membuat random post dengan efek slide

2012-01-30T14:45:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More