Laman

Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Friday, August 17, 2012

Menampilkan Widget Di Halaman Tertentu


Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini


<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code
<b:if cond='data:blog.pageType == data:blog.homepageUrl'>


Untuk menempatkan di halaman Archive saja
<b:if cond='data:blog.pageType == "archive"'>


Untuk menempatkan dihalaman item/posting saja digunakan code
<b:if cond='data:blog.pageType == "item"'>


Dan untuk pada halaman pages atau static page blogger digunakan
<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini
<b:if cond='data:blog.url == "URL_HERE"'>


Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.
read more

Gambar Burung Twitter Berwarna-warni


Menambahkan sedikit dari postingan sebelumnya Cara Membuat Burung Twitter Melayang di Blog sekarang saya akan posting cara merubah Gambar Burung Twitter yang berwarna-warni sesuai dengan selera anda.
Ok langsung saja silahkan ganti warna burung twitter anda dengan selera anda atau sesuaikan dengan template sobat dibawah ini:

Warna Biru
§ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBVl5_k4oKF_xABQWzqbUYsQwYZssULJji3KLe4lbEDVTzCxbzDmvvGB8IXvap10j20__bwv-XIK7jjuOqm367vTDjhcXWFNHpxZpOeE2QNwOs8x5HcmTsTnOV-pCATvoFOzA-B42XycU/s1600/Blue+bird.png


Warna Coklat
§https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-pmXPC6Mzcg6WZDT6ScBMn0mvJy3fFLHxfQo4eFU3KD5AowQ2juo28Ahyphenhyphen-loHQ35ntWnFK5iGqKFuzoKXBEYLAarLqRBhY8kWh9ddGl7gA2RSg8RuMZr3tXeR18s-gRGL0ONULSLEbk0/s1600/brown+bird.png

Warna Hijau
§ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirW2M3AAp3eKvxYtKKZfNQe39u08wfvTK3huc7uNZfxV8HbedMTjq2-u0_NGOD4Lwrm0EPdME0FzBryS57nT_lN5PrE8XzxZokQwGVT5XEMsjMHzGvOsv0HJM0v6I33V_jxk36k2zdpuM/s1600/Green+bird.png

Warna Ungu
§ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N7r40t2bjepVHY53gfrnh-eKMQOrBEyZs3dR4ym5R13DQ6TvET9LEJR1vwXALTcu2idL2zbSRidfIiUeHlxAH76K_Dag158JqZlRaXBjsEbdVlVd_9l8t20Yc1iel2yrDr4R6nLsotY/s1600/purple+bird.png

Warna Putih
§ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbuaB8FXeeoxFEHR2MEMYo2SP-eyhHNTJrTN8LXgpfk5TRGlZ10xvQ4yuwaytc8f_vSxxFHyEqiQZi2BdyPxL62HIRNdlu3Ot5X-GXGzl4xYRSyNCo0YTu2cvstkY1x8Z9uT0EPgNZyoA/s1600/white+bird.png

Warna Merah
§ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadR6C0L4TCOZC1hXWsnihK3JGZQ_R6d-oQ5XD4GpBcF_i47V48Gccc9pjd5M1VDs0i57qaM_4khgmwMZi_PiiYGFAGjHyKKjlyIssTjGxKFzjJ3dq2Zhoz7f2fAqJB0tSpcaC5Hq6Et8/s1600/red+bird.png

Demikian Posting Gambar-Gambar Burung Twiter, Selamat mencoba, Semoga bermanfaat.

read more

Cara Membuat Box link Exchange

Bagaimana cara membuat box/form ataupun text area untuk tukar link/link exchange, disini saya akan mencoba menuliskan artikel tentang bagaimana cara membuat text area link exchange/tukar link.
Tidak lepas dari belajar menghias blog, budaya tukar link sangat dibutuhkan dalam dunia blogging/perseoan.
Karena seperti anda ketahui, semakin banyak inbound link,maka akan semakin baik blog kita di mata search engine/mesin pencari.Ok! biar langsung kelar,kita langsung ke topiknya ya,
Cara ini sangat sederhana sekali, anda tinggal menempatkan kode yang nanti saya berikan, kedalam Add New Widget/Elemen baru pada Blog anda.Pertama,copy kode berikut ini:


