Mereund Blog

Home » Archives for August 2010

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>

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

e-Junkie: Jualan produk online jadi lebih mudah

Anggap saja saat ini kita
sudah membuat sebuah produk yang siap dijual secara online, entah itu mungkin
produk fisik atau digital, bisa
berupa e-Book, Kaos, Video Tutorial atau
Template Premium, namun masih bingung harus
menjualnya menggunakan layanan apa. Mungkin artikel kali ini akan menjawab
pertanyaan rekan semua bagaimana mudahnya menjual produk kita secara online
menggunakan E-Junkie,
tanpa harus ribet menyediakan script khusus untuk situs jualan dan semua produk
yang ingin dijual bisa dilakukan hanya dengan bermodal Blogger saja.

Seperti yang kita ketahui, banyak sekali para penyedia layanan Shoping Card
seperti halnya Click Bank, 1ShoppingCart , PayDotCom dll. Namun kali ini
saya hanya menjelaskan menggunakan layanan e-junkie, karena saya sendiri juga
menggunakannya untuk jualan templale di

premium.zoomtemplate.com . e-junkie sendiri sebenanya bisa dikatakan sebagai
jasa perantara penjualan online karena mereka sudah terintegrasi oleh banyak
layanan pembayaran standar seperti PayPal , PayPal Pro , Google Checkout ,
Authorize.Net , 2CheckOut , ClickBank dan TrialPay.

Banyak keunggulan yang ditawarkan e-jankie jika dibandingkan dengan layanan
penyedia shopping card lainya. Walaupun pada intinya semua sama-sama meyediakan fasilitas
Button Buy Now dan Shopping Card. Dengan e-junkie kita dapat dengan mudah
melakukan setup sederhana, menambah produk, mengeditnya dan melakukan copy-paste
kode html button buy dimana saja pada situs kita.

Setiap buyer selesai melakukan pembayaran pada salah satu produk yang kita
jual, maka secara otomatis akan dikirim link download langsung ke email pembeli.
Kelebihan lainnya kita juga bisa mengamankan link download tersebut dengan
batasan waktu tertertu, atau hanya berapa kali link tersebut boleh di download,
mingkin ini salah satu cara terbaik untuk mengamankan link download agar tidak
disalahgunakan oleh pembeli yang "nakal". E-junkie juga menyediakan
fasilitas reseller produk (affiliate), jadi siapa saja dapat menjual kembali
produk kita dengan komisi yang sudah kita tentukan sebelumnya.

Sayang, layanan e-junkie ini tidak gratis, harga termurah yang mereka berikan
dimulai dari $5/Bulan dengan kapasitas simpan 50BM. tentu saja ini terbilang
sangat murah jika produk yang kita jual memang laku terjual :), Jangan kawatir
untuk pendaftaran tetap gratis kok selama 7 hari untuk kita bisa mencobanya.

Mau akses gratis selama 3 bulan?

Tolong jangan langsung daftar, silahkan bawa COUPON CODE =
PAYPALSPECIAL

Saat daftar pertama kali ke layanan
E-Junkie jangan
lupa masukan Coupon Codenya ya biar bisa 3 bulan mencobanya gratis, khan lumayan
(mudahan Coupon Code-nya masih berlaku)

Zoom Feed Aggregator (Premium) - Blogger Template pertama sebagai Feed Aggregator seperti Popurls dan Alltop

"..Specially designed for Make Money Online with Google Adsense or you can play with other Pay Per Click (PPC) Advertising.."

Keterbatasan Blogger selama ini tidak menyurutkan niat saya untuk mengembangkan versi template yang lebih canggih
lagi. Ini bisa saya buktikan langsung dengan hadirnya Template yang dikembangkan
khusus sebagai Feed Aggregator, dan bahkan bisa saya katakan template ini hanya
satu-satunya didunia yang pernah dirancang menggunakan flatform Blogspot.

Berawal dari kekaguman saya pada situs Feed Aggregator seperti
Alltop.com
and Popurls.com,
Zoom Feed Aggregator juga dikembangkan dengan konsep yang sama. Alltop
dan Popurls adalah situs yang dibangun disekitar gagasan dengan mengambil
beberapa RSS feed dari situs populer dan menampilkan semua sindikasi berita
hanya dalam satu halaman.

