Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Kamis, 10 Mei 2012

Cara Mempublikasikan postingan ke twitter dan Facebook secara Otomatis

Sobat Punya follower dan teman di twitter dan Facebook banyak? Kenapa gak dimanfaatkan saja untuk mempromosikan postingan blog sobat ke situs raksasa tersebut, selain cari visitor, tentunya akan mendapatkan backlink dari link yang kita share disana
Nah buat yang gak mau ribet publikasikan postingannya ke twitter dan facebook secara manual, kali ini Admin akan share Cara Mempublikasikan postingan ke twitter dan Facebook secara Otomatis. Dengan cara ini akan membantu anda dan tentunya sangat simple. Yuk kita langsung praktekkan ;
1. Kunjungi situs Dlvr.it situs pihak ketiga inilah yang akan mempublikasikan postingan blog secara otomatis anda KLIK DISINI2. Silahkan daftar dan konfirmasikan pendaftaran via email dan login ke dashboardnya
3. Silahkan Klik Add New web ( lihat gambar ) :

4. Isikan URL Feed blog anda (lihat gambar ) :

5. Isikan semua data yang diminta, pada tab gambar diatas silahkan anda setting sesuai keinginan
6. Sekarang saatnya koneksikan Postingan ke Facebook dan Twitter, silahkan Add Destination (Lihat gambar)

7. Anda akan diminta untuk izin Akses untuk Login ke akun twitter dan Facebook (lihat gambar) dalam contoh ini saya pakai Twitter

8. Login ke akun twitter anda dan klik Autorize App (lihat gambar) :

9. Close Window, dan anda akan kembali kesitus tersebut dan Setting Publish ke Twitter sudah jadi (lihat gambar ):

10. Untuk Edit atau Delete Silahkan klik Ikon pada gambar diatas
11. Selesai
Note : Untuk settingan Facebook lakukan hal yang sama seperti menambahkan DestinationTwitter.

Jadi dengan kita setting blog kita dengan situs tersebut, maka setiap ada postingan baru blog kita otomatis di forward ke akun twitter dan Facebook kita. Anda pun juga bisa setting Facebook FanPage untuk update artikel terbaru ke seluruh Fans blog Anda.

Widget Melayang Twitter dan Facebook Like Box

Inilah persembahan 2 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik di tahun ini. 2 buah widget melayang yang digabung dalam 1 gadget dimana dalam gadget ini memuat widget update status Twitter dan widget Facebook Like Box sekaligus !! Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget status Twitter dan Facebook Like ini akan kita bedah bersama dalam tutorial kali ini.



Cara Membuat Widget Melayang Twitter dan Facebook Like Box :

1.   Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget(HTML/Javascript).
2.       Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH80chesQgDBIB5Q7rYY-ZT8SmpI7lo2Kvylxdeem4UmROInySKpGMzrBY4d7ThEe9vYB9u30HFRQwKKED1t3YUpt3HC5dly7bvOKfgGCw8i099MsMBF8Bwr16urX8i52gOgy82Y4Q_uHy/');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/AVvXsEg29hzSlKpEB3kIahoUi4hCpr-H4bibV_DPYbImtT1jzDiPQG0aDFfoYhRm13ZlclpfZAr4jfZKx7lw8aJIU5FRBXkfJKQQjEZLjKsGgQJJL0wTTxp7ndJLJUYRBt_IWVxlrLiJFrB10Xum/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFn5hnGjpIxK2VSvd-LIEJsc5fRDnVVAPSxvy0otljz0B3Ub_Okmje_R5l5Xh7BIiihcM7STESip53V5zEo81dBIwQcTzr8hbvslKlxOhZT6_huXS3oZ0twp5R7VMjux3Jtp1X-3C2T9w/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7aLQcOrnTkgbAn9Z8p72xsuqVTp5jMaJwatTabPyusIfMj38XNVWdH__OrApyMDGbyQtOZi5ip0GlcCh7gwnjkHX-kMyekcQjwrBnKjbPRU7QeZ4s6kd-zHwo6pEW0X9whE8zOf5GfR4/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">

CONTENT TWITTER HERE

</div>
</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">

CONTENT FACEBOOK HERE

</div>
</div>

3.       Kustomisasi widget :
  • Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
  • Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.
4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :



<style type="text/css">

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH80chesQgDBIB5Q7rYY-ZT8SmpI7lo2Kvylxdeem4UmROInySKpGMzrBY4d7ThEe9vYB9u30HFRQwKKED1t3YUpt3HC5dly7bvOKfgGCw8i099MsMBF8Bwr16urX8i52gOgy82Y4Q_uHy/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:300px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29hzSlKpEB3kIahoUi4hCpr-H4bibV_DPYbImtT1jzDiPQG0aDFfoYhRm13ZlclpfZAr4jfZKx7lw8aJIU5FRBXkfJKQQjEZLjKsGgQJJL0wTTxp7ndJLJUYRBt_IWVxlrLiJFrB10Xum/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:210px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFn5hnGjpIxK2VSvd-LIEJsc5fRDnVVAPSxvy0otljz0B3Ub_Okmje_R5l5Xh7BIiihcM7STESip53V5zEo81dBIwQcTzr8hbvslKlxOhZT6_huXS3oZ0twp5R7VMjux3Jtp1X-3C2T9w/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:460px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR7aLQcOrnTkgbAn9Z8p72xsuqVTp5jMaJwatTabPyusIfMj38XNVWdH__OrApyMDGbyQtOZi5ip0GlcCh7gwnjkHX-kMyekcQjwrBnKjbPRU7QeZ4s6kd-zHwo6pEW0X9whE8zOf5GfR4/');background-

repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:275px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>




<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">

<div class="barcontetwitter">




<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

  version: 2,

  type: 'profile',

  rpp: 2,

  interval: 30000,

  width: 240,

  height: 250,

  theme: {

    shell: {

      background: '#33ccff',

      color: '#ffffff'

    },

    tweets: {

      background: '#ffffff',

      color: '#333333',

      links: '#33ccff'

    }

  },

  features: {

    scrollbar: false,

    loop: false,

    live: false,

    behavior: 'all'




  }

}).render().setUser('@aji_tanpa_e').start();

</script>




</div>

</div>




<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">




<iframe allowtransparency="true" frameborder="0" scrolling="no"

src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/AjiInfoUs/133890180006831&amp;width=24

0&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320" style="border: none; height: 320px;

overflow: hidden; width: 240px;background: #fff;"></iframe>




</div>

</div>


5.     Kalau mau gampang sobat tinggal mengganti ID akun Twitter dan Facebook Like milik Admin yang sudah Admin tandai dengan tulisan warna merah dengan ID atau kode akun milik sobat.
6.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Untuk pengaturan widget update status Twitter silahkan meluncur ke halamanhttp://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Box dapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php. Mohon maaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya berhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri membuat widget melayang Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyata sobat gagal memasang dan melakukan pengaturan pada widget ini.



Blogger sejati tidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIE FOREVER selamanya. Selamat Mencoba Sobat..!

Widget Berlanggan Artikel yang Keren


Hallo sobat Aji.Info.Us,,
udah lama kaya' ny Admin belum ngasih tutorial lagi ya,, (maklum sibuk buat UAN =D)
Kali ini admin akan posting widget yang rata-rata mesti ada di blog yakni widget berlangganan artikel. Tapi yang admin kasih kali ini tampilannya cukup keren, gak monoton seperti widget berlangganan artikel bawaan blogger. Mau tau seperti apa widgetnya ? Seperti ini nih:



Keren kan ? hehe..

Untuk caranya, silakan disimak cara memasang widget berlanggan artikel keren pada blog:
  • Login ke Blogger
  • Klik Tambahkan Gadget "Add a Gadget/Tambah Gadget"
     
  • Pilih yang HTML/JavaScript
  • Paste kode dibawah ini

<style>    .knetwork-email{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKI0ipasN_9Txy-PxEpvPusKNKIZ0RPrmC3La0gAYoG0HEw7BovaUWJzyNu3lhF-Bo-CwW-gx6FQ2t5cM6Jvomj0kDc-DZlug3nGG6eJluzzWQRiFjqdfIwk2iUVCFCxuJNJrUSCzmsLr/s1600/email.png) no-repeat 0px 12px ;
    width:230px;
    padding:10px 0 0 55px;
    float:left;
    font-size:1.4em;
    font-weight:bold;
    margin:0 0 10px 0;
    color:#686B6C;
    }
    .knetwork-emailsubmit{
    background:#9B9895;
    cursor:pointer;
    color:#fff;
    border:none;
    padding:3px;
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    font:12px sans-serif;
    }
    .knetwork-emailsubmit:hover{
    background:#E98313;
    }
    .textarea{
    padding:2px;
    margin:6px 2px 6px 2px;
    background:#f9f9f9;
    border:1px solid #ccc;
    resize:none;
    box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
    width:130px;
    color:#666;}
    </style>
    <div class="knetwork-email">
    Subscribe via Email
    <form action="http://feedburner.google.com/fb/a/mailverify?uri=Ajiinfous" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ajiinfous', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
    <input type="hidden" value="Ajiinfous" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input class="knetwork-emailsubmit" value="Submit" type="submit" />
    </form>
    </div>
  • Lalu Simpan, dan lihat hasilnya :)

