Minggu, 31 Maret 2013

Free Blogger Templates Premium V2

template gratis
Bertepatan dengan hari pembentukan blog baru Extemplates, Media Blogger memberikan Free Blogger Template Premium V2 SEO Ready untuk anda semua. Tampilannya adalah seperti yang digunakan pada template milik saya ini. Karena banyak permintaan yang ingin mengetahui bagaimana cara membuat menu dropdown, membuat readmore otomatis yang baik dan masih banyak lagi.

Berhubungan dengan hal tersebut, saya membagikan template gratis yang 100% sama seutuhnya dengan yang saya gunakan. Mungkin beberapa designer atau author jarang membagikan template yang pada design preview sangat bagus dan ketika di download apa daya, beberapa fitur yang bagus telah dihapus dan tidak dibagikan.

Tetapi saya tidak, semoga dengan dibagikan template ini para blogger dapat belajar untuk mengetahui bagaimana menyusun template agar lebih terindex di search engine. Apa saja kelebihan fiturnya, mari ikuti ulasan berikut.

Featured :
Beautifully Menu Navigation
Automatic Readmore always on Article Post
Related Post in Bottom Article
Breadcrumb Indexing on Search Engine Google
Search Engine Optimization Ready
Tag Heading H1 Dinamis.
Ads Ready For Adsense, Chtika, Sitti, dll.
Easy Editing Script HTML and CSS
No jQuery and minimal Javascript
Facebook Like Button
Facebook Comments For Blogger
Jumlah komentar yang masuk dengan icon
Noaktif Backlinks on Blogger Comments
3 Column Footers
Threaded Comments Admin Ready
Sidebar Elemen with H2 Headings.

Dengan beberapa fitur unggulan, semoga dapat menjadi referensi anda kedepannya memilih template dengan susunan HTML 5 dan CSS 3 yang valid di W3C Validator. Download Template Premium 3 Column Gratis.
Download Free Template
Download via Link2

Jumat, 29 Maret 2013

Membuat Tombol Share dibawah Posting

tombol share this
Tombol banyak digunakan sebagai salah satu alternatif seperti guest book, read more, dll. Artikel Cara Membuat Tombol Share dibawah posting ini terinspirasi dari multifungsi sebuah blog sebagai media untuk mempublikasikan artikel ke social networking agar menjadi lebih bermanfaat dan berguna untuk orang banyak.

Membuat Tombol Share Facebook, Google+, Pinterest, di Blog memang mudah. Postingan sebelumnya kita juga sudah membahas Cara Membuat Efek Salju, Daun Melayang, Bintang Berjatuhan di Blog.

"Berbagi itu Indah" Begitulah kata yang tepat untuk menu tutorial blogger kesempatan pagi ini. Bagaimana cara pemasangannya, yuk ikuti panduannya berikut ini :

1. Masuk ke menu template di dalam blogger, pilih EDIT HTML ,Klik dimana saja pada kotak edit template agar pointer mouse ada di dalamnya.
2. Copy kode di bawah ini dan letakkan diatas kode ]]></b:skin> ( Dapat dengan menekan CTRL + F di Keyboard anda )
#post-share-button{margin-top:25px;background:#fafafa;padding:10px 10px 5px 15px;width:95%}

3. Lalu cari lagi kode yang seperti ini <div class='post-footer-line post-footer-line-3'>,letakkan kode di bawah ini diatas kode tersebut.
<div id='post-share-button'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
<span style='margin-left:15px'><a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/></span>
<span><span id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</span>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>

function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> </span>
</div>
4. Simpan Template Anda.

Demikian tutorial singkat mengenai pemasangan Tombol Share This di bawah Artikel. Untuk anda yang ingin merubah tampilannya menjadi lebih bagus dan cantik disertai icon dapat menuju ke artikel Share Button Beautifull in Bottom Article.

Selasa, 26 Maret 2013

Membuat Tombol Back To Top Blogger

back_to_top_button
Berbagai macam cara dilakukan untuk mempermudah pengunjung saat mengunjungi halaman blog kita. Tombol Back To Top adalah salah satu yang sering digunakan dan berfungsi untuk mempercepat proses scroll ke bagian atas. Biasanya button ini terpasang di sebelah kanan atau kiri bagian bawah widget. Pembuatannya cukup mudah dan simple, karena hanya menggunakan script CSS biasa tanpa menggunakan JQuery. Bagaimana cara memasangnya? Ikuti panduannya yang akan saya jelaskan berikut ini.

Cara Membuat Tombol Kembali Ke Atas di Blogspot :
1. Login ke blogger.com
2. Masuk ke bagian Layout / Design
3. Klik Tambahkan Widget, anda dapat menaruhnya bebas di letak apapun.
4. Pilih HTML/Javascript.

Copy Kode berikut : <style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="link URL gambar" /></a></div>

5. Save Template.
Anda dapat mengganti link URL gambar dengan gambar panah ke atas yang anda inginkan. Atau dapat menggunakan opsi ke 2.

Add Go To Top Button with CSS for Blogger :
1. Login ke akun blogspot anda.
2. Masuk ke Template > Edit HTML
3. Cari kode </body> dengan menggunakan CTRL + F (Search Find)
4. Letakkan kode berikut diatasnya atau sebelum kode </body>
<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>
5. Simpan Template.

Demikian tutorial blogspot yang mudah dan simple mengenai Cara Memasang Tombol Back To Top. Anda dapat mengikuti panduan menarik lainnya yang dapat anda pahami dengan mudah seperti Cara Membuat Efek Zoom Pada Gambar , Benarkah Keyword Density tepat untuk SEO, dan Download Prmeium Template Free .

Sabtu, 23 Maret 2013

Membuat Gadget Widget Blogspot Terlengkap

Tutorial cara memasang widget / gadget banyak dijelaskan oleh para bloggers. Dalam membuat widget, tidak hanya keren, cantik, menarik, simple, dan terlengkap yang dibutuhkan. Kita memerlukan beberapa faktor penting seperti posisi penempatan widget, fungsi dari widget tersebut, dan script html yang digunakan.

Agar gadget blog yang kita pasang jauh lebih optimal kita dapat memperkecil ruang untuk setiap widget tersebut dengan baik. Bukan hanya dari segi ruang, tetapi juga dari susunan script HTML/Javascript , CSS, JQuery dan lainnya yang kita gunakan.
membuat widget/gadget

Subscribe Widget Blogspot di Btemplate yang sangat elegan, cantik, dan keren tentu akan menarik untuk anda seperti terlihat pada gambar diatas. Bagaimana cara pembuatan dan pemasangannya? Mari ikuti, tutorial membuat widget blogspot berikut ini.

