Billy Giovan Poetrax Oii Oyy: November 2013

Sabtu, 16 November 2013

Cara Buat Status Biru

apa kabar nih sob ?

Kali ini Billy akan share tentang .FACEBOOK
yaitu Membuat teks warna biru pada status atau komentar.

Simak Baik-baik Sob :

Copy kode dibawah ini

Maaf nggak ada Screenshotnya, Lagi malas upload biggrin

Nb:Ganti STATUS BIRU dengan Status Anda.

semoga Bermanfaat !

Cara Membuat Menu Pull Down Dengan Tumbol/Button

Pull down menu seringkali juga disebut sebagai dropdown menu atau jump menu. Disebut pull down karena list menu akan muncul setelah bagian atas menu diklik/ditekan, dan disebut pula dropdown menu karena setelah di-klik sederet list menu akan muncul secara berurutan ke bawah.

Pull down menu/drop down menu sangat bermanfaat untuk menampilkan list pilihan yang sangat panjang karena dapat memperpendek panjang halaman blog/web dan akan membuat blog/web tampak lebih elegan dan professional. Sobat dapat menggunakan menu pull down ini untuk menyusun link-link blogrol, label, arsip, kategori dan lain sebagainya.

Dalam kesempatan ini saya akan sedikit mengulas dan share tentang cara membuat drop down/pull down menu plus button yang berbasis HTML form dan perintah fungsi javascript itu.

Secara mendasar, pulldown menu merupakan rangkaian opsi tag option di dalam selection yang semuanya dirangkum menjadi sebuah form:

<form>
<select>
<option></option>
<option></option>
<option></option>
</select>
</form>

Dan akan tampil seperti ini:

Untuk memberikan isi atau list menu, tambahkan value dan anchor text pada tag option, identitas fungsi (name) pada selection, dan fungsi form:

<form name="lompat">
<select name="menu">
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>
</form>

Akhirnya, tambahkan perintah javascript input button dan link option ketika di klik pada urutan sesuai identitas (name):

<input type="button" onClick="location=document.lompat.menu.options[document.jump.menu.selectedIndex].value;" value="GO">

Ups, karena apa yang tampak di bagian form adalah nama list yang pertama dan kurang informatif, tambahkan option dengan value kosong dan text sebagai informasi bagi pengunjung tentang isi menu tersebut:

<option> -- Pilih Tutorial -- </option>

Berikut script lengkapnya:

<form name="lompat">
<select name="menu">
<option"> -- Pilih Tutorial -- </option>
<option value="url link list 1">Nama List 1</option>
<option value="url link list 2">Nama List 2</option>
<option value="url link list 3">Nama List 3</option>
</select>

<input type="button" onClick="location=document.lompat.menu.options[document.lompat.menu.selectedIndex].value;" value="GO">
</form>

Contoh implementasinya (sekalian chek the link):

Kostumisasi:

- Ganti -- Pilih Tutorial -- dengan text yang ingin dimunculkan pada baris paling atas menu pull down.

- Ganti GO dengan kata/perintah lain yang lebih disukai.

Di blog blogger, Sobat dapat dengan mudah memasangnya sebagai widget/gadget.

Dashboard > Design/Rancangan > Add a Gadget/ Tambah Gadget > HTML/Javascript

That's it. Have fun!

jangan lupa follow saya , di bawah ini

Cara Mengganti Warna Dan Gambar Background Pada Blog