KETERANGAN
  1. Sekarang ganti http://feedburner.google.com/fb/a/mailverify?uri=ajiinfous dengan Feedburner Feed kamu Link Email. kamu bisa mendapatkannya dengan mengunjungi account feedburner kemudian arahkan ke Publikasikan dan kemudian ke Email Subscriptions.
  2. Ganti AjiInfoUs™ dengan judul feed kamu. Ini muncul di akhir link feed kamu. http://feedburner.google.com/fb/a/mailverify?uri=ajiinfous


SEDIKIT MOTIVASI
Kalo Sobat Mau meningkatkan level sobat dalam hal blogging ini harus melakukan "Coba-Coba"  kaya' "Trial & Error" karena itu akan membuat sobat Aji.Info.Us tahu bahasa pemrograman dasar di blog, daripada kita cuma terima asal-asal ntar malah dimanfaatin oleh situs-situs yang "tak bertanggung jawab" (gila bahasanya sobat,, :D)

Selamat mencoba :)

Minggu, 19 Juni 2011

Apa Sich Meta Tag..?

Meta tags merupakan cara menyampaikan infomasi penting ke search engine (Mesin Pencari) mengenai informasi suatu halaman, Ada banyak meta tag sesuai dengan standar HTML 4.0 dari World Wide Web Consortion, tapi sebenarnya yang betul-betul dipakai oleh search engine hanya 3, description, keyword, dan robots.
Meta Tag Description

Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi
kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut :
<meta name="description" content="Promosi-web.com is a search engine tutorial that explain how to get
top rangking in all major search engine and get high traffic for your web site. Available in Bahasa
Indonesia.">
Beberapa search engine seperti Nothern Light dan Google tidak memakai meta tags sebagai deskripsi hasil pencariannya. Yang mereka gunakan adalah kalimat-kalimat awal yang ada pada halaman tersebut.
Itulah sebabnya kenapa saya sarankan agar Anda menggunakan isi dari meta tag description sebagai kalimat pembuka. Dan jika bagian paling awal dari web Anda berupa sebuah menu, maka deskripsi yang
ditampilkan pada hasil pencarian Northern Light adalah seperti ini :
Home | Products and Service | Contact Us | About Us ...welcome to our online store, the best place on the
web to...

Meta Tag Keyword

Meta tag keyword sangat penting keberadaannya, karena menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine. Sintak dasar dari meta tag keyword adalah
sebagai berikut :
<meta name="keywords" content="keyword1 keyword2 keyword3 ...">
atau ada juga yang menulis dengan pemisah tanda koma :
<meta name="keywords" content="keyword1, keyword2, keyword3, ...>
Keduanya berfungsi sama dan tidak ada pengaruhnya pada search engine. Tujuan pemakaian tanda koma agar keyword-keyword tersebut lebih mudah dibaca. Yang perlu diperhatikan disini adalah jangan
mengulang sebuah kata lebih dari 3 kali, karena akan dianggap spamming. Contoh pemakaian meta tag keyword yang salah adalah :

<meta name="keywords" content="bali, bali hotels, travel in bali, bali island, bali weather>
Disini terlihat sekali bahwa kata "bali", diulang lebih dari 3 kali. Contoh berikut ini tidak akan dianggap spamming oleh search engine :
<meta name="keywords" content="bali hotels travel bali island bali weather">
Yang tak kalah pentingnya mengenai keyword adalah jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda. Hal ini juga akan dianggap spamming. Misalkan web Anda
memuat informasi mengenai pariwisata di Bali, jangan sekali-kali menambahkan "MP3" atau "Britney Spears" sebagai keyword hanya karena keyword-keyword ini merupakan keyword favorit di internet dan
banyak dicari orang.

Meta Tag Robots

Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa diindex oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu
website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine. Format dasar dari meta tag robots adalah sebagai berikut :
<meta name="robots" content="index | noindex | follow | nofollow">
Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :
<meta name="robots" content="index follow">
Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).
Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.
<meta name="robots" content="noindex nofollow">

Lalu bagaimana memasang Meta Tags di Blogger :

Untuk memasang Meta tag diBlogger caranya cukup mudah, pertama masuk ke Edit HTML kemudian copy paste  kode dibawah ini, biasanya kode meta tags diletakan dibawah kode <title><data:blog.pageTitle/></title>  dan jangan lupa merubah kode warna merah di bawah sesuai dengan deskripsi blog kamu.

<meta content=' Tulis deskirpsi disini'  name='description'/>
<meta content='
keyword1 keyword2 keyword3 ...' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Selama Mencoba, Happy Blogging :)

Sabtu, 30 April 2011

