sponsor

sponsor

Slider

Materi dan Tutorial Khusus Untuk Membuat Situs Web Dan Blog Bagi Pemula Hingga Tingkat Mahir. Gambar tema oleh kelvinjay. Diberdayakan oleh Blogger.

Posts

Recent Tube

Business

Technology

Life & style

Games

Sports

Fashion

Cara Mudah Memasang Widget Lagu Di Blog

Cara Mudah Memasang Widget Lagu Di Blog

Cara Mudah Memasang Widget Lagu Di Blog - Walau widget ini termaksud Widget Yang Sebaiknya Tidak Ada Di Blog, namun setelah saya pikir-pikir widget ini berguna jika blog tersebut mempublikasikan artikel tentang sebuah band (ex: blog mengenai band avenged sevenfold, masukanlah lagu avenged sevenfold dari album pertama sampai yang terbaru).

Music! My Life


Cara Mudah Memasang Widget Lagu Di Blog:

1. Silahkan sobat kunjungi SCM Music Player

2. Pilih tampilan mana yang akan sobat pasang di blog lalu tekan tombol


Membuat music 1
Keterangan: Kolom merah untuk mengatur tampilannya


3. Masukkan:
  1. Nama Band
  2. Judul lagu
  3. Link URL: Bisa dari: Soundcloud atau Youtube (Jika dari youtube, saya sarankan ambil link-nya dari official music video karena terkadang url di youtube ada yang ga keluar suaranya).
Membuat music 2

4. Atur sesuai keinginan sobat (Auto Play harus sobat centang) lalu tekan tombol

Membuat music 3
Keterangan:
  • Auto Play: Agar lagunya bisa dimainkan (mulai dengan otomatis)
  • Shuffle Playback: Memutar lagu secara acak
  • Default Volume: Volume suara
  • Repeat Mode: Terbagi 3:
- Play Playlist Once: Hanya memutar 1 lagu
- Repeat Playlist: Mengulang lagu
- Repeat Item: Mengulang lagu setelah semua lagu selesai dimainkan
  • Placement of Player Bar: Posisi scmplayer
  • Show Playlist by Default: Menampilkan daftar lagu di samping kanan

5. Copy kode tulisan yang block warna biru

Membuat music 4

6. Lalu sobat pergi ke:

  • Blogger sobat => Template => Edit HTML
  • Cari kode <body> atau <body (Tekan CTRL+F agar mudah)
  • Paste tulisan yang diblock warna biru tadi (yang dapat di scmplayer) lalu pasang DIBAWAH <body> atau <body
  • Prantijau terlebih dahulu. Jika tidak error, simpan
7. Selesai

Cara Baru Menambah Widget Di Atas Header Blog

Menambah Widget Di Atas Header Blog

Menambah Widget Di Atas Header Blog - Menambah kolom widget diatas header banyak manfaatnya, seperti: bisa memasang menu drop down, widget lainnya atau mungkin sobat pengguna template bawaan blog yang ingin mempercantik tampilan judul blognya seperti blog ini. Bagaimana sob? Tertarik? Silahkan di simak artikel Membuat Header Blog Ber-link. Dan silahkan di simak artikel yang bejudul cara Menambah Widget Di Atas Header Blog.

Widget Blog

Menambah Widget Di Atas Header Blog:

1. Login ke Blogger --> Template --> Edit HTML

2. Cari kode seperti kode di bawah ini (gunakan CTRL+F supaya mudah):

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

3. Setelah ketemu, lihat kode yang berwarna:
  • maxwidgets=’1’ ganti menjadi maxwidgets='2’ 
  • showaddelement='no'> ganti menjadi showaddelement='yes'>
4. Selesai

Mudah bukan caranya? Begitulah cara Menambah Widget Di Atas Header Blog yang bisa saya berikan tutorialnya untuk sobat.

Cara Membuat Satu Kolom Widget Diatas Header

Cara Membuat Satu Kolom Widget Diatas Header

