Cari Blog Ini

My Best Friend

Arsip Blog

Diberdayakan oleh Blogger.

Label

Traffic Visitor

Flag Counter
31 Mar 2013
Salam Pembaca Blog , Membuat sebuah daftar isi merupakan hal sangat penting karena para pengunjung blog anda bisa dengan mudah mencari artikel/konten yang ada di blog anda. Ada dua cara untuk tutorial kali ini yaitu membuat daftar isi perlabel secara otomatis dan secara manual. Jika anda berminat untuk membuatnya silahkan ikuti tutorial berikut ini :



1. Silahkan masuk di Blogger andaklik Rancangan > Elemen Laman > Tambah Gadget. Kemudian pilihHTML/JavaScript.

2. Berikan judulnya (“Daftar isi” “ isi blog ini” ) sesuai yang diinginkan, lalu copy kode di bawah ini dan paste diRuangan HTML/JavaScript.

<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://mbeiji.blogspot.com//feeds/posts/default/-/Tutorial%20membuat%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>

Keterangan :    width:auto; menunjukkan lebar scroll box akan mengikuti lebar sidebar.
height:100px; menunjukkan tinggi scroll box setinggi 100 pixsel. 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 anda.
<ol> menunjukkan numbered list, kalau ingin menjadi bullet list silakan diganti dengan <ul>.
Ganti http://mbeiji.blogspot.com/ dengan alamat blog anda.
Ganti Tutorial%20membuat%20blog dengan label yang anda  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 anda inginkan.

5. Klik tombol SIMPAN.


Jika ingin menampilkan lebih dari satu label, silakan ditambahkan script untuk labelnya. Misalnya saya akan menampilkan label Tutorial membuat blog dan komputer 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> Tutorial blog</h3><ol><script src="http://mbeiji.blogspot.com//feeds/posts/default/-/Tutorial%20membuat%20blog?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol><br/ >
<h3>Komputer</h3><ol><script src="http://mbeiji.blogspot.com//feeds/posts/default/-/komputer?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ol></ol></div>


Cara di atas merupakan cara yang menggunakan script. Jika anda tertarik untuk menggunakan cara manual seperti yang saya terapkan pada blog ini dengan cara manual ini blog anda tidak akan menjadi lelet/lemot saat dibuka tidak seperti halnya menggunakan script, silakan simak baik – baik langkah-langkahnya di bawah ini. Sebelum mengikuti cara ini, silakan anda ikuti langkah berikut :

1. Buka daftar isi blog yang tadi anda buat.

2. Blok posting-posting dari label mana yang akan di ambil. Misalnya saya mengambil label Tutorial membuat blog  juga seperti contoh menggunakan script. Setelah diblok, lalu klik kanan dan pilih Lihat Kode Sumber Teks yang Dipilih. Atau tekan CTRL+U

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

4. Masuk ke akun Blogger anda.

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" dan lain-lain) sehingga susunannya akan menjadi seperti di bawah ini.

