Bisnis Dunia Digital

Berbagi informasi seputar internet marketing dan berbagai bisnis internet

Techno-Blog

Berbagi informasi seputar cara membangun website atau Blog, tips dan trik Blogging

Pencerahan Hati

Menelaah diri dengan bercermin pada diri sendiri

Review Gadget

Review Gadget terbaru dan terpopuler, informasi harga, dan referensi pembelian

Simple Strategy

Build Your Business

Ada kesalahan di dalam gadget ini

Senin, 18 Juni 2012

Membuat Recent Post Thumbnail Bergerak



Tampilan blog yang atraktif dan terlihat profesional menjadi daya tarik tersendiri bagi visitor. Salah satu upaya untuk itu dengan menampilkan Recent Post, fungsinya agar visitor lebih mudah melihat-lihat postingan melalui cuplikannya.

Setelah memposting Cara membuat Related Post yaitu widget yang berguna untuk mengarahkan pengunjung pada postingan yang sejenis, berikut ini cara membuat recent post thumbnail bergerak di blog :

  1. Login ke akun blogger.com.
  2. Pilih "Rancangan" atau "Design".
  3. Pilih "Add gadget" pada bagian "Page elements" dan lalu pilih "html javascript".
  4. Isikan judul widgetnya dan copas kode recent post di bawah ini ke kotak tersebut dan ganti tulisan merah dengan alamat blog sobat.
<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://techno-herry.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

Kemudian "Save" dan lihat hasilnya.

Selamat mencoba...

Kamis, 26 April 2012

Kompresi CSS dengan Compressor Tool Online



Diperlukan pengetahuan dan pengalaman cukup untuk dapat mengedit kode CSS secara manual. Misalnya, kode Header Wrapper secara standar tertulis seperti ini

#header-wrapper {
background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

Apa yang perlu anda edit?
Perhatikan code CSS tersebut dengan hasil editing di bawah ini

#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg)
no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

Kode tersebut menjadi lebih simpel dan ringan saat diloading. Bagi anda yang masih awam dengan kode CSS seperti ini, pasti masih bingung (jangan mengira saya tidak..)

Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:
-CSS Drive Gallery
-CSS Compressor
-Online CSS Optimiser/Optimizer
-Minify CSS
-CSSTidy Online

Bisa juga anda mencarinya sendiri di Search Engine dengan keyword "css compression tool".

Langkah-langkahnya:
a. Copy semua aturan CSS dari template HTML/XML.
b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lain sebagainya.
c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan. perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman. d. Download backup template terlebih dahulu pada halaman edit HTML.
e. Hapus bagian dimana anda mengkopi aturan CSS tadi dan masukkan hasil kompresi ke bagian tersebut.
f. Preview dan jika tidak ada masalah lagi, save.

Semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.
Pilih jenis/opsi kompresi 'standard' atau sejenisnya pada tool kompresi CSS yang anda gunakan.

Semoga bermanfaat dan Good luck.

Rabu, 25 April 2012

Mempercepat Loading Blog Dengan Hosting CSS External



Salah satu cara supaya blog anda lebih cepat dalam proses loading adalah dengan melakukan compress terhadap kode CSS (Cascading Style Sheets, adalah bahasa styling yang seringkali kita tambahkan pada HTML). Rapikan kode-kode CSS yang tidak perlu, jadikan satu bagian supaya lebih tampak kecil dan ringan.

Misalnya kode padding-top : 3px, padding left : 3px, padding bottom : 4x, padding right : 5px, bisa kita jadikan satu bagian menjadi padding : 3px 3px 4px 5px. Dengan melakukan ini berarti anda telah mempercepat loading blog. Saran saya sih jika anda belum memahami cara penulisan kode CSS lebih baik jangan dirubah.

Selain cara tersebut, kode CSS yang terlalu banyak yang menyatu dengan template blog, juga bisa memperlambat loading blog anda. Solusinya, kita bisa menggunakan CSS eksternal, yaitu dengan menyimpan kode CSS tersebut pada hosting, lalu kita tinggal menambahkan sebuah kode dalam template untuk memanggilnya.

