Cara Membuat Tombol Share di Bawah Posting

Cara Membuat Tombol Share di Bawah Posting - Pasti anda sudah sering melihat tombol share atau like yang ada di bawah posting blog, tombol share atau like ini berfungsi agar visitor atau pengunjung blog kita dapat dengan mudah membagikan artikel yang sudah kita posting ke beberapa media sosial seperti facebook, twitter, google+, dll.

Untuk memasang tombol share di bawah posting ini cukup mudah, kita hanya menambahkan sedikit kode di template blog.

Berikut langkah-langkah pemasanganya di blog :

1. Masuk ke akun blogger

2. Pilih tab Template lalu klik Edit HTML

3. Cari kode ]]></b:skin>

4. Copy kode dibawah ini diatas kode ]]></b:skin>

.widgetshare {font:bold 12px/20px Tahoma !important; background: #333;border: 1px solid #444; padding: 5px 4px; color: #fff !important; margin-top: 10px;}.widgetshare a{font:bold 12px/20px Tahoma !important; text-decoration: none !important; padding: 5px 4px; color: #fff !important; border: 1px solid #222; transition: all 1s ease;}.widgetshare a:hover {box-shadow: 0 0 5px #00ff00; border: 1px solid #e9fbe9;}.fcbok { background: #3B5999; }.twitt { background: #01BBF6; }.gplus { background: #D54135; }.digg { background: #5b88af; }.lkdin { background: #005a87; }.ltsme { background: #fb8938;
}

5. Selanjutnya copy kode berikut, dan taruh di bawah kode <div class='post-footer'> atau bisa juga di bawah kode <data:post.body/>.

Note : Perlu diperhatikan biasanya di dalam template blog terdapat lebih dari satu kode <div class='post-footer'> dan <data:post.body/> maka dari itu untuk pemasangannya tombol share ini silahkan sesuaikan dengan template yang anda gunakan.

<div class='widgetshare'>Share artikel ke: <a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> <a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> <a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a><a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a><script>//<![CDATA[var uri = window.location.href;var ttle = document.title;document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");//]]></script></div>

5. Pilih media jejaring sosial yang ingin ditampilkan.
Note : Hapus script kode berdasarkan warna apabila ingin menghapus tombol share salah satu media jejaring sosial.
Contohnya anda ingin menghapus tombol facebook maka anda tinggal menghapus kode script berwarna biru  saja.

6. Langkah terakhir simpan template anda lalu lihat hasilnya.

Demikian tutorial kali ini tentang Cara Membuat Tombol Share di Bawah Posting. Semoga artikel ini dapat bermanfaat.

[Continue Reading]

Cara Membuat Tombol Share Melayang di Blog

Untuk meningkatkan traffic blog kita, selain upaya optimasi SEO kita juga perlu membuat tombol share di blog kita yang akan menghubungkan blog dengan media jejaaring sosial seperti facebook, twitter ataupun google+. Tutorial kali ini saya akan membahas cara membuat tombol share melayang di sisi kiri atau kanan blog anda.

Berikut langkah-langkah pemasangannya di blog :

1. Masuk ke akun > Pilih Tata Letak
2. Klik Tambah Gadget di bagian sidebar
3. Pilih HTML/Javascript kemudian copy paste kode di bawah ini

<!--Widget Share like FB tweet google plus digg Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style><div id='pageshare' title="bagikan ke teman anda"><div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div><div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"><a href=" http://inticoretan.blogspot.com/2013/11/cara-membuat-tombol-share-melayang-di-blog.html"  target="blank"><font color="blue">Get Widget Here<font></font></font></a></div></div>

<!--Widget Share like FB tweet google plus digg  Button Melayang End-->

4. Simpan  widget dan lihat blog anda

Note : Tulisan berwarna merah adalah posisi widget, saya memakai widget ini disebelah kiri jadi saya tulis left, kalau anda ingin mengubahnya di sebelah kanan tinggal ganti tulisan berwarna merah dengan right.

Selesai...mudah kan ??
oh iya jika anda sudah memiliki tombol google+ ( G+ ) baik di atas maupun dibawah postin, kemungkinan tombol google+ di widget yang kita buat tadi tidak akan muncul.

