Tombol "Simpan Sebagai PDF" di Blog

Biasanya dibeberapa website berbayar sudah ada fungsi tombol "save as pdf", Lalu Bagaimana cara menambahkan Tombol 'Simpan Sebagai PDF' di setiap posting diblogspot kita? Sehingga para pembaca dapat menyimpan posting anda dalam format PDF. Alat ini benar-benar akan membantu pembaca dalam menyimpan posting yang mereka sukai di sebuah blog yang dikunjungi. Saya sangat senang sekali dengan alat/widget ini, dan saya yakin pembaca pun akan senang juga karna memang sangat berguna sekali.

Caranya sangat mudah sekali, sobat hanya diperintahkan menambahkan beberapa kode ditemplate sobat.

Ini dia caranya:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

<style>.fullpost{display:inline;}</style>

6. Setelah ketemu, Pasang kode dibawah ini persis di BAWAH kode tadi:

<script type="text/javascript">
</script>
<script src="http://roele112.googlepages.com/save-as-pdf.js" type="text/javascript">
</script>

7. Simpan template dan lihat hasilnya...

Perhatian:
Hasilnya akan ada di Bawah Judul Posting jika di letakkan diBAWAH kode ini:
<style>.fullpost{display:inline;}</style>

Jika ingin dipasang di bawah posting maka sobat harus memasang diATAS kode ini:
<div class='post-footer'>


Moga manfaat...!

Read More »

Link Newer-Older Post Dengan Gambar

Pasti sobat sudah tahu kan yang saya maksud dengan Older Post dan Newer Post Link? Nah pada postingan ini saya ingin membahas tentang mengubah Older Post dan Newer Post Link Dengan ikon atau gambar di Blogger. Trik ini sangat bagus untuk membuat blog Anda terlihat sangat indah dan bagus lagi elegan. Trik ini pasti membuat blog Anda terlihat lebih indah dari sebelumnya jika anda menggunakan ikon pada link Older Post dan Newer Post atau Post Terbaru dan Post Terlama.
Biasanya link ini menggunakan tanda panah, sekarang akan diganti dengan gambar yang pasti cool. Untuk masalah iconnya silahkan sobat search aja di mbah google hehe..

Ini dia triknya:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Kemudian cari kode yang berwarna merah dibawah ini (ada 3) dan ganti dengan kode yang berwarna hitam:

1.<data:newerPageTitle/>

Ganti dengan:
<img src='http://roele112.googlepages.com/newer.png'/>

2.<data:olderPageTitle/>

Ganti dengan:
<img src='http://roele112.googlepages.com/older.png'/>

3.<data:homeMsg/>

Ganti dengan:
<img src='http://roele112.googlepages.com/home.png'/>

6. Klik Preview, jika OK langsung Simpan Template dan lihat hasil akhir...

Moga manfaat!

Kunjungi juga Blog Ini

Read More »

Page Navigation for Blogger

Sobat tahu apa itu Navigasi Halaman? Saya yakin sudah tahu, dalam bahasa Inggris sering disebut "Page Navigation". Nah, Navigasi Halaman sekarang sudah tersedia untuk blogger. Widget ini juga memungkinkan sobat melihat nomor menu di bawah posting untuk mengunjungi posting terbaru atau posting sebelumnya. Biasanya widget seperti ini hanya disediakan dalam blog wordpress atau "host blogs".Tetapi sekarang hack-nya telah tersedia di blogger, dengan bantuan Mohammad Rias, Thank for the hack.

Mari kita lihat bagaimana menambahkan Navigasi Halaman atau Page Navigation Menu di Blogger:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Page Element



Cari add page element yang paling dekat dengan element posting.

3. Pilih menu HTML/Javascript, kemudian paste kode berikut ini:

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
</style>


<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://arawna.blogspot.com">Grab this Widget</a></div>

4. Setelah itu simpan, dan pindahkan element tadi tepat dibawah elemen posting,

5. Klik tombol SAVE yang berwarna orange disebelah kanan atas.

6. Dan lihat hasilnya, kurang lebih seperti ini:



Moga manfaat!

Salam Blogger, Kunjungi juga Blog ini

Read More »

Cara Buat Tulisan Berbayang (Shadow)

