Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog

Sahabat Catatanku kali ini saya akan menulis sebuah artikel yang berjudul Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog berawal dari kunjungan saya ke salah satu blog teman kita disitu saya melihat salah satu butto share yang cukup menarik untuk itu saya akan membagikan informasi ini untuk anda para sahabat Catatanku

nah bagaimana caranya?  

lets check it out...!!

berikut langkah -langkahnya:

1. Login ke dasbor blog anda
2. Pilih rancangan
3. Pilih tambah gadget
4. Pilih Html/Java script
5. Copy kode Html di bawah ini
6. Pastekan di Html/ Java Script tadi
7. Simpan
8. Selesai

<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; 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: 9px;text-align:center;"><a href="<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; 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: 9px;text-align:center;"><a href="http://galerbis.blogspot.com/2012/11/cara-memasang-widget-share-button.html"><font color="blue">[Get Widget]<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->"><font color="blue">[Get Widget]<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->

Cotoh hasilnya seperti ini

 Catatan : untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda. Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang simple.

selamat mencoba....!!

 

Read More

Cara Memasang Lagu Mp3 di Blog

Kali ini gue bakalan share ke sahabat catatanku tentang bagaimana caranya memasang lagu mp3 di blog, fungsinya untuk mendengarkan lagu sambil memposting beberapa artikel ke dalam blog kita, bayangkan ajjah sahabat catatanku jika keheningan tercipta dalam suasana hati yang sedang galau maka yang akan terjadi malah tambah sakit hati tau nggak hehehe, kita butuh hiburan sambil mengeluarkan isi pikiran yang sahabat pikirkan untuk menjadi sebuah artikel yang bermanfaat

 

mau tau gimana caranya let's check it out !

berikut ini cara memesang lagu Mp3 di blog:

Banyak penyedia layanan Music Player untuk blog dengan berbagai macam model dan bentuk. Dan kali ini saya akan coba Share Widget Musik Player yang bentuknya toolbar yang bisa kita pasang diatas maupun dibawah blog. Kita akan menggunakan jasa gratis dari SCM Music Player. Ini dia sedikit kelebihan yang diberikan dari web musik player gratis ini :

        - Support Blogger, Wordpress, Tumblr

        - Mp3, Mp4, RSS Podcast atau Youtube Playlist

        - Compatible dengan Crome, Firefox, Opera, Safari, IE

        - Desain bebas utk Custom Skin RSS

Tertarik untuk mencoba ?

Yo Langsung ajj kita menuju KTP !!

Cara membuatnya cukup mudah hanya ada 3Step : Choose Skin > Edit Playlist > Configure Settings

1. Pertama Choose Skin. Disini kita bisa memilih Toolbar Skin Y akan kita pasang nantinya di blog atau kita bisa menggunakan Custom Skin CSS. Sebagai contoh disini saya akan menggunakan Skin Y berwarna hitam, seperti gambar dibawah ini :

 

2. Selanjutnya berlanjut pada Edit Playlist. Pada tahap ini kita bisa menyusun Playlist lagu secara manual dengan memasukkan judul dan link lagu Y bisa kita dapatkan di youtube, 4shared atau dari  web penyedia musik lainnya. Atau kita bisa memanfaatkan RSS Podcast dari Playlist Youtube Y kita miliki. Bagi pengguna jasa Mbah Google : pasti sangat mudah utk mempunyai akun dari Youtube selain G+,Blogger, dll. 

 

Sebagai contoh pemasangan disini saya akan memasang lagu secara manual dengan memasang link lagu dari Youtube. Buka Youtube > pilih lagu Y diinginkan. sebagai contoh saya pasang lagu dari Seconhandserenade - Is There Anybody Out There . Ambil/copy Linknya dan pastekan di edit playlist. 

 

3. Berlanjut ke langkah Configure Settings, setting sesuai keinginan kita, Auto Start/Tidak, Shuffle Playback'a, Volume'a, Toolbar'a diatas/dibawah. Contohnya saya akan setting seperti gambar di bawah ini : 

 

Terakhir klik Done utk mengambil kode scriptnya

4. Proses terakhir pemasangan pada blog. Sobat dapat memasangnya di dalam Template HTML atau pada Add Gadget/HTML di tata letak. Copy kode script'a dan pastekan dibawah <body> atau pada add gadget/HTML di tata letak.

 

 

 

Selamat Mencoba!

Read More

Membuat Menu Tab View

Menu tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.

Coba perhatikan dibawah ini :

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.

kalau sudah pasang script dibawah ini diatas code </head>

