Ganti backgroud- mu agar nggak bosan

 Pembahasan kali ini tentang Cara Mengganti Background Blog dengan Gambar, dan Berikut ini langkah-langkah cara mengatur background gambar berada pada tempatnya di blogspot.

Login ke blogger

Rancangan

Edit HTML

Disini kita mengambil contoh pada background body di tamplate blog kita, cari kode body {

Nah di sana terdapat kode background,

body {

  font: $(body.font);

  color: $(body.text.color);

  background: $(body.background);

}

Setiap blog rada berbeda sih Backgroundnya, nah untuk mengganti backborund misal dengan background / gambar ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHR9EptyjNiZmPwchPrHn2FZiqCqCBebPdA6stCwR7gnfM14pgJp8fO6pQyiQUbMUL6nR8EjV8lTgb_e68q6IOCKiiaoZaurV6bClCY2__RAfZ7K1liqu7TLjoWO6Gmu15nKggZZzkCqI/s1600/splats.jpg

Maka kalian cukup menambahkan url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHR9EptyjNiZmPwchPrHn2FZiqCqCBebPdA6stCwR7gnfM14pgJp8fO6pQyiQUbMUL6nR8EjV8lTgb_e68q6IOCKiiaoZaurV6bClCY2__RAfZ7K1liqu7TLjoWO6Gmu15nKggZZzkCqI/s1600/splats.jpg) repeat-x; pada background tersebut.

Jadi :

body {

  font: $(body.font);

  color: $(body.text.color);

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxHR9EptyjNiZmPwchPrHn2FZiqCqCBebPdA6stCwR7gnfM14pgJp8fO6pQyiQUbMUL6nR8EjV8lTgb_e68q6IOCKiiaoZaurV6bClCY2__RAfZ7K1liqu7TLjoWO6Gmu15nKggZZzkCqI/s1600/splats.jpg) repeat-x top left fixed;

}

Tips yang lain, Background kamu juga bisa tetap walaupun scroll mouse kamu gerakkan ke atas atau kebawah. Tinggal kamu ganti repeat-x; menjadi repeat-x top left fixed;

Atau yang paling saya suka adalah menggunakan gambar kecil namun bisa menjadi besar dan tetap. Yakni kamu cari dulu gambar kecil, setelah itu seperti biasa, tinggal kamu rubahrepeat-x; menjadi repeat scroll 0 0;

Sumber dari mana-mana.

Bikin Label Nyentrik Ala Blog

Untuk Melakukan Editing, Teman teman mesti Masuk Ke EditHTML. kemudian klik Expand Widget Templates, jika bersedia silahkan download dulu templatenya, khawatir terjadi masalah :D,  nah





Setelah Masuk Silahkan deh Cari Kode berikut Ini:
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>


Silahkan Edit/Tambahkan Huruf atau Angka, Gambar Juga Bisa Lho...pada bagian yang berwarna merah dan biru:
Sekedar Informasi,
kode  <data:label.name/> merupakan Nama Label yang Akan Tampil dan
kode , (koma) merupakan pembatas Antar Label jika Postingan kita masuk ke dalam beberapa Label....
Berikut Contoh yang di lakukan Dunia blogger:

Kode <data:label.name/> saya tambeh menjadi [ <data:label.name/> ]
dan kode koma saya ganti dengan kode gambar yaitu <img align='absmiddle' src='http://i261.photobucket.com/albums/ii65/adephotobucket/right-arrow-off.gif'/> dan Keseluruhan kode menjadi:

 <a expr:href='data:label.url' rel='tag'>[ <data:label.name/> ]</a><b:if cond='data:label.isLast != &quot;true&quot;'><img align='absmiddle' src='http://i261.photobucket.com/albums/ii65/adephotobucket/right-arrow-off.gif'/></b:if>

Pastikan jika ingin menggunakan Gambar menambahkan kode align='absmiddle' supaya gambar sejajar/lurus dengan label :)

Hasilnya Seperti Gambar di Bawah ini:

Hasil modifikasi Label

Otomatis buka link di Tab Baru

Semua link aktif di blog kita akan membuka tab baru secara otomatis.

Untuk menerapkan ini sangat mudah 3 detik pun jadi. :) kita hanya tinggal menaruh kode <base target='_blank' /> di bawah kode </head>