<textarea rows="3" cols="17" style="width: 252px; height: 83px; color: Black; background-color: white;" readonly>&lt;a href="http://blogerseonewbie.blogspot.com/" target="_blank" title="Belajar buat blog newbie/Tukar Link."&gt;&lt;img src="http://4.bp.blogspot.com/_n7xseT2-HDU/SexX_80mVsI/AAAAAAAAASk/SHTp-cL2Tq4/s200/bloger-newbie.gif" border="0" alt="Belajar Membuat Blog SEO."&gt;&lt;/a&gt;</textarea>

Keterangan:
  • http://blogerseonewbie.blogspot.com/ ganti sesuai dengan alamat blog anda.
  • http://4.bp.blogspot.com/_n7xseT2-HDU/SexX_80mVsI/AAAAAAAAASk/SHTp-cL2Tq4/s200/bloger-newbie.gif ’ gantilah dengan URL Image yang ingin ditampilkan.
  • belajar buatblog newbie/Tukar Link. gantilah dengan Diskripsi Blog anda.


sangat jelas dan mudah sekali bukan.

Selamat mencoba, Semoga bermanfaat
read more

Cara Mengoptimalkan Judul Artikel Mudah Dicari Oleh Mesin Pencari



blogerseonewbie
Bagaimana membuat blog mudah dicari oleh mesin pencari,
Berikutnya untuk mengoptimalkan lebih jauh tentang pencarian blog, dapat dilakukan dengan meletakkan beberapa kata kunci pada blog, sebaiknya kata kunci ditempatkan pada judul artikel atau bagian awal artikel.
Selanjutnya coba kita lihat dibagian atas menu bar, anda dapat melihat judul blog anda dan judul artikel yang anda tulis.
Coba sekarang anda perhatikan salah satu judul artikel di blog anda, bagaimana format penulisannya?
Format asli blogger adalah Judul Blog + Judul Artikel.

Berikut ini adalah trik bagaimana merubah Judul Blog + Judul Artikel menjadi Judul Artikel + Judul Blog, trik ini akan mengoptimalkan pencarian judul artikel oleh mesin pencari dan diharapkan meningkatkan trafik blog anda.
Ikuti Langkah - langkah sebagai berikut :

Login ke Akun Blogger
Klik Rancangan/Tata Letak
Klik Edit HTML (Jangan lupa download Template lengkap atau Copy !)
Cari Kode berikut ( untuk mempermudah tekan f3)

     <title><data:blog.pageTitle/></title>

Ganti dengan kode dibawah ini :

     <!-- Start www.bloggerplugins.org: Changing the Blogger Title Tag -->
     <b:if cond='data:blog.url == data:blog.homepageUrl'>
     <title><data:blog.pageTitle/></title>
     <b:else/>
     <title><data:blog.pageName/> ~ <data:blog.title/></title>
     </b:if>
     <!-- End www.bloggerplugins.org: Changing the Blogger Title Tag -->

Selesai, jangan lupa disimpan.

Selamat Mencoba, Semoga Bermanfaat.
read more

15 Cara Optimasi Blog Agar Tampil Lebih Cepat

cara-optimasi-blog-agar-lebih-cepat
Need for speed up your blog? Yups, siapa yang tidak ingin halaman blog-nya tampil lebih cepat, pada kenyataannya selain kualitas konten, faktor kecepatan loading page lah yang sangat besar pengaruhnya buat kenyamanan pengunjung. Sudah menjadi sifat dasar manusia dimana menunggu adalah pekerjaan yang sangat membosankan, ini yang harus kita cermati bersama, jangan sampai pengunjung kabur dan pindah ke situs lain hanya karena blog kita sangat lambat ketika dibuka..walaupun itu hanya telat beberapa detik saja. Faktor kecepatan koneksi juga bisa dikatakan sebagai salah satu biang kerok, meskipun kita berpikir halaman blog kita tampil secepat kilat ketika dibuka pada komputer kita sendiri, tapi tidak begitu khan dengan koneksi pengunjung :)

Nah, disini saya mencoba memberikan tips cara Optimasi blog agar bisa tampil lebih cepat, tentunya cepat dalam batas wajar :)