Buku Tamu Melayang Versi 2

Pada artikel sebelumnya saya telah menjelaskan cara membuat buku tamu pada blog dan cara menyembunyikan buku tamu atau membuat buku tamu melayang. Sekarang saya akan menjelaskan cara membuat buku tamu melayang dengan tambahan Effect.

Apa perbedaan dengan versi sebelumnya...?

Pada buku tamu melayang versi pertama ketika kita klik hanya akan terbuka bergeser secara biasa, Namun pada versi yang kedua ini Ketika kita klik dia akan muncul dengan adanya effect samar (nilai opacity tampilan bekerja). Klik disini untuk melihat DEMO PREVIEWnya.

Menarik bukan...?




Untuk membuat buku tamu melayang versi 2 ini kalian harus login dulu ke blogger kalian. Jika sudah masuk silahkan ikuti tahapnya berikut ini:

1. Pilih Rancangan
2. Pilih ELEMEN halaman
3. Klik Tambah Gadget lalu pilih HTML/Java script
4. Simpan kode berikut didalamnya

<style type="text/css">
.gb_fixed{
position:fixed;
top:0px; right:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #e4b5c5;
-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#FFFFFF;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Close ]</b></a></div>

<SIMPAN CODE BUKU TAMU KALIAN DISINI>

<br />
Mau punya buku tamu seperti ini?<br />
Klik
<a href="http://hansamuaji.blogspot.com/2011/04/buku-tamu-melayang-versi-2.html">
DISINI
</a>

</td></tr></table>
</div>
<script src="http://z33s.googlecode.com/files/Shoutz33sEfect.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ91oSLajisY1yhjCGgMP9D8OK6yGJqqoUo5_9ZZ38ZE0h4RgCgabcEMFA_j4jSpNWoRyGH7LdR_4S5vteHsuDsSZC1LSPBCtrNspY3xlkpOT7EfUnP38eYXzAb5L-9I6llZYWkqji0obG/s1600/2131wkl.png" />

</a>
</div>


Keterangan :
== Ganti kode berwarna merah dengan script buku tamu kalian
== Ganti kode warna biru dengan gambar kalian
== Untuk posisi dan letak penyimpanan silahkan ganti kode berikut :

top:0px; ---> posisi diatas
right:0px; ---> sebelah kanan


== Ganti kata CloSE dengan kata2 kalian seperti TUTUP, kembali dan lain-lain
== Ganti kode warna ungu dengan warna sesuai template kalian, Untuk melihat HTML warna silahkan KLIK DISINI.
== Jika kalian tidak ingin garis pojok melengkung kalian bisa menghilangkan kode:

-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;

5. Jangan lupa di Simpan

Rabu, 20 April 2011

Menambah Tombol Share Facebook dan Twitter di Postingan Blog

Jejaring sosial merupakan media yang paling banyak dikunjungi dan Facebook merupakan jejaring sosial yang menempati peringkat pertama paling banyak dikunjungi di seluruh dunia setelah itu disusul oleh twitter di peringkat ke 2. Banyaknya pengunjung yang menggunakan jejaring sosial merupakan kesempatan baik bagi para blogger untuk membagikan setiap artikelnya kedalam situs jejaring sosial dengan harapan semakin banyak pengunjung yang datang untuk membaca-baca blog kita, tentunya hal ini sangat berpengaruh terhadap posisi blog kita di mata mesin pencari.

Namun jika kita sendiri yang membagikan artikel demi artikel dari blog kita ke situs jejaring sosial, maka para pengunjung yang akan datang ke blog kita hanya sejumlah teman-teman yang ada pada jejaring kita saja. Untuk itu menambahkan tombol atau link yang berfungsi untuk membagikan artikel kita ke situs jejaring sosial sangat bermanfaat bagi kita, agar para pengunjung blog kita dapat membagikan link artikel kita ke jejaring mereka. Nah berangkat dari situ mas aji dengan blog tutorial nya akan mengulas sebuh trik lagi tentang tombol share facebook dan twitter.


TUTORIAL LENGKAP

Langsung aja ke tutorial membuat tombol share facebook dan twitter di blogspot
1. Login ke Blogger  » Rancangan Edit  » Template
2. Ceklis Expend Template
3. Cari kode ini ]]></b:skin>
4. Masukan kode berikut tepat sebelum (diatas) kode ]]></b:skin>

.sharesoc {display:inline-block;float:right;height:125px;margin:5px 0;width:60px;}
5. Cari kode <data:post.body/>
(Tips : tekan F3 untuk mempermudahnya, masukan kode di atas dan tekan enter)
6. Masukan (copy-paste) kode berikut tepat di atas kode <data:post.body>
<span class='sharesoc'> <div style='float: right; margin-right: 0px;'> <a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/> </div> <div style='float: right; margin: 8px 0px 0pt 0pt;'> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> </div>  </span> 
Terakhir simpan template dan lihat hasilnya. Oke semoga bermanfaat. Assalamualaikum :)