Untuk hosting CSS kita bisa gunakan Google, karena Google mempunyai sebuah produk gratis untuk hosting berbagai jenis file dan tentu saja Blogger juga bagian dari Google sehingga akses file jadi lebih cepat. Salah satunya anda bisa manfaatkan Google Project atau yang lebih sederhana dengan cara hosting CSS di Google sebagai berikut :

1. Buka Google Sites lalu klik Create site
2. Isi title site anda pada kolom Name your Site, lalu klik Create site
3. Pilih tab create page yang ada dikanan atas site yang sudah anda buat tadi
4. Pilih File Cabinet, lalu isikan judul pada kotak name, dan klik create page
5. Klik add file, dan cari file css anda yang sudah anda simpan dalam computer. Kalau sudah selesai tekan upload.
6. Salin urlnya pada link unduh. Biasanya akan seperti ini :
https://sites.google.com/site/bloggerafif0/mycss/ blogerafif0.css?attredirects=0&d=1
7. Letakkan kode css itu pada template anda, dengan menghilangkan kode yang berwarna merah
? attredirects=0&d=1
8. Cara menuliskannya
<link rel='stylesheet' href=’https://sites.google.com/site/bloggerafif0/mycss/ blogerafif0.css' type='text/css'/>

Letakkan kode ini setelah kode </title> atau setelah kode favicon anda.

Tips ini hanya salah satu cara untuk mempercepat loading blog, masih ada elemen lain yang dapat mempengaruhi kecepatan loading blog, seperti ukuran file gambar, meletakkan urutan widget, dan lain sebagainya, bisa anda simak dipostingan saya berikutnya.

Senin, 23 April 2012

Membuat Menu Navigasi Horizontal Drop down


Memenuhi janji saya atas permintaan seorang teman, berikut ini saya coba sajikan cara membuat menu navigasi horizontal dengan tampilan drop down menu.


Langkah-langkahnya sebagai berikut :

1.Login Blogger >> Rancangan >> Edit HTML >> Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>