<a href="http://mbeiji.blogspot.com//2011/12/cara-membuat-blog-di-bloggerblogspot.html">Cara membuat blog di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-setting-blog-di-blogger_25.html">Cara Setting Blog Di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-upload-video-diblog.html">Cara Upload Video diBlog</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-membuat-background-di-postingan.html">Cara membuat background di postingan blog</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-mengganti-template-di-blogger.html">Cara Mengganti Template di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-membackup-template-blog-di-blogger.html">Cara membackup template blog di blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-custom-domain-di-blogger.html">Cara Custom Domain di Blogger</a></li><li>
<a href="http://mbeiji.blogspot.com//2011/12/cara-membuat-kategori-label.html">Cara membuat kategori label</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-dan-memasang-favicon.html">Cara membuat dan memasang Favicon</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/membuat-favicon-atau-logo-blog-di.html">Membuat favicon atau logo blog di photoshop</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-daftar-di-feedburnercom.html">Cara Daftar di Feedburner.com</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-banner-animasi-di-blog.html">Cara Membuat Banner Animasi di blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-banner-di-header-blog.html">Cara Pasang Banner di Header Blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-menyembunyikan-judul-blog-di.html">Cara Menyembunyikan Judul Blog di Header</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-menu-dropdown-di-blog.html">Cara Membuat Menu Dropdown di Blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-readmore-pada-blog-1.html">Cara Membuat Readmore pada blog (1)</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-text-area-pada-blog.html">Cara Membuat Text Area pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-mengubah-lebar-kolom-template.html">Cara Mengubah Lebar Kolom Template</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-buku-tamu-di-blog.html">Cara Pasang Buku Tamu di Blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-kode-iklan-adsensecamp-di.html">Cara Pasang Iklan AdsenseCAMP di Bawah Posting</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-pasang-widget-jam-di-sidebar.html">Cara Pasang widget Jam di Sidebar</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-agar-postingan-tidak-bisa-dicopy.html">Cara agar postingan tidak bisa dicopy paste</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-edit-blog-secara-offline.html">Cara edit Blog Secara Offline</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-memasang-widgettool-untuk-user.html">Cara memasang widget/tool untuk User Online</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-efek-salju-pada-blog.html">Cara membuat efek salju pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-gambar-bergerak-pada-blog.html">Cara membuat gambar bergerak pada blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-shoutmix.html">Cara membuat shoutMix</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-tombol-like-pada-postingan.html">Cara membuat tombol like pada postingan</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-membuat-tulisan-bergerak-di-blog.html">Cara membuat tulisan bergerak di blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-mengganti-kursor-di-blog.html">Cara mengganti kursor di blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/cara-sembunyikan-shoutbox-di-sidebar.html">Cara sembunyikan shoutbox di sidebar</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/membuat-refresh-pada-blog.html">Membuat Refresh pada blog</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/membuat-pesan-pembuka-dan-penutup-pada.html">Membuat pesan pembuka dan penutup pada blog</a></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/menghasilkan-uang-dari-ngeblog.html">Menghasilkan uang dari ngeBLOG</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/perjalanan-blog-dalam-menyambut-tahun.html">Perjalanan blog dalam menyambut tahun baru 2012</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li><li>
<a href="http://mbeiji.blogspot.com/2011/12/tips-trik-seo-2012.html">Tips Trik SEO 2012</a> ~ <blink><i style="color: rgb(242, 23, 11);">new</i></blink></li></ol></div>
8.  Klik tombol SIMPAN.

9.  Pindahkan elemen ke tempat yang anda inginkan.

10.  Klik tombol SIMPAN.
Selesai deh tutorial kali ini ,semoga bermanfaat bagi pembaca .Terima kasih telah membaca.

Cara Membuat Screenshoot Blog

Cara Membuat Screenshoot Blog. Apa itu screenshoot?, screenshoot adalah potongan gambar yang ditampilkan pada sebuah website atau blog. Biasanya blogger yang memiliki blog free templateatau gambar-gambar sangat membutuhkan hal satu ini. Bagaimana cara membuat screenshoot blog atau website?. Caranya sangat mudah...




Cara Membuat Screenshoot Blog


Contoh Screenshoot bisa kamu lihat di atas, cara membuatnya kita membutuhkan tambahan software di komputer kita. Saya hanya akan memberikan tips bagi pengguna mozilla.
Setelah menginstal, restart mozilla tadi, dan klik kanan untuk mendapatkan gambar, lalu pilih "save page as image". Selesai...
Salam Pembaca Blog di label tutorial blog, Kali ini saya akan berbagi sedikit tutorial kecil yang sangat mudah namun rupanya sangat bermanfaat bagi sebagian banyak blogger yang memposting gambar, dan mungkin tidak ingin gambar dalam blognya atau website nya di copy bebas oleh orang lain.


Sebenarnya banyak celah dan cara untuk meng-copy suatu file dalam sebuah website atau blog. Namun bagi orang yang awam hal tersebut akan sangat sulit dan memerlukan keterampilan khusus dan pengetahuan lebih tentang soure suatu website/blog. Dan itu tentunya sangat beruntung untuk kita.


Beberapa trick serupa mungkin teman-teman pernah membacanya di blog nya para master. Namun saya pikir itu lebih rumit. Dan kali ini saya akan memberikan trik yang lebih simple dan mudah tentang bagaimana caranya agar suatu gambar tidak bisa di klik kanan tanpa menggunakan script yang berlebihan dan tidak ada peringatan sama sekali. Hanya menambahkan sedikit code pada code image nya. 


Code standar sebuah gambar yaitu :

<img src="Link gambar sobat" />


Dan teman-teman hanya perlu menambahkan code ini setelah code tersebut :