Minggu, 10 April 2011

Mempromosikan Blog Dengan Langkah Mudah

Assalamu ‘alaikum para pembaca yang saya hormati, kali ini saya akan menjelaskan cara promosi blog yang praktis dan efesien, yang kebanyakan di Blog-blog lain caranya berbelit-belit, padahal, ada cara lain yang lebih mudah supaya blog kita bisa terdaftar langsung di 40 (empatpuluh) mesin cari / search engine dalam waktu bersamaan. Yakni dengan cara memanfaatkan layanan gratis submitexpress.com yang memakai tools khusus agar alamat URL blog yang kita daftarkan lewat situs ini dapat sekaligus terdaftar ke 40 search engine baik yang besar seperti Google, Yahoo dan MSN maupun yang kecil-kecil. Ikuti langkah praktis berikut:
  1. Silahkan meluncur ke http://submitexpress.com
  2. Isi alamat blog Anda di kotak yang tersedia di bawah tulisan FREE SUBMISSION. Jangan lupa pakai http://… Contoh, http://hansamuaji.blogspot.com
  3. Klik Continue
  4. Isi Email Anda di kotak yang tersedia.
  5. Setelah mengisi kode rahasia yang ada di bagian bawah, klik “submit”
  6. Selesai…
Catatan yang perlu diperhatikan: Sebagian kecil search engine akan mengirim email konfirmasi ke Anda, klik saja link untuk konfirmasi yang diminta.

Senin, 04 April 2011

Mengganti Cursor di blog

Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi kamu yang merasa bosan dengan tampilan tersebut atau ingin menggantinya. Kamu bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan.

Cara Mengganti Kursor Pada Blog
Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya:
  1. Login Blogger => Rancangan => Edit HTML
  2. Cari kode </head>
  3. Taruh kode CSS di bawah ini, diatas kode </head>
  4. <style type="text/css"> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/hehehe/canel.gif"), auto;} </style>
  5. SAVE
nb : Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url kursor yang ingin anda gunakan. Cari kursor anda di alamat ini http://www.totallyfreecursors.com

Membuat Signature Pada Postingan Blog

Signature atau tanda tangan pada sebuah blog bisa jadi merupakan satu hal yang kita inginkan agar membuat postingan kita tampak lebih asli alias tidak copy paste. Tapi bagaimana kita dapat membuat suatu tanda tangan pada akhir tulisan kita jika tulisan tersebut kita buat pada komputer, tidak mungkin kan jika harus mengambil pena atau pulpen kemudian membuat goresan-goresan yang nantinya akan membentuk tanda tangan pada komputer kita.
Contoh
 Untuk menyiasati hal tersebut maka kita dapat menggunakan jasa "pihak ketiga" dalam hal ini adalah penyedia situs "live signature" gratisan. Kenapa harus live?, karena signature yang kita buat tersebut akan ditampilkan pada akhir tulisan kita pada blog yang mana postingan tersebut pastinya harus live (dapat diakses setiap saat). Hal penting lainnya yaitu service dari situs tersebut harus gratis, karena kenapa harus membayar hanya untuk menampilkan tanda tangan kita sendiri. Ada banyak situs yang menyediakan live signature pada dunia maya diantaranya adalah Mylivesignature. Situs ini menawarkan 2 macam service yaitu signature yang diambil atau dibuat dari tulisan (huruf/angka)bisa berupa nama kita sendiri, nama orang lain,dll. Dan service yang kedua adalah dengan membuat signature atau tanda tangan dari hasil scan yang kita buat sebelumnya kemudian dikirimkan ke alamat perusahaan situs tersebut. Karena jauhnya jarak perusahaan situs tersebut, maka sebaiknya kita mengambil pilihan yang pertama. Cuma kekurangan dari pilihan ini adalah tanda tangan yang nantinya kita buat adalah merupakan tulisan dari nama kita yang kemudian akan dipercantik dengan pilihan font yang disediakan.
Berikut adalah langkah - langkah pembuatan live signature :