Demikianlah tutorial cara menampilkan tombol share melayang di blog. Semoga bermanfaat

[Continue Reading]

Mengenal Domain dan Hosting

Istilah Domain dan Hosting mungkin sudah tak asing lagi bagi anda, namun tak jarang banyak pengguna internet tak mengenal tentang kedua hal tersebut meskipun tanpa mereka sadari mereka sudah menjumpainya dalam bentuk nyata berkali-kali.

Pengertian Domain

Domain adalah sebuah nama unik yang digunakan untuk mempermudah mengakses informasi pada server komputer yang ada di jaringan komputer. Sebelum mengenal istilah domain, untuk mengakses informasi yang ada pada server komputer digunakan alamat IP Address yang berupa angka yang panjang, kan ribet kalo harus mengingat IP Address. Nah, oleh karena itu digunakanlah domain untuk mempermudah penggunaan untuk mengakses informasi pada server komputer dan mempermudah pengguna untuk mengingatnya.

Jenis-jenis domain

1. Top Level Domain (TLD)

Top level domain masih dibagi lagi menjadi 2 yaitu Generik/Global Top Level Domain (gTLD) dan Country Code Top Level Domain (ccTLD).

• Generic/Global Top Level Domain (gTLD) merupakan domain yang digunakan secara global. Contohnya : .com ; .net ; .org dll.
• Country Code Top Level Domain (ccTLD) merupakan domain yang dipakai untuk mengidentifikasikan kode negara. Contohnya : .co.id ( kode domain Negara Indonesia) ; .co.us ( kode domain Negara Amerika Serikat) ; .co.uk (kode domain Negara Inggris.

2. Second Level Domain (SLD)

Second level domain merupakan nama domain yang ada di sebelah kiri TLD. Contohnya pada website facebook.com yang merupakan TLD adalah .com dan facebook merupakan SLD.

3. Lower Level Domain

Lower level domain merupakan nama domain yang ada di sebelah kiri SLD. Lower level domain dapat dibagi menjadi Third level domain, Fourth level domain dan seterusnya. Namun penggunaan lower level domain sangat jarang, kebanyakan nama domain hanya sampai SLD saja. 

Pengertian Hosting

Hosting merupakan sebuah space atau ruang yang digunakan untuk menyimpan file-file yang ada hubungannya dengan website kita, seperti file HTML, file PHP, file musik, file video ataupun gambar. Hosting dapat juga diibaratkan flashdisk atau harddisk, dimana alat tersebut berfungsi sebagai media penyimpan semua file dan data yang ada di komputer kita.

[Continue Reading]

Cara Memasang Fans Page Facebook dan Twitter

Tutorial saya kali ini adalah cara memasang widget Fans Page Facebook dan twitter secara tersembunyi dibagian kanan blog sehingga tidak manggangu space halaman blog anda. Caranya tidaklah susah, anda hanya menambah sedikit script pada template blog anda.

Syarat yang harus anda penuhi :

1. Anda harus memiliki akun facebook
2. Anda harus memiliki halaman facebook ( Fans Page Facebook )
3. Anda harus memiliki akun twitter 
4. Anda harus memiliki blog

Apabila anda belum memiliki syarat-syarat diatas, abaikan dulu tutorial kali ini.

Langkah-langkah memasang widget :

1. Buka akun blog anda.

2. Masuk menu Template, pilih Edit HTML. 

3. Carilah kode </head> lalu copylah kode script di bawah ini tepat persis di atas kode </head> tadi.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

4. Simpan template blog anda.

Note : Apabila template anda sudah menyediakan kode script di atas berarti anda tidak perlu lagi menambahkan kode script tersebut di template blog anda.

5. Masuk ke menu Tata Letak, pilih Tambah Gadget / Add Widget.
6. Pilih HTML/JavaScript.
7. Copylah kode script berikut ke dalam widget/gadget baru anda.

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCXxGGO8fbH0MZGfZWVjvKYStORMrspsfnR1m1aOpFDlS4eKUefwrcTRVPd-bW6UWuqJTVPyXfjndHW92gTXxO26D_DpGw_AUf3TX0oxLrgXwkVGmiLwuanqzxc0MW0BCuh4nkSWoR-4/s1600/fans-page-facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;}
#twitterx {  background: #EEF9FD;  padding: 10px;  text-align:center;  border: 1px solid #C7DBE2;  border-top: 0;  } 
</style><div class="w2bslikebox" style=""><div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/IntiCoretan&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"> </iframe><span><a href="http://inticoretan.blogspot.com/2013/10/cara-memasang-fans-page-facebook-dan-twitter.html">Dapatkan Widget Disini</a><div class="twitter">  <!-- Twitter --> <a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/DJW_official">Ikuti @DJW_official</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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div></span></div></div>