Berikut langkah-langkahnya:

1.  Login Blogger > Rancangan > Edit HTL

2.  Cari kode   </head>

3.  Kemudian tambahkan kode berikut ini di bawahnya

<base target='_blank' />

Sehingga keseluruhan kodenya akan tampak seperti berikut:

</head>

<base target='_blank' />

4.  Save template

Mudah bukan wek....

Moggo di coba ....@#$%

Modifikasi Linkwithin

Modifikasi Posting Linkwithin anda

Sebelumnya saya mengucapkan terima kasih kepada rekan blogger Klik Munadi yang telah memberikan izin untuk mengcopy dan menerbitkan postingan ini di blog saya. Langsung saja sobat baca langkah-langkahnya :  

Bila kita memasang widget LinkWithin pada blog, maka widget ini selain muncul di halaman posting, juga akan tampil di beranda atau home page di bawah posting. Widget yang muncul di beranda ini akan membuat waktu loading home page blog menjadi lebih lama. Nah, agar loading home page menjadi lebih ringan, kita buat saja widget LinkWithin ini tampil atau muncul hanya di halaman posting. Bagaimana caranya? Silakan simak langkah-langkah untuk hide widget LinkWithin di home page berikut ini. Namun sebelumnya, pastikan Anda telah memasang widget LinkWithin pada blog Anda.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template. Hal ini dilakukan untuk berjaga-jaga kalau nanti ada kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template ke seperti sebelumnya.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti di bawah ini. Gunakan Ctrl + F, kemudian masukkan kata kunci LinkWithin sebagai kata kunci utamanya.

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>

6. Tambahkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> setelah kode<b:includable id='main'> dan </b:if> sebelum </b:includable> sehingga hasilnya menjadi seperti di bawah ini.

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><data:content/></b:if></b:includable>
</b:widget>

7. Klik tombol SIMPAN TEMPLATE.


Terimakasih Salam ngeblog.

Bikin Komentar Ala Facebook

 Banyak orang bingung cara pasang komentar ala facebook di bloger. sebenarnya amat mudah kok. setelah aku cari kemana - mana informasi banyak yang membingungkan. kenapa ya? kalau udah tau tulis aja ya yang sejelas -jelasnya. ternyata mudah aja kok. cuman cari informasinya yang dipercaya itu susah itulah indonesia. Pesan untuk para bloger. copass itu bagus.... yang saru tulisan kita  saru kalau informasi bikin orang bingung. selamat ngeblog. kawan. ini gua baru hunting linkwithin yang dimodifikasi susah amat ya ..... 


caranya harus punya
App ID: 33037147xxxxxx
App Secret: 8e50cdb8ed530b8xxxxxxxxxx(reset)
kalau belum bikin lewat facebook developer


<data:post.body/> (untuk setiap template berbeda-beda posisi code itu , untuk yang telah memasang read more silahkan cari kode seperti itu yang kedua)

Pasang script berikut ini dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: &#39;XXXXXX&#39;, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(&#39;script&#39;); e.async = true;
e.src = document.location.protocol +
&#39;//connect.facebook.net/en_US/all.js&#39;;
e.async = true;
document.getElementById(&#39;fb-root&#39;).appendChild(e);
}());
</script>
<fb:comments/>
</b:if>
<b> by <a href='http://juntenxblog.blogspot.com/' target='_blank' title='Facebook Comment'>Facebook Comment </a></b>

Ganti tanda xxx  dengan App ID/API Key yang telah anda buat sebelumnya , lalu tekan simpan dan lihat hasilnya.

Cukup mudah bukan untuk pasang kotak komentar facebook pada blog , silahkan bila anda masih kebingungan dengan cara buat kotak komentar facebook maupun cara pasang komentar facebook untuk berkomentar.

Daftar isi per- Label Scroll Box

Untuk membuat daftar isi per label dengan scroll box di sidebar blog, kita dapat menggunakan dua cara. Cara yang pertama adalah dengan membuatnya secara manual. Sedangkan cara yang kedua kita bisa menggunakan sebuah script. Setiap cara memiliki kelebihan dan kekurangannya masing-masing.