/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(http://1.bp.blogspot.com/-RFDvbDJNPyQ/Tmrb7AdySKI/AAAAAAAABpY/KLAlm7t9Yac/ s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}

2. Berikutnya silakan cari kode , lalu taruh kode di bwah ini tepat di atas </head>

<!--Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[ function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com if(navigator.appVersion.indexOf("MSIE")==-1){return;} var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar'; for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){ lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){ lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs; this.className=cl;};lg[k].onmouseout=function(){c=this.className; this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}} //]]> </script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;}
</style> <![endif]-->

3. Setelah selesai kita akan menambahkan dan memunculkan navigasinya. Caranya dengan menaruh kode ini di bawah <body>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'> <li class='selected'>
<a href='/'>Home</a></li>
<li><a href='#'>Peristiwa</a></li>
<li'><a href='#'>Hiburan</a></li>
<li><a href='#'>Sport</a> <ul>
<li><a href='#'>Bola</a></li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>F1</a></li>
</ul>
</li>
<li><a href='#'>Politik</a></li>
<li><a href='#'>Hukum</a></li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Tekno</a></li>
<li><a href='#'>Tutorial</a> <ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</li>
<li><a href='#'>Lowongan Kerja</a></li>
<li><a href='#'>Pendidikan</a></li>
<li><a href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>


Catatan: Silakan ganti "#" link-link di atas dengan link artikel milik anda dan nama menu di blog.

Kamis, 23 Februari 2012

Mengenal Halaman Statis Blog

Static Page

Halaman Statis (static page) adalah halaman suatu blog yang bukan merupakan bagian dari urutan posting. Hal ini sudah sering dibahas pada blog lain, tapi agar blog ini selalu update, saya juga ikutan ngebahas untuk Mengenal Halaman Statis Blog.

Halaman jenis ini hampir mirip dengan halaman website yang bersifat mandiri dan dapat diberi aturan tersendiri sesuai keinginan. Meskipun demikian, halaman statis pada blog masih memiliki aturan general sesuai template dan styling-nya (CSS).

Berbeda dengan halaman posting (artikel), halaman statis tidak berada pada urutan waktu tertentu. Apabila ditampilkan, dia bersifat individual dan terdiri dari satu posting saja; sedangkan halaman posting dapat ditampilkan secara bersamaan dengan halaman posting yang lain, misalnya: ada 5 posting dalam satu halaman yang ditampilkan. Fitur ini ditambahkan pada Blogger sekitar awal 2010 untuk mendukung kebutuhan user akan halaman statis.

Halaman posting memiliki url dengan folder dan subfolder yang diurutkan berdasarkan tahun dan bulan. Setelah itu baru diikuti dengan file html posting yg akan ditampilkan. Sedangkan pada halaman statis, folder yang digunakan untuk menyimpan file adalah "p" yg merupakan singkatan dari "page", setelah itu diikuti dengan file html yg akan ditampilkan. Pada sistem blog, halaman posting akan ditata/diarsipkan berdasarkan urutan waktu terbaru. Halaman terbaru berada di bagian teratas. Inilah sebenarnya konsep blog, dimana setiap posting selalu berkesinambungan, seperti halnya ketika kita membuat status di Facebook. Sedangkan halaman statis diatur untuk ditampilkan secara independen, tanpa mengandung urutan posting berdasarkan waktu, serta tidak diarsipkan.

Fungsi halaman statis

Halaman statis bukan difungsikan sebagai halaman untuk menampilkan posting artikel. Karena bersifat timeless (tidak mengandung url waktu dan tidak diarsipkan berdasarkan waktu), halaman statis sangat cocok digunakan untuk memuat berbagai informasi yang langsung berkaitan dengan blog, misalnya tentang blog atau tentang pemilik blog (about me), kontak (contact form), daftar isi/sitemap, pemesanan space iklan, dan berbagai jenis posting fitur blog yang ingin ditonjolkan namun tidak diinginkan menjadi bagian posting. Anda bisa melihat Contoh halaman statis pada blog saya Techno Blog pada Link Content di sudut kiri atas halaman Blog.


Cara membuat halaman statis Blogger :

Bagi pengguna dashboard Blogger Interface lama:

Dashboard >> New Post >> Edit Pages >> Add New Page

Bagi pengguna dashboard Blogger Interface baru:

Dashboard >> Klik menu Dropdown >> Klik Pages >> Klik New Page >> Klik Blank Page

Happy Blogging !!!

Selasa, 14 Februari 2012

Mendatangkan Traffic dengan submit ke Directory

DirectoryTeknik paling utama untuk mendatangkan traffic ke website Anda setelah mengelola back link yang telah dibahas di artikel Tentang Link Popularity adalah mensubmit website Anda ke Directory.

Yahoo! dan Open Directory Project adalah dua directory terbesar yang sangat potensial untuk menaikkan traffic website Anda. Untuk mensubmit website Anda ke Yahoo atau ODP, Anda harus berhati-hati, karena yang Anda hadapi bukanlah sebuah mesin spyder, tetapi seorang editor manusia seperti Anda. Semua taktik dan strategi jitu untuk search engine tidak akan berlaku disini. Bacalah tips-tips dibawah ini dan bandingkan dengan keadaan website Anda yang sekarang.

  1. Usahakan agar website Anda mempunyai domain name sendiri. Sebagian besar website yang diterima di Yahoo! memakai top level domain, dan hanya sebagian kecil saja yang memakai sub domain yang dapat diterima (kecuali website Anda memiliki content yang unik).
  2. Nama domain sebaiknya mencerminkan isi dari website Anda.
  3. Pastikan tidak ada broken link, gambar yang tak bisa tampil, atau javascript error pada halaman web Anda. Jangan mensubmit website yang belum 100% siap.
  4. Setiap direktori memiliki aturannya masing-masing. Bacalah aturan tersebut sebelumnya agar website Anda terhindar dari diskualifikasi.
  5. Daftarkan website Anda pada kategori yang tepat dan paling spesifik. Lihat juga berapa website yang sudah terdaftar pada kategori tersebut. Usahakanlah mencari category dengan jumlah pesaing yang paling sedikit.
  6. Daftarkan hanya halaman utama saja. Jika Anda mendaftarkan halaman-halaman lain yang merupakan sub dari halaman utama kemungkinan besar akan ditolak. Kecuali halaman tersebut benar-benar memiliki content yang langka.
  7. Perhatikan berapa lama Anda bisa men-submit ulang website Anda (misalnya 2 bulan). Jika belum terdaftar, lakukan submit ulang dalam jangka waktu tersebut.

Yahoo setiap harinya menerima pendaftaran lebih dari 10 juta situs. Sedangkan yang bisa ditangani oleh editornya sekitar 5 sampai 10 persennya saja. Jadi bersabarlah untuk melakukan submit ulang dalam jangka waktu yang telah ditentukan. Kalau ingin cepat, Anda bisa memakai fasilitas submission express. Website Anda akan direview dalam waktu 2-7 hari. Tetapi Yahoo mengenakan biaya $US 299 per tahun, untuk fasilitas ini. Ini hanya jaminan agar website Anda di-review lebih cepat, bukan jaminan untuk diterima. Saat ini Yahoo melakukan review untuk sebuah website bisnis setahun sekali, dan untuk sekali review dikenakan biaya $US 299. Memang bukan jumlah yang sedikit, apalagi untuk perusahaan-perusahaan berskala kecil.

Perlu diingat disini bahwa tujuan Yahoo menerima website Anda bukan untuk membantu mengingkatkan visitor website Anda, melainkan untuk melengkapi koleksi link pada direktori yang mereka miliki. Jadi peluang Anda untuk terdaftar akan lebih besar, jika Anda bisa memberikan website dengan isi yang unik dan belum ada/sedikit jumlahnya pada direktori mereka.

Saat ini Yahoo! masih merupakan directory yang paling ramai (mengusai 25,4% dari seluruh pengguna internet) ditambah dengan Google sebagai search engine default-nya (menguasai 5% dan terus meningkat). Tetapi ada hal yang menarik. AOL, Altavista, Netscape, dan Lycos, jika digabung mengusai 40,5% dari pengguna search engine di seluruh dunia. Keempat search engine ini memakai database dari Open Directory Project (ODP). Jadi akan sangat menguntungkan jika website Anda juga terdaftar di ODP (www.dmoz.org). Direktori lainnya yang juga harus diperhatikan adalah Looksmart. Database Looksmart dipakai sebagai main result di MSN, Altavista, Excite, dan iWon. Tetapi Anda harus mengeluarkan uang sebesar $US 149 untuk bisa terdaftar di LookSmart Network.

Jumat, 03 Februari 2012

Cara membuat Float Image

Float Image

Sharing saya kali ini tentang Cara membuat Float Image (gambar melayang) yang akan selalu tampil meskipun scrollbar bergulir di blog Anda. lihat contoh. Anda dapat menempatkan gambar, widget, jam dll.

Langkah demi langkah untuk membuat float image.

1. Login ke blogger kemudian klik "Layout ->> Edit HTML
2. Cari kode ini ]]></ b: skin> kemudian letakkan kode di bawah ini di atasnya.

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



