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 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]

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]