15 Cara Optimasi Halaman Blog Agar tampil lebih cepat:
1. Aktifkan Kompresi dengan GZIP
Browser modern biasanya mendukung kompresi untuk HTML, CSS dan Javascript. Melakukan kompresi pada ketiga file tersebut tentu akan menghemat waktu loading halaman dan secara otomatis tentu akan terjadi pengurangan waktu download. Para Webmaster pintar diluar sana sangat menyarankan kita menggunakan kompresi dengan Gzip. Untuk teknik dan tutorial Gzip silahkan disearch aja ya..sudah banyak sekali yang membahasnya. Jika pembaca menggunakan Platform Blogspot abaikan saja kompresi ini karena secara default blogspot sendiri sudah mendukung teknik tersebut. Untuk pengguna Plaform lain seperti Wordpress silahkan menggunakan Kompresi Gzip ini atau kalau gak mau repot pake Gzip sebaiknya gunakan saja plugin WP Super Cache.

2. Buang Spasi kosong pada kode HTML
Membuang Spasi kosong termasuk juga dalam teknik kompresi, yaitu dengan memadatkan kode HTML, XML atau PHP dengan cara membuang spasi yang dirasa tidak berguna. Salah satunya termasuk juga dalam Inline untuk kode Javascript dan CSS. Dengan menghapus ruang kosong tentunya akan menyimpan banyak byte data dan imbasnya akan mempercepat waktu proses download. Untuk membuang Spasi yang tidak perlu saya biasanya menggunakan Tools Editorseperti Notepat++. Caranya sangat mudah, yaitu dengan mem-blok semua kode yang ingin dibuang spasinya kemudian pilih menu TextFX -> TextFX Edit dan pilih Delete Blank Lines atauDelete Surplus Blank Lines.

3. Lakukan Kompresi CSS (Stylesheet)
Teknik kompresi CSS ini sebenarnya cukup sederhana, hampir sama dengan cara diatas yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean CSS juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada CSS, silahkan gunakan tools gratis yang sudah banyak disediakan seperti YUI Kompresor dan cssmin.js.

4. Letakan CSS (Stylesheet) di Atas
Adakalanya kita tidak meletakan CSS di header, biasanya cara tersebut kita gunakan untuk membuat Style tunggal untuk gaya tertentu pada widget. Para webmaster yang ahli biasanya menyarankan kita sebaiknya memanggil semua kode CSS pada halaman HEAD entah itu CSS Internal maupun CSS External semuanya sebaiknya dijadikan satu pemanggilan dalam Header.

5. Buang CSS (Stylesheet) yang tidak perlu
Ketika browser mengakses halaman, biasanya harus melalui proses download dan menganalisa setiap baris kode dalam CSS (stylesheet) terlebih dahulu, bayangkan jika banyak kode CSS percuma yang harus diproses namun tidak dieksekusi sama sekali! ini akan sangat mengganggu karena akan menghambat proses rendering yang harusnya lebih cepat!

6. Periksa Validasi CSS (Stylesheet)
Walaupun sering terjadi kesalahan dalam menulis kode CSS, broser tidak akan menampilkan pesan kesalahan apapun dalam layar, semua eksekusi akan terus dijalankan tanpa adanya laporan error meskipun itu hanya salah dalam satu huruf saja. Sebaiknya jangan abaikan kesalahan ini, silahkan check validasinya. Untuk lebih mudahya silahkan gunakan tools online gratis seperti W3C CSS Validations

7. Kombinasi CSS (Stylesheet) dalam file External
Kekurangan CSS Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan kode CSS melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua kode CSS hanya dalam satu file saja. (untuk pengguna blogger abaikan teknik ini karena akan lebih bagus dengan pemanggilan internal)

8. Lakukan Kompresi Javascript
Teknik kompresi Javacsript hampir sama dengan CSS yaitu dengan cara membuang spasi yang tidak diperlukan. Memadatkan pengkodean Javacript juga bisa menghebat waktu download, Parsing dan waktu eksekusi pada suatu halaman. Untuk mempermudah kita melakukan kompresi pada javascript silahkan gunakan tools gratis yang sudah banyak disediakan sepertiYUI Kompresor, Closure Compiler dan JSMin

9. Buang Javascript yang tidak Perlu
Suka tidak suka penggunakan javacript (JS) kadang sangat diperlukan, walaupun JS kadang membuat loading halaman akan semakin berat. Ketika browser mengakses suatu halaman, biasanya harus melalui proses download dan menganalisa kode dalam JS terlebih dahulu, bayangkan jika banyak pemanggilan JS secara percuma yang harus diproses namun tidak dieksekusi sama sekali! Silahkan teliti kembali kode JS yang menurut kita tidak berguna, cek ulang dan jangan sampai parkir terlalu lama, jika tidak digunakan lagi mending hapus saja!