Bila kita membuat daftar isi secara manual, maka kita harus memasukkan link dari judul-judul posting satu per satu. Hal ini akan membutuhkan banyak waktu untuk mengerjakannya jika link judul posting yang harus dimasukkan sudah cukup banyak. Namun, dengan cara manual ini tidak begitu memperlambat loading blog.

Sedangkan jika kita menggunakan sebuah script, maka waktu yang diperlukan akan lebih singkat. Namun, pemasangan script ini berpotensi memperlambat loading blog. Script ini saya dapat dari Blog Viky dengan perubahan di bagian scroll box-nya. Dengan script ini kita dapat membuat daftar isi berdasarkan satu label saja atau beberapa label sekaligus. Script ini akan menempatkan posting terbaru pada urutan teratas.

Untuk membuat daftar isi berdasarkan satu label tertentu saja, silakan perhatikan langkah-langkahnya di bawah ini.

1. Setelah Sobat masuk di Blogger, klik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilih HTML/JavaScript.

2. Berikan judul, lalu copy kode di bawah ini dan paste di Konten.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>

<ol>
<script src="http://www.yuddash.blogspot.com/feeds/posts/default/-/Jejaring%20Sosial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>
width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
height:100px; menunjukkan tinggi scroll box setinggi 100 piksel. Silakan diganti angkanya untuk mengubah tingginya.
border:1px solid #e6e4e3; menunjukkan garis keliling (border) scroll box bergaya solid setebal 1 piksel berwarna #e6e4e3. Silakan disesuaikan dengan keadaan template Sobat.
<ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
Ganti klikmunadi.blogspot.com dengan alamat blog Sobat.
Ganti Jejaring%20Sosial dengan label yang Sobat inginkan. Penulisan label harus sesuai dengan yang tertera di blog. Perhatikan huruf besar-kecilnya dan spasi diganti dengan %20.
3. Klik tombol SIMPAN.

4. Pindahkan elemen tadi ke tempat yang Sobat inginkan.

5. Klik tombol SIMPAN.

Script di atas hasilnya akan menjadi seperti di bawah ini.


Melihat Kiriman di Facebook Page Melalui m.facebook.com
Cara Berhenti Like Halaman Facebook
Cara Menghapus Sebuah Halaman Facebook
Cara Buat Facebook Page dan Pasang Like Box di Blog
Cara Membuat Akun di SalingSapa.com
Cara Membuat Akun Twitter
Cara Membuat Akun Facebook
Salingsapa.com, Situs Jejaring Sosial Islami

Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Alexa dan Link maka script-nya akan menjadi seperti di bawah ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>


<h3>Alexa</h3>
<ol>
<script src="http://www. yuddash.blogspot.com/feeds/posts/default/-/Alexa?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>


<h3>Link</h3>
<ol>
<script src="http://www. yuddash.blogspot.com /feeds/posts/default/-/Link?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

Hasilnya menjadi seperti di bawah ini.


Alexa


Tiga Tiga Satu Satu Satu Satu
Cara Daftar dan Pasang Meta Tag Alexa di Blog
Cara Memasang Alexa Site Stats Button di Blogger
Meraih Peringkat Alexa 6 Digit
Cara Mengatur Blog Menjadi Homepage
Tips Meningkatkan Peringkat Alexa Sebuah Blog
Cara Memasang Alexa Toolbar di Browser Firefox
Seputar Peringkat Alexa
Cara Pasang Alexa Traffic Rank Button
Link


Cara Membuat Link Membesar Saat Disorot Mouse
Cara Membuat Link "klik di sini" di Blogger
Cara Membuat Link Text Menjadi Huruf Miring Saat Disorot Mouse
Cara Membuat Link di Gmail
Cara Membuat Tombol Link
Cara Membuat Semua Link Membuka di Tab Baru
Cara Menghilangkan Garis Bawah pada Link di Blogger
Cara Membuat Link Berkedip-kedip
Cara Membuat Link yang Membuka di Dua Tab Baru
Cara Membuat Link yang Membuka di Tab Baru
Cara Membuat Link Banner Membuka Sendiri Saat Tersentuh Kursor Mouse
Cara Membuat Link di Blogger