8. Simpan widget/gadget baru yang anda buat
9. Lihat hasilnya ( Contoh lihat di bagian kanan blog ).

Catatan :
1. Hapus tulisan berwarna biru apabila anda tidak ingin memunculkan follow twitter di gadget/widget anda.
2. Gantilah tulisan yang berwarna ungu dengan user name twitter anda.
2. Gantilah tulisan yang berwarna merah  dengan alamat URL halaman facebook dan twiter anda.

Demikianlah tutorial saya kali ini mengenai Cara Memasang Fans Page Facebook dan Twitter di blog.

[Continue Reading]

Mengindex Blog Melalui Google Ping

Salah satu cara agar blog kita dapat ter-index di mesin pencari google adalah melakukan google ping. Google ping berfungsi untuk memanggil robot search engine google untuk menjelajahi halaman situs atau blog yang di ping-kan ke google. Sebenarnya ada cara lain agar blog kita dijelajahi oleh robot search engine yaitu dengan melakukan addurl ke google.

Ada 2 cara melakukan google ping yaitu:

• Ping secara otomatis
• Ping secara manual

Ping secara otomatis

     1. Buka halaman google ping

     2. Isi kolom Blog Details seperti:

           - Blog Name : Nama blog anda

           - Blog Homepage : URL blog anda

           - RSS URL (optional) : URL feed blog anda

           - Email : Email anda

     3. Centang Service to Ping dengan cara klik tulisan Check All

     4. Isi Catcha

     5. Klik Send Ping, ping blog kita akan segera di proses.

Ping secara manual

     1. Buka halaman Google Blog Search Ping Service, maka akan keluar halaman berikut

     2. Masukkan alamat URL yang akan di ping, contohnya http://inticoretan.blogspot.com/

     3. Robot search engine atau Googleboot akan segera berkunjung ke alamat blog anda

Semoga Bermanfaat...:)

[Continue Reading]

Cara Mendaftarkan Blog di Google Addurl

Sebelumnya kita sudah membahas tentang breadcrumb, nah sekarang saya akan membahas cara mendaftarkan blog di google addurl, tujuannya adalah agar blog anda ter-indeks di mesin pencari google dan pengunjung blog kita akan meningkat.

Bagi yang ingin mendaftarkan blog nya di google addurl silahkan ikuti cara-cara di bawah ini:

1. Klik Google addurl

2. Silahkan login terlebih dahulu

3. Silahkan masukkan alamat blog anda, contohnya http://inticoretan.blogspot.com atau http://inticoretan.blogspot.com/2013/05/kode-input-html.html

4. Isi Captcha yang diminta

5. Klik Kirim Permintaan

Selesai deh, blog anda sekarang dalam waiting list untuk di indeks oleh robot pencari google

Semoga bermanfaat...:)

[Continue Reading]

Kode Input HTML

Sebelumnya kita sudah membahas tentang pengertian html dan masukan/input dalam sebuah form, nah sekarang kita akan membahas tentang kode input HTML -nya.

   1. Text

<html>
<head>
<title>TEXT</title>
</head>
<body>
<form>
Nama depan :
    <input type="text" name="firstname"><br>
Nama belakang:
    <input type="text" name="lastname">
</form>
</body>
</html>


   2. Tombol Radio

<html>
<head>
<title>Radio</title>
</head>

<body>

<form>
    <input type="radio" checked name="sex">Laki-laki<br>
    <input type="radio" checked name="sex">Perempuan<br>
</form>
</body>
</html>


   3. Checkbox

<html>
<head>
<title>Checkbox</title>
</head>