Pada tanggal 01 Agustus 2009 yang lalu sobat Sbagyo menanyakan bagaimana cara buat title post double (berbayang maksudnya mungkin) lewat kotak komentar. Sekarang saya ingin bahas caranya disini.
Pasti sobat sudah tahu kan maksud saya tulisan berbayang?, ya simpelnya saya ingin bahas cara buat tulisan/teks berbayang (shadow). Trik ini hanya menggunakan kode CSS dan sedikit HTML, disini saya tidak hanya membahas pada title post saja, saya juga akan perluas dengan membuatnya di postingan juga. Bagaimana sudah siap memulai? mualai apa ya? hehe...

ini dia caranya:

► Membuat teks berbayang pada setiap posting:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.tshadow {
color: #000;
background: transparant;
height: 35px;
width: auto;
padding-left: 20px;
line-height: 32px;
font-size: 1.8em;
margin-bottom: 5px;
margin-left: 5px;
text-shadow: 2px 2px 3px #000; /* IMPORTANT */
}

7. Simpan Template

8. Setelah itu kode untuk posting. Sobat hanya menambah kode dibawah ini untuk membuat tulisan berbayang:

<div class="tshadow">Tulisan Yang Ingin Dibuat Berbayang</div>

> Silahkan lihat hasilnya.
___________________________________________

► Membuat judul posting/title post berbayang:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

.post h3

6. Setelah ketemu, tambah kode dibawah ini persis di DALAM tag kode tadi:

text-shadow: 2px 2px 3px #333; /* JANGAN DIRUBAH */

7. Simpan Template selesai dan lihat hasilnya...

PENTING:

Kode ini/Trik ini hanya support dan berfungsi pada beberapa browser.


Lebih lengkap lihat daftar berikut ini:



Moga manfaat!

Jangan lupa baca juga disini

Read More »

Mengaktifkan Backlink di Blogspot

Sebelumnya apakah sobat tahu apa itu backlink? simpelnya backlink adalah "link balik" dalam artian me-link balik postingan suatu blog ke blog kita, misalnya sobat menemukan artikel menarik di blog ini, lalu sobat juga menulis posting yang berkaitan tentang artikel yang menarik tadi, lalu sobat mem-backlink postingan tersebut ke postingan yang sobat buat tadi, itulah yang dimaksud dengan backlink. Bagaimana sudah mengerti bukan? saya yakin sudah hehe. Link balik ini biasanya bisa kita temukan di blog yang memakai layanan wordpress.

Lalu apakah bisa memasang link balik di blogspot? jawabannya bisa sekali. Dan kebanyakan dari para pemakai layanan blogspot jarang mengetahui fasilitas ini. Nah, bagaimana caranya? ini dia:

1. Sign In ke blog anda.

2. Tuju tab Settings/Pengaturan Lalu tab ► Comments/Komentar

3. Setelah itu scroll sampai kebawah dan temukan kata "Backlink" atau "Link Balik"
Nah, dalam menu ini ada dua pilihan:
1) Show
2) Hide.

Sobat harus mengaktifkan backlink dengan mengklik atau menceklis pilihan Show.

Jelasnya lihat gambar dibawah ini: (klik untuk perbesar)



4. Setelah menceklis, lalu sobat klik "Save Setting" atau "Simpan Pengaturan".

5. Selesai dan lihat hasilnya.

Bagaimana mudah bukan?

Moga manfaat!

Baca juga disini

Read More »

Membuat Codeview Pada Postingan

Pernah mendengar istilah codeview? ya saya yakin sebagian teman-teman sudah mendengar istilah codeview, menurut saya codeview adalah satu fasilitas untuk membuat background datar untuk code-code yang kita posting pada blog kita, simpelnya codeview dipakai untuk meruangkan atau menonjolkan kode-kode html ataupun kode css, saya sendiri memakai codeview berwarna biru muda. Nah sekarang saya ingin mengajak sobat untuk membuat codeview di blogger, bagaimana caranya?

Ikuti langkah berikut ini:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ► ]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.codeview {
color: #fff; 
padding: 15px; display: block; margin: 10px 0 10px 0;
background: #3c3a41 url(http://roele112.googlepages.com/blue-grid-bg.png); 
overflow: auto;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}

7. Simpan template

8. Selanjutnya, jika sobat ingin menyisipkan kode-kode dipostingan sobat maka sobat harus menambah kode dibawah ini:

<div class="codeview">
tulisan kode
</div>