Membuat Gadget/Widget Blogspot Beautifull :
1. Login ke Blogger.com
2. Masuk ke bagian Layout / Design Rancangan
3. Pilih posisi gadget yang ingin anda tempatkan, pilih tambah widget.
4. Kemudian pilih HTML/Javascript.
5. Copy kode di bawah ini, dan masukkan di kotak tersebut. Dan beri Nama Gadget tersebut (kosong tidak apa).
<style type="text/css">
/*<!CDATA[*/
#mediablogger{width:300px;margin:auto;padding:0;}
.mediablogger-googleplus {height: 57px;}
.mediablogger-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.mediablogger-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.mediablogger-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.mediablogger-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.mediablogger-twitter a.twitter-follow-button {display: block;}
.mediablogger-twitter iframe {margin: 9px 11px;}
.mediablogger-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.mediablogger-sociallinks a {text-shadow: 1px 1px white;}
.mediablogger-sociallinks .mediablogger-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.mediablogger-sociallinks .mediablogger-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBQrQmTUK-DP99rpQVb1Ajwrup7aWbcvNti1qP1SyHCqvs6F33rDatl3x2wDRsXiaq9UZSp05FcW8Nm0wJJ3-s2uSOhAGT_ZYfuaKak5sgo1eWRi-cnadCJ0E_CWf8Ume6XTWUlTIvJUr/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.mediablogger-sociallinks .mediablogger-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.mediablogger-sociallinks .mediablogger-social li a:hover {text-decoration: underline;}
.mediablogger-sociallinks .mediablogger-social li.technorati {background-position: 0 -180px !important;}
.mediablogger-sociallinks .mediablogger-social li.rss {background-position: 0 -240px !important;}
.mediablogger-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.mediablogger-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.mediablogger-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.mediablogger-emailbox input.emailu:focus {color: #333;}
.mediablogger-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.mediablogger-emailbox input.submitu:hover {text-decoration: none;}
.w2bOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.w2bOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.mediablogger a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
    <div id="mediablogger">
<div class="mediablogger-googleplus">
   <script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
   var po = document.createElement("script");
   po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
   var s = document.getElementsByTagName("script")[0];
   s.parentNode.insertBefore(po, s);
})();
/*]]>*/
   </script>
   <div class="g-plus" data-href="https://plus.google.com/114260774078734881680" data-width="300" data-height="69" data-theme="light"></div>
</div>
<div class="mediablogger-facebook">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fpemakan.wortell&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="mediablogger-gplusone">
   <script type="text/javascript">/*<![CDATA[*/
     (function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
     })();/*]]>*/
   </script>
   <div class="g-plusone" data-size="medium" data-href="http://impoint.blogspot.com/"></div>
   <span>Recommend on Google</span>
</div>
<div class="mediablogger-twitter">
   <a href="https://twitter.com/ravdania" class="twitter-follow-button" data-show-count="true">Follow @ravdania</a>
   <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>
<div class="mediablogger-sociallinks">
   <ul class="mediablogger-social">
<li class="technorati"><a href="http://technorati.com/blogs/impoint.blogspot.com">Technorati</a></li>
<li class="rss"><a href="http://impoint.blogspot.com/feeds/posts/default">RSS</a></li>
   </ul>
</div>
<div class="mediablogger-emailbox">
   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mediablogger1', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
   <tr>
<td>
   <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="64px">
   <input class="submitu w2bOrange" type="submit" value="Subscribe"/>
</td>
   </tr>
</table>
<input name="uri" type="hidden" value="mediablogger1"/>
<input name="loc" type="hidden" value="en_US"/>
   </form>
</div>
<div class="mediablogger">
   <a href="http://impoint.blogspot.com/">Get this Gadget</a>
</div>
    </div>
6. Ganti kode yang diberi warna dengan keterangan sebagai berikut :
  • Ganti kode warna merah dengan ID Google Plus anda.
  • Kode warna biru : Ganti dengan ID Facebook anda.
  • Kode warna hijau : Ubah dengan nama akun twitter anda.
  • Kode warna biru tua : Ubah dengan url blog anda.
  • Ganti kode warna orang : dengan ID Feedburner Google anda.
Dengan memaksimalkan tempat, tentu akan menghemat elemen sidebar, footer, header ,body dan lainnya sesuai dengan pengaturan di blog / website anda. Jika anda ingin menambahkan widget lain yang keren dan minimalist dapat membaca artikel berikut :

Kamis, 21 Maret 2013

Robots.Txt For Website

robots search engine Cara Membuat Robots.txt di Website dengan blog itu berbeda. Contoh saja blogger dengan wordpress sudah jauh berbeda. Codeignitier, Joomla, Drupal, Nginx dan lainnya merupakan contoh framework website yang berbeda.

Web Robots (juga dikenal dengan Web Wanderer, Crawler, atau Spider) merupakan program yang melintasi Web secara otomatis. Mesin Pencari seperti Google menggunakannya untuk mngindeks konten web, spammer menggunakan mereka untuk mencari alamat email, dan masih banyak kegunaan Web Robots yang lain.

Pemilik situs Web memakai file robots.txt untuk memberikan petunjuk mengenai mereka ke situs web robot. Protokol yang dipakai disebut Robots Exclusion Protocol.
Contoh isi file robots.txt adalah :
     User-agent: *
     Disallow: /

  • User-agent: * artinya bagian ini berlaku ke semua robot.
  • Disallow: / artinya robot tidak boleh mengunjungi semua bagian dari website.
2 Informasi Penting yang berkaitan dengan robots.txt :
  1. Robot dapat mengabaikan file robots.txt , terutama robot yang memang berniat jahat dengan memindai malware di web atau para spammer.
  2. File robots.txt adalah fil yang tersedia untuk umum (bisa dibuka oleh siapapun). Siapapun dapat melihat bagian dari server anda dan anda tidak dapat menghalanginya meskipun telah menambahkan perintah disallow.
Skema mengenai crawler di search engine :
crawler search engine
File robots.txt biasanya diletakkan di level teratas dari direktori web server Anda. Anda dapat meletakkannya di directory lain yang diinginkan.
Jadi robot akan melihat apakah ada file robots.txt untuk tiap directory server.

Sebagai contoh, untuk file http://impoint.blogspot.com/seo-google-tips-blogging-and-website.html
Maka anda dapat melihat directory dengan menghapus /seo-google-tips-blogging-and-website.html dan menggantinya dengan /robots.txt

Webserver yang sering dipakai adalah direktori root, yaitu tempat yang sama dimana Anda meletakkan situs web utama / homepage "index.html".

File robots.txt adalah file teks dengan satu atau lebih record didalamnya. Tiap satu record adalah satu baris.
Contohnya seperti berikut :
User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /~user/
Untuk perintah disallow, anda harus memisahkan tiap directory baris. Misalnya anda ingin menolak robots beroperasi di /cgi-bin/ dan /tmp/ maka penulisannya tidak boleh digabung dalam satu baris menjadi :
Disallow: /cgi-bin/ /tmp/
Tanda bintang pada user-agent artinya semua robot.

Untuk mengizinkan semua robot mengakses semua bagian website dapat menggunakan perintah berikut.
User-agent: *
Disallow:

Untuk melarang robot tertentu dapat mengganti tanda bintang di user agent dengan nama robot yang ingin dilarang, contoh :
User-agent: BadBot
Disallow:

Mengetahui Aktivitas Kunjungan Robot
Cara untuk mengetahui bahwa situs anda dikunjungi robot adalah dengan mengecek log server di situs untuk melihat apakah ada yang mengakses dokumen dalam jumlah banyak namun waktunya singkat.

Ada banyak nama robot di Internet diantaranya sebagai berikut :
Acme.Spider
Alkaline
Anthill
Google bot
Yahoo bot
Bay Spider
BBot
BackRub
Arale
ASpider
AskJeeves
Aretha
Walhello apple
ArchitextSpider

Untuk melihat keseluruhan robot yang ada di Internet dapat melihat Botsbrowser .