1. Masuk ke situs Mylivesignature
2. Pilih melakukan registrasi
3. Setelah confirm, klik create new signature.
4. Pilih dan klik Using the signature creation wizard
5. Ikuti semua langkah - langkah yang ditampilkan (1 -7)
6. Kemudian pada user menu klik mysignature
7. Klik kata "Here" pada tulisan Here you can look through the instruction how to...
8. Setelah itu pilih dan klik opsi untuk membuat html kodenya, kemudian pilih "generate a code for you handwriting signature".
9. Copy code html yang telah dibuat tadi.
Langkah selanjutnya adalah memasukan hasil generate kode html tadi kedalam tulisan atau postingan kita. Pada dashboard blogger klik Setting - Formating - Post template, Kemudian paste hasil code html tadi di post template dan save. Cara lain untuk memasukan tanda tangan tersebut adalah dengan cara save image dari tanda tangan itu untuk kemudian diupload pada situs filehosting yang kita punya. Setelah itu link dari file tadi dicopy pada post template.

 

Efek - Efek Di Blog (Recommended !!)



Mau blog kamu ada efek-efek asik, macem-macem kayak salju turun, kupu-kupu terbang dan lain-lain. Nih aku ada bocorannya



Caranya juga gampang tinggal ubah di lay out, trus klik add gadget trus klik HTML/ Java Skript trus copy paste deh kodenya. Gampang kan…
untuk kode-kodenya :

Efek salju putih :<script src="http://poetrymania.googlepages.com/snow-effect.js" type="text/javascript"></script>

Efek salju warna pink :<script src='http://agungosx.googlepages.com/pinksalju.js' type='text/javascript'></script>

Efek kupu-kupu terbang :<script language="JavaScript1.2" src="http://www.geocities.com/heri_sys89/kupu2.js"></script>

Efek daun berjatuhan :<script src='http://arti.master.irhamna.googlepages.com/daun.js' type='text/javascript'>
</script>

Efek Rainbow link :<script src='http://arti.master.irhamna.googlepages.com/rainbow.js'></script>

Jumat, 25 Maret 2011

Membuat Link dan Judul Posting Menjadi Pelangi

Karena banyaknya Permintaan Dari temen (Thanks To Amanda) soal masalah link yang bisa berubah warna  ato menjadi pelangi ketika kursor diarahkan ke link. Maka saya akan jelaskan untuk memperindah link di blog kita menjadi berkedip seperti pelangi
Bagaimana tuh caranya???Tenang sahabat, ikutin saja langkah – langkah yang saya berikan di bawah ini :

1. Sahabat Harus Login dulu di Blog sahabat.



2. Pilih menu Rancangan


 
3. Klik Menu Edit HTML.

 
4. Jangan lupa kasih centang di Expand Template Widget

 

5. Sahabat cari kode <head>. Biyar mudah tekan pada keyboard (CTRL + F).
6. Setelah ketemu kode diatas, copy paste kode di bawah ini tepat di bawah kode <head>(langkah N0 5).

<script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>.

7. Langkah terakhir, jangan lupa Klik Simpan Template.



 
Sahabat Bisa melihat Hasilnya di blog sahabat, ketika kursor sahabat menyentuh text yang berbentuk link maka link tersebut akan berkedip seperti warna pelangi.

Sekian Dulu tutorialnya, semoga bermanfaat…Terimakasih

Senin, 21 Maret 2011

Cara Membuat Text Area dengan Fasilitas Select All

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat kotak yang contohnya seperti dibawah ini:



Kotak ini biasa digunakan untuk mengisi kode-kode pada postingan maupun untuk membuat kotak link exchange. Nah bagi anda yang ingin mencobanya caranya sangat mudah. Anda cukup copy kode dibawah ini lalu letakkan ke blog anda.


<div style="text-align: center;"><textarea style="width: 300px; height: 50px; padding:3px">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div>

Keterangan:
Teks yang dicetak merah merupakan teks yang muncul pada kotak. Silahkan diganti dengan teks atau kode anda.
center menunjukkan posisi kotak ditengah. Jika anda ingin meletakkan dikiri maka ganti dengan left atau right jika anda ingin meletak disebelah kanan
width merupakan lebar kotak dan height merupakan tinggi kotak. Silahkan diganti sesuai keinginan.

Membuat kotak teks/text area dengan fasilitas Select All
Tadi kita sudah membahas tentang cara membuat text area. Nah sekarang kita akan membahas tentang kelanjutannya yaitu text area dengan tombol select all. Tombol select all adalah sebuah tombol yang digunakan untuk menghighlight seluruh teks yang berada didalam text area sehingga kita atau pengunjung bisa lebih mudah untuk mengcopy seluruh teks atau kode yang berada dalam text area.

Nah agar lebih jelas silahkan anda klik tombol Select All yang ada dibawah ini






Ok uda jelaskan. Pingin mencobanya? Klu iya silahkan ikuti petunjuk dibawah ini

Untuk membuat text area dengan tombol Select All berada diatas seperti dibawah ini.

Tambahkan kode ini ke blog anda