9. Simpan posting anda dan lihat hasilnya

Moga manfa'at!

Jangan lupa baca juga disini

Read More »

Spoiler Gaya KASKUS

Pada artikel sebelumnya saya telah membahas tentang cara membuat spoiler disini. Dan tentu saja disertakan dengan apa itu spoiler dan maksud serta manfaat menggunakannya. Biasanya beberapa temen blogger suka sekali memodifikasi apapun yang berhubungan dengan aksesoris blognya. Nah, sekarang mari kita bahas tentang cara membuat spoiler mirip dengan gaya kaskus. Sobat ingin langsung memasangnya di blog sobat? ini dia caranya:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:

<div style="margin:5px; margin-top:3px">
<div class="smallfont" style="margin-bottom:2px"><b>Spoiler</b> untuk <i>gambar</i>: <input type="button" value="Show" style="width:auto;font-size:10px;margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';        this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }">
</div>
<div class="alt2" style="margin: 0px; padding: 3px; border: 1px inset;">
<div style="display: none;">
<img src="ALAMAT_GAMBAR_ANDA" width="none" height="none" alt="spoiler gambar">
</div>
</div>
</div>

Demo:

Spoiler untuk gambar:

KETERANGAN
sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.


Selamat Ngeblog!

Kunjungi blog saya yang lain disini

Read More »

Pasang Social Bookmark di Blog

Apa itu social bookmark? Social bookmark adalah metode untuk pengguna Internet untuk dapat menyimpan, mengorganisir, mencari, dan mengelola bookmark halaman web di Internet dengan bantuan meta data, biasanya dalam bentuk tag yang secara bersama-sama dan atau kolaborasi menjadi folksonomy. Folksonomy disebut juga tag sosial, "proses oleh banyak pengguna yang menambahkan meta data dalam bentuk kata kunci untuk berbagai konten" (wiki). Sekarang sudah tahu kan apa itu social bookmark? Gampangnya sobat bisa men-share artikel blog sobat dalam layanan bookmark ini, bahkan juga para pengunjung blog sobat.

Contoh layanan bookmark seperti: technorati, del.icio.us, digg, google bookmark dan lainya. Apakah sobat ingin memasangnya? Kalau ya ikuti langkah berikut ini:

# Langkah pertama sobat bisa langsung mendaftar layanan social bookmark di beberapa website dibawah ini:

Daftar Layanan Social Bookmark, semua GRATIS tinggal pasang:

1. http://addthis.com/

2. http://www.socialmarker.com/

3. http://www.social-bookmark-script.com/

4. http://www.socialbookmarksmanager.com/

5. http://addtoany.com/

# Setelah mendaftar sobat tinggal pasang script/kode yang diberikan sesuai dengan keinginan sobat, biasanya di setiap posting paling bawah (seperti saya, sobat bisa lihat dibawah posting ini)

Untuk cara pasang social bookmark, sobat bisa ikuti langkah berikut:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Setelah itu sobat cari kode ini :

<div class='post-footer'>

6. Setelah ketemu, pasang script bookmark yang telah sobat dapatkan dari salah satu layanan bookmark diatas, tepat di ATAS kode tadi.

7. Simpan template dan lihat hasilnya...

Untuk cara yang kedua saya akan posting pada postingan selanjutnya.

Moga manfaat...!

Baca juga disini

Read More »

Modifikasi Readmore Dengan Gambar