Anda dapat membuat file robots.txt dngan menggunakan :
1. Notepad / Wordpad ( Operating System Windows )
2. Textedit (Format > Buat Plains Teks > Simpan sebagai Barat) ( OS Macintosh )
3. Vi atau Emacs ( Linux )

Terkadang beberapa robot crawler tidak menghiraukan file robots.txt yang anda tulis, biasanya disebabkan oleh menggunakan aplikasi penulis perangkat lunak yang kurang berpengalaman.
Jadi, dalam menulis robots.txt harus sangat berhati-hati dan lakukan pengecekkan file tersebut secara berkala. Semoga informasi mengenai robots.txt for website ini dapat bermanfaat. Artikel Cara Membuat Tabel dengan HTML di PHP dapat anda baca juga.

Cara Membuat Tabel dengan HTML

Pada penggunaan PHP, salah satu elemen yang sering digunakan adalah membuat tabel dengan html disertai kode warna CSS. Tabel merupakan salah satu objek yang terbentuk dari beberapa garis dan bidang yang membentuk sebuah kotak.

Tabel ini hampir sama dengan perintah div, perbedaannya div adalah pembagian bidang yang dapat diisi berbagai elemen sedangkan tabel adalah himpunan kotak yang memiliki border garis berdasarkan baris dan kolom. Hampir sama dengan cara membuat kotak, perbedaannya table adalah kumpulan kotak.

HTML banyak sekali digunakan untuk menyusun objek, gambar, tulisan, layout, bidang ruang, tampilan halaman dan sebagainya. Apabila anda sedang mempelajari pemrograman web dengan PHP, maka tidak akan terlepas dari HTML dan database. Dari database tersebut, tentu berbentuk sebuah tabel. Oleh karena itu sangat penting bagi kita untuk mengetahui kode yang merupakan elemen pemasangan sebuah tabel.

Terlebih dahulu kita akan mengenal perintah kode-kode yang berhubungan dengan tabel.

Perintah Dasar Membuat Tabel di HTML :
<table border="1">
  <tr>
    <th>Nama</th>
    <th>Tanggal Lahir</th>
  </tr>
  <tr>
    <td>Ahmad Ridwan</td>
    <td>21-03-2013</td>
  </tr>
</table>
Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :

<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data
Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan kode penutup untuk kode pembuka di semua jenis kode HTML.

Atribut pendukung Table :

align : untuk mengatur posisi horizontal
valign : untuk mengatur posisi vertikal
width : untuk mengatur lebar
height : untuk mengatur tinggi
border : untuk mengatur tebal garis
border-color : untuk memberi tebal garis dengan warna
cellpadding : untuk mengatur jarak garis dengan objek didalamnya
cellspacing : untuk mengatur jarak tiap cell
bgcolor : untuk mengatur warna
background : untuk mengatur latar gambar
rowspan : jumlah baris yang memotong beberapa baris
colspan : jumlah kolom yang memotong beberapa kolom

Berikut ini adalah contoh dari tabel dengan beberapa kode warna dengan atribut :

table html with css
Susunan script kodenya :
<table width="510" border="1" cellspacing="0" cellpadding="3">
<tr>
<th width="58" rowspan="3" bgcolor="#00CCCC">Rowspan 3</th>
<th width="79" height="41" bgcolor="#00CCCC">Nama</th>
<th width="83" bgcolor="#33FF33">Alamat</th>
<th width="92" bgcolor="#FF9900">Telp.</th>
<th colspan="2" bgcolor="#FF9900">Colspan 2</th>
</tr>
<tr>
<td bgcolor="#66CCFF">ALI</td>
<td align="center" bgcolor="#99CC66">Jl. Ijo</td>
<td bgcolor="#9966FF">11211</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
<td width="92" bgcolor="#9966FF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFF00">UDIN</td>
<td align="center" bgcolor="#FFFF00">Jl. Rencong</td>
<td bgcolor="#FFFF00">23232</td>
<td bgcolor="#FFFF00">&nbsp;</td>
<td bgcolor="#FFFF00">&nbsp;</td>
</tr>
</table>

Tabel memang sangat banyak digunakan mulai dari Microsoft Excell, Microsoft Word, Microsoft Powerpoint, Adobe Dreamweaver dan lainnya. Demikian tutorial dan dasar cara membuat table html dengan css. Semoga dapat membantu anda dalam membuat website, design blog, laporan kerja, dll.
Baca juga artikel dan panduan Cara Membuat Readmore Otomatis dengan Mudah.

Selasa, 19 Maret 2013

SEO Google : Tips Blogging and Website

Search Engine Optimization terdiri dari berbagai strategi yang bisa dimanfaatkan untuk meningkatkan peringkat blog atau website. SEO memiliki beberapa tahapan dimana anda harus bersabar dalam mengimplementasikannya. Untuk menjalankan strategi tersebut anda harus menetapkan sebuah tujuan dan pokok topik bahasan terlebih dahulu.
seo google blogspot
Upaya yang harus dilakukan pertama kali adalah dimulai sejak anda pertama kali membuat sebuah website yang SEO Friendly, karena website tersebut akan mendorong search engine crawler mengenal website dengan lebih dekat.
Dengan mengerti cara membuat tag, link, struktur navigasi, script programming, dan konten maka anda telah memiliki modal yang sangat cukup untuk mengembangkan blog/website yang lebih search engine friendly.
Seperti yang telah kita ketahui, SEO Google 2013 ini terus melakukan update algoritma beserta Google Panda dan Google Penguin yang semakin canggih hingga dapat menganulir banyak trik-trik SEO sehingga tidak efektif kembali.

Berikut ini adalah tips untuk menyesuaikan SEO Google For Blog and Website :
1. Konten yang anda buat harus unik, fresh, learning, dan asli.

2. Konten yang berkualitas menurut aturan Google adalah konten yang mudah dipahami oleh pengunjung serta memberikan manfaat. Maka hindarilah copy paste artikel.

3. Jaga konsistensi anda setiap waktu dalam membuat artikel. Jangan membuat artikel yang tidak bermakna dan hanya sekedar memenuhi daftar jadwal rutin posting.

4. Integrasikan antara blog , website , forum dan yang lainnya yang anda miliki dengan menghubungkan satu sama lain. Karena hampir setiap situs terkenal memiliki blog atau forum diskusi mereka.

5. Hindari aktivitas keyword spamming. Keyword Organik lebih diperhitungkan oleh Google daripada memperbanyak keyword yang akan langsung dianggap sebagai spam.

6. Gunakan layanan ping seperti pingomatic , http://mypagerank.net , http://blogsearch.google.co.id/ping setiap selesai menulis sebuah artikel terbaru yang dibuat.

7. Jangan terlalu banyak menggunakan kata kunci. Baca Keyword Density Analysis.

8. Untuk mendapatkan keyword yang tepat sasaran, gunakan alat pencarian keyword di sini: https://adwords.google.com/select/KeywordToolExternal.

9. Pilih nama domain yang sesuai dengan isi situs anda dan sesuai target yang telah ditentukan. Dalam membuat nama domain jangan menggunakan kata-kata vulgar, product, merk dan lainnya.

10. Gunakan http://www.google.com/insights/search/ untuk menemukan Site Title yang pas dan mencakup seluruh keyword yang anda target.