Cara di atas merupakan cara yang menggunakan script. Jika Sobat tertarik untuk menggunakan cara manual seperti yang saya terapkan pada blog ini, silakan simak langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan Sobat memasang widget daftar isi karya Abu Farhan seperti yang terpasang di blog ini.

1. Buka daftar isi blog Sobat.

2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Jejaring Sosial juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. (Saya menggunakan Firefox 5.0)



3. Copy semua teks yang muncul di jendela Sumber DOM yang Dipilih.

4. Masuk ke akun Blogger Sobat.

5. Klik Rancangan > Elemen Laman > Tambah Gadget.

6. Pilih HTML/JavaScript.

7. Beri judul, paste kode tadi di Konten. Silakan diedit dan hapus kata-kata yang tidak diperlukan (seperti kata "New&quot; dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.

<ol><li><a href="http:// yuddash.blogspot.com /2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/05/cara-membuat-akun-facebook.html">Cara Membuat Akun Facebook</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/06/cara-membuat-akun-twitter.html">Cara Membuat Akun Twitter</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/06/cara-membuat-akun-di-salingsapacom.html">Cara Membuat Akun di SalingSapa.com</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara Menghapus Sebuah Halaman Facebook</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com, Situs Jejaring Sosial Islami</a></li></ol>

8. Kemudian berikan kode untuk scroll box-nya, sehingga hasilnya akan menjadi seperti ini.

<div style="overflow:auto; width:auto; height:100px; padding:5px; border:1px solid #e6e4e3;">
<ol><li><a href="http:// yuddash.blogspot.com /2011/06/cara-buat-facebook-page-dan-pasang-like.html">Cara Buat Facebook Page dan Pasang Like Box di Blog</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/05/cara-membuat-akun-facebook.html">Cara Membuat Akun Facebook</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/06/cara-membuat-akun-twitter.html">Cara Membuat Akun Twitter</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/06/cara-membuat-akun-di-salingsapacom.html">Cara Membuat Akun di SalingSapa.com</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/07/cara-menghapus-sebuah-halaman-facebook.html">Cara Menghapus Sebuah Halaman Facebook</a></li>
<li><a href="http:// yuddash.blogspot.com /2011/02/salingsapacom-situs-jejaring-sosial.html">Salingsapa.com, Situs Jejaring Sosial Islami</a></li></ol>
</div>

9. Klik tombol SIMPAN.

10. Pindahkan elemen ke tempat yang Sobat inginkan.

11. Klik tombol SIMPAN.

Hasilnya menjadi seperti di bawah ini.


Cara Buat Facebook Page dan Pasang Like Box di Blog
Cara Membuat Akun Facebook
Cara Membuat Akun Twitter
Cara Membuat Akun di SalingSapa.com

Scrool pada arsip Blog

Widget Arsip Blog dengan gaya hierarki yang dipasang di sidebar akan terus memanjang ke bawah seiring bertambahnya jumlah postingan atau artikel-artikel yang telah diterbitkan. Bila hal ini dibiarkan tentunya dapat memakan tempat sidebar blog. Begitu pula dengan gadget Label jenis daftar, dia akan terus memanjang sesuai dengan banyaknya label di blog tersebut.


Nah, salah satu solusi agar menghemat tempat pada sidebar adalah dengan memberikan scroll pada kedua widget tersebut. Scroll merupakan penggulung yang dapat digerakkan ke atas atau ke bawah. Scroll ini juga dapat membuat blog terlihat tertata lebih rapi.

Berikut ini cara memberi scroll atau penggulung pada widget Arsip Blog dan Label.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template.

4. Cari kode ]]></b:skin> (Gunakan tombol Ctrl + F untuk memudahkan pencarian)

5. Biasanya kode id untuk widget Arsip Blog seperti di bawah ini.

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

Maka untuk memberi scroll pada widget Arsip Blog silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

6. Sedangkan kode id untuk widget Label umumnya seperti di bawah ini.

<b:widget id='Label1' locked='false' title='Label' type='Label'/>

Maka untuk memberi scroll pada widget Label silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

7. Klik tombol SIMPAN TEMPLATE.

Angka 200 menunjukkan tinggi scroll sebesar 200 piksel, Anda dapat menggantinya sesuai keinginan Anda. Makin besar angkanya makin tinggi scroll-nya.