Cara Membuat Satu Kolom Widget Diatas Header seperti yang terlihat pada gambar dibawah (panah merah) telah saya buat khusus untuk anda dengan cara yang mudah, anda bisa membuat satu kolom widget diatas header blog anda dengan mengikuti panduan cara membuat satu kolom widget diatas header. Dengan adanya tambahan satu kolom widget diatas header akan memberikan tambahan ruang dalam blog anda yang nantinya bisa anda gunakan untuk memasukkan konten-konten diluar topik blog anda atau dari dalam topik blog anda sendiri. Apalagi jika di area header blog ditambahkan lagi dua kolom atau tiga kolom widget maka anda akan lebih leluasa dalam memasukkan atau memasang konten-konten yang anda sukai.

Cara Membuat Satu Kolom Widget Diatas Header

Berikut Cara Membuat Satu Kolom Widget Diatas Header
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari Kode ]]></b:skin>
  4. Letakkan kode berikut diatas kode ]]></b:skin>
    #oneupperheader{margin:10px 0;padding:1%;width:100%;}
  5. Cari kode berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  6. Letakkan kode berikut ini tepat dibawah <div id='header-wrapper'>
    <b:section class='header' id='oneupperheader' preferred='yes'/>
    Sehingga hasilnya seperti berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='oneupperheader' preferred='yes'/>
    <b:section class='header' id='header' maxwidget="1" showaddelement="no">
    <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
    </b:section>
    </div>
  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Sekian, jika ada ide lain dalam membuat satu kolom widget diatas header, mari kita diskusikan bersama dengan meninggalkan komentar di artikel ini Cara Membuat Satu Kolom Widget Diatas Header

Cara Menambah 3 Kolom Otomatis Sama Besar di Bawah Header Blog

Cara Menambah 3 Kolom Otomatis Sama Ukurannya di Bawah Header Blog

Cara Menambah Kolom di Bawah Header Blog - Cara memberi kolom tambahan di bawah header blog atau cara menyisipkan kolom di bawah header blog atau cara membuat 3 kolom di bawah header. Artikel kali merupakan salah satu artikel yang berkaitan yaitu cara menambah kolom footer blog dan kali ini kita akan membahas sedikit cara memodifikasi blog yaitu Cara Membuat 3 Kolom Di Bawah Header. Biasanya 3 kolom ini digunakan sebagai space iklan. Selain digunakan sebagai space iklan, 3 kolom ini juga bisa digunakan sebagai daftar artikel, daftar link dan sebagainya. Nah langsung aja yuk kita cari tau Cara Membuat atau Menambah 3 Kolom Di Bawah Header - Cara Memasang Kolom Di Bawah Header :
  1. Masuk ke akun bloggger sobat. 
  2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
  3. Sekarang Cari kode ]]></b:skin>
  4. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
  5. <div id="box3" style="float: left; margin: 0; text-align: left; width: 35%;"> <b:section class="box-widget" id="col3" preferred="yes" style="float: left;"> </b:section></div>
  6. Selanjutnya Cari kode <div id='main-wrapper'> atau <div id="main-outer">
  7. Copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'> atau <div id="main-outer">

  8. <div id='box-kolom-widget'> <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/> </div> <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/> </div> <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'> <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/> </div> <div style='clear:both;'/> </div>
  9. Langkah terakhir klik Tombol Simpan Template.
Selesai dan lihat hasilnya.

Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout. Semoga bermanfaat artikel cara membuat 3 kolom di bawah header ini, terima kasih.

Cara Membuat Satu Kolom Widget Dibawah Postingan

Cara Membuat Satu Kolom Widget Dibawah Postingan

Cara Membuat Satu Kolom Widget Dibawah Postingan sama halnya dengan membuat satu kolom diatas postingan, hanya beda tempat saja dan tentunya beda penempatan kode html. Membuat satu kolom widget dibawah postingan menurut saya lebih banyak keuntungannya jika meletakkannya tepat berada dibawah artike terkait artikel blog karena pada satu kolom tambahan tersebut bisa terpasang iklan (mis; AdSense) yang bisa 'menjebak' pengunjung blog untuk melakukan klik terhadap link iklan yang dikira link artikel blog, tentunya dengan sedikit trik agar mereka bisa mengklik secara valid! Membuat satu kolom widget dibawah postingan bisa anda buat dengan mengikuti beberapa cara sederhana berikut ini
Cara Membuat Satu Kolom Widget Dibawah Postingan