11. Buat stuktur halaman situs yang benar. Posisi yang dibaca dan crawling oleh search engine terlebih dahulu adalah dimulai dari URL > Tag Title > Tag Image > 200 Kata Pertama > Kata-kata selanjutnya. Semakin awal posisi keyword diletakkan akan semakin baik.

12. Sitemap adalah representasi arsitektur website yang berguna sebagai tool untuk planning dan diatur dalam bentuk bertingkat. Buatlah sitemap.xml di situs anda. Bisa juga dengan memanfaatkan layanan tools pembuat sitemap seperti http://xml-sitemaps.com

13. Hindari Code Bloat. Ketika JavaScript dan CSS ditulis jadi satu dengan file HTML, hal ini bisa menyusahkan mesin pencari mengkonversi kode HTML anda ke dalam bentuk konten itulah yang dimaksud oleh Code Bloat. Maka, hindari penggunaan Javascript dan CSS dalam bagian yang terpisah. Apabila digabung akan sangat menyulitkan karena bergabung dengan HTML anda.

14. Setelah algoritma Panda, berikutnya adalah algoritma Penguin. Jika Google Panda menuntut kualitas konten, maka pada algoritma Penguin, Google menuntut kualitas tautan (link) yang masuk dan keluar dari blog kita.

15. Usahakan untuk mencantumkan internal link disetiap artikel anda. Minimal adalah 2 inbound link.

16. Kreatif dalam mendapatkan backlink. Dalam mengumpulkan banyak link, anda harus pintar memilih mana yang dianggap sebagai spam dengan yang bukan. Carilah link dengan konten yang relevan dengan situs anda.

17. Aktif mengikuti forum, social media, dan directory dengan pagerank tinggi. Dari sanalah anda akan mendapatkan banyak link berkualitas.

18. Untuk mempermudah pengunjung, manfaatkanlah share bookmark yang merupakan layanan untuk melakukan share otomatis dengan artikel yang kita buat agar dibaca oleh banyak pengunjung.

19. Maksimalkan rangking alexa situs anda dengan baik. Apabila blog / website anda memiliki rangking dibawah 100.000 itu sudah merupakan jenjang produktifitas yang baik.

20. Daftarkan blog anda ke directory dmoz.org dan yahoo yang merupakan open directory project paling terkenal.

21. Anda harus aktif sebagai kontributor. Setidaknya anda harus menjadi Contributor untuk akun Google Plus anda dan hubungkan dengan blog / website sehingga akan dapat meningkatkan traffik dan posisi di hasil pencarian.

22. Buat robots.txt pada situs anda. Kegunaannya adalah untuk Pengindeksan, Validasi HTML, Validasi Link, Mirroring, Update Stats, dan sebagai alat untuk mengirim informasi ke search engine.

23. Untuk meletakkan file robots.txt ke server, anda bisa menggunakan software FTP Client. Jangan lupa untuk menggunakan semua huruf kecil.

Beberapa tips seo google diatas dapat mengoptimalkan anda dalam membangun sebuah website. Untuk anda yang masih pemula dapat mencobanya dengan hosting gratis seperti blogger.com , wordpress.com dan lainnya. Silahkan baca cara membuat blog pribadi gratis.

Senin, 18 Maret 2013

Benarkah Keyword Density Tepat untuk SEO ?

Kebanyakan orang kurang teliti dalam memilih dan menggunakan keyword.  Kepadatan kata kunci dalam setiap konten merupakan hal yang penting. Sebuah kata yang anda putuskan untuk dijadikan target harus menjadi sebuah titik simbol yang dapat meringkas konten suatu halaman.

Pertanyaannya adalah benarkah keword density tepat untuk SEO? Bagaimana menentukan besar dari keyword density tersebut?
keyword density
Keyword Density adalah jumlah presentase kata kunci dibandingkan dengan kata keseluruhan dalam satu halaman. Memang tidak ada jawaban yang tepat dalam berapa besar presentasenya, tetapi banyak para ahli yang memperkirakannya saja.
Jika di dalam sebuah halaman terdapat 10 kata yang sama dari 100 kata di satu halaman, maka kerapatan / kepadatan kata topik tersebut adalah 10%. Dalam beberapa observasi yang dilakukan di beberapa search engine. Yahoo merekomendasikan kepadatan kata kunci hanya sekitar 3% sedangkan Google merekomendasikan 1 sampai 2% .

Dapat diambil kesimpulan bahwa tidak ada nilai rasio density yang tepat, namun banyak ahli berpendapat dalam sebuah halaman kata kunci yang kompetitif dan link yang masuk merupakan bagaimana cara mereka menemukan situs anda.

Oleh karena itu, cara tepat untuk menentukan sebuah keyword di dalam artikel adalah

  • Lebih mengutamakan keyword organik dibandingkan keyword density.
  • Tidak terlalu banyak menekan kepadatan kata kunci.
  • Batas presentase keyword adalah 3,5% ( menurut saya )
  • Carilah sinonim atau persamaan sebuah kata yang dijadikan target agar menggunakan kata yang berbeda tetapi memiliki arti / makna yang sama.
  • Kata Kunci hanya berisi 1-2 Kata.
  • Ketahuilah tingkat kompetitif sebuah keyword.
  • Sesuaikan dengan kategori yang ada pada isi blog / website anda.
Optimasi tersebut merupakan sebuah langkah untuk mencegah blog kita masuk dan dianggap sebagai spamming keyword. Karena search engine memiliki algoritma tersendiri untuk mengetahui kapan sebuah halaman web dianggap sebagai spam dan kapan dianggap normal. Karena itu jika tidak penting, jangan selalu mengulang kata atau frase tertentu.

Secara temporer memang kepadatan keyword dapat meningkatkan performa website anda, namun efek jangka panjangnya adalah search engine akan menjauhkan web yang menggunakan pola spamming tertentu untuk tidak ditampilkan di hasil pencarian.
Dengan hanya menggunakan keyword organik, anda dapat meningkatkan rangking situs anda melalui Bounce Site, Inbound Link, Rate Pages.

Jumat, 15 Maret 2013

Cara Membuat Efek Zoom pada Gambar

zoom efek
Seperti yang kita ketahui, Photoshop adalah software untuk mengolah, mengedit, dan desain gambar. Berbagai macam efek seperti Brush, Clone Stamp, Magic Blur, Krop, dan sebagainya, tetapi tidak dengan efek zoom di Blogger. Karena efek zoom lebih kepada gambar yang ditampilkan lalu apabila dilihat akan membesar secara otomatis pada blog.

Zoom berfungsi untuk memperbesar atau memperkecil penglihatan sebuah gambar. Dengan memberi efek zoom di gambar artikel kita, maka akan membuat blog kita lebih terlihat menarik dan juga mengurangi berat loading blog apabila menggunakan gambar yang besar.

Cara pembuatannya cukup mudah dan simple, langsung ke tips cara membuatnya. Artikel Cara Merubah Background Blog dengan Gambar dapat anda baca juga.

Cara Membuat Efek Zoom pada Gambar :

1. Login ke akun blogger.com
2. Template >> Edit Html >> Lanjutkan >> Beri centang "Expand Template Widget".
3. Letakkan kode berikut ini tepat diatas kode ]]></b:skin> untuk caranya dengan menekan ctrl+F

    .post img:hover {
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -webkit-transform: scale(1.3); }

4. Klik "Simpan Template" dan lihat salah satu postingan blog anda.