oncontextmenu="return false;"


dan contoh dari code yang telah di tambahkan akan seperti ini :


<img src="Link gambar sobatoncontextmenu="return false;" />

Contoh gambar yang sudah diberikan kode disable klik kanan 

 


sekian tutorial ini ,semoga bermanfaat bagi pembaca .Terima kasih telah membaca.

Membuat gambar dengan efek bayangan

gambar dengan efek bayangan
Membuat gambar dengan efek bayangan. Contoh hasil dari turorial ini bisa kamu lihat pada gambar di sebelah tulisan ini. Bagaimana cara Membuat gambar dengan efek bayangan?. Caranya sangat mudah. Gambar dengan efek bayangan ini tentu saja menambah nilai tersendiri pada gambar tersebut. Contohnya apabila kamu ingin mempromosikan sebuah produk atau ingin menjual sebuah ebook. Pengunjung yang melihat gambar dengan efek bayangan ini akan lebih tertarik untuk melakukan klik pada gambar tersebut.


Membuat gambar dengan efek bayangan :

1. Kunjungi Web Floor Maker. Kemudian upload image kamu.

2. Atur tampilan gambar. Apabila sudah klik generate.

3. Klik kanan pada hasil gambar. Kemudian pilih save image as.

Selesai. Selamat mencoba, salam tips blogger.
 BlogRoll Dan About me
Posting ini saya buat untuk mengatur tata letak dari blog saya ini, saya bermaksud mengatur tampilan dari blog tips blogger agar enak dilihat.

Maka saya memindahkan About me atau tentang saya dan blogRoll atau link teman pada postingan ini. Tidak ada maksud lain selain mempercantik tampilan dari blog tips blogger ini hehehehe...

O ya bagi kamu yang ingin tukeran link silahkan berkomentar pada kotak komentar yang ada...

Berikut ini adalah about me atau tentang saya :

"Saya adalah seorang newbie dalam dunia blogger. Tapi saya akan mencoba berbagi tips dan trik sederhana dalam Blogging. Saya masih memerlukan banyak masukan dari teman-teman blogger yang sudah lebih berpengalaman"...

Selanjutnya adalah Tukar link dan blogRoll. Untuk tukar linkSilahkan pasang kode di bawah ini pada blog kamu, kemudian konfirmasi pada kotak komentar. Link blog kamu akan segera saya pasang pada blogroll. Terima kasih...

Pasang Kode ini :


Bila kamu sudah memasang kode tersebut pada blog kamu silahkan konfirmasi pada kotak komentar di bawah. Saya akan segera memasang link kamu pada blogroll.
30 Mar 2013

Widget Untuk Mengetahui Jumlah Pengunjung Yang Online 
Buat Sobat yang ingin memasang Widget yang menampilkan jumlah pengunjung Online di blog. Sobat dapat mengunjungi website dibawah ini :

  • whos.amung.us, disini Kode yang diberikan berupa javascript.
  • daylogs.com, menggunakan kode html, jadi bisa di pasang buat Blogspot maupun Wordpress.com, di situ ada 3 pilihan, Map, Icon, dan Smallbutton.
  • www.geovisite.com, Pada situs ini sebenarnya banyak terdapat widget yang lain, seperti Map, Jam, User, Counter, dll. Jika sobat ingin memasang Widget jumlah pengunjung yang Online pilih geoglobe, untuk kodenya ada Javascript dan Html.
Silakan pilih Widget yang ingin Anda gunakan, dan Copy kode yang diberikan, lalu pasang pada Blog Sobat. Untuk cara memasang di blog saya rasa Anda semua sudah tau, kalau belum tau silakan bertanya, he...
Sampai disini dulu tulisan saya tentang Widget Untuk Mengetahui Jumlah Pengunjung Yang Online.
29 Mar 2013
Tips Supaya Diapprove Idblognetwork

Postingan ini untuk membantu sobat yang masih kesulitan saat ingin gabung dengan idblognetwork. Jadi, kali aja ada yang sampai nyari tips supaya diapprove idblognetwork, trus nyasar kemari. Nah, silahkan disimak baik-baik.



Tips biar cepat di-approve idblognetwork sebenarnya saya juga bingung. Emang ada tips tersendiri kaya daftar adsense? Tapi gapapa, disini saya akan share garis besarnya saja. Point-point penting kalau sobat pengen cepet-cepet diterima oleh team idblognetwork.


