Cara Membuat/Memasang Tombol Back To Top Dengan jQuery di Blogger

• Silahkan login di Blogger
• Pilih Design > Edit HTML > klik Expand Widget Template
• Cari kode </body>  (gunakan CTRL+F)
• Copy kode dibawah ini dan Paste tepat diatas kode </body>  (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

• Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>
<!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com -->
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3NE0aiccjJa8IYzHGsGVoaLCuVd8sr35gQ6hiIran4zQ_-mX526CpE7zHgny9ddR1Sy2v65jPeWNiPAloXMRR5FSjckPHcaZIJf6E7BJYAGpv8fretWaTLOXtyUpL7fp-ppEt54qtPus/s1600/back-to-top.gif'/></a>

• Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai

Read more »

Cara Membuat Back To Top Scroll dengan Jquery

Assalamu’alaikuk pada kesempatan pagi ini saya akan sedikit sharing tentang tips menghiasi blog anda, yang mudah-mudahan tips berikut ini akan cukuuup,, bermanfaat bagi anda sekalian sahabat blog. Back To Top Scroll Jquery, adalah salah satu widget yang akan menghiasi blog sahabat, bagai mana fungsi dari widget ini,? mungkin saya akan menjawab cukup simple saja. Ketika pengunjung blog kita mengunjungi blog kita pastinya, mereka akan membaca artikel-artikel kita, fungsi dari widget ini adalah ketika orang membaca sebuah artikel yang panjang maka pengunjung blog kita akan membuat Scroll kebawah bagian akhir artikel post kita atau kebagian bawah dari pada template blog kita, nah untuk itu kita akan menghiasi dengan salah satu widget untuk blog kita yang di mana pengunjung blog kita, ketika membaca artikel yang panjang tidak perlu repot menscroll balik ke atas artikel dikarenakan kita memasang widget tersebut, maka pengunjung blog kita tinggal melakukan satu klik saja untuk bisa menyecroll kebagian atas page Atau Header :

Untuk memberi widget Back To Top Scroll dengan Jquery cukup lah sederhana anda hanya menambahkan Code HTML berikut di atas kode </head>.

• Caranya Pada bagian Dashboard Blog anda klik Design >> Edit HTML lalu masukan kode berikut diatas kode </head> seperti pada gambar berikut :

Nah kemudian tambahkan kode berikut Persis lakukan seperti gambar di atas :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://bloekoetoek-blogonol.googlecode.com/files/blogonol-scrolltop.js' type='text/javascript'> </script>

Setelah itu kelik Simpan Template, dan mungkin pengunjung blog anda sudah bisa menikmati wedget baru blog anda, oke mungkin hanya sekian saja tips atau tutorial tentang Cara Membuat Back To Top Scroll dengan Jquery, dan semoga bermanfaat untuk anda.

Sumber  http://muhira.com

 

Read more »

MENGGANTI BACKGROUND HALAMAN TEMPLATE/BLOG

#contentwrap{background:white}

Read more »

MENGGANTI BACKGROUND TEMPLATE/BLOG

Jika ingin mengganti background template pada blog ada dua pilihan yang masing-masing caranya hampir sama. Sobat tinggal pilih mengganti dengan background warna atau dengan gambar/image. Jika ingin mengganti dengan warna sobat tinggal masukkan kode warna menurut selera sobat.

sedangkan untuk gambar sobat harus siapkan alamat gambar/image yang sudah terupload ke tempat hosting di mana sobat menyimpan gambar/image.Dengan ukuran gambar cukup kecil saja. Jika sobat belum jelas bagaimana cara memasukkan kode warna dan alamat gambar/image bisa ikuti cara di bawah ini:

Untuk mengganti background warna pada template klasik:

• Masuk ke blog sobat.

• Pilih tata letak.

• Klik edit HTML.

• Untuk antisipasi backup template dulu.

• Cari kode css seperti di bawah ini:

body { background:#fffff;margin:0; color:#333333; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; Ganti kode yang berwarna merah dengan kode warna yang sobat inginkan,misal dengan warna kuning kodenya seperti ini: #FFFF33. Maka hasilnya: body { background:#FFFF33; margin:0; color:#333333; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; Agar pengunjung tidak susah untuk membaca sesuaikan warna backround dengan warna tulisan sobat.

• Jika sudah klik save.

• Lihat hasilnya.

Sumber : http://activekita.blogspot.com

Read more »

Cara Mengubah/Memasang Gambar Background Header di Blogger/Blogspot

Cara ini digunakan untuk mengubah/menambahkan gambar header secara keseluruhan sebagai background/latar. Jika hanya ingin mengganti/memasang gambar header pada judul dan deskripsi, cukup masuk ke Page Elements dan klik edit pada widget judul dan deskripsi pada bagian header. Upload gambar anda melalui fitur upload yang telah disediakan.

click to enlarge

Namun untuk mengganti seluruh bagian backround/latar wrapper header di blog anda, gunakan cara berikut:

1. Masuk ke Edit HTML.

2. Cari  (Ctrl+F) #header-wrapper atau yang sejenisnya (masing-masing template tidak sama tergantung basic template tersebut). Declarator ini selalu di bagian pengaturan header dan posisinya paling atas.

Contoh:

#header-wrapper{background-color:#00000;width:975px;margin:0 auto 0;height:125px;)

3. Tambahkan atribut ini sebelum background-color (atau anda dapat menghapus bagian background color jika header anda akan dipenuhi dengan gambar):

background image: url(http://alamat-url-gambar/gambar.jpg);

background-repeat: no-repeat; 

contoh jadinya:

#header-wrapper{ 

background image: url(http://alamat-url-gambar/gambar.jpg);

background-repeat: no-repeat;

background-color: #00000;

width:975px;margin:0 auto 0;height:125px;)

Atau aturan shorthand untuk background juga dapat digunakan:

background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #000000;

contoh:

#header-wrapper{background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #00000; width:975px;margin:0 auto 0;height:125px;)

Ganti http://alamat-url-gambar/gambar.jpg dengan direct url dimana anda mengupload gambar  header blog. Sebelum mengupload & memasang gambar header, edit atau pastikan ukuran gambar sama dengan width dan height header blog.

4. Save template.

 

 

Sumber : http://buka-rahasia.blogspot.com/

Read more »

Cara Pasang komentar Fb berjejer dengan Komentar Blog

Beberapa waktu yang lalu setelah menshare Cara Pasang kotak komentar Facebook di Blog baik itu Part1 Part2 dan Part3, Kumpulancara kembali menemani sobat blogger untuk mempercantik tampilan komentar di blog kita agar kelihatan Rapi dan keren. Pada tutorial yang lalu yakni cara pasang kotak komentar facebook di blog, Komentar Blog dan komentar facebook Berada tidak sejajar atau komentar Fb ada di atas komentar Blog, dan ini membuat blog keliatan sedikit kurang dinamis.
Dengan cara berikut ini juga akan mempermudah Sobat Blogger yang belum pasang Kotak komentar FB  tanpa buat Aplikasi sendiri lagi, Tapi sayang bagi sobat yang sudah pasang Kotak komentar cara lama akan kehilangan Komentar Fb, tapi Komentar Blog tetap ada.
Untuk Melihat Hasil Cara berkut Sobat bisa lihat Contoh di blog ini : Bawang Putih, disana Pengunjung bebas memilih menggunakan kotak komentar Fb atau Blog, Namun disarankan bagi Sobat Blogger sebaiknya meninggalkan komentar di komentar Blogger.

Note : Tidak Semua Template Mendukung Cara ini

Baiklah Mari Kita Mulai
Pertama
Silahkan sobat ke Account Blog masing-masing dan Pergilah ke Rancangan Lalu Edit HTML dan centanglah dulu Expand Template Widget
Note : Ingat Jangan Lupa Download Template Lengkap Untuk Menjaga Kesalahan.

Kedua
Tekan tombol Ctrl + F pada Keyboard anda, Lalu cari code Berikut :
<div class='comments' id='comments'>
Setelah ketemu Silahkan Copy dan Paste code dibawah ini Tepat dibawahnya
Ini Code nya :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</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'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing
Notw num_post='2' yakni jumlah komentar yang akan ditampilkan, silahkan diubah sesuai keinginan

Maka Hasil akan Seperti ini :
<div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</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'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Ketiga
Sekarang carilah Code </head>
Lalu silahkan Letakkan Code Berikut Tepat diAtasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Sobat disini' property='fb:admins'/>
<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>

Maka hasil akan seperti ini :
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Sobat disini' property='fb:admins'/>
<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>
</head>

Note : Ganti ID FB Sobat disini dengan ID Facebook Masing-masing, Cara Melihat Id Facebook seperti berikut : https://www.facebook.com/daenkrhapy
Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya.

Keempat
Cari Lagi Code ini  /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang semirip Mungkin
Lalu Letakkan Code Berikut di Bawah nya

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Kelima
Silahkan Klik Pratinjau dulu apakah Peletakan Code sudah Benar Atau tidak, Jika tidak ada masalah Silahkan Klik SIMPAN

Catatan:
Dengan menggunakan cara ini sobat tidak bisa mengontrol atau mengetahui siapa saja yang komentar di fb coomment blog sobat, karena kita tidak menggunakan aplikasi sendiri.

Sumber http://www.kumpulancara.com.

 

Read more »