3. Teks tebal adalah posisi Float Image. Anda dapat mengubahnya dengan "top" "bottom",, "left", "right"
4. Langkah selanjutnya adalah menempatkan kode di bawah ini sebelum tag </ body>

<div id="float_corner">
<a href="http://techno-herry.blogspot.com"> <img src = "
http://blogoholic.info/files/soniclari.gif "border =" 0 "/> </ a>
</ div>


5. Jika Anda ingin mengisinya dengan widget, ubah kode URL gambar dengan kode widget Anda.
6. Simpan dan preview blog Anda.

Demikian Cara membuat float image di blogger...

Senin, 23 Januari 2012

Cara membuat Related Post pada Blogger



Kali ini saya ingin berbagi Cara membuat Related Post atau Related Article pada blog yang letaknya di bawah postingan atau artikel yang kita buat. Widget ini akan sangat membantu pembaca yang telah selesai menyimak artikel untuk menemukan artikel terkait. Dengan demikian blog kita makin sering mendapatkan hits. Link related post ini berdasarkan pada label atau kategori artikel.

Berikut ini Cara membuat Related Post pada Blog :
Login ke Blogger dengan account anda.
Setelah berada di Halaman Dasboard Blogger, lalu :
  1. Klik Rancangan (Layout), lalu klik tab Edit HTML
  2. Klik (centang) chekckbox Expand Widget Template
  3. Cari Tag </head> (gunakan ctrl+F untuk pencarian cepat)
  4. Lalu Copy code script berikut ini diatas Tag </head>:
<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://techno-herry.blogspot.com/' type='text/javascript'/>

5. Sekarang cari <data:post.body/>
6. Lalu sisipkan code script berikut ini tepat dibawahnya

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if>

7. Simpan Template

Lihat hasilnya...

Demikian tips Cara membuat Related Post pada Blog.
Selanjutnya simak pula Cara membuat Recent Post

Kamis, 19 Januari 2012

Memfrase Kode HTML



Jika anda ingin memberikan tips untuk menampilkan banner atau menampilkan Kode HTML di postingan, anda harus merubah kode-kode tersebut agar menjadi text yang bisa dibaca. Karena jika anda langsung meng-copy kode tersebut lalu menaruhnya di postingan hasilnya tidak akan ditampilkan.

Dibawah ini saya sediakan box untuk mempaste code yang akan di convert ke bentuk text :




Silahkan dicoba..

Jumat, 13 Januari 2012

Trik agar blog SEO Friendly



Ini adalah trik untuk Blogger agar SEO Friendly, trik ini akan menggunakan modifikasi atau menambahkan beberapa meta tag standar Blogger.


Pertama, Buka menu HTML dalam account Blogger Anda, edit HTML.
Cari Kode ini (untuk pencarian cepat gunakan Ctrl-F) :

<head>
<b:include data=’blog’ name=’all-head-content’/>
<title><data:blog.pageTitle/></title>

Lalu ubah (copy/paste) dengan code di bawah ini :

<head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

<meta content=’Your Blog Description.‘ name=’description’/>
<meta content=’ Your Blog KeyWords.‘ name=’Keywords’/>
<meta content=’global’ name=’target’/>
<meta content=’Index,follow’ name=’Robots’/>
<meta content=’ALL’ name=’SPIDERS’/>
<meta content=’ALL’ name=’WEBCRAWLERS’/>


Selamat mencoba...

Menghilangkan Navbar

Navbar (Navigation Bar) adalah fasility dari blogger.com. Tetapi banyak blogger ingin menyembunyikan navbar ini karena akan membuat layout blog mereka terlihat lebih baik tanpa kotak (navbar) di atasnya. Pertanyaannya "apakah ini melanggar TOS (Term Of Service) dari blogger.com?" Aku tidak tahu, tapi sejauh ini baik, ada banyak blogger menyembunyikan navbar mereka namun tidak ada reaksi dari blogger.com. Jadi? Anda ingin menyembunyikan navbar blog Anda? jika Anda inginkan ini adalah trik untuk menyembunyikan navbar blogger:

1. Login ke Blogger lalu klik "Layout --> Edit HTML".
2. Copy code dibawah ini masukan ke tag.

#navbar-iframe {
display: none !important;
}

3. contohnya seperti ini :

-----------------------------------------------
Blogger Template Style
Name: xxx
Designer: xxx
URL: http://techno-herry.blogspot.com
Date: Januari 2011
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Simpan settingan , dan lihat blog anda. Sekarang anda tidak lagi melihat navbar di blog and

Keren....



Rabu, 11 Januari 2012

Blogging melalui HP

Blogging bisa dilakukan dimana pun. Bagi teman-teman yang ingin berbagi opini, pengalaman, atau edukasi, bisa menuangkannya melalui blog. Bahkan blogging (aktivitas ngeblog) bisa dilakukan melalui handphone, ini yang saya maksud mobile blogging.

Saya sendiri lagi belajar merancang mobile blog atau lebih tepatnya disebut ngeblog lewat HP. Ga perlu pake HP mahal, HP biasa pun bisa. Bahkan pake HP Cina juga oke.

Caranya mudah dan tanpa biaya alias gratis..tis..tis..
Contohnya mobile blog yang sedang saya bangun yaitu Techno Mobile Blog
Segera saja buat akunnya di http://www.mywapblog.com
Lalu rancang sendiri blog sobat.. Selesai.

Happy blogging !!!


Senin, 09 Januari 2012

Penggunaan Meta Tag