Begitulah cara sederhana untuk menampilkan gambar posting membesar apabila tersentuh mouse di blog. Semoga panduan dan tutorial cara membuat efek zoom pada gambar tersebut dapat bermanfaat.

Rabu, 13 Maret 2013

Panduan Memperbaiki dan Meningkatkan Kualitas Website

web design
Sedikit lebih menarik artikel saya yang berjudul Panduan Memperbaiki dan Meningkatkan Kualitas Website ini. Beberapa pertimbangan yang menjadi dasar untuk situs yang akan ditampilkan di halaman pertama google salah satunya adalah Pagerank.

Setelah meneliti dan dikirim email oleh Pihak Webmaster Google saya baru mendapatkan informasi baru yang tentunya akan sangat baik dalam mengembangkan web/blog kita. Ada beberapa hal pokok yang menarik buat saya khususnya mengenai sisi lain dari Pagerank sebagai 'metrik' atau lebih kepada ukuran nilai suatu website.

Beyond PageRank: Graduating to actionable metrics begitulah judul yang diberikan.
Banyak berbagai macam situs yang mengharapkan mendapatkan pagerank tinggi. Tetapi yang perlu anda ketahui adalah Pagerank Bukan Segalanya. Memang sedikit mengharukan karena blog saya ini baru berdiri sebulan dan telah mendapatkan pagerank 1 namun perhitungan google di tahun 2013 sedikit berubah.

Jika kita memperhatikan Google Technology Overview, kita akan mengetahui bahwa top ingredients yang memicu baiknya SERP (Search Engine Result Page) sebuah website adalah faktor relevansi dan signifikansinya dengan data yang dicari user. Dengan ini jelas bahwa nilai hakiki sebuah website/blog adalah nilai relevansi. Seberapa besar artikel yang dicari oleh pengguna search engine cocok dengan konten yang kita buat. Oleh karenanya artikel yang baik dan berkualitas saja yang akan tampil di hasil utama mesin pencari.

Sedangkan Jumlah Links In Backlink dan Rangking Blog hanya menempati sekitar 18% faktor di hasil pencarian tersebut. Tips SEO untuk Desain Website anda dapat menjadi relevansi dalam membangun sebuah situs yang baik.

Indikator untuk Meningkatkan Kualitas Website / Blog :
1. Conversation Rate
Conversion rate adalah persentase seberapa besar visitor melakukan interaksi (melakukan konversi) dibandingkan dengan yang hanya melihat design website kita. Conversion Rate bisa dalam bentuk membeli produk (ecommerce), signing up pada mailing list, mengklik iklan, memberikan donasi, mendownload file, atau bahkan hanya memberi komentar.

Adapun implementasi untuk memperbaikinya dapat dilakukan dengan memperbaiki deskripsi suatu produk (ecommerce), meningkatkan kepercayaan publik, design website yang mudah / menarik, mengangkat suatu topik artikel yang unik dan benar-benar baru dan lain-lain.

2. Bounce Rate
Bounce Rate merupakan presentasi seberapa besar pengunjung meninggalkan halaman blog anda berdasarkan waktu kunjungan. Bounce ini terjadi ketika seorang visitor mengunjungi halaman blog kita lalu tidak tertarik kepada artikel yang kita buat sehingga membuat halaman yang dibuka oleh pengunjung akan segera ditutup.

Cara memperbaiki dan meningkatkan jumlah bounce rate ini dapat dilakukan dengan memberi deskripsi konten yang sesuai dan konsisten sehingga tema suatu konten tidak jauh berbeda dari tema sesungguhnya. Selain itu anda juga bisa menawarkan konten yang saling berkaitan atau memakai plugin featured post yaitu post pilihan yang menjadi andalan di situs kamu. Bisa juga dengan menambahkan Related Post / Artikel yang berkaitan berdasarkan kategori konten anda.

3. Clickthrough Rate (CTR)
Dalam konteks organic search results, Clickthrough rate adalah berapa sering user mengklik website/ blogmu sebanyak jumlah websitemu itu ditampilkan dalam search result. CTR yang rendah dapat mengindikasikan bahwa user mengira website/ blogmu tidak relevan dengan data yang dicarinya, atau mungkin user menemukan web lain yang lebih baik.

Dan cara untuk meningkatkan clickthrough rate ini adalah dengan memperhatikan dan memperbaiki title dan deskripsi website/ blogmu. Apakah deskripsinya sudah menarik, sudah konsistenkah dengan tema tulisan dan memberikan informasi bukan hanya sebatas posting? Atau adakah alasan unik yang dapat ditawarkan kepada user untuk mengklik link ke website/ blogmu?
Disamping 3 hal di atas, masih ada beberapa faktor lain yang dapat dijadikan ukuran baiknya website/ blog kita seperti faktor traffic, daily reach, jumlah pageview dan time on site.
Faktor-faktor lain tersebut bisa juga dilakukan dengan meningkatkan rangking alexa dengan cepat dan signifikan. Untuk membuat artikel kita lebih baik bagi pengunjung sekaligus di mata search engine, silahkan anda baca juga mengenai Cara Menulis Artikel Berkualitas SEO Friendly. Demikianlah tulisan artikel yang singkat dan sederhana ini, semoga dapat bermanfaat sebagai pengetahuan anda.

Senin, 11 Maret 2013

SEO Tips : 20 Tips SEO 2013

Membahas mengenai SEO memang banyak faktor yang harus dipertimbangkan. Mulai dari Blogger, Website, Wordpress, Joomla, Nginx dan sebagainya memiliki pengoptimalan SEO yang berbeda. Beberapa tips tutorial dasar agar dapat meningkatkan halaman yang baik di search engine dimulai dari :

  1. Menulis Konten yang Unik, Berkualitas, dan Informatif.
  2. Tambahkan konten baru setiap hari.
  3. Buat Frase kata kunci yang besar dan berkembang.
  4. Optimasi HTML5 di template anda agar lebih mudah diindex.
  5. Pilih keyword yang populer dengan tingkat kepadatan yang rendah.
  6. Penggunaan Meta Tag yang Baik.
  7. Gunakan Kata Kunci pada Tag Judul Anda.
  8. Dapatkan nama domain dengan frase kata kunci anda.
  9. Berikan URL yang baik terhadap artikel.
  10. Manfaatkan Bookmarking, Social Network, Directory, Social Media and more.
Tips diatas adalah prioritas tinggi yang akan membuat halaman anda lebih Search Engine Friendly.

20+ SEO Tips On 2013 :
Function of SEO ( Search Engine Optimization )

Panduan diatas akan membuat situs anda mendapatkan pengunjung yang banyak dan traffik yang pesat. Search Engine sangat menyukai situs yang memiliki struktur HTML 5 yang baik, cepat, dan ringan. Optimisasi template anda agar tidak menghilangkan nilai SEO On Page yang sangat dibutuhkan. Semoga artikel yang singkat mengenai SEO Tips : 20 Tips SEO ini dapat bermanfaat dan berguna.

Sabtu, 09 Maret 2013

Cara Membuat Efek Salju, Daun, Bintang Berjatuhan

efek salju bertaburan
Berbagai macam widget dan gadget banyak digunakan untuk menghiasi dinding halaman blog. Efek Salju, Dau, dan Bintang bertaburan lalu berjatuhan adalah yang sering digunakan. Layaknya seperti di musim semi daun berjatuhan dengan indahnya.