10. Kombinasi Javascript dalam file External
Hampir sama kasusnya dengan CSS External diatas, Kekurangan javascript Internal hanya satu yaitu terjadinya pembengkakan kapasitas ukuran (size) pada besarnya halaman. Webmaster berpengalaman selalu menyarankan kita sebaiknya melakukan pemanggilan melalui akses external, jika memungkinkan lebih bagus lagi melakukan kombinasi semua koding JS hanya dalam satu file saja. (untuk pengguna blogger jika memungkinkan sebaiknya panggil melalui file internal saja,

11. Lakukan Optimasi Gambar
Website dinamis tanpa dihiasi gambar tentu tidak akan menarik, namum penggunaan gambar yang berlebihan akan menjadi masalah ketika browser melakukan download pada halaman. Sebaiknya kurangi gambar yang tidak perlu, terlebih pada gambar yang mempunyai ukuran cukup besar. Jika memang terpaksa menggunakannya, sebaiknya lakukan optimasi pada gambar tersebut dengan cara melakukan kompresi tanpa harus mengurangi kualitas gambar. Saran saya silahkan gunakan Yahoo! Smush.it

12. Jangan Paksa Skala Gambar dalam HTML
Hindari menggunakan gambar yang besar hanya karena kita dapat mengatur lebar dan tinggi dalam HMTL, Kita memang bisa mengatur ulang gambar sesuka hati melalui CSS atau dalam tag<Img> seperti pada html berikut ini <img width="100" height="100" src="gambar.jpg"/> walaupun ukuran gambar sebenarnya adalah 200x200px sebaiknya jangan mengecilkan dengan mengatur ulang skala gambar, akan lebih baik kita membuat gambar 100x100px sesuai dengan ukuran gambar sebenarnya.

13. Hindari Gambar SRC kosong
Pemanggilan tag SRC untuk gambar biasanya ada pada dua kemungkinan, bisa melalui HTML <img scr=""> atau memalui Javascript var img = new Image(); img.src = ""; walaupun browser mengabaikan permintaan ini jika gambar dalam keadaan kosong, tetap saja ini melalui proses rendering yang harusnya tidak membebani server. Silahkan perikasa kembali blank SRC, Jika memang tidak digunakan mending dihapus saja.

14. Periksa Kembali Broken link
Link yang telah mati bakal tidak disukai pembaca, jangankan pembaca..search engine sekalipun tidak menyukai hal ini. Lakukan pengecekan broken link sesering mungkin, banyak tools di internet yang bisa melakukan tugas ini, salah satunya yang terbaik bisa menggunakan tools dariW3C Checklink

15. Buang Widget atau plugin yang tidak Perlu
Widget yang terlalu banyak hanya membuat halaman jadi semakin berat, apalagi widget tersebut tidak begitu berguna. Silahkan kita pilah-pilah kembali widget yang sekiranya tidak ada maanfaat sama sekali seperti memasang jam dan kalender. Tanyakan pada diri kita sendiri apa gunanya memasang jam di blog, jika hanya sebagai penunjuk waktu..trus apa gunanya jam pada taksbar windows?


Selamat mencoba, Semoga bermanfaat.
read more

Cara Cepat Promosi Blog

Sangat klasik berbicara tentang promosi blog tp ini salah satu cara untuk meningkatkan pengunjung ke blog anda karena dengan banyaknya pengunjung ke blog anda meningkatkan popularitas suatu blog
dibawah ini beberapa cara promosi blog yang mungkin sudah banyak anda lakukan yaitu dengan memasukkan URL anda ke:

- Forum
- Newsgroups
- Blogs
- Discussion Groups
- Direktory artikel
- Mendaftarkan website URL anda ke Google, Yahoo, MSN

Berikut salah satu cara promosi blog yang sangat efektif untuk meningkatkan banyak pengunjung dengan cara mendaftarkan URL anda ke situs direktori link yaitu www.growurl.com
disitus tersebut anda bisa mempromosikan blog anda secara gratis ataupun dengan membeli kredit, anda juga bisa mendapatkan free kredit dengan mengikuti persyaratan yang ada diwebsite tersebut

silahkan mulai sekarang promosikan blog anda dan tingkatkan banyak pengunjung dengan daftar di sini atau bisa langsung klik banner dibawah ini
read more

Membuat Menu Multi Kolom

Membuat menu multi kolom disini maksudnya membuat lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot berikut:




Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:
1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode diatas

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Keterangan :

- Angka yang berwarna merah-->lebar kotak menu utama
- Angka yang berwarna biru--> tinggi kotak menu utama
- Kode yang berwarna hijau--> warna border menu utama
- Kode yang berwarna ungu-->warna Font menu utama
- Kode yang berwarna abu-abu-->Warna background menu utama
- Kode yang berwarna kuning-->Warna border kotak utama
- Kode yang berwana orange-->warna background kotak utama

Untuk mengetahui kode-kode warna silahkan klik disini

5. Silahkan masukkan kode dibawah ini sebelum kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

6. Kemudian Save

Kemudian ke menu Layout-->Page Elements-->pilih Add Gadget yang akan kamu tempatkan menu multi kolom ini-->HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini:
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda

Silahkan dicoba,,semoga berhasil!!!
read more

Pasang Facebook Profile di Blog

Eni Sumarni's Facebook profile

Facebook seperti yang sudah anda kenal merupakan media yang bisa menghubungkan anda dengan banyak orang diseluruh dunia selain friendster yang kita kenal sebelumnya,widget profile Facebook seperti diatas bisa anda pasang diblog anda untuk mengajak pengunjung anda mengenal lebih jauh anda, untuk pasang widgetnya silahkan ikuti langkah-langkah berikut:

1. Login ke facebook anda
2. Klik menu Profile
3. Lihat pada bagian kiri bawah klik "create a Profile Badge"
4. klik tulisan create badge
5. kemudian akan muncul halaman yang berisi:
--> layout : silahkan pilih vertikal atau horizontal tergantung space pada blog anda
--> Image : Javascript untuk aplikasi blogspot dan image untuk semua blog
--> Items : Silahkan pilih item yang akan anda masukkan ke widget profile facebook and
--> Kemudian Save

6. Kemudian akan muncul kode scriptnya, silahkan dicpy paste ke element halaman blog anda dengan cara seperti biasa Layout-->Add Gadget-->Javascript/HTML-->Save

sekarang anda bisa memperluas jaringan anda bersama facebook dan blog anda,,

Selamat mencoba ya dan semoga berhasil!!!
read more

Saturday, August 11, 2012

Kumpulan Widget Efek Blog Terlengkap dari Efek Ringan Sampai Efek Berat

Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.

Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat  bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .

Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.


A. Efek Ringan

Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.

1. Efek salju berjatuhan


2. Efek hati bertaburan

3. Efek bintang bertaburan


4. Efek kembang api



5. Efek Gelembung



Cara pemasangan :

  1. Klik rancangan --> Edit html
  2. Letakkan script efek di atas kode </body>
  3. Klik Save

B. Efek Menengah - Berat

Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO

1.Meteor Jatuh




2. Banjir




3. Bunga Mekar



4. Bom Atom




5. Ufo




6. Graffity




7. Shaver




8. Gun




9.Bloody gun



10. Paint ball




11. Chainsaw




12. Dinosaur



Cara pemasangan :

  1. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
  2. Masukkan script efek di dalam kotak yang di sediakan
  3. Klik save dan lihat hasilnya.

Tambahan :

Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ).  so, pilih mana yang terbaik menurut sobat.. salam.. 
read more