Berikut Cara Membuat Satu Kolom Widget Dibawah Postingan
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode berikut ini
    #main-wrapper {float:left;margin-right:10px;overflow:hidden;width:507px;word-wrap:break-word;}
  4. Letakkan kode berikut tepat dibawah kode no.3
    #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;}
    Atau jika anda tidak menemukan kode #main-wrapper karena perbedaan kode pada template, cari saja kode ]]></b:skin> dan letakkan kode #oneunderposting {background:#ffffff;width:100%;margin:0 0 0.5em;padding:0.5em;} tepat berada diatas kode ]]></b:skin>

  5. Selanjutnya cari kode berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    </div>

  6. Letakkan kode berikut sebelum kode penutup pada no.5
    <b:section class='main' id='oneunderposting' showaddelement='yes'/>
    Sehingga hasilnya akan terlihat seperti berikut ini
    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
    </b:section>
    <b:section class='main' id='oneunderposting' showaddelement='yes'/>
    </div>

  7. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasilnya di Tata Letak

  8. Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda
Sekian, jika ada permasalahan dalam membuat satu kolom widget dibawah postingan, silahkan tinggalkan komentar anda untuk artikel ini, Cara Membuat Satu Kolom Widget Dibawah Postingan

cara menambah 1 kolom gadget dibawah header

cara menambah 1 kolom gadget dibawah header


Hampir 1 bulan berlalu tidak melakukan apa-apa pada blog ini, karena  kebanyakan kerjaan terlebih lagi malas untuk update. 
Lagian koneksi internet sekarang ini ngak ada yang beres saya perhatikan, kelihatan aja menggiurkan tapi hasilnya ngak seperti dibayangkan.

Terus apalagi posting blog  yang kebanyakan sekarang ini ,
itu-itu aja melulu, jadi merasa  malas aja update :) 
sok tau ya?.   . 
Yah... walau saya tidak mengkudetakan blog ini . Ahirnya saya memutusisasikan untuk menuliskan artikel ini, meskipun Kontroversi hati sebenarnya lagi malas.
1 kolom
Baiklah daripada tambah ngauur tulisanya , langsung aja ke topiknya.. Membuat atau menambah satu kolom widged dibawah header. Tapi kalo saya menyebutkan ini yaitu meletakkan widged kolom dibawah menu header blog kita

Gunanya banyak , antara lain : Kalau saya menggunkanya sebagai penempatan iklan baik berupa text maupun gambar lainya, yang penting pada intinya bisa bermanfaat.

Langkah pertama , Login  pada akun blog anda, dan pada dashbor pilih template dan Edit HTML.
Kemudian letakkan kode dibawah ini diatas ]]></b:skin>

#under_header{float:left;width:100%;}  Kemudian  cari kode seperti dibawah ini
<div id='header-wrapper'> <b:section class='header'id='header'maxwidget="1'showaddelement="no"> <b:widget id='header1'locked='true'title='nama blog anda(header)' type='header'/> </b:section> </div>
Kemudian copy dan pastekan kode dibawah ini tepat dibawah kode yang diatas
<div id='under_header'> <b:section class='header' id='underheader' preferred='yes'/> </div>
Jika sudah.Simpan template anda dan kembali ke tata letak blog anda dan lihat perubahanya.

Masih ada trik lain untuk membuat satu kolom widged dibawah header maupun menu, mungkin untuk acara selanjutnya dituliskan lagi :).


Description Judul: cara menambah 1 kolom gadget dibawah header
Rating: 4.5
Reviewer: Supriadi saragih

Cara membuat 3 kolom widget di atas Footer pada blog

Cara membuat 3 kolom widget di atas Footer pada blog

widget 3 kolom footer

Assalamu'alaikum.wr.wb. Salam Sejahtera.