Pada posting sebelumnya tentang membuat readmore saya telah bahas pada postingan disini. Nah sekarang saya masih ingin membahas tentang pasang readmore, tapi kali ini readmore dengan gambar alias backgroundnya menggunakan gambar. Mungkin sudah biasa sobat menggunakan fungsi readmore yang menggunakan teks tulisan, nah sekarang menggunakan gambar. Apakah sobat ingin mencoba memasangnya? Jika ingin silahkan lanjut baca hehe...

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini

]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.read_more {
background:url(http://img412.imageshack.us/img412/8126/reedmorebgvk0.gif) no-repeat right; /* SILAHKAN SOBAT GANTI GAMBARNYA DENGAN MILIK SOBAT */
bottom:5px;
font-family:verdana;
font-size:80%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
line-height:normal;
padding-right:10px;
text-align:right;
white-space:nowrap;
}

7. Setelah itu cari kode berikut ini:

<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>

8. Setelah ketemu, ganti tulisan Read More... dengan kode ini:

<p class='read_more'>» Read More... </p>

9. Simpan template dan lihat hasilnya...

Moga manfaat...!

Lihat juga disini

Read More »

Membuat Pullquote Pada Postingan

Dalam istilah postingan kita sebagai blogger pasti tidak asing lagi mendengar kata "blockquote". Blockquote biasanya digunakan pada dasarnya untuk memblock tulisan yang kita kutip dari sumber lain. Namun tak jarang, blockquote juga di gunakan oleh sebagian besar blogger hanya untuk menonjolkan penekanan atau menarik fokus sang pembaca pada tulisan yang dianggap penting oleh penulisnya. Biasanya blockquote menggunakan sintak seperti ini: <blockquote>tulisan yang di-blockquote disini</blockquote>. Nah sekarang saya ingin mengajak sobat untuk membahas pullquote saudaranya blockquote.

Apa itu pullquote? Singkatnya pullquote hampir mirip dengan blockquote hanya terdapat perbedaan kalau pullquote biasanya di gunakan untuk menarik fokus pembaca dengan memberikan sebuah frame pada tulisan, biasanya dalam media cetak sangat jelas dan sering kita temukan. Untuk lengkapnya sobat bisa baca di Wiki. Bagaimana sobat tertarik memasang pullquote di blog sobat? Ini dia caranya:

1. Sign In ke blog anda.

2. Tuju tab Layout ► Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►

]]</b:skin>

6. Setelah ketemu, pasang kode dibawah ini persis di ATAS kode tadi:

.pullquote_right{ 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0 0 0.4em 15px !important;
padding: 0.6em 5px !important;
background: none !important;
border: 2px solid #ddd;
border-width: 3px 0;
text-align: center;
float: right;
}

.pullquote_left { 
width: 190px;
font: bold 1.333em/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif; 
margin: 0 15px 0.4em 0 !important; 
padding: 0.6em 5px !important; 
background: none !important; 
border: 2px solid #ddd; 
border-width: 3px 0; 
text-align: center; 
float: left; }

7. Kemudian Simpan template.

8. Langkah selanjutnya adalah memosting tulisan. Sobat harus menambahkan kode tag div jika memosting, kodenya seperti ini:

Untuk pullquote sebelah kanan:

<div class="pullquote_right">teks yang di pullquote sebelah kanan</div>

Untuk pullquote sebelah kiri:

<div class="pullquote_left">teks yang di pullquote sebelah kiri</div>

contoh formatnya seperti ini:
<div class="pullquote_right">teks yang di pullquote</div>lanjutkan isi teks atau tulisan sampai akhir


SELESAI.

Moga manfaat...!

Baca juga disini

Read More »

Pasang Sesuatu Selalu di Samping Blog

Banyak sekali para blogger yang selalu berusaha mempercantik tampilan template atau blognya. Berbagai macam widget dipasang dan berbagai hack dicoba. Pada kesempatan kali ini saya ingin membahas tentang cara memasang gambar selalu disamping blog. Tentu saja yang saya maksud adalah gambar yang berada disisi template. Banyak fungsi sebenarnya dari widget ini, selain sobat bisa menggunakan widget ini untuk memasang foto profil sobat, juga sobat bisa memasang segala widget misal menu posting yang direkomendasikan untuk di baca para pengunjung. Bagaimana sudah tertarik memasangnya? Ini dia langkah-langkahnya:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

#side_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

7. Setelah itu adalah langkah memasang gambar, pasang kode dibawah ini tepat dibawah: </head>

<div id='side_image'><a href='http://kumpulblogger.com/?refid=80103' target='_blank'>
<img border='1' src='http://roele112.googlepages.com/test.gif'/>
</a>
</div>

8. Simpan template dan lihat hasilnya.

Perhatian:

kode yang berwarna merah adalah kode yang bisa sobat ganti sesuai keinginan.

> Untuk pojok kanan bawah :

bottom:5px;
right:5px;

> untuk pojok kanan atas :

top:5px;
right:5px;

> untuk pojok kiri atas

top:5px;
left:5px;


code source: kolom tutorial blogspot.

Moga manfaat...!

Jangan lupa kunjungi blog ini

Read More »

11 Website Layanan Pembuat Gambar Kartun