Mengganti Warna Background:
1. Login Ke Blogger
2. Masuk Ke Dasbor >>> Pilih Template
3. Edit HTML
4. Copy Semua kode HTML yang ada pada Edit HTML ke NotePad, Lalu Cari Kode yang berwarna Merah (gunakan CTRL+F agar pencarian lebih mudah) :
    body {
    background:#ffffff;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#222222;

5. Ganti Kode Bewarna Biru Dengan Kode warna yang sobat Inginkan
6. Copy Dan Pastekan Semua Kode yang ada pada Notepad Ke Edit HTML
7. Save Template

Mengganti Gambar Background:
1. Login Ke Blogger
2. Masuk Ke Dasbor >>> Pilih Template
3. Edit HTML
4. Copy Semua kode HTML yang ada pada Edit HTML ke NotePad, Lalu Cari Kode yang berwarna Merah (gunakan CTRL+F agar pencarian lebih mudah) :
    body {
    background:#cccccc url(http://UrlGambarSobat.jpg)fixed repeat-y center top;

5. Ubah Url Bewarna Biru Dengan Url Gambar Sobat
6. Copy Dan Pastekan Semua Kode yang ada pada Notepad Ke Edit HTML
7. Save Template

Mengganti Warna Background Ke Gambar Background:
1. Login Ke Blogger
2. Masuk Ke Dasbor >>> Pilih Template
3. Edit HTML
4. Copy Semua kode HTML yang ada pada Edit HTML ke NotePad, Lalu Cari Kode yang berwarna Merah (gunakan CTRL+F agar pencarian lebih mudah) :
    body {
    background:#ffffff;
    margin:0;
    padding:40px 20px;
    font:x-small Georgia,Serif;
    text-align:center;
    color:#222222;
    }

5. Ubah Kode yang bewarna biru Dengan kode Dibawah ini:
    #cccccc url(http://UrlGambarSobat.jpg)fixed repeat-y center top;

6. Ubah Kode yang Bewarna Biru dengan Kode Url gambar Sobat
7. Copy Dan Pastekan Semua Kode yang ada pada Notepad Ke Edit HTML
8. Save Template

Semoga Bermanfaat....

Bila Sobat Ingin MenCOPAS Postingan saya ini, diharapkan meletakkan sumbernya, TERIMAKASIH

jangan lupa follow saya , di bawah ini :

Cara Membuat Kotak Komentar FB dan Blog Berdampingan di Blogger

[ DEMO Bisa Di Lihat Di Kotak Komentar Blog Ini]

Cara Mendaftar dan Mendapatkan ID Aplikasi Facebook

Pertama-tama sobat harus punya ID aplikasi di Facebook. Kalau belum punya silahkan daftar dan buat dulu di Facebook Developers.

Dari halaman facebook developers, log in dulu kalau udah, sobat klik tab Apps di bagian atas. Lalu lSobat klik tombol Register as a Developers di kanan atas, lalu ikuti saja petunjuknya dan di isi data lengkap sobat termasuk nomer handphone buat verifikasi.

Sudah berhasil daftar, kalo udah lanjut sekarang buat aplikasinya agar dapat ID nya. Pilih + Create New App yang ada di kanan atas lalu akan muncul pop up, lalu tinggal di isi saja App Name sama App Namespacenya sesuai keinginan sobat kalau Web Hostingnya boleh dicentang atau dibiarin aja juga gak apa-apa. Kalau sudah tinggal klik Lanjutkan, beres.

Nah sekarang Sobat udah dapet ID aplikasi facebook. Untuk informasi umum dan yang lainnya silahkan di isi yang sesuai lalu simpan perubahan.

Cara Memasang Komentar Facebook Di Blog

Lanjut ke tahap pemasangan komentar facebook di blog gan. Pertama masuk keBlogger lalu pilih Template kemudian Edit HTML dan centang Expand Widget Templates gan. Kita mulai dari atas biar gak bolak-balik.

Copy kode di bawah ini lalu pastein di bawah kode <head> atau selipkan di antara meta tag yang sudah ada di template kalian gan.

<meta content='Facebook Profile ID' property='fb:admins'/>
<meta content='Aplikasi Facebook ID' property='fb:app_id'/>

Tinggal di ganti aja Facebook Profile ID dan Aplikasi Facebook ID dengan ID punya kalian. Buat tau facebook profile ID bisa di cek di findmyfacebookid.com gan.

Sekarang cari kode ]]></b:skin> lalu copy dan paste kode CSS di bawah ini di atasnya gan.

     .comments-page{ background:#fff;}

    #blogger-comments-page { padding: 20px; display: none;border:1px solid orange;border-radius:5px;}

    #fb-comments-page{border:1px solid blue;border-radius:5px;padding:20px;margin-top:10px;}

    .facebook-tab { float: left;cursor: pointer;margin-right:2px;border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));

    background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);

    background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);

    background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);

    background-image: -o-linear-gradient(top, #3093c7, #1c5a85);

    background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform
.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);

    }

    .facebook-tab:hover {border:1px solid #1c5675; background-color: #26759e;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));

    background-image: -webkit-linear-gradient(top, #26759e, #133d5b);

    background-image: -moz-linear-gradient(top, #26759e, #133d5b);

    background-image: -ms-linear-gradient(top, #26759e, #133d5b);

    background-image: -o-linear-gradient(top, #26759e, #133d5b);

    background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform
.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);

    }

    .blogger-tab {float: left;cursor: pointer;border:1px solid #ffc826; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #ffd65e;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd65e), color-stop(100%, #febf04));

    background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);

    background-image: -moz-linear-gradient(top, #ffd65e, #febf04);

    background-image: -ms-linear-gradient(top, #ffd65e, #febf04);

    background-image: -o-linear-gradient(top, #ffd65e, #febf04);

    background-image: linear-gradient(top, #ffd65e, #febf04);filter:progid:DXImageTransform
.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);

    }

    .blogger-tab:hover{ border:1px solid #f7b800; background-color: #ffc92b;

    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc92b), color-stop(100%, #ce9a01));

    background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);

    background-image: linear-gradient(top, #ffc92b, #ce9a01);filter:progid:DXImageTransform
m.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01);

    }

Copy kode Dibawah ini dan letakkan di atas kode</head>.

<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Lalu cari kode <div class='comments' id='comments'> lalu pastekan kode HTML di bawah ini tepat di bawahnya kode tersebut. jika kode tersebut ada 2 atau lebih, pastekan kode dibawah ini di bawah semua kode yang mirip <div class='comments' id='comments'>.

<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Komentar Dari Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar di Facebook
</div>
<div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Komentar Dari Blogger'>
<data:post.numComments/> Komentar di Blogger
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><div align='left'><font color='blue' size='4'><strong>Silahkan Berkomentar Melalui Akun Facebook Anda</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFIG213h65tQazaALDwoUFnOZLqXekP-5fha56Yzic23Yjv4fY-PXd_46vgp36BkvGNbcx0cvI6vsAOJEqD1a61uJ4KDhKo9AEc8O5E5N-MPjy5bYeEHaTNvVcAaCFlwOKZUHSI6gVn8ot/s1600/facebook-icon.png'/><div align='right'><a href='http://seociyus.blogspot.com/2013/02/cara-membuat-komentar-facebook-keren-di-blog.html' target='blank'><small>Get This Facebook Comment</small></a></div>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div align='left'><font color='orange' size='4'><strong>Silahkan Tinggalkan Komentar Anda</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfP0Tyaze8mbm-UtzIXlBaK6V78oqwYWD2OKo5Cpn6x3LgD7U8BUA0vaKqXFnrJsPHbeGMxmL2c6gFqzzicfdOosDZHD7YnSTIhGhlxJqtvcrZDoFBkgSNmDYgBEEq_JcCYC9RUDd766kl/s1600/Blogger-icon.png'/>

-Ubah kode bewarna Biru untuk mengatur jumlah komentar facebook yang sobat inginkan sesuai keinginan
-Ubah kode bewarna Merah untuk mengatur ukuran kotak komentar facebook yang sobat inginkan sesuai keinginan

Terakhir, Cari kode berikut
<h4><data:post.commentLabelFull/>:</h4> lalu hapus kode tersebut, jika ada 2, hapus kedu kode tersebut.
Save Template

jangan lupa follow saya , di bawah ini

Cara Check SEO Blog

1. buka web chkmel

2. tulisakan url blog sobat pada kolom ini: lalu klok Check SEO Score.

3. jika sudah, akan ada seperti kekurangan Seo blog kamu...dan cara membernarkannya.

4. scroll mouse kamu kebwah lalu akan ada script beserta gambar Check SEOnya .. nah copy aja scriptnya:

5. cara pemasangan: Tata Letak-Tambahkan widget-HTML/Javasript-copy kodenya kekolom yg disediakan..

jangan lupa follow facebook saya di bawah ini !

Cara Mengubah Judul menjadi Tag H1 di Blog

Dalam sebuah susunan headings di blog terdiri dari H1,H2,H3,H4,H5,dan H6. Biasanya Judul Blog diubah menjadi H1 dan judul artikel menjadi H2. Namun, lebih dari 1000 blog yang menggunakan headings H1 dengan sangat banyak sehingga judul artikel pun terindexs menjadi H1.

Bagaimana Cara Mengoptimalkan susunan Headings H1 di Judul Blog ini ?
Pada template yang biasa kita download ada bagian judul, sidebar, comments dan lainnya. Biasanya judul blog diberi nilai H1, Judul artikel H3 (.post),Sidebar H2 / H3, Comments H4. Nah, untuk optimasi di bagian judul blog dapat mengikuti panduan dan tutorialnya berikut ini :

Cara Mengubah Judul Blog menjadi Tag H1, judul artikel H2 :
1. Login ke blogger.com.
2. Masuk ke Template, pilih Edit HTML.
3. Centang / Ceklis Expand Widget Templates.
4. Cari kode seperti berikut ini

.post h3 {
color: #333333;
font-size: 16px;
font-family: Tahoma, Arial, Verdana;
font-weight: normal;
text-decoration: none;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a, #content h1 a:visited {
color: #333333;
font-size: 22px;
font-weight: normal;
margin: 0 0 5px;
padding: 10px 0 0;
}
.post h3 a:hover {
color: #CF152A;
text-decoration: none;
}

Ganti kode diatas ( hanya yang seperti diatas dan depannya .post ) dengan kode di bawah ini :

.post h1, .post h2 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color: #333333;
}

5. Cari kode seperti ini :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Ganti dengan kode diatas dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>

6. Cari kode seperti ini :

<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>

Ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

7. Temukan dan cari kode seperti ini :

Ganti kode tersebut dengan kode Judul di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 24px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>

8. Lakukan pengeditan HTML disini .
9. Save Template.

jangan lupa follow facebook saya di bawah ini !

Auto Followers Facebook

Untuk mendapatkan banyak followers di facebook , ikuti langkah² berikut ini .
tapi sebelum itu Add Friend saya dlu di SINI .
oke langsung ke step

1.Login ke facebook ( Sini )
2.Kemudian Klik tombol follow/ikuti di list ini . *jangan ada yang ketiinggalan*
• https://www.facebook.com/lists/1404735849763883
• https://www.facebook.com/lists/1403527416551393
• https://www.facebook.com/lists/1403808586523276
• https://www.facebook.com/lists/1403808886523246
3. tunggu sekitar 5 menit
4. Lihat Hasil nya :D :) WAW ! Amazing

Jangan Lupa Follow saya !
di bawah Ini .

Billy Giovan Poetrax Oii Oyy

fsht

rtyu

hfjg

Sponsor Iklan

Rating

Follow Me , Please !

Cari Artikel Blog

Sabtu, 16 November 2013

Cara Buat Status Biru

Cara Membuat Menu Pull Down Dengan Tumbol/Button

Cara Mengganti Warna Dan Gambar Background Pada Blog

Cara Membuat Kotak Komentar FB dan Blog Berdampingan di Blogger

Cara Mendaftar dan Mendapatkan ID Aplikasi Facebook

Cara Memasang Komentar Facebook Di Blog

Cara Check SEO Blog

Cara Mengubah Judul menjadi Tag H1 di Blog

Auto Followers Facebook

Visitor

Musik

Arsip Blog

About Me

Label

Benner Friends

Template

Pengunjung

Followers

Sponsor Iklan