1. Baca baik-baik dan patuhi TOS (Peraturan) IBNIni point paling penting, makanya saya taruh di urutan teratas. Hal pertama yang harus dilakukan kalau ingin mendaftar idblognetwork adalah pahami dan patuhi Tos yang berlaku di idblognetwork. Tos idblognetwork sangat ketat. Idblognetwork bukan sembarangan situs online advertising. Advertisernya adalah perusahaan besar, coorporate, atau apakah namanya. Jadi, jangan sampai melanggar tos IBN kalau ingin diapprove. Salah satunya adalah, jangan ada konten PORNO di blog sobat. Peraturan lainnya lihat di idblognetwork.com



2. Pakai Fitur RECO (Rekomendasi) Idblognetwork
Hal kedua adalah menggunakan fitur reco dan super reco. Apa itu fitur reco? Fitur reco adalah fitur baru dari idblognetwork. Jadi, blogger yang ingin bergabung di idblognetwork sudah mendapat rekomendasi dari blogger yang sudah terdaftar di idblognetwork. Caranya? Tentu sobat harus mempunyai kenalan blogger yang sudah menjadi member IBN. Atau, sobat mencari blogger idblognetwork yang ingin jadi pe-rekomendasi blog sobat.
POINT PENTING!!! Untuk menggunakan fitur reco, sobat harus benar-benar sudah memahami dan mematuhi Tos idblognetwork. Kalau tidak, bukan hanya sobat yang kena. Tapi, blogger yang merekomendasikan sobat akan dibanned idblognetwork juga. Inilah mengapa blogger member IBN terkesan pelit dan tidak ingin memberikan rekomendasi.
Padahal mereka bukannya pelit, tapi mereka juga harus menanggung resiko yang sangat besar jika yang direkomendasikan nakal. Kan sayang, daftarnya saja susah, malah dibanned atas kesalahan yang tidak dilakukan.



3. Optimasi Blog
Hal yang tidak kalah penting lagi adalah optimasi blog. Seperti sobat sudah ketahui, advertiser idblognetwork adalah brand-brand ternama. Jadi, blog publishernya juga harus berkualitas. Blognya harus banyak pengunjung dan sudah cukup berkualitas dalam arti sudah banyak posting, pengunjung, dan cukup terkenal di search engine. Blog tidak boleh hasil copy-paste, tidak boleh blog sampah, harus benar-benar blog.
Perlu sobat ketahui bagi yang masih newbie, kalau sobat mendaftarkan blog yang sangat baru di idblognetwork, belum ada pengunjung, posting sedikit, PERCUMA!!! Sobat akan kesusahan mendapat advertiser yang ingin memasang iklannya di blog sobat. Toh kalaupun ada, jarang klik yang terjadi. Percuma kalau per-klik Rp2000 tapi 3 hari cuma dapat 1 klik. Ya kan???



4. Bergaul Dengan Blogger Member Idblognetwork
Ini penting nih, idblognetwork adalah jaringan blogger Indonesia. Selain untuk me-monetize blog, sobat juga bisa dapat ilmu yang sangat bermanfaat tentang blogging dari idblognetwork. Makanya, gabunglah dengan para IBNners. Untuk memulainya, pertama-tama sobat gabung di fans page Id Blog Network di facebook. Disana, sobat akan mendapat banyak ilmu baru tentang blogging. Tidak hanya itu, disana banyak blog master lho!!! Saya juga senang sekali bisa berkomunikasi dan berinteraksi langsung dengan master-master blogger Indonesia. Maklum, newbie ^_^.



5. Sabar, Berdoa, dan Terus Ngeblog
Nah yang kelima, sabar, berdoa, bertawakal, sambil terus mengoptimalisasi blog sobat. Jangan terburu-buru, kalau blog sobat sudah bagus, cakep, rapi, nanti saatnya ada email cinta dari idblognetwork bahwa blog sobat diapprove, sobat tidak bingung-bingung lagi untuk mendapat rupiah dari idblognetwork. Apalagi, kalau blog sobat berkualitas maka semakin besar kesempatan dapat job review dari idblognetwork (IBN).
Jangan lupa sholat yang rajin, kalau perlu tahajud tiap malam dan puasa 30 hari. *lebay* . Biar kenapa? Biar cepat di-approve IBN kah? Bukan, biar pikiran sobat tetep jernih.
Takutnya gara-gara gak sabar nunggu di-approve sobat khilaf, terus nyobek kertas, nulis kata-kata terakhir, trus minum obat nyamuk, xixixi... Jangan sampai yah? Bukannya diapprove IBN malah diapprove admin neraka dot com... *takut*