Jika Anda tidak nyaman menggunakan foto asli untuk mewakili Anda dalam setiap profil dan avatar online, mengapa tidak membuat sebuah karakter gambar kartun Anda? Itu pasti akan menyenangkan dan unik bila dilihat orang lain. Nantinya gambar kartun sobat ini akan sobat pasang di mana saja sepeti di MyBlogLog, Blog profil, Facebook, MySpace, Friendster, dll.

Terima kasih banyak kepada layanan web gratis yang menyediakan fasilitas "cartoon me" ini. Sobat tidak perlu susah-susah untuk mengedit gambar kartun sobat semisal di PS (PhotoShop), PI (PhotoImpact) atau image editor lainnya, apalagi kalau sobat belum mahir menggunakan program-program tersebut. Dan Sobat tidak perlu membayar seorang seniman untuk ilustrasi kartun sobat. Yang perlu sobat lakukan adalah meng-upload foto, atau melakukan beberapa mix dan match.

Berikut daftar 11 website yang memungkinkan Anda untuk membuat sebuah karakter kartun Anda via online. Terimakasih buat hongkiat.com atas coll post-nya.

1. Portrait Illustration Maker



2. MeeZ.com



3. Simpsonize Me



4. Yahoo! Avatars



5. BeFunky



6. Buscar Messenger



7. Cartoon Me



8. Joystiq Mii



9. MyPlay



10. South Park Studio



11. MoonJee



Bagaimana tertarik? Cepat kunjungi website-website tersebut.

Moga manfaat...!

Baca juga disini

Read More »

Mengembalikan Angka di Label

Sobat pasti tahu kan yang dimaksud dengan angka disini apa? Yang dimaksud dengan angka disini adalah angka pada label post, angka ini berfungsi untuk menginformasikan para pengunjung blog kita akan jumlah posting pada label tersebut. Sudah banyak postingan tutorial cara menghilangkan angka pada label post. Nah sekarang mungkin ada sobat yang ingin mengembalikan angka tersebut seperti semula tapi tidak tahu bagaimana caranya. Saya akan mencoba mencari solusinya dengan memberikan tips ini yaitu tentu saja mengembalikan angka pada label hehe. Bagaimana lanjutkan?

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. CENTANG kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini:

<span dir='ltr'/>

6. Setelah ketemu, Ganti kode tersebut dengan kode dibawah ini:

<span dir='ltr'> (<data:label.count/>) </span>

7. Simpan template dan lihat hasilnya...

Moga manfaat...!

Baca juga disini

Read More »

Pasang Kamus Indonesia-Arab di Blog

Para sobat blogger bagaimana kabarnya? Masih tetap eksis nge-blog? Mudah-mudahan masih ya. Saya ada kabar gembira bagi para sobat blogger Indonesia, sebuah situs lokal menyediakan layanan translate atau terjemah online dari Bahasa Arab ke Bahasa Indonesia. Fasilitas ini diberikan secara gratis tanpa biaya apapun dan mudahnya lagi sobat bisa memasang fasilitas terjemah tersebut di blog sobat, jadi tidak perlu mengunjungi situs tersebut. bagaimana tertarik ingin memasangnya? Ini dia kode scriptnya:

# Silahkan sobat pasang dimana sobat mau, biasanya di SIDEBAR

Kamus Indonesia-Arab Online :

<script src="http://kamus.javakedaton.com/inc/js/kamuspopup.js" type="text/javascript"></script>
<form name="my_form" method="post">
<input value="" name="message" size="15"/>
<input maxlength="256" value="Translate" onclick="translate(this.form)" type="button"/>
</form>

Selamat Mencoba...!

Moga manfaat...!

Baca juga disini

Read More »

Apa Itu RSS dan Kegunaannya

BEN HAMMERSLEY tak bermaksud membual. Pukul setengah sembilan pagi saja, ia mengaku sudah memamah 75 situs web yang berbeda. “Saya sudah membaca berita-berita headline terkini dan mencermati artikel-artikel yang menarik,” ujarnya. Lebih menarik lagi, semua itu bisa dilakukannya dalam tempo singkat: sebelum secangkir kopi paginya habis!

“Ini benar-benar bermanfaat,” ujar kolomnis digital the Guardian itu. “Anda tidak perlu ketiban foto-foto atau gambar-gambar besar, layout iklan yang berat dan berkedip-kedip, tapi Anda bisa menikmatinya dengan cemat dan nyaman,” ujarnya. Jadi Anda tak perlu menghabiskan pagi Anda hanya untuk membolak-balik bookmark berbagai situs untuk mencari tahu berita terbaru.

