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 »