Ada banyak meta tag sesuai dengan standar HTML 4.0 dari World Wide Web Consortion, tapi sebenarnya yang betul-betul dipakai oleh search engine hanya 3, description, keyword, dan robots

Meta Tag Description

Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan.

Contoh penulisan meta tag description adalah sebagai berikut :

<meta name="description" content="Promosi-web.com is a search engine tutorial that explain how to get top rangking in all major search engine and get high traffic for your web site. Available in Bahasa Indonesia.">

Beberapa search engine seperti Nothern Light dan Google tidak memakai meta tags sebagai deskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal yang ada pada halaman tersebut. Itulah sebabnya kenapa saya sarankan agar Anda menggunakan isi dari meta tag description sebagai kalimat pembuka. Dan jika bagian paling awal dari web Anda berupa sebuah menu, maka deskripsi yang ditampilkan pada hasil pencarian Northern Light adalah seperti ini :
Home | Products and Service | Contact Us | About Us ...welcome to our online store, the best place on the web to...

Meta Tag Keyword

Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag keyword adalah sebagai berikut :

<meta name="keywords" content="keyword1 keyword2 keyword3 ...">

atau ada juga yang menulis dengan pemisah tanda koma :

<meta name="keywords" content="keyword1, keyword2, keyword3, ...>

Keduanya berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu diperhatikan disini adalah jangan mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming. Contoh pemakaian meta tag keyword yang salah adalah :

<meta name="keywords" content="bali, bali hotels, travel in bali, bali island, bali weather>

Disini terlihat sekali bahwa kata "bali", diulang lebih dari 3 kali. Contoh berikut ini tidak akan dianggap spamming oleh search engine :

<meta name="keywords" content="bali hotels travel bali island bali weather">

Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming. Misalkan web Anda memuat informasi mengenai pariwisata di Bali, jangan sekali-kali menambahkan "MP3" atau "Britney Spears" sebagai keyword hanya karena keyword-keyword ini merupakan keyword favorit di internet dan banyak dicari orang.

Meta Tag Robots
Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine. Format dasar dari meta tag robots adalah sebagai berikut :

<meta name="robots" content="index | noindex | follow | nofollow">

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :

<meta name="robots" content="index follow">

Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).

Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.

<meta name="robots" content="noindex nofollow">

Sumber :www.promosi-web.com

Sabtu, 07 Januari 2012

Cara membuat website


Pertama kali, anda harus belajar membuat website yang paling sederhana. Ikutilah langkah-langkah berikut ini :
  • Buatlah file dokumen sederhana dengan menggunakan Microsoft Office Word atau Openoffice untuk Linux.
  • Simpanlah dalam bentuk file .html dengan cara klik tombol "save as"lalu pilihlah format html atau web page dan beri nama file tersebut dengan index.html.
  • Daftarlah untuk memperoleh account webhosting gratis di sini!!!
  • Selesaikanlah semua proses pendaftaran. Verifikasikan pendaftaran anda dengan mengeklik link yang akan dikirimkan ke alamat email anda.
  • Masuklah ke account anda dan pilihlah nama subdomain kesukaan anda semisal namaanda.namadomain.com dengan cara mengeklik tombol "Website" lalu klik "Build a new website"
  • Pergilah ke menu "Manage website" lalu klik alamat website anda sehingga anda bisa menuju ke menu "File Manager"
  • Pilihlah menu "Up load file" untuk meng-up load file index.html dari komputer anda untuk ditransfer ke server.
  • Publikasikan website anda dengan mengklik Publish.
  • Tunggulah beberapa saat sampai semua proses ini selesai seutuhnya. Ujilah website perdana anda dengan mengetikkan alamat URL website anda ke browser anda seperti http://namaanda.namadomain.com
Selamat ...... sekarang anda bisa melihat website perdana anda dan semua orang bisa mengaksesnya juga lewat internet.

Jika anda tidak memberi nama file anda dengan index.html maka alamat URL yang harus anda tulis untuk melihat file anda adalah sebagai berikut http://namaanda.namadoamain.com/fileanda.html

Pelajarilah berulangkali materi ini sampai anda dapat mengertinya dengan baik cara membuat website
xiaomi