Cara Membuat Efek Salju, Daun, dan Bintang berjatuhan sebenarnya mudah. Widget bertebaran ini akan membuat pengunjung menjadi tidak bosan mengunjungi halaman kita. Cara Pembuatan dan cara memasangnya adalah sebagai berikut :
Memasang Efek Salju Bertaburan / Berjatuhan :
1. Login ke Blogger.com
2. Klik Nama Blog Anda.
3. Kemudian pilih Template.
4. Lalu Edit HTML dan Centang Expand Widget Template
5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>
6. Simpan Template.

Membuat Efek Daun Berjatuhan di Blog :
Caranya sama seperti langkah 1 sampai 4 diatas.
Lalu copy kode ini diatas </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Cara Memasang Efek Bintang berjatuhan di Blog :
Copy kode berikut dan letakkan diatas kode </head>
1. <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>

Anda dapat menggunakan kode pertama atau kedua sesuai keinginan Anda. Untuk mengganti warna lainnya anda dapat mengunjungi halaman Kumpulan Efek Melayang di Blog.
Tunggu 5 detik dan klik skip add di pojok kanan atas untuk melihatnya.

Cara Membuat Tombol Like Facebook, Twitter, Google+ Blogspot
Source : softwaremaniapc

Jumat, 08 Maret 2013

Cara Membuat Like Facebook dan Follow Twitter Melayang

twitter and facebook
Cara Membuat Tweet Box Melayang di sebelah kanan Blog merupakan widget yang banyak dipasang. Media Blogger juga akan memberikan informasi mengenai Cara Membuat Tombol Like Facebook dan Follow Twitter di blogspot.

Social networking memang merupakan kegiatan banyak orang di era teknologi saat ini. Bagaimana tidak? Kecanggihan transaksi secara online, menghubungi kerabat dan saudara, mendapatkan penghasilan di internet dapat dilakukan dengan media social.

Untuk itu apabila anda ingin lebih memajukan blog anda dan agar lebih dikenal, bisa juga dengan menambahkan sebuah kotak yang dapat menghubungkan mereka dengan anda. Bagaimana cara memasang widget tersebut, langsung saja ikuti tips dan tutorialnya.

Cara Membuat Twitter Box Melayang di Blog :
1. Silahkan buat terlebih dahulu tampilan widget tersebut di http://twittercounter.com/
2. Login dengan menggunakan akun Twitter anda.
3. Jika sudah Lalu klik My Widget, Lalu Klik Widget Setting and Code, sesuaikan dengan selera dan tampilan blog kita, jika sudah cocok lalu copy kode script widget yang telah disediakan.
4. Masuk ke Blogger.
5. Pilih Dashboard, lalu klik Layout / Tata Letak.
6. Tambahkan Gadget Baru dengan klik Add a Widget / Add a Gadget.
Sesuaikan dengan posisi letak yang ingin anda pasang.
7. Pilih HTML/Javascript.
8. Ganti kode warna merah pada script berikut ini dengan kode yang tadi diperoleh dari twittercounter.com
<style type="text/css">
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw4klZoqVhBXi6EPV3dlJbVPuyENodOYART58a2w_47U3iEEs65y5qMtL_8oiKvPpK2zryKzdE9EAZmvDJfUeEeciqEX1LIE4Xu2Ov6IfD_xfqYoRkPUbE1_MrvPt8mRVcGtIWEItJZG4l/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFz05pTZRcKWlI9KyaDAQX7dcRMT_K_CP5vvRUzMwhUwJbUCg846HDpbJRKwCARonF9ZrRV4INWNV9TCQ5Kk59ODbp4b4c-I8zFBgHT7jIgIk_M2aT7fKCyy4ImiG6duH_QQpZj7MVN8zq/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
</style>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
PASTEKAN KODE SRIPT TwitterCounter
</div>
</div>

9. Setelah anda ganti, copy semua kode yang telah digabungkan dengan twittercounter diatas.
10. Masukkan ke dalam kotak HTML/Javascript di Blogger tadi.
11. Save Widget.

Maka pada halaman anda, telah terpasang box twitter melayang di blog.
Source : abufarhan

Cara Memasang Tombol Like Facebook dengan Follow Twitter Simple :
1. Masuk ke Blogger.com
2. Pilih Blog Anda, lalu ke Layout / Tata Letak
3. Tambah Widget anda.
4. Pilih HTML/Javascript
5. Copy kode CSS dan HTML berikut :
<style type="text/css">
#AGCnavbar3{border:4px solid #000;border-radius:5px; width:155px; height:57px; margin-bottom:460px; margin-left:10px; font-family:Comic Sans Ms; color:white;text-align:left; background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTvhnb9Q9LGRZ8VwFfIw_o27dmFiHzcE7_TH3J5oRoV9Cd2KKEkfYXbN96-R0hHOR-zcWz5yLErnjFbitnpkE-o5YQpzF5mCol-B_3fDA375nxl_u5Ivpw14W5qKZfkJB7iVALjOXcbM/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTvhnb9Q9LGRZ8VwFfIw_o27dmFiHzcE7_TH3J5oRoV9Cd2KKEkfYXbN96-R0hHOR-zcWz5yLErnjFbitnpkE-o5YQpzF5mCol-B_3fDA375nxl_u5Ivpw14W5qKZfkJB7iVALjOXcbM/s1600/grid.png"); background:#222222url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdTvhnb9Q9LGRZ8VwFfIw_o27dmFiHzcE7_TH3J5oRoV9Cd2KKEkfYXbN96-R0hHOR-zcWz5yLErnjFbitnpkE-o5YQpzF5mCol-B_3fDA375nxl_u5Ivpw14W5qKZfkJB7iVALjOXcbM/s1600/grid.png"); padding:2px; z-index:999; bottom:1px; left:1px; right:1px; position:fixed;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}
#AGCnavbar3 .left{float:left; text-align:left; font-family:Supermercado; font-size:10px; font-style:normal; font-weight:normal; color:White; padding:2px 10px}
#AGCnavbar3:hover{box-shadow:1px 1px 5px black;font-size:20px; font-style:bold; width:155px; height:57px; margin-bottom:460px; margin-left:10px; margin-right:120px;-webkit-transition: all 0.9s ease-out;-moz-transition: all 0.9s ease-out;-ms-transition: all 0.9s ease-out;-o-transition: all 0.9s ease-out;transition: all 0.9s ease-out;}
</style>
<div id='AGCnavbar3' style='position:fixed;'>
<span class='left'><img src='' title=''/>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https://www.facebook.com/http://impoint.blogspot.com&amp;send=false&amp;layout=button_count&amp;width=85&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21' style='border:none; overflow:hidden; width:85px; height:21px;'/>
<div style='margin-right:3px;margin-left:2px;'>
<a class='twitter-follow-button' data-lang='id' data-show-count='false' href='https://twitter.com/ravdania'>Ikuti @Media Blogger</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></div>
</span></div>

Keterangan :
  • Ganti kode berwarna hijau dengan ID Facebook Anda / URL Fans Page FB kalian.
  • Ganti kode berwarna orange dengan kode tombol twitter anda.
Anda dapat mengganti nama twitter di widget tersebut dengan nama twitter anda (di dalam kode warna orange).
Itulah tadi berbagai macam jenis widget tambahan yang dapat anda gunakan agar memudahkan pengunjung mencari atau melakukan contact dengan anda. Semoga Cara Membuat Tombol Like Facebook dan Twitter Box ini dapat bermanfaat.