Thursday, August 9, 2012

Membuat Social Bookmarking Animasi Untuk Blogger

Cara Membuat social bookmarking Animasi Untuk blogger atau pengguna blogspot akan kita bahas pada postingan kali ini.
Dalam posting ini kita memiliki gadget bookmark sosial, tetapi kali ini tidak akan berbentuk hati melainkan telur ovel telur pangsa shape.
penempatan widget seperti ini biasanya di bawah kiri body blog Anda .
Ada Fungsi On yang membuat telur slide terbuka otomatis untuk memperlihatkan tombol bookmark untuk pembaca seperti Facebook, Twitter, Google, Blogger, LinkedIn, Stumble Upon, Email dll.
Berikut ini contoh gambarnya.

dan Untuk DEMO silahkan ke halaman berikut ini :

DEMO Slide

"Lihat di kiri bawah blog,ada telur yang belum pecah..hahaha".

ok kita mulai cara membuat social bookmarking keren di blogspot.
1. Rancangan/desain >> Edit HTML.
cari kode </head>
2. setelah ketemu,pastekan kode di bawah ini tepat di atas atau sebelum kode </head> tadi.

<!-- Kode Awal Social Bookmarking http://thizan.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- Kode Awal Social Bookmarking http://thizan.blogspot.com/ -->

