Tampilkan postingan dengan label Edit Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Edit Blogger. Tampilkan semua postingan

Senin, 02 September 2013

Cara Mengubah Judul menjadi Tag H1 di Blog

tag h1 judul 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 != &quot;item&quot;'>
<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 != &quot;item&quot;'>
<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 :

<h1 class='title'>
<b:include name='title'/>
</h1>

Ganti kode tersebut dengan kode Judul di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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.

Dengan melakukan beberapa langkah dan tips diatas, maka susunan tag heading pada judul blog akan lebih seo friendly. Semoga dapat mempermudah anda dalam mengubah judul blog dan judul artikel yang lebih baik. Artikel Memperbaiki Tag h1 is missing error for CHKME

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

Rabu, 28 Agustus 2013

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 ke Blogger 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(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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/AVvXsEgVNRW1HgvsoNm22nJbusD7gM5FDynZbqJcuX4lNgjBnVDRpi9mubR-uzmjPAuUfxUPsJ31qTIyIszIOkv-P74s4V3pDXeLRhvXHsmdoG9v6LmuQiv5RBsNfRADhMYXYAHPH81y0dn8wo3v/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/AVvXsEj8458SiS4ROf94alYBwZMYzObmhqQ_JEBnSpQnPl4dVBmg06DeX-RxvDjGik2r_D8KitOgCjWC0_tvgCZMLn20zprR5mQYznlUjER6RXVrXwFD-9RNKKqRwsSTMSzuN56ICPmgPaU-0shH/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

Selasa, 27 Agustus 2013

Kumpulan Situs Penyedia Domain Gratis 100%


Domain Gratis, Domain Free, Free Domain, Grais Domain, Domain, Domain Blog, www.com
Domain Gratis yang diberikan :
tk

Domain Gratis yang diberikan :
cz.cc

Domain Gratis yang diberikan :
de.nu

Domain Gratis yang diberikan :
at.nr, de.nr, co.at.nr

Domain Gratis yang diberikan :
ch.lv, de.lv, co.at.lv, or.at.lv

Domain Gratis yang diberikan :
de.vc, at.vc, co.at.vc, or.at.vc, ch.vc

Domain Gratis yang diberikan :
co.at.gg, de.gg, co.at.gg, ch.gg, fr.gg

Domain Gratis yang diberikan :
or.at.vu, co.at.vu, de.vu, ch.vu

Domain Gratis yang diberikan :
int.tf, net.tf, eu.tf, int.tf, edu.tf, us.tf, ca.tf, bg.tf, ru.tf, pl.tf, cz.tf, de.tf, at.tf, co.at.tf, ch.tf, sg.tf

Domain Gratis yang diberikan :
it.pn, uk.pn, us.pn, au.pn, com.au.pn, de.pn, co.at.pn, fr.pn, it.pn, cn.pn, jp.pn

Domain Gratis yang diberikan :
fr.ms, net.ms, info.ms, us.ms, shop.ms, au.ms, com.au.ms, de.ms, fr.ms, cn.ms, hk.ms, br.ms, com.br.ms, net.br.ms, org.br.ms, biz.br.ms, info.br.ms, etc.br.ms

Domain Gratis yang diberikan :
us.mn, uk.mn, co.uk.mn, eu.mn, au.mn, com.au.mn, at.mn, co.at.mn, fr.mn, nl.mn, it.mn, cn.mn, jp.mn

Domain Gratis yang diberikan :
net.tc, eu.tc, us.tc, uk.tc, co.uk.tc, me.uk.tc, org.uk.tc, au.tc, com.au.tc, pro.tc, shop.tc, edu.tc, int.tc, de.tc, at.tc, co.at.tc, ch.tc, it.tc, es.tc, ru.tc, ua.tc, se.tc, dk.tc, be.tc, no.tc, pl.tc, bg.tc, cz.tc, hu.tc, ie.tc, mx.tc, br.tc, com.br.tc, net.br.tc, org.br.tc, biz.br.tc, info.br.tc, etc.br.tc, hk.tc, kr.tc, th.tc, ph.tc

Kamis, 08 Agustus 2013

Cara Mengganti Warna Dan Gambar Background Pada Blog

Ganti Background
Scholovers Blogger | kali ini admin akan Share Tips And Trick yang Berjudul Cara Mengganti Warna Dan Gambar Background Pada Blog, langsung saja dilihat Tutorialnya:

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

Senin, 22 Juli 2013

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!

Sumber: http://buka-rahasia.blogspot.com/2011/06/cara-membuat-pulldown-menu-javascript_27.html

Cara Membuat Widget Voting/Polling di Blog


Cara membuat polling atau voting di blog - Kali ini Scholovers Blogger akan Share Cara Membuat Voting/Polling di Blog, Setelah jalan-jalan Ke blog lain akhirnya Saya nemu juga caranya, Langsung aja yuk dipraktikkan sama-sama:

1. pertama-tama sobat buka situs BooRoo
2. selanjutnya jika kita menuju situs itu jika sudah sampai ke situs itu lihat di sebelah kanan, kemudian isi lengkapi data-data sobat sekalian jika sudah kemudian klik Submit

3. Jika sudah kemudian klik Dashboard

4. kemudian pilih create new
5. jika sudah lalu kita klik Instant Poll
6. kemudian isi pada kolom Poll Question isi dengan pertanyaan sobat, sedangkan pada Answer Choice isi dengan pilihan jawaban. jika sudah kemudian klik Save&Priview
7. Jika kita sudah mengklik Save&Priview kemudian selanjutnya kita klih 
8. Selanjutnya pada tahap ini sobat diberikan pilihan untuk menentukan temanya nah jika sudah mengklik salah satu temanya selanjutnya kita klik Customise
9. selanjutnya ikuti klik save as
kemudian isi Nama untuk polling yang telah kita buat bebas namanya karena nama ini tidak mempengaruhi terhadap kesinambungan ntah itu tema atau tulisan polling jika sudah kemudian save
10. Klik Launch your poll!! yang di Iconnya adalah Gambar Roket terbang
11. Terakhir sobat-sobat akan mendapatkan script HTMLnya, script ini bisa sobat tambahkan dalam Gadget atau widget blog sobat-sobat.
Catatan Penting : mungkin jika di pasang di blog sobat ukurannya lebar sekali. oleh karena itu untuk merubahnya sobat cari kode "bg_width":310}biasanya lebar secara default adalah 310px namun sobat bisa menggantinya angka untuk lebarnya sesuai dengan keinginan sobat-sobat sekalian..
nah gimana sobat-sobat sudah mencoba belum. jika ada sobat-sobat sudah mencoba dan bisa tolong kabarin ya dalam di komen ini. hehe :)
Terimakasih sobat karena telah membaca postingan saya yaitu cara membuat polling atau voting di blog dan semoga saja bermanfaat :)
 
 
Sumber: http://novanpeace.blogspot.com/2013/01/cara-membuat-polling-atau-voting-di-blog.html