<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></p></form>


Jika anda ingin membuat text area dengan tombol Select All berada dibawah seperti contoh dibawah ini

Maka gunakan kode ini

<form name="copy"><div style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Tulis text ataupun kode yang mau anda tampilkan disini</textarea></div><p align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></p></form>

Keterangan:
- Teks yang dicetak tebal merupakan teks yang muncul pada tombol. Anda bisa menggantinya dengan nama lain.
- Teks berwarna merah adalah teks muncul didalam kotak. Silahkan diganti dengan teks atau kode anda.

Selamat mencoba...

Jumat, 18 Maret 2011

Memasang Widget Musik

Ketika saya mengunjungi suatu webside, saya langsung kaget ketika mendengar musik. Kan tadi biasa saja dan tenang, kemudian saya kaget! Tapi lama kemudian tenang lagi ketika mendengar musik atau lagunya. Memasang musik menurut saya harus ditempat yang terbuka agar pengunjung dapat mengetahui letak musik itu.

Terkadang pengunjung ada yang suka dan tidak suka, maka dari itu pengunjung mengatur papan musiknya itu. Nah, bagi yang tertarik untuk Widget Musik ada dibawah caranya :

Buka salah satu situs yang menyediakan widget musik. Saya tapi pilih Mixpod saja, karna temen saya ada yang pakai :P. Join, atur papan musik dan ambil kodenya.

- Buka Mixpod.com


- Cari music favorit dibawah Create A Music Playlist, Karna saya suka Piano misalkan Piano Concert


- Tahap pertama Membuat Mixpod ~> Add Musik dengan cara Klik tanda ( + ) Sebelah tanda ( > ) pada Musik

- Tahap kedua Membuat Mixpod ~> Costumize dengan cara Klik (Edit skin, Edit color, atau klik Edit setting) dibawah gambar Playlist

Edit Skin

Edit Color

Edit Setting

Al-hasil seperti ini

- Tahap ketiga Membuat Mixpod ~> Save Playlist dengan cara Save (get code) dan isi (pendataan)


- Sign Up dan isi Formulir dengan benar. Setelah berhasil, Login lah sobat


- Setelah masuk, klik tab My Playlist dan Klik Saved Playlist


- Pilih get code yang berada


- Selanjutnya Kode dicopy dan paste kedalam HTML/Java script blog sobat.
Ganti ukuran sesuai kebutuhan (klo masih ndak tau .., weight : Lebar dan height : panjang) dan jadi deh.

Sekian dulu ya posting saya ini. Selamat mencoba! Kurang lebihnya terima kasih banyak atas perhatiannya. :)
Ayo jangan cuma baca! Poskan komentar sobat dibawah ini jika memang sobat mau berkomentar atau bertanya tanya. Sobat bebas berkomentar atau bertanya sesuai apa yang ada dipikiran sobat :). Tapi Ingat, komentar yang bersifat spam akan dihapus untuk selamanya! Klik Like Button dibawah ini yaaa kawan. Oh iya farixsantips.blogspot.com siap untuk di Langgan dan di Sharekan melalui Sharing is Enjoy dan Lintas Berita. Sampai jumpa di artikel lainnya ya kawan.

Senin, 14 Maret 2011

Memasang Emotion KasKus di Blogger

halo sobat blogger dimanapun anda brada. Sekarang saya akan memberikan trik/tips pada sobat2 sekalian, topik yg akan saya usung ini adalah cara menambah emoticon kaskus ke dalam kotak komentar pada blogger. Sebelumnya, bagi yg belum tau kaskus itu apa? saya akan share sedikit, kaskus adlah suatu forum yg besar di indonesia yg terdapat bnyak subforum di dalamnya pendirinya adalah orang2 pribumi juga(menurut sepengetahuan ku). Bagi yg sudah mengenal kaskus sejak lama pasti tak asing mendengar kata "KASKUS". Bagi kaskuser yg ingin blonya ada emoticon kaskus di kotak komentar, saya sarankan untuk mengikuti cara saya sebagai berikut..

cekidot:
caranya...

1. Log in blogger.com
2. Dasbor > tata letak > edit HTML
3. Beri tanda centang pada "Expand Template Widget"
4. Cari kode
5. Letakkan script di bawah ini, dan taruh di atas </body>
<script src='http://peypah.fileave.com/kaskusinblogger2.js' type='text/javascript'/>

setelah itu ..
6. Cari kode
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>