3. Selanjutnya Cari Kode </body>
4. Lalu pastekan kode di bawah ini sebelum atau di atas kode tadi </body>

<!-- Start Heart Share Code From http://thizan.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://thizan.blogspot.com/">Blogger Wordpress Gadgets</a><!-- End Heart Share Code From http://thizan.blogspot.com/ -->

Catatan: Ubah kode warna merah sesuai selera anda , itu untuk posisi widget.
5. Setelah semuanya selesai , silahkan simpan template anda dan lihat hasilnya.
Selamat mencoba dan salam blogging untuk sahabat blogger indonesia.
Beri komentar ya ..
read more

Saturday, August 4, 2012

Cara Membuat Menu Navigasi Horisontal Dropdown Pada Blog




Cara membuat menu navigasi horizontal dropdown sunrise pada blogspot:

1. Login ke aku blogger sobat
2. Masuk Dasboard => Tata Leak (rancangan) dan pilih edit HTML
3. Jangan lupa centang Explant Template Widget
4. Cari kode ]]></b:skin>
5. Setelah ketemu, kemudian masukan kode di bawah ini tepat di atas kode ]]></b:skin>

@charset "utf-8";
/* CSS Document */

body{
padding: 25px;
}

/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://i48.tinypic.com/hur12s.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}

/*^'^ Primary Items ^'^*/ 
#nav-container a{ 
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: blue;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://i50.tinypic.com/an25cp.jpg);
background-repeat: no-repeat;
background-position: top;
}

#nav-container a:hover{
color: #6C3600;
background: url(http://i49.tinypic.com/md1emv.jpg);
background-repeat: no-repeat;
background-position: center;
}

/*^'^ Secondary Items Container ^'^*/ 
#nav-container div, #nav-container ul{ 
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://i49.tinypic.com/xauknl.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}

/*^'^ Secondary Items ^'^*/ 
#nav-container div a, #nav-container ul a{ 
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://i48.tinypic.com/14l21jb.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}

/*^'^ Secondary Items Hover State ^'^*/ 
#nav-container div a:hover, #nav-container ul a:hover{ 
background-color: #FFFFFF;
background: url(http://i48.tinypic.com/14l21jb.jpg);
background-repeat: no-repeat;
color:#CC0000;
}

/*^'^ Secondary Item Titles ^'^*/ 
#nav-container .item-secondary-title{ 
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
background: url(http://i47.tinypic.com/or1755.jpg);
background-repeat: no-repeat;
font-weight:bold;
}

/*^'^ Horizontal Dividers ^'^*/ 
#nav-container .divider-horiz{ 
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}

/*^'^ Vertical Dividers ^'^*/ 
#nav-container .divider-vert{ 
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}

6. Sempan Template

7. Nah kemudian sobat masuk ke Tata Letak (Rancangan) kemudian pilih Add Windet => pilih HTML Java Script.
8. Selanjutnya Copy Paste Code di bawah ini ke widget tadi

<div class="nav-container-outer">
<img src="http://i49.tinypic.com/2rcu35h.jpg" alt="" class="float-left" />
<img src="http://i49.tinypic.com/2mww0vr.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 2</a>

<ul style="width:150px;">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 3</a>

<ul style="width:150px;">
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
<li><a href="#">Menu 3.6</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 4</a>

<ul style="width:150px;">
<li><a href="#">Menu 4.1</span></li>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.3</a></li>
<li><a href="#">Menu 4.4</a></li>

</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 5</a>

<ul style="width:150px;">
<li><a href="#">Menu 5.1</span></li>
<li><a href="#">Menu 5.1</a></li>
<li><a href="#">Menu 5.3</a></li>
<li><a href="#">Menu 5.4</a></li>


</ul></li>

<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 6</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 7</a>
</li>


<li class="clear"> </li></ul>
</div>


8. Save Widget
9. Lihat hasilnya

CaatanPada script di atas, ganti semua tanda # pada href="#" dengan url target atau url tujuan sobat.
Teks Menu1 , Menu2, ..., diganti dengan teks yang akan ditampilkan di menu atau tampilan yang akan muncul  seperti Home, Contac dll.
read more
Blogger Wordpress Gadgets