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 »