Kamis, 07 Maret 2013

Menghasilkan Uang di Internet dengan Blog

menulis artikel blog
Bagi seseorang yang suka menulis, mendapatkan penghasilan tambahan melalui Internet dapat dilakukan dengan mudah. Banyak yang mendapatkan uang dari hasil karya tulisnya dengan menggunakan sebuah situs. Bisa dengan membuat blog gratis, berbayar, website, atau toko online pribadi.

Dengan memanfaatkan berbagai media yang ada di Internet, kita dapat membangun usaha yang akan menghasilkan pekerjaan tambahan yang hanya dilakukan di rumah. Disini saya akan mencontohkan bagaimana cara menghasilkan uang melalui blog. Tutorialnya dapat anda baca di artikel Cara Membuat Blog Pribadi Gratis di Blogger.

Sebagai langkah awal yang tepat dalam memulai usaha, berikut tips-tipsnya :
  1. Luangkan waktu untuk mencari informasi usaha online melalui buku, majalah, atau koran untuk anda jadikan bahan motivasi langkah usaha anda kedepannya dan sebagai pedoman.
  2. Tentukan tujuan, bakat, dan kemampuan yang anda miliki.
  3. Pikirkan semua aspek yang dibutuhkan untuk menunjang usaha anda. Contoh : Modal, Anggaran, Pekerja, Product, Riset Pasar, Keuntungan dan lain sebagainya.
  4. Ruang Usaha. Buat Sebuah tempat khusus dimana anda akan memulai bisnis online anda tersebut. Apabila di rumah dan anda melakukan bisnis berjualan kue maka anda harus memiliki Dapur yang besar.
  5. Pastikan kepatuhan terhadap hukum yang berlaku dan harus memiliki izin.
  6. Buat Anggota keluarga terlibat dalam bisnis anda.
  7. Product yang anda jual harus aman, tanpa bahan kimia, bahan peledak, dan sebagainya.
  8. Bangun Kepercayaan kepada pembeli.
Dengan mempersiapkan langkah-langkah diatas, kita dapat membuat bisnis online di rumah dengan mudah. Tentu saja kita juga harus memliki kesabaran dan teliti dalam mendatangkan banyak pengunjung / pembeli.

Setelah mengetahui beberapa langkah untuk memulai usaha bisnis anda, sekarang saya akan membahas untuk semua orang yang ingin menghasilkan uang melalui blog.

Kriteria blog yang dapat menghasilkan uang adalah blog yang memiliki pengunjung banyak, pagerank tinggi, dan memiliki reputasi yang baik. Untuk mendapatkan itu semua, anda harus bekerja keras, ulet, rajin, fokus, serta konsisten terhadap blog tersebut. Dalam kurun waktu 3 bulan, barulah anda dapat mendaftarkan ke berbagai perusahaan iklan di Internet.

Dalam jangka waktu 3 bulan tersebut anda harus membuat artikel yang berkualitas setiap harinya, melakukan submit ke search engine, directory,atau bookmark, dan mempromosikan blog anda ke social networking.

Berikut ini beberapa cara menghasilkan uang melalui blog di internet :

1. Paid to Write
Ini merupakan salah satu model moneytize blog melalui program pay per post ( dibayar per-posting artikel ). Anda diminta untuk membuat artikel dengan menggunakan bahasa inggris tentunya mengenai produk dan layanan yang telah ditentukan. Dalam beberapa program, anda dapat mengatur sendiri berapa besar pembayaran untuk setial artikelnya.

Contoh dari program ini antara lain :
Payperpost http://payperpost.com
Smorty http://smorty.com
Blogvertise http://blogvertise.com
SponsoredReviews http://sponsoredreviews.com
Blogging Ads http://bloggingads.com
Blogitive http://my.blogitive.com/pages/howto

dan ada juga yang menggunakan bahasa Indonesia karena merupakan program lokal.

Biasanya untuk diterima dalam program tersebut, nilai pagerank google anda minimal 1 dan memiliki rangking alexa di bawah 500.000. Untuk itu, anda harus bekerja keras agar blog anda memiliki konten yang unik dan berkualitas sehingga memiliki pagerank dan peringkat tinggi.

2. Paid To Click
PTC adalah sebuah program pemasangan iklan di bagian halaman blog yang apabila di klik oleh pengunjung maka kita akan meraih penghasilan. Beberapa PTC terkenal juga menghitung pendapatan melalui pageviews dan hasil pencarian mereka. Untuk itu, semakin blog anda banyak pengunjung maka semakin besar pula penghasilan anda.

Beberapa PTC Terkenal dengan bayaran tertinggi adalah sebagai berikut :
Sedangkan untuk di PTC lokal Indonesia adalah Idblognetwork , Sitti Ads, Adsensecamp, Kumpulblogger dan lainnya.
Apply to be a Chitika Publisher!

$20 in FREE Clicks for everyone from BidVertiser - Click Here!

Untuk mengikuti PPC tersebut, masing-masing memiliki persyaratan yang berlaku. Salah satu syarat utamanya adalah anda tidak boleh copy paste artikel dari orang lain dan tidak membuat artikel yang mengandung hak cipta, merk dagang, SARA, dan lain sebagainya.

3. Menjadi Freelance
Banyak perusahaan nirlaba yang memiliki website / blog tetapi kurang memiliki SDM (Sumber Daya Manusia). Anda dapat menjadi tenaga kerja freelance untuk menjadi penulis konten, merawat blog, mempromosikan product mereka atau lainnya.

Anda harus memiliki gaya menulis yang kreatif dan inovatif dengan kemampuan grammar yang baik. Selain itu, bukan hanya menulis artikel anda juga bisa menjadi Programming, Developers Game,Publisher dan sebagainya.

Sebagai contoh anda dapat berkunjung ke elance.com untuk mendapatkan jobs.
Dalam menghasilkan penghasilan di media Internet dibutuhkan kerja keras, konsistensi, produktifitas, dan kreatifitas. Memulai memang sangat berat, tetapi pada nantinya anda akan mendapatkan hasil yang begitu besar. Bukankah menghasilkan uang di internet itu mudah ?
Semoga artikel Menghasilkan uang dengan blog ini dapat berguna.

Rabu, 06 Maret 2013

Merubah Warna Judul Posting Berwarna warni

warna judul blog
Cara Membuat Judul Berwarna-Warni di Blog - Judul adalah sebuah inti mengenai isi dari berbagai gagasan utama di suatu halaman. Dalam pembuatan artikel di blogspot, Judul merupakan hal yang sangat penting. Judul yang menarik, maka akan banyak dibaca oleh pengunjung.

Untuk membuat judul yang menarik caranya adalah sebagai berikut :
      1. Membuat Judul dengan Kontroversi
      2. Mengubah Warna, Link, atau tampilannya menarik.
      3. Buat Judul yang sedang menjadi topik utama.
      4. Judul harus memiliki sifat mengajak, bertanya, analisa, memberikan informasi dan sebagainya yang berfungsi untuk menarik pembaca.
Namun, pada kesempatan hari ini saya akan membahas Cara Merubah Warna Judul Posting di Blog menjadi Pelangi ( Warna-Warni ).

1. Login ke Blogger

   2. Masuk ke Rancangan → Edit HTML
       3. Cari Kode </head>
   4. Kalau sudah anda temukan, copy script ini dan letakkan (paste) di bawah kode </head>