<body>

Saya suka buah:

<form>

    <input type="checkbox" name="Tomat">Tomat<br>

    <input type="checkbox" name="Apel">Apel

</form>

</body>

</html>

   4. Dropdown

<html>
<head>
<title>Dropdown</title>
</head>

<body>

Merk mobil yang anda suka:

<form>

    <select name="cars">

    <option value="Volvo">Volvo

    <option value="Audi">Audi

    <option value="Ferarri">Ferarri

    </select>

</form>

</body>

</html>

   5. Image

<html>
<head>
<title>Image</title>
</head>

<body>

<form>
    <input type="image" src="submit.gif" name="image" width="60" heigth="60"<br>
</form>
</body>
</html>


   6. Button
        a. Submit

<html>
<head>
<title>Button</title>
</head>

<body>

<form name="input" action ="html_form_action.asp" method="get">
    <input type="text" name="firstname" value="Enter your name here !"><br>
    <input type="submit" value="submit">
</form>
</body>
</html>


       b. Reset

<html>
<head>
<title>Button</title>
</head>

<body>

<form name="input" action ="html_form_action.asp" method="get">
    <input type="text" name="firstname" value="Enter your name here !"><br>
    <input type="submit" value="submit">
    <input type="reset" value="reset">
</form>
</body>
</html>


   7. Text Area

<html>
<head>
<title>Text Area</title>
</head>

<body>

<form>

    <textarea rows="10" cols="30">Contoh Text Area</textarea>

</form>

</body>

</html>

[Continue Reading]

Jenis-jenis Input HTML Dalam Form

Kali ini saya akan membahas tentang jenis-jenis input dalam form, tapi sebelumnya apasih HTML itu ???
HTML (hypertext markup language) adalah sebuah bahasa pemprograman yang digunakan untuk membuat halaman web atau situs.

Jenis input atau masukan dalam suatu form dapat dibedakan menjadi 7 yaitu :

1. Text
           Digunakan untuk memasukkan suatu nilai untuk dikirimkan ke server. Nilai yang dimasukkan dapat berupa angka ataupun teks.

2. Radio
           Menyediakan beberapa pilihan, tetapi hanya 1 pilihan yang dapat dipilih.

3. Checkbox
            Menyediakan beberapa pelihan, bisa lebih memilih lebih dari 1 pilihan.


4. Dropdown
             Menyediakan pilihan berupa list, pilihan yang dipilih tidak lebih dari 1.

5. Image
             Digunakan sebagai penggati button berupa tombol berbentuk gambar.

6. Button
             Digunakan untuk mendefinisikan tombol untuk melakukan pemrosesan form, Ada 2 jenis button yaitu :
         a. submit : digunakan untuk memanggil URL, setelah input selesai dimasukkan.
         b. Reset : digunakan untuk menginisialisasikan setiap elemen form.

7. Text Area
             Digunakan untuk memasukkan data dalam bentuk teks berupa memo.

Oke sampai disini dulu ya...Artikel berikutnya adalah kode html untuk input form
Semoga bermanfaat...:)

[Continue Reading]

Membuat Breadcrumb Pada Blog

Breadcrumb adalah menu navigasi yang dibuat untuk menunjukkan lokasi dari halaman web yang anda kunjungi sekarang. Breadcrumb biasanya berada di posisi atas halaman web atau blog anda agar lebih SEO friendly.

Contoh breadcrumb pada blog :

Berikut adalah cara membuat breadcrumb pada blogger :

  1. Login pada blogger anda -> template -> edit html
  2. Cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah)
  3. Paste kode berikut di atas kode ]]></b:skin>

.breadcrumbs{

padding-left:10px;font-size:95%;

line-height:1.4em;

border-bottom:4px double #cadaef;

}

  4. Setelah itu cari kode <b:includable id='post' var='post'> dan pastekan kode di bawah ini

 <b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='breadcrumbs'>

<a expr:href='data:blog.homepageUrl'>Home</a> &#187;

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>

</b:loop>

</b:if> &#187; <data:post.title/>

</div>

</b:if>

</b:if>

  5. Simpan template, selesai deh..

Semoga bermanfaat..:)

[Continue Reading]