Rabu, 10 Juli 2013

Cara Setting Widget Label Menjadi Cloud




1. Pergi Ke Tata Letak 
2. Cari Label , Terus Klik Edit
3. Sama-Kan Label Anda Dengan Gambar Di 
Sebelah Ini
4. Simpan

Semoga Bermanfaat!

Cara Membuat Label Cloud Miring Jika Disentuh Mouse

Cara Membuat Label Cloud Miring Jika Disentuh Mouse - Setiap blog tentunya memiliki fasilitas Label widget, pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan jadi bahasan Desain Blog kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya di blog. 
Kurang lebihnya seperti gambar dibawah ini sobat:
  
Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Sobat. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memberikan navigasi yang mudah bagi pembaca blog. Pada Blogger sejak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya adalah Page List and Label Cloud List dengan enable deisgner untuk membuat dynamic menus.

Intinya share kali ini untuk merubah widget label agar lebih cantik. dengan CSS dibawah ini akan mewarnai label sobat menjadi keren dan menarik. Berikut penjelasannya:

::Cara Membuat Label Cloud Miring Jika Disentuh Mouse::

1. Masuk Blogger Dasboard > Template > Edit HTML
2. Tekan Control + F > cari kode ]]></b:skin>
3. Jika sudah ketemu, Copy kode CSS dibawah ini dan Pastekan/letakkan kodenya tepat diatas kode ]]></b:skin>
 /*-----Labels Cloud Style by www.blooger.co.id----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }
5. Save Template

Keterangan !!!
Pastikan label pada blog sudah terpasang dan dibuat Cloud bukan List. LIHAT CARANYA DISINI

Jumat, 05 Juli 2013

Memasang MSC Music Player Di blog (pemutar musik)

Scholovers Blogger | SCM Player ini berfungsi untuk menambakan lagu yang sobat inginkan pada blog sobat , Dengan Adanya SCM Player di blog sobat, pengunjung akan senang mendengarkan lagu yang sobat disediakan di SCM player sambil browsing yang ada di blog sobat. Jadi segerakan sobat memasang SCM Player ini supaya blog sobat jadi rame!!.....

Untuk
sobat yang tetap ingin memasang SCM Player di blog sobat, berikut saya sediakan satu tutorial mudah dan singkat, silangkan disimak.

1.Bukalah alamat Web Ini  SCM Player 
2.Pilih kemudian pada tab Choose Skin, silahkan pilih tampilan skin widget yang nantinya akan ditampilkan pada blog
sobat




3.Lalu klik pada tab Edit Playlist, disini ada dua pilihan yaitu dengan memasukan url lagu yang di pasang manual(Manual Playlist). Atau dari playlist akun youtube(RSS Podcast) sobat. gunakan saja pilihan pertama "Manual Playlist".





Perhatikan pada gambar yang saya lingkari merah, disitu terterah contoh untuk memasukan lagu yang sobat inginkan, silahkan sobat cari situs yang menyediakan lagu atau bisa sobatupload sendiri ataupun mencari di youtube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video)

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan
sobat. Atau seperti pengaturan saya pada gambar dibawah ini



Setelah itu klik tombol Done, lalu copy script yang diberikan.


Langkah terakhir, masuk ke akun blogger
sobat, pilih tata letak. Kemudian kliktambah gadget pilih gadget HTML/Javascript. Lalu paste kan script tadi. klik Simpan.

Sekarang blog
sobat sudah terpasang lagu, setiap pengunjung yang datang akan disambut dengan lagu yang sobat pasang  pastikan pada tab Edit Playlist, sobat memasukan url yang benar. Selamat mencoba.... :D

Lihat Cara Mendapatkan URL lagu Disini

Cara Mendapatkan Url Lagu

Scholovers BLogger | Kini saya akan share Cara mendapatkan URL lagu,. Nah, dibawah ini adalah langkah-langkahnya. Silahkan Sobat simak dengan baik dan tentunya tetap teliti agar tidak terjadi kesalahan.

1. Kunjungi http://www.mboxdrive.com/
2. Klik tulisan "enter"
3. Klik "connect" untuk menggunakan aplikasi tersebut. Izinkan aplikasi tersebut untuk tersambung pada akun facebook Sobat.
4. Setelah selesai, upload lagu yang ingin Sobat dapatkan url'nya dengan cara klik "add files"
5. Selanjutnya klik "start upload" untuk memulai proses pengambilan url
6. Tunggu proses upload 5-10 menit tergantung besar ukuran file lagunya
7. Setelah proses upload selesai, akan muncul kode seperti ini

Ambil kode yang Brilliana beri kotak, itulah url lagu yang sobat upload tadi. Sekarang Sobat bisa menggunakan url tersebut untuk dipasang pada blog Sobat.

NB : INGAT! Url hanya berformat atau berakhiran .mp3 atau .swf saja. Bukan .html

Cara Memasukkan Musik Di Blog

Scholovers Blogger | baru-baru ini banyak sekali blog yang menyediakan fasilitas music. Namun seringkali fasilitas tersebut justru memberatkan loading blog. Tentu hal ini membuat tidak nyaman para pengunjung yang terpaksa menunggu lama dikarenakan hanya untuk memuat fasilitas tersebut. So, Brilliana akan memberikan beberapa langkah untuk memasang music/lagu di blog tanpa membuat beban pada loading blog kita.

1. Masuk ke dashboard -> template -> edit html
2. Cari kode </body> dengan bantuan ctrl + f
3. Jika sudah ketemu, copy script mp3 berikut diatas kode </body>

<EMBED ALIGN='CENTER' AUTOSTART='TRUE' HEIGHT='0' LOOP='TRUE' SRC='http://xdieka-civilx.xp_3.biz/swf/xxx.swf' WIDTH='0'/>

4. Tulisan yang berwarna merah adalah url lagu. Kalian bisa menggantinya dengan url lagu yang kalian inginkan.
   NB: Url lagu harus diakhiri dengan .mp3 atau .swf
5. Klik pratinjau terlebih dahulu untuk memastikan lagu sudah terpasang benar atau tidak
6. Jika lagu sudah terdengar, klik "save template"

Untuk url lagu sobat bisa mendapatkannya disini.

Jumat, 28 Juni 2013

Cara Membuat Tombol Like to Download di Blog

“Like to-Download” adalah salah satu “jembatan” bagi Anda untuk mendapatkan like sebelum seseorang mendownload dari sebuah link yang Anda sediakan. Katakanlah, jika Anda memiliki fasilitas gratis bagi pengunjung situs web Anda, Anda dapat meminta mereka untuk mengklik tombol seperti di bawah ini sebelum mereka dapat melakukan download apapun. Link untuk mendownload hanya akan muncul setelah seseorang mengklik ‘Like’.
like-download
Untuk membuat “gate” ini silakan masuk ke aplikasi Facebook Like to Download, lantas gulir ke bawah dan isi saja formulir sederhana dengan alamat Facebook Page Anda atau target alamat website, kemudian memberikan link untuk men-download, mengatur lebar dan warna yang disukai dan kemudian menekan tombol ‘‘Create Your Like Gate Now“.
like-gate-form
Setelah itu, Anda akan melihat preview dan kodenya. Salin kode embed dan tempel ke website atau blog.
like-gate-code
Setelah menambahkan kode ke situs Anda, pengunjung Anda akan melihat instruksi untuk me-”Like” sebelum download bisa dilakukan, dan setelah mereka mengklik “Like”, maka tombol download akan muncul.
like-download-result

Mudah bukan?
Semoga bermanfaat.
sumber: hongkiat.com
CATATAN: CARA INI HANYA BERLAKU UNTUK BLOG YANG BISA MEMASANG JAVASCRIPT.

Selasa, 25 Juni 2013

Cara Memasang File Swf Di Blog

File Swf
file swfFile swf sebenarnya adalah animasi yang di buat khusus untuk web site karena itu ukuranya sangat kecil apabila di bandingan dengan format video lain. Tapi untuk saat ini di Indonesia khususnya, kecepatan internet rata-rata sangat rendah apabila di bandingan dengan negara lain. Jadi para blogger lebih suka tidak menggunakan file swf ini, katanya dapat memperlambat loading.

Kalau menurut saya kecepatan internet di indonesia tidak lama lagi juga akan meningkat, mengingat pengguna internet di indonesia yang bertambah. Maka dari itu swf akan sangat di perlukan karena ukuranya yang kecil bahkan beberapa file gambar seperti png* memiliki ukuran yang biasanya lebih besar deripada animasi sederhana swf*.

Disini saya akan memberikan cara memasang file berformat swf* ke blog. Yang harus anda punya adalah file berformat swf* anda dapat mendownloadnya atau membuat sendiri.

Hal Pertama yang harus di lakukan adalah upload file swf anda. di sini saya akan memberikan cara hosting dengan www.ximg.us hanya saja meksimal file yang di upload hanya sampai 300kb. tapi tidak begitu masalah karena swf biasanya berukuran sangat kecil.
1. buka ximg.us
2. Nah akan muncul tampilan seperti di bawah ini

tampilan awal ximg

3. Pilih browse, kemudian pilih file swf yang ada di komputer anda kemudian akan ada lokasi file anda dengan tulisan warna merah.
browe file di ximg  
4. Masukan email anda jika anda pikir perlu (optional) klik tombol upload yang warnanya hijau. kemudian tunggu file di upload sebentar dan akan muncul seperti pada gambar berikut.
link hasil upload ximg

5. Itulah link file swf anda, langsung copy ke notepad dan simpanlah yang aman karena untuk menemukan file yang linknya hilang agak susah.

Setelah mengupload file swf kita langsung saja menuju blogger.com

1. Login ke Blog anda terlebih dahulu
2. Masuk ke Tata letak
3. Tambahkan Sebuah Gadget atau Widget
4. Pilih Widget HTML/Javascript
5. Masukan script sebagai berikut
<embed src="http://ximg.us/upload/1357007890.swf" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

Kode yang berwarna merah adalah link file swf anda. jika anda bingung mengenai ukuran panjang dan lebar. anda dapat memasukan width"..." dan high="..." setelah link file swf anda. jika tidak ada perintah ukuran biasanya akan menempatkan sendiri.
6. SAVE

setelah itu anda dapat langsung melihatnya di blog anda. semoga bermanfaat

Senin, 24 Juni 2013

Membuat Artikel Dengan Teknik Blogazine Di Blog

Menulis Artikel Dengan Teknik Blogazine
Pada kesempatan kali ini saya akan membahas sedikit menegenai blogazine. Mungkin kalian sudah tahu apa itu blogazine??  blogazine merupakan tampilan kustom pada artikel yang kita tulis, sebenernya ini bukan hanya pada tulisan, tetapi banyak juga template yang bergaya ala blogazine dengan memadukan content dan widget..
Saya sendiri belum begitu paham tentang blogazine, tetapi dengan apa yang saya lihat ketika bogwalking dibeberapa blog yang memang sudah menerapkan teknik blogazine yaitu hanya menggunakan css dan html untuk menerapkanya..
Contoh simpelnya seperti ini:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum abbr dolor strong sit amet, underline consectetuer italic adipiscing elit, sed emphasis diam nonummy bold nibh euismod another example code tincidunt ut laoreet this is a link dolore magna aliquam erat volutpat.

saya membuat contoh diatas hanya dengan menggunakan kode seperti ini
<div style="border-left: 5px solid darkgreen; color: #860000; padding: 2px 2px 7px 2px; text-align: right;">
itu merupakan contoh simpelnya.

Untuk contoh yang lebih keren lagi seperti menulis atikel dengan dua kolom yaaaa mirip-mirip seperti di koran gitu..
Contohnya seperti berikut ini:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.


Untuk contoh yang kedua dengan tulisan artikel dua kolom, saya menggunakan CSS dan HTML, codenya seperti berikut ini:
<style>

#kolom { width:100%; margin:0 auto }

#kolom1 { width:50%; float:left; padding-right:5px; color:GoldenRod; text-align:left }

#kolom2 { width:50%; float:right; padding-left:5px; color:MediumOrchid; text-align:left }

</style>

<div id="kolom">

<div id="kolom1">

 isi artikel utuk kolom pertama

</div>



<div id="kolom2">

isi artikel untuk kolom kedua

</div>

</div>
untuk menreapkan teknik blogazine ini tidaklah terlalu sulit, kita bisa berkreasi sendiri ketika menulis artikel seperti menerapkan teknik blogazine dengan 2 kolom bahkan sampai 3 kolom, dan yang lebih keren lagi bisa meberikan background untuk masing-masing kolom. Ada contoh yang lebih jauh lagi, mungkin bisa memberikan Dropcap atau huruf besar diawal artikel yang kita tulis.
Contoh seperti ini

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Pada contoh yang menggunakan dropcap atau huruf yang besar pada awal posting saya hanya menambahkan kode tag span  diawal artikel dan mengurung huruf awalnya, contoh seperti berikut ini:
<span style="color: black; float: left; font-family: arial; font-size: 50px; line-height: 30px; padding-right: 5px; padding-top: 5px;">L<span>
huruf L merupakan huruf awal kalimat pada artikel yang kita buat.

Itulah beberapa contoh teknik blogazine yang bisa kita terapkan ketiak menulis artikel, teknik blogazine ini sangat cocok untuk blog yang memiliki tema seperti cerita atau berita yang memeiliki kalimat atau paragraf yang panjang.
Itulah sedikit pembahasan saya mengenai blogazine, Semoga bermanfaat untuk kita semua.
"Mulailah untuk meningkatkan kreatifitas kita !"
Diberdayakan oleh Blogger.