Nah, saya kira itu aja kalau blog sobat pengen cepet-cepet di-approve idblognetwork. Bagi yang belum di-approve, sabar saja ya. Kalau sobat tidak melanggar tos tapi belum diterima IBN juga, ya sabar aja dulu. Barang kali team IBN sedang sibuk untuk mengelola idblognetwork. Apalagi yang masih dalam proses review ada 4000an blog. Wajar bukan?
Oke deh, selamat berjuang dan keep spirit!!! Salam Blogger!!!
CARA PING BLOG AGAR BANYAK PENGUNJUNG

Ping blog setiap posting/setiap hari menjadi suatu bagian penting bagi seorang blogger untuk meng-update blog. Menge-ping memang harus dilakukan supaya blog kita selalu ter-update dan tentunya "gak basi" dan akan mendatangkan banyak pengunjung. Tapi bayangkan, dari sekian banyak situs apa kita harus nge-ping manual satu-satu? Bisa gempor deh,,, Nah, situs ping otomatis dalam hal ini sangat bermanfaat. Berikut situs-situs ping otomatis yang mudah dan biasa saya andalkan...

1. www.pingomatic.com
Caranya mudah banget kok,
-Tulis Judul Blog pada kotak pertama contoh= Blog Pemula | Teknologi Hp
-Isi URL blog pada kotak kedua (dengan http://) contoh= http://ajay-tipsgratis.blogspot.com
-Isi feed blog pada kotak ketiga contoh= http://feeds.feedburner.com/BlogPemulaTeknologiHp
-Klik Send Ping

2. www.ipings.com
Prosedurnya kurang lebih sama kayak www.pingomatic.com. Jadi, ga kesulitan lagi.

3.http://indexkings.com

untuk yang satu ini anda tinggal memasukkan alamat website anda pada kotak dan klik "RAPID INDEX"

Oke dah!!! Gimana, mudah kan? Ga kesulitan lagi deh... Eh, eh, hampir lupa, jangan nge-ping lebih dari 1 kali dalam sehari. Nanti bisa di ''kick" lho. Usahakan ping setiap habis posting.
Salam Ngeblog!!!
28 Mar 2013

Memberikan sentuhan yang berbeda pada widget atau gadget di blog adalah salah satu cara untuk membuat blog kita kelihatan menarik. Tetapi hal tersebut menjadi dilema bagi para blogger, karena semakin banyak kode-kode HTML yang kita pasang di template akan membuat semakin lambat loading blog.
Widget atau gadget sendiri adalah serangkaian kode portabel yang dapat di-instal dan di-eksekusi dalam HTML terpisah di setiap halaman web atau blog yang berbasis oleh pengguna akhir tanpa membutuhkan tambahan kompilasi. [ wikipedia .org ] Jika dalam bahasa sederhana blogger widget adalah pernak pernik dalam blog sebagai penghias blog dan memiliki berbagai fungsi.

Baik, kita langsung pada langkah-langkah pembuatannya, untuk membuat background efek pada widget hanya memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:
  1. Colour Background Style
    Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
    #side-wrapper {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 25px 0px 0px 0px;
    width: 315px;
    background: #ffffff;
    }
    Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna  yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.
  2. Image Background Style
    Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
    Cara Memberi efek background pada widget blogspot Image Background
 StyleNah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
    .post-footer {
    display: block;
    margin: 15px 0px 25px 0px;
    padding: 7px 20px 7px 20px;
    text-align: left;
    font: $postfooterTextFont;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.6em; 
    text-decoration: none;
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA8CCFiQ68IbXBIZPdFD3eDLC7Srxk9ssNWaqcAaUF_r7FzvNDJF9ph1G3yMScrP5tw87SCMPf8DpHmlxknDmNxGhmj386MXeMNu1giWCFZTWqjAOMLYVyK3REsj3gFj55Pe4CTM-_Bx8/s1600/banner+demomaskolis.jpg"); 
    background-color:#0092dd;
    background-position:top right;
    background-repeat:no-repeat;
    border: 1px solid $postfooterBorderColor;
    }
    Penjelasannya adalah:
    • Background Image diisi URL gambar.
    • Background Color diisi kode warna yang sesuai dengan gambar.
    • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
    • Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakanrepeat-y menjadi: background-repeat: repeat-y; Untuk ke samping, gunakan repeat-x menjadi: background-repeat: repeat-x; Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.
  3. Hover Image Background Style
    Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }
    Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
    #sidebar .widget {
    margin: 0px;
    padding: 0px;
    }
    Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }

    #main .widget:hover {
    background:#e3e3e3;
    }