<script src='http://sites.google.com/site/anasku2000/tabview.js' type='text/javascript'/>

kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>  

Keterangan :

1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
2. Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
3. Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
4. Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.

Kalau sudah tinggal SAVE.
dan nikmati hasilnya

Read More

Membuat Tepi Gambar Bershadow Dengan CSS 3

Pada postingan kali ini saya mau share bagaimana membuat tepi gambar bershadow agar tampilan blog kita lebih menarik gan, mau tau caranya gimana??

let's check it out,,,!!

sebelum masuk ke pokok pembahasan terlebih dahulu kita mengetahui pengertian dari CSS itu sendiri agar agan-agan semua paham dan tidak pusing untuk menerapkannya ke dalam blog

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah setelah mengetahui pengertiannya langsung saja kita praktekkan "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau udah kamu pasang dan lihat dehh hasilnya
semoga bermanfaat ya gan,,,!

Read More

Cara Mendaftarkan Blog ke Google Webmaster Tools

Kali ini saya akan membagikan info tentang bagaimana caranya mendaftarkan blog kita ke search engine google atau mesin pencari google, ini untuk memudahkan blog anda tampil di mesin pencari google walaupun secara otomatis google engine mengindeks blog kita tapi ada kalanya blog kita di daftar dengan cepat agar tulisan-tulisan kita bisa dilihat oleh banyak orang  

Berikut ini cara mendaftar dan melakukan verifikasi blog di Google Webmaster Tools :

1.)  Buka halaman www.google.com/webmasters/tools/ lalu Login lah menggunakan akun Gmail atau akun Google anda.

2.)  Kemudian pada halaman Google Webmaster Tools , Klik tombol Add a Site lalu masukkan alamat blog anda yang ingin didaftarkan. Setelah itu klik Continue.

3.)  Lalu pada halaman Verify Ownership kita diminta untuk melakukan verifikasi blog. Ada 4 pilihan dalam melakukan verifikasi blog, yaitu :     >> Use your Google Analytics account
         Menggunakan kode Google Analitycs pada blog anda     >> Add a DNS record to your domain's configuration
         Menambahkan DNS record pada domain registrar atau hosting provider     >> Add meta tag to your site's home page
         Menyisipkan kode meta tag yang disediakan kedalam kode HTML blog.     >> Upload an HTML file to your server
         Kita akan diminta untuk mendownload sebuah file HTML yg disediakan
         kemudian menguploadnya ke blog kita.
 
     Saya sarankan menggunakan metode Add meta tag to your site's home 
     page karena lebih mudah.     Adapun berikut ini cara melakukan verifikasi menggunakan meta tag:
    a.) Pada halaman Verify Ownership tadi, klik Add meta tag to yous site's
         homepage
    b.) Kemudian, copy kode meta tag yang ada disana. Adapun bentuk dari
         kode meta tag kira-kira sebagai berikut

<meta name"google-site-verification" content="KLA651QPMpk3HAbnGRlFS87sKAGQPkioDJSK98SGnK" />

    c.) Login ke akun Blogger anda
    d.) Pilih Design >> Edit HTML
     e.) Sebaiknya backup dulu template anda dengan cara klik Download Full
          Template
    f.) Masukan kode meta tag tadi diantara tag <head> dan <body> (anda
        boleh meletakkannya dibawah tag <head> atau diatas tag <body>, pilih
        salah satu saja)
    g.) Klik Save Template. Sekarang meta tag sudah terpasang di blog anda,
        ikuti langkah selanjutnya

4.)  Setelah memasang kode meta tag atau melakukan verifikasi dengan salah satu metode diatas, kembali ke halaman Verify Ownership lalu klik Verify.

Sekarang Blog anda sudah terdaftar dan terverifikasi di Google Webmaster Tools. Langkah selanjutnya agar blog lebih mudah dicrawl oleh spiderbot adalah dengan mensubmit sitemap blog anda ke Google Webmaster Tools. Sitemap digunakan untuk memberiahu search engine tentang suatu halaman blog atau web agar dicrawl. Dengan membuat dan mensubmit sitemap ke Google Webmaster Tools, blog anda memiliki kemungkinan lebih besar untuk cepat dicrawl dan diindex search engine Google.

Adapun cara mensubmit sitemap ke Google Webmaster Tools adalah sebagai berikut :

1.)  Masuk ke dashboard Google Webmaster Tools blog anda

2.)  Klik Site Configuration, lalu pilih Sitemaps.

3.)  Klik Submit a Sitemap, lalu masukkan sitemap blog anda. Setelah itu Klik Submit Sitemap seperti ini

semoga bermanfaat....

Read More