<script src='http://sites.google.com/site/muzzymusthofa/javascript/rainbow.js'/>

5. Save Template

Dengan menggunakan javascript diatas, maka secara otomatis warna judul blog anda akan berubah. Javascript tersebut sebenarnya berisi CSS dan HTML biasa, namun untuk memudahkan anda jadi di ringkas dan di simpan melalui Javascript di media Dokumen Google. Semoga Dapat bermanfaat :).

Selasa, 05 Maret 2013

Membuat Widget Google Plus Cantik

widget google plus
Google Plus adalah salah satu social media yang hampir sama seperti Facebook,Twitter,Skype dan lainnya. Tetapi, Google+ memiliki kelebihan lain yang berbeda dengan jejaring sosial lainnya yaitu product dari search engine.

Google adalah search engine nomor 1 di dunia sekaligus menempati peringkat 1 di alexa rank. Product Google ini sangat banyak, mulai dari Google Adsense, Google Search, Google Adwords, Google Plus, Gmail, Google Analytics, Webmaster Google dan sebagainya. Dengan memasang widget button Google Plus di website / blog yang kita buat, maka akan memberikan dampak yang positif agar mendapat nilai lebih terhadap hasil pencarian.

Cara Membuat Widget Google Plus Cantik sebenarnya sangat mudah dan hanya mengikuti tools yang disediakan oleh google+.  Salah satu hal penting dalam SEO khususnya Blogger adalah faktor Social Signals.
Social Signals merupakan sebuah lalu lintas pengiriman sinyal ke jejaring social meliputi retweet, like, status, mentions, shares, dan sebagainya yang dihubungkan ke blogger.

Keuntungan dari pemasangan Add Google+ Button ini adalah
  • Membuat artikel lebih terindex mesin pencari Google.
  • Dapat melakukan share ke banyak orang.
  • Memunculkan profile gambar pada hasil pencarian jika aktif dalam menggunakan products Google tersebut.
  • Memudahkan dalam meningkatkan prioritas sebuah konten yang unik.
  • Orang lain dapat menemukan dan terhubung dengan lingkaran anda melalui Blogger.
google plus widget

Cara Membuat Widget Google Plus Button :
1. Registrasi untuk membuat akun Google+
2. Login ke akun anda.
3. Buat sebuah halaman Google Plus, biasanya untuk pertama kali pendaftaran akan diarahkan untuk membuat halaman tersebut.
4. Buka Blog Anda di Browser dengan Tab baru.
5. Masuk ke Layout / Tata Letak / rancangan
6. Klik Tambah Gadget atau Widget dan sesuaikan posisi penempatannya.
7. Pilih HTML / Javascript.
8. Masukkan kode berikut ini :

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plus href="https://plus.google.com/114260774078734881680"></g:plus>

9. Ganti kode ID Google Plus dengan ID yang anda miliki.
10. Simpan widget yang anda buat.


Untuk mengetahui ID Google Plus Anda, Silahkan masuk ke Google Plus.
Klik Profile. Lihat di Address Bar bagian paling atas browser anda. Disana terlihat ID seperti script diatas.

Dengan membuat widget google plus, traffik akan segera meningkat dengan baik. Traffik tergantung seberapa besar aktivitas anda di social media tersebut. Semoga Cara Memasang Widget Google Plus Cantik ini dapat bermanfaat.

Senin, 04 Maret 2013

Cara Membuat Efek Gelap Terang Gambar dengan CSS

css efek
Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalah CSS3. Dalam membuat efek pada gambar, gadget, box, area, menu dropdown, dan sebagainya merupakan contoh hasil penggunaan CSS.

Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.

Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.
<style>
 img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
 }
 img:hover {
 filter:alpha(opacity=100);
 -moz-opacity:.0;
opacity:1.0;
}
 </style>

5. Simpan Widget Anda.

Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :
<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
 filter:alpha(opacity=70);
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :

.mybox{
        position:relative;
        display:block;
        width:200px;
        max-height:400px;
        background:#fff;
        color:#000;
        overflow:auto;
        padding:20px 15px;
        margin:20px 5px;
        border:2px solid #777;
        border-radius:6px;
        opacity:0.2;
        filter:alpha(opacity=20);
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}

Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.

xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>

xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>

Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :
<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7wKwemSN-baxVqeDa7dfm-3bSjxa3VizmZ0nQ3Nbde4T_mjt45l2yqMftkQj8kEDrXhyznbKJwOWLvrcq9v-OiDhu8yZCpzHTeGtFrpf5358a-fiI_6ctr6Tx4GTms4q0YiFzG95ApUI/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>

Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image. Semoga cara membuat dan memasang efek gelap terang tersebut dapat dilakukan dengan mudah.

Minggu, 03 Maret 2013

Cara Membuat Buku Tamu Tersembunyi

guestbook
Guest Book atau yang lebih dikenal adalah Buku Tamu Chat Box adalah tempat untuk pengunjung yang sedang online memberikan daftar hadir di sebuah situs / blog. Komponen dari buku tamu adalah dengan memasukkan nama, email, dan message (pesan) kepada pemilik blog.

Buku Tamu ini sering dimanfaatkan untuk meletakkan url link menuju halaman website kita. Beragam Gadget dan Widget Guest Book tersedia di beberapa website yang menyediakan chat box menu secara gratis. Apabila anda belum memiliki guest book silahkan daftar terlebih dahulu di Shoutmix atau Cbox.

Disana anda hanya perlu melakukan pendaftaran dan melakukan optimisasi warna bukutamu, warna text, background dan sebagainya. Setelah anda melakukan personalisasi, copy kode HTML / Javascript yang diberikan.

Untuk menghemat ruang, guest book ini dapat disembunyikan di bagian scroll kiri kita. Jadi Buku Tamu tersebut tidak melayang di blog, tetapi akan dibuat auto hide dengan tombol click pada mouse. Berikut panduan pembuatan widget buku tamu tersebut.

Cara Membuat Buku Tamu Tersembunyi :
1. Masuk ke Blogger.com
2. Pilih Layout > Tambah Gadget / Widget
3. Klik HTML/Javascript
4. Masukkan kode di bawah ini ke dalam kotak box tersebut.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6FbX-fIL4qDkMaWL48z_Ny6rg1viMaAa8kVpVe9PifVgHgS0GQ97f2130st7eExVenbvVu-IzA7R0SxsCd-U4BfTbW_aqIMrSzRHCHSJnvsFNPq3gt9BFEuGRCm_i30__iueVNWiTsKnJ/s1600/impoint.blogspot.com+bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<Letakkan disini kode Buku Tamu Anda>

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://sazuke-4rt.blogspot.com/2013/01/buku-tamu.html" target="_blank">Sasuke Blog</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

5. Ganti tulisan <Letakkan disini kode buku tamu anda> (berwarna merah) dengan kode Guestbook yang anda buat di Shoutmix atau Cbox.ws tadi.
6. Simpan Template.

Buku tamu tersebut sudah terpasang rapih dan lebih optimal di blog anda. Semoga dapat bermanfaat. Jika ada yang masih belum paham silahkan berkomentar. Anda juga dapat mengganti background gambar buku tamu tersebut pada kode berwarna biru diatas. Demikian artikel mengenai Cara Membuat Buku Tamu Tersembunyi.