Bagaimana kabar sahabat blogger semua, amin saya punya kabar baik disini :). Alhamdulillah saya dapat merampungkan postingan kali ini, setelah saya kemarin meriview Mau Bikin Website + Hosting Murah AbizZ? Ke Rajawebhost.com aja! .
Kali ini saya akan berbagi mengenai cara menambah 3 kolom widget di atas Footer pada blog kita, yang mungkin belum ada Footernya, seperti pada templete blog saya ini. oke langsung saja.
  1. Kita masuk ke akun Blogger kita
  2. Klik Rancangan, kemudian Edit html 'Untuk menghindari kerusakan pada templete kita pada saat mengedit, centang Expand Templete Widget'
  3. Tekan ctrl+f untuk pencarian cepat, dan ketikan kode ]]></b:skin>
  4. Kemudian copy dan paste kode dibawah ini tepat di atas ]]></b:skin>
#tiga-kotak-bawah {
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
} 

   5. Setelah itu cari kode <div id='footer'>
   6. Kita lanjut copy kode dibawah ini, di atas kode <div id='footer'>

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

  7. Terakhir kita pertinjau dulu untuk memastikan tiada kesalahan dalam pengeditan kita, kalau tidak ada masalah, klkik Simpan templete.

Cukuplah sekian artikel saya bagaimana Cara mnambah 3 kolom widget di atas Footer pada blog, mungkin untuk para blogger sudah tidak asing lagi dengan postingan saya ini. Ya mudah*an bermanfaat bagi kita semua dalam kita ngeblog :). terima kasih banyak karena sudah membaca artikel dan berkunjung di gubug saya. Jangan lupa tinggalkan komentar anda yang membangun untuk pembenahan blog saya.
Wassalamu'alaikum wr.wb. Salam.

Cara Membuat Satu Kolom Widget Diatas Footer

Cara Membuat Satu Kolom Widget Diatas Footer

Cara Membuat Satu Kolom Widget Diatas Footer adalah juga sama seperti membuat satu kolom dibawah header atau diatas header dan tentunya lebih mudah dalam membuatnya. Kenapa saya mengatakan sama dalam membuat satu kolom widget diatas footer dengan diatas header? karena sama-sama dalam satu template dengan lebar template yang sama :) dan yang membedakan hanya pada tata letak saja. Silahkan anda bandingkan tata letak pada artikel yang telah saya jelaskan sebelumnya (hasil membuat satu kolom) dengan hasil setelah anda menerapkan artikel ini, cara membuat satu kolom diatas footer

Cara Membuat Satu Kolom Widget Diatas Footer

Berikut Cara Membuat Satu Kolom Widget Diatas Footer
  1. Masuk ke akun blogger anda
  2. Klik menu Template >> Edit Html >> tekan Ctrl+F pada keyboard anda
  3. Cari kode ]]></b:skin>
  4. Salin kode berikut tepat diatas kode ]]></b:skin>
  5. #oneupperfooter{margin:10px 0;padding:2px;width:100%;}
  6. Cari kode berikut ini <div id='footer'>
  7. Letakkan kode berikut ini tepat dibawah <div id='footer'>
    <b:section class='footer' id='oneupperfooter' preferred='yes'/>
    Sehingga hasilnya seperti berikut ini
    <div id='footer'>
    <b:section class='footer' id='oneupperfooter' preferred='yes'/>
  8. Klik Pratinjau terlebih dahulu untuk melihat hasilnya, jika tidak ada error silahkan Simpan Template anda dan lihat hasil di menu Tata Letak
Penting: Setiap template memiliki kode-kode css atau id html yang berbeda jadi sesuaikan setiap kode yang anda miliki dengan setiap panduan yang anda dapatkan atau sesuaikan setiap kode panduan dengan kode yang ada ditemplate anda

Okey, semoga artikel cara membuat satu kolom widget diatas footer ini memberikan manfaat dan mudah dibuat untuk dipasang diblog anda. Terimakasih, silahkan tinggalkan komentar anda jika ada permasalahan dalam membuat satu kolom widget diatas footer

Sumber: Panduan Template Blog