Sejak ditemukannya browser web yang bisa menampilkan gambar, tetap saja gambar-gambar ini tak bisa membuat aktivitas membaca online menjadi pengalaman yang menyenangkan. Jika Anda adalah orang yang menggunakan web sebagai sumber utama berita-berita terhangat, pastilah setidaknya Anda punya 60 alamat bookmark yang jarang diakses, atau membuka setidaknya 30 jendela browser secara bersamaan agar tak ketinggalan berita. Merepotkan, dan kadang bikin jengkel juga.

Tapi kini ada cara untuk tetap bisa memantau berita-berita top dari the New York Times, the Washington Post, BBC, situs-situs berita lainnya, atau bahkan juga web blog, secara lebih gampang. Formatnya pun lebih mudah dibaca dan praktis sehingga memungkinkan Anda memindai ratusan berita terbaru tanpa harus buang-buang waktu membuka halaman web satu per satu.

Yang Anda butuhkan — seperti yang juga digunakan Hammersley — adalah mengunduh peranti pembaca (reader) RSS dan memasangnya di komputer. Bagi pengguna PC, seorang redaktur di PC World menyarankan untuk menggunakan SharpReader. Tapi jangan khawatir ada ratusan software serupa yang bisa Anda pilih sesuai selera dan kebutuhan.

Semua peranti lunak ini disediakan gratis, meski si pengembang sistem menghargai donasi dari para pengguna yang happy. Jika Anda mendapatkan pesan error ketika mencoba memulai (seperti “The application failed to initialize properly” atau “The dynamic library mscoree.dll could not be found”), cobalah kunjungi situs Windows Update. Carilah dan install Microsoft.NET Framework agar pemasangan RSS bisa beroperasi dengan baik.

Di reader yang sepintas mirip aplikasi e-mail Outlook ini, Anda bisa menata headline dan sinopsis artikel-artikel yang diminati. Jika Anda melihat ada berita yang ingin dibaca, tinggal mengkliknya, dan sebuah jendela akan menampilkan berita yang ingin Anda simak.

Ketika reader sudah terpasang di komputer, kunjungi balik web browser dan buka situs-situs favorit Anda. Sebagian besar situs sudah punya link yang bertuliskan “RSS” atau “XML”. Sejumlah situs malah memiliki berbagai link, bahkan di setiap menu dalam publikasinya. Lalu ambil (”cut and paste”) alamat tersebut dan taruhlah ke dalam reader untuk membaca isi situs dalam format RSS. Setekah beberapa detik, daftar headline yang Anda pilih akan muncul. Klik tombol “Subscribe” di SharpReader jika Anda ingin menambahkan pasokan (feed) dari situs-situs tersebut dalam daftar baca.

Atau, Anda juga bisa mengetikkan alamat URL sebuah situs dan SharpReader akan mengunjungi situs tersebut untuk memastikan apakah ada RSS feed yang siap “disedot”. Jika ada, ia akan otomatis memindai isinya.

Namun, ada masalah juga. Sejumlah situs, termasuk the New York Times, tidak menampilkan daftar seluruh pasokan RSS-nya di situs utama mereka, kendatipun sudah memasok hampir 20 menu berita yang bisa dinikmati lewat format RSS. Lebih membingungkan lagi, sejumlah RSS suratkabar hanya tersedia melalui pihak ketiga seperti NewsIsFree, yang memang tak mudah dilacak. Jangan panik, coba gunakan mesin pencari khusus RSS macam Syndic8.

RSS (”Really Simple Syndication” atau “Rich Site Summary”) memang memiliki tiga keunggulan dibanding web dan e-mail — dua cara terpopuler membaca berita online selama ini. Pertama, tak ada iklan atau gambar yang menyesaki badan berita. Situs asli berita yang Anda klik sebenarnya memiliki sejumlah iklan, tapi hasil pemindaian RSS jauh lebih efisien. Para blogger misalnya, yang tak butuh iklan untuk bertahan hidup, biasanya mengirimkan hampir seluruh postingnya ke dalam format RSS.