Temen-temen semua bisa memodifikasi sesuai selera, ingat harus disesuaikan dengan template yang dipakai. Selamat mencoba dan semoga bermanfaat

Tutorial kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :
InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin>   :          
    #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
    #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
    #featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
    .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
    .featuredTitle a{color:#f7441a}
    .featuredTitle a:hover{color:#000}
    .navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
    ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
    ul.pagination a { float:left; margin:0 5px; display:inline; }
    ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-L07nEWKoZ3izZJ_EowEMFV58aUvAWt7CLnN4wRuXvKDvmNbLREYryEalQz2ewFu9RaxNICwKq3qDDYAQyUfz5JaMMz3XgHFnA93vNWuaPsSUig2eRI68aTG4JDHHPprgNpGSrpIpSFc/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
    ul.pagination a:hover { background-position:0 -12px; }
    ul.pagination a:hover { background-position:0 -12px; }
    ul.pagination a.activeSlide { background-position:0 -12px }
    a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-xhVFBGcE26qMaNmDOuTG_S8ri1J6aEwm4L_c5PvUaXPbfmdgmG4cuylBFr9I43OZ66Yx6oUMOoz0-cBzDd5vtKuYK5s4RtMgWdybQl-HDT4Q4gRfUaGa-PwtbeCtHUZnbeXXbxYd8s/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
    border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
    a.readmore:hover {color:#ff0}
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :     
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXTf5iODj_Jr4-nRVtwflR3D8TbI30V7lJ2HJg0JiEAHJlE8davS3W5mA3e4uCBCRwu-8leBFTC6xjdwa-4JdRVjOhK9vrrHVG6nFVDofXaLicjD0W6xPtuBIygNXzvTrgtkgnNYxVtU/s1600/no+image.jpg";
    showRandomImg = true;
    aBold = true;
    summaryPost = 150;
    summaryTitle = 25;
    numposts  = 7;

    function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();
        document.write('<div class="slides">')
    if (numposts <= json.feed.entry.length) {
    maxpost = numposts;
    }
    else
           {
       maxpost=json.feed.entry.length;
       }
       for (var i = 0; i < maxpost; i++) {
         var entry = json.feed.entry[i];
         var posttitle = entry.title.$t;
    var pcm;
         var posturl;
         if (i == json.feed.entry.length) break;
         for (var k = 0; k < entry.link.length; k++) {
           if (entry.link[k].rel == 'alternate') {
             posturl = entry.link[k].href;
             break;
           }
         }

    for (var k = 0; k < entry.link.length; k++) {
           if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
             pcm = entry.link[k].title.split(" ")[0];
             break;
           }
         }

         if ("content" in entry) {
           var postcontent = entry.content.$t;}
         else
         if ("summary" in entry) {
           var postcontent = entry.summary.$t;}
         else var postcontent = "";
        
         postdate = entry.published.$t;

    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];

    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];

    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
    document.write(trtd);


    j++;
    }
        document.write('</div>')
    }

    //]]>
    </script>


  7. Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :        <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='featuredSlider'>
    <div class='container'>
    <script>
    document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>
    <div class='navigation'>
    <ul class='pagination'/>      <script>
    $(&#39;.slides&#39;).cycle({
     fx:     &#39;fade&#39;,
     speed:  &#39;slow&#39;,
     timeout: 3000,
     pager:  &#39;.pagination&#39;
     });
    </script>
    </div>  </div> <!--end .container-->
    </div>
    </b:if>
    Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :
    /feeds/posts/default?max-results
    Menjadi :
    /feeds/posts/default/-/your label?max-results
    Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
  8. Terakhir, save templates dan lihat hasilnya. 
 Selamat mencoba dan semoga bermanfaat.