7. Lalu letakkan kode di bawah ini di atasnya.
<b><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwas2otlJzJXt5nWMl8nsGMyt08jx3GvXSAbzqcSrH-r0ZAF1CbYQXqIJw81veFm0xy7DWTbZBTvAdc2RPr2x6Fz51tIK6XhMvD5p3x1wj4ry6sxVmkMngUTNdqFJdRmmxTgmYM9FsMNpL/s1600/ngakak.gif'/>
:ngakak:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd8F8dLWccZi4A1nFbw0Y5YY8DNUkxfhJJ6p3cfJMetZSpHyWifHrpv1BCmoYj8UNj4Pva7C4TH7fvyEN2PYN4UYkRBRQUm2OnKa9pyDPwH5PKU6DfBQVHfnBgUAP1LFF9Cszl0T_Gt1wd/s1600/recseller.gif'/>
:recommended:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Hh3CkqRur8vhN8hLT3sfG0WqvDZy21yeqdG80SlETQ8WWL0flqnPOYbEGBQBsDrFmFzqKf5rzb_sZSDguYF7UP-EGq_jJZnadBUZthsAIw6U5Rg4alsxBkIr34pHNgi9taF16jNbQuv7/s1600/request.gif'/>
:request:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDL3QaGh06H_yiE8lzrbkQlExXim4ERLJLI9MGp7w2WYrPAWmG1ZTBYKZ-WERooMhEHpfjknrtj7ePaOr9wJ8Pi1-1wP0Lcc0RLYK0iVgXMINLWQ-Ekvu72FU9nZvT2ZU7shX9KQXSLQ5u/s1600/shakehand2.gif'/>
:thanx:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1o44pDYz_b4u6tAQtMAAewBXOPwnyJNVSnooveNV8h7DcDusRqAw2G3itRguPLF5dLsSnhzizEgCB-ri7BHLl5QZ3uvg_mox0TBpQEPCJ033B8k4wSqVpfYmYTr4mdss8Ab9pQJNFkBR/s1600/takut.gif'/>
:takut:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDSP4Xcn5aCK0F0sKml5_khwQNKmp-sGNLOS5_RwZTSWjaKgHyZnLrj4FQi17VS5d9iZH2p3AGwODlkH2gXvJXxt71nd-KXt1yIJ91HQxwGnzl2D-1eMdPqO6MooPs3Gn-MvTFrVkA4LEG/s1600/toastcendol.gif'/>
:cendol:
<img src='http://www.kaskus.us/images/smilies/bingung.gif'/>
:bingung:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw0JVDyNDmeIewPf_Z1l5CWsvB1dKG1DlI81g9Sq-_lXwnbI4lkqrImcs8YjZM3WA_2LEmQ9meFEUkN95PKslCzK60gloIZ7svr0RN1HdlDcIn9aUSzfHDDJcuk8yfK0OB_qROJL2PiDvR/s1600/capede.gif'/>
:capede:
<img src='http://lh5.ggpht.com/_UEOySJCSmVg/SzAiJIxYjYI/AAAAAAAAAfU/R7Oy5x5EaGM/s800/I-Luv-Indonesia.gif'/>
:loveRI:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM1i3HHGSyFUxC52eWW59BCbnnb3R7ZXfP0fsfxNQpCNwqUF3nN3l-IE0Yn8ixkESq491vgL-po-O4li374zSgcvhOD8HyyHwMQ07EJiwxDBgbCuxQ4fVs3Bwpa_V8LOsAMkz3lpQdaXRj/s1600/marah.gif'/>
:marah:
<img src='http://lh4.ggpht.com/_UEOySJCSmVg/SzAiYO4DeKI/AAAAAAAAAfc/dmWvhblQnSk/s800/tkp.gif'/>
:ngacir:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgptkdEtLCrd1OGLKcAC40hksYWyKLaPiSO3egsjdpDL_2TYY1KCVU2IP56KWKyaUjq-u-GLxGoZWdj9w3TaQJg20Yr1zBrq2HAVM6-1Lpa7uOGyQnQ1AzEQLwMEKQsTkcLaKjiqp61_z4B/s1600/cewek.gif'/>
:kiss:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoZ0vjxIvcHDLok-pkCAHg8ZWNI5NS9to9CSFmpyS9DLPLx5y0G2oYGwQUr_KzdLuqW_VFRFjvDm4i00VCZAICwXmEMiU_TsxRrQuOuYxxEYxFUo88QiWaCHdGx7eCTAP3vChR1V2e8iPL/s1600/berduka.gif'/>
:duka:
</b>



8. Simpan

selamat mencoba dan semoga bermanfaat. jangan lupa komentarnya bro...1 komentar sangat berarti
Note :
yang berwarna Hijau dapat diganti dengan link emotion yang anda mau
yang berwarna Merah dapat diganti dengan kata yg diinginkan supaya emoticon keluar emotion yang anda mau

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Macys Printable Coupons