Kedua, RSS otomatis akan memperbaruinya dirinya sendiri dengan item-item terbaru sehingga isinya senantiasa segar. Anda tidak perlu melompat dari satu situs ke situs lainnya atau mengklik tombol Refresh hanya untuk mengetahui sajian terbaru situs favorit Anda. Sistem ini akan memindai situs-situs tersebut dalam hitungan detik dan bukannya melakukan loading halaman-halaman web secara individu yang prosesnya lama dan berat. Metode ini jauh lebih simpel, ramah dan tentu saja menghemat bandwidth.

Ketiga, Anda juga bisa menata sendiri “pasokan” RSS dari berbagai situs berita menjadi aliran data tunggal. Anda akan terbebas dari agenda-agenda tersembunyi para penyedia content situs. Sebagian lagi malah percaya metode ini merupakan solusi jitu menghindari serbuan surat-surat sampah alias spam. Pasalnya, RSS bisa menggantikan posisi dan fungsi e-mail bagi anggota kelompok diskusi yang sering jengkel menemukan inbox-nya dipenuhi spam.

Kemunculan RSS menunjukkan betapa masa depan Internet tidak hanya bersandar pada e-mail dan browser. Para legiun komputer, blogger dan pengembang situs web mengaku jatuh cinta pada fitur ini. Seorang pengembang web mengungkapkan hampir semua kliennya saat ini meminta agar situs yang sedang dibuatnya juga menyediakan pasokan RSS.

Hingga saat ini, tercatat sudah ratusan situs — terutama dari Amerika dan Eropa — sudah menyediakan format RSS untuk layanan beritanya. Tentu, bukan hanya situs berita yang bisa memanfaatkan metode ini. Jika Anda konsumen reguler eBay, pastikan situs ini ada dalam daftar RSS sehingga Anda tak perlu ketinggalan informasi harga terbagus sedetik pun; RSS Amazon akan memungkinkan Anda bisa tahu dengan cepat buku-buku terbaru; atau ITunes akan menginformasikan album-album terbaru ke dalam daftar RSS Anda.

Seorang analis, James Crabtree mengatakan, “Saat ini mungkin banyak orang yang belum tahu benar bagaimana menggunakan RSS. Tapi sekali ia menggunakan, saya pikir, ia akan ketagihan. Ini memang sebuah cara mudah mendapatkan informasi yang diinginkan tanpa harus berlama-lama berselancar untuk membacanya.”

Harus diakui, cepat atau lambat, RSS akan menjadi ikon penting lainnya selain Internet dan e-mail. Secara teknis maupun bisnis, fenomena ini memang layak diprediksikan akan menjadi salah satu lahan penting dalam mendulang keuntungan. Dan bagi pengguna Internet, RSS adalah sebuah kontribusi luarbiasa dalam memperkaya cara orang dalam mengakses informasi dari jagat Internet. [G!]

source: http://thegadget.wordpress.com/

Moga manfaat...!

Salam Blogger

Read More »

Hack: Hidden Navbar Blogger

Navbar Blogger adalah menu bar yang disediakan oleh blogger/blogspot untuk berbagai fungsi, selain berfungsi untuk identitas bahwa blog tersebut menggunakan layananan free blog dari blogger/blogspot, navbar juga berfungsi sebagai mesin pencari blog-blog yang terdaftar di blogspot, untuk lebih lengkapnya tentang apa itu navbar baca disini. Kadang kala kita ingin menghilangkan navbar tersebut karna menggangu tampilan blog kita, tetapi kadang juga kita takut karna termasuk melanggar TOS atau tidak jika menghilangkan navbar. Lalu bagaimana solusinya? Tenang saja para Blogger Master telah menemukan cara yang jitu, apa caranya? Lanjutlah membacanya.

Pada posting lalu saya telah membahas tentang menghilangkan navbar di blogger disini. Sekarang ini dia solusi untuk masalah navbar yaitu dengan meng-hidden navbar blogger. Artinya dalam kondisi normal navbar tidak kelihatan, tetapi jika pointer mouse diarahkan disekitar tempat navbar maka navbar akan muncul. Bagaimana mau langsung coba? Ikuti langkah ini:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Tidak PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Lalu cari kode ini:

#navbar {
height:0px;
visibility:hidden;
display:none }

6. Setelah ketemu, Ganti kode tersebut dengan kode dibawah ini:

#navbar-iframe{
opacity:0.0;
filter:alpha(Opacity=0)
}