Zoom Feed Aggregator benar-benar dirancang memiliki keunggulan dari
template yang pernah ada, Jika sobat blogger melirik demonya kalian mungkin
tidak akan percaya ini dibangun menggunakan Blogger sebagai engine-nya. Bahkan
beberapa fitur yang tertanam pada template ini benar-benar sangat baru dan
sangat powerfull. Yang paling sangat saya sukai dari template ini yaitu ada
fitur pada posting yang memudahkan sobat untuk membuat deskripsi singkat untuk
artikel tanpa harus berpusing ria lagi mencari ide untuk menulis. Cukup cari
berita yang sekiranya paling Hot, tulis deskripsi singkat dari inti Artikel
tersebut beserta linknya lalu Posting, dan biarkan pembaca yang melanjutkan
sendiri ke link resminya. Menurut saya, cara seperti ini bukan termasuk
Copy-Paste dan bisa saya katakan sangat Legal. Yang perlu saya tekankan Zoom Feed
Aggregator tidak bekerja sebagai Auto Blog, selain itu Rss Feed
yang ditanamkan
juga tidak akan terindex pada Search Engine, jadi template ini sama sekali tidak
melanggar hak cipta konten. Tapi saya tetap menyarankan meminta ijin terlebih
dahulu kepada pemilik feed situs :)

Zoom Feed Aggregator sebenarnya saya rancang khusus buat Make Money
Online dengan Google Adsense atau Program Pay Per Click (PPC)
lainnya, karena tempate ini dibangun memang khusus untuk tujuan
tersebut. Jadi jangan ragu untuk menggunakan template ini sebagai mesin
uang!

Simak Presentasi dibawah ini:

Lihat LIVE DEMO
Disitus Resminya.

Zoom Feed Aggregator Features:

Dirancang khusus untuk Make Money Online dengan Google Adsense atau PPC
lainnya.

Loading Halaman sangat cepat, karena hanya menggunakan 20% image.

Panduan Lengkap SEO untuk Blogger (Anda harus melihatnya).

Mengusung konsep Blogazine (Blog Magazine).

4 pilihan skema warna (Gray, Purple, Yellow, Red, Blue)

Dukungan Email Box Subsciber dengan FeedBurner.

Tersedia 30 Widget untuk menampilkan Berita RSS FEED (1st
Feature)

Support digunakan dengan Standar RSS Blogger Widget atau dengan Feedburner
(direkomendasikan)

Mendukung Jump Lik untuk memudahkan pembaca menuju orginal link (1st
Feature)

Dukungan 1 sidebar pada halaman Posting.

mendukung 4 kolom widget pada Bottom Footer.

Dukungan Custom Search Box dibawah posting widget (1st
Feature).

Dukungan tooltips ketika pengguna menggunakan mouse over pada berita link
Feed (1st Feature).

Dukungan Facebook Like dan Sosial Bookmark.

Dukungan Related Post dengan Thumbnail.

Dukungan Avatar pada kotak Komentar.

Diuji dan bekerja dengan baik di browser IE6/7, Firefox, Opera, Safari,
Chrome, Flock.

Pedomain Lengkap Installasi (PDF Setup Guide)

Berminat memiliki template ini? silahkan baca rincian harga

disini

Animasi Transparent Navbar

Sumber : (blogspot) Animasi jQuery untuk Navbar by Ardianzzz

Yang perlu dijadikan catatan pada trik ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, mengganti dengan jenis navbar lain, bahkan menghilangkan secara permanen navbar tersebut.

Nah, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin trik blogger ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. Trik ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse. Adapaun jQuery-nya dapat disimak seperti di bawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){

$(this).fadeTo("slow", 0.1);
});
});
</script>

Silakan Copas jQuery di atas di atas tag </head>.

Catatan :

Ganti kode yang berwarna merah (0.1 = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai 0.0 :)

Ganti kode yang berwarna hijau (1.0) menjadi 0.75 jika ingin transparasi navbar saat didekati mouse bernilai 25%. Sedangkan jika tetap pada nilai 1.0, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.
Selamat mencoba...

Kompres Kode CSS dan Javascript

Sumber : Compress Javascript dengan YUI Compressor by O-OM.

Mungkin kamu tahu & mengerti komponen-komponen apa saja yang menyebabkan suatu blog lambat loading (internal), antara lain : Banyaknya assessoris blog (widget/gadget), menampilkan banyak image, tampilan full post di halaman utama (home), banyaknya script, dan lain-lain. Atau kamu ingin mendefinisikan & menambahkan "dan lain-lain" dalam komentar.

Dalam trik blogger kali ini, kita akan mendiskusikan tentang bagaimana mengoptimalkan kode CSS & javascript agar sedikit banyaknya dapat lebih cepat loading. Nah, layanan online yang dapat kita pergunakan untuk melaksanakan fungsi tersebut adalah Online YUI Compressor. Cara menggunakan layanan ini juga tidak sulit, kita tinggal memasukan semua kode javascript yang ingin di-kompresi, ingat! tanpa memasukan tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> tapi hanya kode utamanya saja.