#navbar-iframe:hover{
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

7. Setelah itu Simpan Template dan lihat hasilnya.

Moga manfaat...!

Baca juga disini

Read More »

Download Software Ads Converter

Pada postingan sebelumnya tentang ads converter, saya telah bahas daftar website yang menyediakan fasilitas ads converter online, sobat bisa baca disini. Nah kali ini saya ingin memberikan kabar gembira buat sobat blogger. Apa sobat pernah merasa jengkel karna koneksi lambat ketika meng-convert kode ads via online? Kalau sobat pernah mengalaminya, sekarang sobat dijamin tidak akan mengalami kejadian tersebut lagi. Kenapa bisa begitu? Ya karna saya akan memberikan solusinya dengan Software Ads Converter for Blogger.

Dengan software ini sobat hanya tinggal copy kode ads awal ke kotak kosong pada software tersebut, lalu klik dan jadi. Sangat simpel sekali dan tidak memakan waktu sobat untuk lanjut memasang ads di blog (apalagi kalau sobat online via warnet hehe, bisa irit biaya kan?) Dan yang terpenting software ini tidak mengharuskan sobat menginstallnya karna ini software portable. Untuk lebih meyakinkan sobat, saya akan berikan screenshoot software converter kode ads, ini dia:







Tertarik ingin download? ini dia linknya:

http://www.ziddu.com/download/5608805/HtmlCodeConverterForBlogger.rar.html


Atau klik disini: Download

Baca juga disini

Read More »

Cara Membuat Kotak Download Pada Postingan

Wah rasanya masih banyak hal yang berkaitan tentang dunia tutorila blog, karna kreasi dari para blogger benar-benar inspiratif dan akan terus tergali. Pada posting kali ini saya ingin membahas tentang membuat kotak download. Yang saya maksud dengan kotak download adalah kotak area yang memuat link download, mirip dengan teks area tapi hanya saja kotak download saya berikan background dan border di semua sisi kotaknya. Bagaimana anda tertarik untuk memasang di blog anda, agar blog anda terlihat lebih menarik dan keren? Kalau ya silahkan lanjut bacanya:

Langkah-langkah untuk membuat kotak download:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Tidak PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini

]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

.down {
border: 1px solid #C39200;
color: #191919;
background: #FFBF00 url(http://roele112.googlepages.com/dl.gif) no-repeat;
margin: 0 25px 15px;
padding: 12px 12px 12px 12px;
}

7. Simpan template

8. Langkah selanjutnya adalah membuat postingan. Nah pada postingan yang memiliki link download, jika sobat ingin memasang linknya di kotak download caranya seperti ini:

<div class="down">
TULIS LINK DISINI
</div>

contoh:


9. SELESAI


Sobat bisa modifikasi kotak download sesuai keinginan sobat, dan kotak download juga bisa sobat gunakan untuk kotak alert, kotak note dan sebagainya.

Jangan lupa baca juga disini

Read More »

Kumpulan Icon/Gambar YM Untuk Blog

Pada artikel sebelumnya saya telah membuat posting tentang mengganti favicon dibloger disini. Nah sekarang saya ingin memosting kumpulan gambar atau icon fasilitas Yahoo Messenger di Blog, saya yakin posting semacam ini sudah banyak di posting di blog manapun, tapi mudah-mudahan ini yang terlengkap ya namanya juga kumpulan ya gak? hehe. Saya akan posting semua gambar yang ada untuk Pasang Yahoo Messengger di Blog. Bagaimana tertarik untuk lanjut membaca? Jika ya maka lanjutkanlah membaca hihi..:

Ini dia daftar gambarnya:

1.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=1

2.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=2

5.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=5

6.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=6

7.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=7

8.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=8

9.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=9

10.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=10

11.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=11

12.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=12

13.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=13

14.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=14

15.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=15

16.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=16

17.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=17

18.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=18

19.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=19

20.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=20

21.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=21

22.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=22

23.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=23

24.
Kodenya:
http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=24

Tips:

Untuk memasang icon YM di blog formatnya seperti ini:
<a href="ymsgr:sendIM?YOUR_EMAIL_HERE"><img src="http://opi.yahoo.com/online?u=YOUR_YAHOO_EMAIL&m=g&t=1"/></a>



Selesai.

Moga manfaat...

Baca juga disini

Read More »