Adapun cara menggunakan Online YUI Compressor dapat direview seperti ulasan berikut :

Masukkan kode javascript dalam kotak "Code".

Pilih secara dropdown jenis file pada "File Type".

Selanjutnya untuk opsi-opsi kosongkan.

Klik tombol "Compress"

Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".

Copy kode tersebut & paste di antara tag <script type='text/javascript'> ... </script> atau <script type='text/javascript'> //<![CDATA[ ... //]]> </script> dalam blog kamu.

Contoh :

Javascript otomatis readmore.

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Catatan :

Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site Online YUI Compressor.

Hasilnya setelah dikompres & dimasukkan dalam full kode Javascript otomatis readmore.

//]]>

</script>

Semoga bermanfaat...

Japaian Urang Banjar1 Template Release

Nah ini ada lagi satu template blogger yang tampil kalem (hitam-putih). Khusus bagi narablog yang suka menulis kehidupan kesehariannya, blog ini dapat menjadi template blog yang direkomendasikan. Namun tidak menutup kemungkinan narablog yang berkategori non-diary menerapkan template ini. Alkisah-nya promosi nih...

Kunjungi atau klik link berikut Japaian Urang Banjar1 Template Release untuk melihat tampilannya (sekaligus demo version). Sedangkan fitur-fitur & link downloadnya juga dapat kamu review serta download di blog tersebut. Sebagai tambahan fasilitas beda komentar antara owner blog dengan pengunjung sudah diaplikasikan dalam template Japaian Urang Banjar1 tersebut.

N/B :

Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".

Selamat mencoba...

Blogger Copy Template Release

Sudah lihatkan format dan gambaran tentang blog ini? Kira-kira bagaimana menurut pendapat kamu ? bagus, lumayan bagus, atau hampir bagus. Lho...lho... kok bagus semua pilihannya. Apabila kamu tertarik untuk mencoba template ini, maka akan OB tunjukkan link downloadnya. Tapi sebelum kamu mendownload, mari kita review fitur-fitur yang diadopsi oleh "Blogger Copy Template" ini.

Blogger Copy Template support :

Meta Tag SEO friendly.

Favicon included.

Horizontal navigation & search box.

Bottom 3 column widget ready.

Highlight author comments.

Click the label showing the post title only.

Paralel date header with comment link.

Breadcrumbs included.

Sederhana bukan? Belum ditambahkan macam-macam script agar kamu yang mengadposi template blogger ini lebih leluasa untuk memodifikasinya. Berikut gambaran data waktu download (waktu halaman blogger copy template tampil penuh di layar monitor) setelah dianalisa melalui Website Optimization.com (jelas cepat, karena belum banyak postingnya).

Hampir kelupaan, ini link downloadnya dijamin cepat tanpa ada banner/link iklan yang melingkupinya.

Versi demo

Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit". Cukup ganti link copyright-nya saja, karena letaknya sudah OB optimasi yakni penutup dari seluruh content blog (paling bawah pojok kanan).

Membuat "Back to Top"

Ketika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.

Bagaimana trik blogger untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi & sariawan. Sebenarnya trik blogger membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (Blog Rudi Azhar) yang merupakan salah satu admin optimasi blog.

Cara I :

Tambahkan kode CSS berikut di atas kode ]]></b:skin>.

p.to-top {

font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;

font-size:90%;

float:right;

padding-right:10px; }

Keterangan :

font-family = keluarga bentuk teks yang akan kita tampilkan.

font-size = ukuran teks.

float = peletakkan teks (kanan atau kiri)

padding-right = jarak antara teks dengan bidang sebelah kanan.

Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.

Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, & sejenisnya.

Kemudian copas kode berikut di atasnya :

Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'>

Kemudian simpan template kamu.

Catatan :

Untuk peletakkan back to top tidak harus di atas footer.

Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.

Blog demonya ada di utuharies.blogspot.com.

Cara II :

Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut & akan mengikuti scroll halaman. Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.

Catatan :

Jquery di atas sudah dikompres (compress) menggunakan online YUI Compressor.

Letakkan jquery back to top tersebut di atas kode </head>

Tambahkan kode CSS berikut di atas ]]></b:skin>.

#back-to-top {right:20px;bottom:40px;position:fixed;}

Ganti kode <body> dengan <body id='to-top'>

Selanjutnya tambahkan kode berikut di atas kode </body>.

Catatan :

height = tinggi image

width = lebar image

Silakan ganti image (http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (Kenapa image tidak muncul?).

Simpan template.

Selamat membuat back to top...

Membuat RSS Feed Untuk Website Yang Tidak Mendukung Feed

e-Junkie: Jualan produk online jadi lebih mudah