Tombol Sosial Share Widget Untuk Blogger

Tombol sosial share widget untuk blogger. Seperti facebook tombol like, send, subcribe, recommend, Twitter follow, Google +, Google + 1 dan masih banyak lagi. Tombol share akan muncuk dibawah posting disetiap artikel yang ada di blog.

Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Kunjungi situs sharethis.com
2. Selanjutnya lakukan registrasi pendaftaran disitus tersebut.
3. Setelah selesai melaksanakan registrasi, silakan masuk Log In.
4. Dan klik Get Sharing Tools. 
5. Selanjutnya Step 1 pilih Platform Blogger
6. Step 2 Style, pilih bentuk tombol share yang kau inginkan.
7. Step 3, atur tombol share yang akan dipasang di blog.

8. Setelah selesai, klik Finish Get the Code dan Pilih Multi Post
9. Selanjutnya klik Go, maka akan terbuka halaman gres Import Elemen Laman.

10. Dan klik Menambah Widget, pindahkan saja widget ke bab footer bawah blog. Selesai.

Tombol sosial share sudah ada di blog, tapi muncul juga dihalaman awal blog. Cara menyembunyikannya, semoga muncul hanya di bab posting blog saja. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
2. Selanjutnya klik Edit HTML dan cari arahan share this yang menyerupai dengan arahan dibawah ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>...</b:widget>
3. Semua arahan masih tersembunyi, klik tanda >...< untuk membuka semua kode, sehingga tampilannya menjadi menyerupai ini.
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
<b:includable id='main'>...<b:includable>
</b:widget>
4. Klik lagi tanda >...< maka akan terbuka semua arahan sharethis menyerupai dibawah ini.
<b:widget id='HTML1' locked='false' title='ShareThis' 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>
5. Sekarang, tambahkan arahan <b:if cond='data:blog.pageType == "item"'> dan </b:if> diantara arahan lengkap sharethis diatas, contohnya:
<b:widget id='HTML1' locked='false' title='ShareThis' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
  <!-- 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:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
6. Terakhir, Preview template, jikalau sudah hilang dari halaman awal blog, gres save template, Selesai.

Sekarang coba buka salah satu artikel di blog, dan lihat tombol sosial share yang sudah kau buat tadi akan muncul dibawah posting, disetiap artikel yang ada. Kaprikornus tidak menggangu tampilan awal halaman blog.

Silakan dibaca juga artikel lainnya wacana cara menciptakan komentar facebook diblog yang berada dibawah artikel blog, semoga blog dapat dikomentari memakai akun facebook. Atau cara menciptakan facebook like page yang berbentuk kotak dengan tombol Like halaman, serta tampilan foto pengguna facebook yang menyukai halaman blog. Semoga Bermanfaat.

Read More

Membuat Sajian Dropdown Di Blogspot

Cara Membuat Menu Dropdown yang terletak di bawah header Blog.

Ikuti langkah-langkah dibawah ini.

1. Kunjungi situs http://cssmenumaker.com/
2. Pilih salah satu sajian dropdown yang kau inginkan.
3. Sebagai teladan Blue Opera Drop down menu. Gambar paling pertama dari gambar diatas. Selanjutnya klik Customize.

4. Dan Atur Isi Menu dropdown dengan nama dan URL yang kau inginkan.

5. Keterangan gambar diatas:
• Gunakan Add Item untuk menambah isi menu, atau klik tanda silang merah untuk menghapus isi menu.
• Untuk mengganti nama Judul, Klik sajian structure dan  isi dibagian Title.
• Untuk mengganti URL,  Isi bab Link dengan URL yang kau inginkan.
• Dan klik Update Item.
6. Setelah selesai mengisi menu. Selanjutnya copy semua isyarat HTML dan CSS di website tersebut, kemudian pastekan di gadget HTML/Javascript di blogger. Contoh Pemasangan:
1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Klik Tambahkan Gadget, kemudian pilih HTML/Javascript.
3. Lalu Susun Kode HTML dan CSS menyerupai ini.

<style>
Masukan Kode Css
</style>
Masukan Kode HTML

4. Save Gadget, kemudian pindahkan ke bawah header.
7. Jika sajian dropdown nya tidak turun atau tidak terlihat???
1. Login ke blogger. Dari halaman dasbor pilih pengaturan Template.
2. Klik Edit HTML dan cari kode
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
3. Setelah ketemu, ganti 1 menjadi 3 dan no menjadi yes
4. Kodenya jadi menyerupai ini.
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
5. Save template.
6. Selanjutnya kembali ke pengaturan tata letak.
7. Dan pindahkan Gadget HTML/Javascript sajian dropdown tadi, sempurna dibawah Header.
8. Lalu klik Save/Simpan Setelan.


9. Terakhir, lihat tampilan blog kamu. Selesai.

Untuk sajian yang lebih mudah, bukan dropdown, tapi sajian dari laman blogger, silakan baca disini cara menciptakan dan mengisi sajian blog. Semoga Bermanfaat

Read More

Cara Mengganti Goresan Pena Beranda,Posting Lama,Posting Lebih Baru

Cara mengganti goresan pena beranda, posting lama, posting lebih gres di blog dengan kata-kata sendiri atau dengan gambar navigasi halaman.Tulisan tersebut berada di bawah bab tamat pada dikala kita membuka artikel, atau bab bawah dari daftar posting di halaman awal blog. Untuk blog berbahasa inggris biasanya bertuliskan home, next, previous. Untuk lebih jelasnya lihat gambar dibawah ini.

Tulisan menyerupai pola gambar diatas itulah yang akan kita ganti. cara mengganti goresan pena beranda, posting lama, posting lebih gres di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blog, dan pilih pengaturan template.
2. Selanjutnya klik Edit HTML dan cari 3 arahan Biru dibawah ini. Gunakan Ctrl F untuk mempermudah Pencarian.
1. expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
Keterangan: Posting Lebih Baru(Previous)

2. expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
Keterangan: Posting lama(Next)

3. <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Keterangan: Beranda(Home)
3. Jika hanya ingin mengganti tulisannya saja dengan kata-kata kita sendiri. maka ganti Format arahan diatas menjadi menyerupai ini.
expr:title='data:olderPageTitle'>Selanjutnya</a>
expr:title='data:newerPageTitle'>Sebelumnya</a>
<a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
4. Ganti arahan warna merah dengan kata yang kau inginkan. Untuk beranda/home ada 2 arahan yang sama, ganti kedua2nya. Selanjutnya Preview, bila sudah berubah gres save.
5. Jika ingin mengganti tulisannya dengan gambar, maka tambahkan Url gambar, Contoh:
expr:title='data:newerPageTitle'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/back.png'/></a>

expr:title='data:olderPageTitle'><img src='http://b.dryicons.com/images/icon_sets/blue_velvet/png/32x32/forward.png'/></a>

<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://c.dryicons.com/images/icon_sets/blue_velvet/png/32x32/home.png'/></a>
6. Kode warna Biru itu URL gambar dengan pemanis formtanya. Beranda/home ada 2 arahan yang sama, ganti kedua2nya. Jika sudah, silakan dipreview dulu, klo sudah berubah gres save.
7. Untuk mengganti dengan gambar lain, ganti url gambar, dengan url gambar yang kau inginkan. Format gambar menyerupai dibawah ini.
<img src='URL gambar kamu'/></a>
8. Coba cari digoogle gambar, dengan kata kunci icon home. Cari gambar yang ada pilihan ukurannya. Pilih gambar ukuran 32 atau sesuai dengan yang kau inginkan. Selanjutnya Copy URLnya(klik kanan sempurna digambar dan pilih copi URL gambar) dan masukan kodenya di format arahan diatas.
9. Salah satu web yang menyediakan icon gambar adalah http://dryicons.com/icon/blue-velvet/home/ silakan dicari gambar yang sesuai dengan yang kau inginkan.

Silakan dibaca juga cara menghilangkan diberdayakan oleh blogger yang berada dibawah posting blog dan juga fitur-fitur lainnya, menyerupai navbar, langganan entri atom dan masig banyak lagi. Itulah sedikit cara untuk mendesain blog sendiri memakai template orisinil blogger, yaitu dengan mengganti goresan pena beranda, posting usang dan posting lebih gres di blog. Semoga Bermanfaat.

Read More

Menambahkan Gambar Disamping Judul Posting

Cara menambahkan gambar disamping judul posting blog.

Gambar diatas dengan bulat merah yaitu teladan gambar yang ditempatkan di samping kiri posting blog, gambar tersebut akan muncul di setiap posting blog yang ada. Akan aku coba jelaskan secara detail, biar dapat di mengerti. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pangaturan template.
2. Selanjutnya klik edit HTML dan cari instruksi ]]></b:skin> dan pasang instruksi berikut di atas instruksi ]]></b:skin>
h3.post-title {
background:url("http://1.bp.blogspot.com/-H05eMOVOPc0/UkHLnYVeExI/AAAAAAAAAzE/n0_iarY33-g/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
3. Save template, Selesai.

Keterangan instruksi langkah 2:

url("gambar.jpg") yaitu instruksi url sumber gambar yang akan digunakan.
no-repeat menciptakan gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi goresan pena judul posting.

Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan instruksi berikut disamping no-repeat; contoh: no-repeat top right;

•  right untuk bab kanan.
•  center untuk bab tengah

Untuk menciptakan icon dengan gambar sendiri, silakan baca di cara menciptakan icon website. Dan untuk cara mengambil URL dari gambar sendiri, baca di cara upload dan ambil url gambar.

Itulah sedikit cara untuk mendesain blog sendiri, dengan menambahkan gambar disamping judul posting blog, yang akan muncul disetiap posting artikel yang ada di blog. Silakan baca juga cara membuat goresan pena bayangan di blog di judul, deskripsi blog bab tab, sidebar dikiri-kanan blog, hingga judul posting, dapat kita beri goresan pena bayangan. Semoga Bermanfaat.

Read More

Cara Menciptakan Sajian Blog Dengan Gambar

Cara menciptakan hidangan blog dengan gambar dengan keterangan dibawahnya menyerupai beranda, daftar isi, hubungi, dan lain-lain. Untuk lebih jelasnya lihat gambar dibawah ini. Lalu klik salah satu gambar, maka akan terbuka halaman gres sesuai dengan URL halaman yang aku masukan.

• 
  Beranda
• 
  Desain Blog
• 
  Tips dan Trik
• 
  Hubungi

---

Cara menciptakan hidangan blog dengan gambar. Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger. Dari halaman dasbor pilih pengaturan Tata Letak.
2. Lalu Add Gadget, sesudah itu Pilih HTML/JavaScript.
3. Selanjutnya susun isyarat CSS dan HTML Seperti format dibawah ini.
<style>
KODE CSS
</style>
KODE HTML
4. Sebagai contoh, Copy semua isyarat dibawah ini. dan Pastekan di Gadget HTML/JavaScript Tadi.
<style>
#tabs31{margin:0;padding:0;}
#tabs31 ul{list-style: none;}
#tabs31 ul li{float:left; margin-right:25px;}
#tabs31 img {width:50px; height:50px;}
figcaption {text-align:center;color: blue;font-weight:bold;font-size:10px;}
</style>

<div id="tabs31">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">
<img src="https://lh4.googleusercontent.com/-bUpj573Wb-U/Um-q4tDqVrI/AAAAAAAABHQ/eRZQc8iwpos/s128/DAFTAR-ISI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Beranda</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Desain%20Blog">
<img src="https://lh4.googleusercontent.com/-8eCUh34i-9w/Um-q5t5iIVI/AAAAAAAABHk/749vcX4aIjg/s128/DESAIN.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Desain Blog</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/search/label/Tips%20dan%20Trik">
<img src="https://lh3.googleusercontent.com/-9CqH39Abvgc/Um-q5dzGnCI/AAAAAAAABHg/K7J6NfDKkOg/s128/TIPS-DAN-TRIK.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Tips dan Trik</figcaption></li>

<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">
<img  src="https://lh4.googleusercontent.com/-C1v5xdd6vIs/Um-q5RYveJI/AAAAAAAABHo/QqJs0t8By-w/s128/HUBUNGI.jpg" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
<figcaption>Hubungi</figcaption></li>

</ul>
</div>
5. Save Gadget, selesai.

---

Keterangan Kode Css Langkah 5: 

---

• #tabs31 ul{list-style: none;} untuk menghilangkan list-style bulet.
• #tabs31 ul li{float:left; menciptakan gambar horizontal, dan margin-right:25px; spasi atau jarak kanan antar gambar.
• #tabs31 img {width:50px; height:50px;} tinggi dan lebar gambar.
• figcaption untuk mengatur keterangan dibawah tulisan.

---

Keterangan Kode HTML Langkah 5:

---

• format dari hidangan <li><a href="url halaman menu">
• <img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a>
• <figcaption>Keterangan dibawah gambar</figcaption></li>

 Jika ingin menambahkan hidangan tambahkan format menyerupai dibawah ini.
<li><a href="url halaman menu"><img src="Url gambar" title="Cara Membuat Menu Blog Dengan Gambar" width="50" height="50" /></a><figcaption>Keterangan dibawah gambar</figcaption></li>

---

Gunakanlah gambar dengan ukuran yang sama disetiap gambar, semoga tampilan hidangan terlihat rapi, caranya dapat lihat di cara menciptakan icon blog. Cara mengambil URL gambar, dapat kau baca di artikel cara upload dan ambil url gambar. Cara mengisi url halaman menu, baca artikel cara menciptakan dan mengisi hidangan blog. URL Label atau kategori juga dapat kita masukan ke menu.

Semoga Bermanfaat.

Read More

Cara Mengganti Judul Blog Dengan Gambar

Cara mengganti judul blog dengan gambar. Header blog standar blogger biasanya hanya berbentuk abjad tulisan, dan goresan pena tersebut sanggup kita ganti dengan gambar yang kita inginkan, tanpa menghilangkan H1 title blog yang sanggup mengganggu Seo blog. 

Sebenarnya blogspot sudah menyediakan Tool untuk mengganti judul blog dengan gambar, yaitu dengan menambahkan eksklusif gambar di widget header blog pada belahan tata letak. Kekurangan dari tool tersebut, gambar akan menghilangkan H1 title dari judul blog, sehingga blog tidak memiliki H1.

Berikut ini yaitu cara mengganti judul blog dengan gambar tanpa menghilangkan H1 header blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman Dasbor pilih pengaturan TATA LETAK.
2. Selanjutnya Add Gadget atau Tambahkan Gadget dan pilih HTML/JavaScript.
3. Lalu Pastekan instruksi berikut ini ke dalamnya.
<h1>
<a href="http://fandrajuani.blogspot.com/"><img alt=" Cara mengganti judul blog dengan gambar Cara Mengganti Judul Blog Dengan Gambar" border="0" src="http://1.bp.blogspot.com/-Dn0jIXq3qyc/UauAIdDMjkI/AAAAAAAAAhs/1EX65W4VIvo/s1600/Fandra+Juani.jpg" title="Cara Mengganti Judul Blog Dengan Gambar" /></a>
</h1>
4. Keterangan Kode diatas.
http://fandrajuani.blogspot.com/ Ganti dengan URL Awal Blog Kamu
Desain Blog Tutorial dan Tips Trik Blogspot Ganti dengan img Alt yang kau inginkan
http://1.bp.blogspot.com/-Dn0jIXq3qyc/UauAIdDMjkI/AAAAAAAAAhs/1EX65W4VIvo/s1600/Fandra+Juani.jpg Ganti dengan URL gambar yang akan menjadi HEADER BLOG
fandrajuani.blogspot.com Ganti Title gambar dengan yang kau inginkan

5. Setelah itu Beri Judul Gadget HTML dan Save Gadget dan tempatkan dibawah Header Blog.
6. Tampilan template di Tata Letak menjadi ibarat ini.

7. Sekarang blog memiliki 2 Header yaitu Widget header dan gambar Header.
8. Hapus widget Header, contoh: Fandra Juani (Header). Sehingga blog hanya memiliki 1 Header. Selesai.

Jika Widget Header tidak sanggup dihapus, ikuti langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Selanjutnya Klik edit HTML dan cari instruksi ini.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Kamu (Header)' type='Header'>
3. Setelah itu ganti kata true dengan false 
4. Terakhir save template, kemudian kembali ke pengaturan tata letak, widget header sudah sanggup dihapus. Selesai.

Untuk mengembalikan Widget Header Blog yang sudah dihapus, kembali ke Tata Letak dan tambahkan Gadget pilih dasar-dasar, dan pilih Header Halaman.

Menghapus Widget Header ibarat referensi diatas Fandra Juani (Header) blog tidak akan mengganggu Seo Blog, sebab judul blog header sudah diganti dengan gambar. Gambar tersebut fungsinya sama ibarat judul blog standar blogger yang berupa huruf, apabila di klik maka akan kembali ke URL halaman awal blog.

Setelah melaksanakan cara diatas, silakan cek di situs - situs yang menyediakan cek SEO blog, ibarat situs www.chkme.com, www.seositecheckup.com,  www.seoptimer.com dan lain-lain. Untuk melihat masih ada atau tidak Header H1 Title judul blog.

Untuk cara Upload Gambar dan Ambil URL gambar, sanggup dibaca di artikel perihal cara cara upload dan ambil url gambar. Silakan dibaca juga Artikel-artikel lainnya yang masih berkaitan dengan memasukan gambar di blog ibarat cara menciptakan sajian blog dengan gambar icon disamping kiri judul sajian blog.

Jika tidak ingin memakai cara diatas, kau sanggup baca artikel cara merubah tampilan header blog. Di artikel itu header blog tidak dihapus, hanya diberi background dibelakangnya, yang sanggup anda jadikan pilihan dalam merubah tampilan header dari blog anda. Itulah sedikit cara desain blog sendiri di blogspot memakai template orisinil blogger yaitu dengan mengganti goresan pena judul blog dengan gambar. Semoga Bermanfaat.

Read More

Cara Menciptakan Gambar Posting Berputar

Berikut ini yaitu cara menciptakan gambar yang ada dipostingan setiap artikel berputar dan membesar dikala di sentuh kursor mouse. Salah satu cara semoga gambar sanggup diperbesar dan lebih gampang untuk dilihat dikala disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.

Untuk menciptakan gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. 
2. Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari instruksi ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). 
3. Setelah ketemu ]]></b:skin>, Copy instruksi dibawah ini. Lalu Pastekan di Atas ]]></b:skin>
.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
4. Dan save template. Selesai.
5. Atau sanggup juga ditempatkan di Tambahkan CSS pada bab perancang template blogger(desainer template).
6. Lalu save, selesai.

Keterangan instruksi diatas: 0.5s untuk mengatur usang putaran. scale 1.9 untuk mengatur besarnya gambar sesudah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk instruksi lainnya sebaiknya jangan diganti, semoga instruksi tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse. 

Itulah sedikit tutorial desain blog dan tips trik yang sanggup dipakai di blog,  yang aku sanggup bagikan yaitu perihal cara menciptakan gambar posting berputar dan membesar dikala di sentuh kursor mouse.

Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada hambatan dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara menciptakan sajian blog dengan gambar. Semoga bermanfaat.

Read More

Cara Menciptakan Gambar Berputar Di Blog

Artikel kali ini masih seputar gambar yaitu wacana cara menciptakan gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara menciptakan gambar posting berputar dan juga membesar dikala di sentuh oleh kursor. Bedanya, jikalau yang sebelumnya memutar gambar di setiap artikel yang telah kita buat, kali ini kita akan memutar gambar yang ada di sidebar, footer ataupun pada header blog.

Dengan cara memasukan gambar kita sendiri, ke tata letak pada bab Add HTML, Untuk lebih jelasnya Silakan arahkan mouse anda ke gambar diatas. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.
2. Selanjutnya klik Tambahkan Gadget. Dan pilih HTML/Javascript.
3. Setelah itu copi isyarat dibawah ini.
<style>
#img{
width: 250px;
  height: 200px;

  position: relative;
-moz-transition:all .8s ease-in-out;;
-ms-transition:all .8s ease-in-out;;
-o-transition:all .8s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .8s ease-in-out;}
#img:hover{
-o-transform: scale(1) rotate(360deg);
-moz-transform: scale(1) rotate(360deg);
-webkit-transform: scale(1) rotate(360deg);
}
</style>
<div id="img">
  <img id="img" src="http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg" />
</div>
4. Dan Pastekan di HTML/Javascript Tadi.
5. Setelah itu save, kemudian pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.

Keterangan Kode:

width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
8s ialah usang putaran gambar.
scale(1) ini fungsinya biar gambar tetap pada ukuran semula dikala disentuh mouse, jadi gambar tidak membesar atau mengecil dikala disentuh kursor.

Dan  http://4.bp.blogspot.com/-CwIUKNeQOdE/UhpApU3BOqI/AAAAAAAAAl0/O3PzzR8Dy_w/s1600/A.jpg ialah URL dari gambar yang ingin kalian masukan.

Itulah sedikit pembahasan atau tutorial desain blog yang sanggup aku bagikan, yaitu wacana cara menciptakan gambar berputar di blog, dikala disentuh kursor mouse. Semoga Bermanfaat.

Read More

Cara Menciptakan Entri Terkenal Bergerak

Cara Membuat Entri Populer Bergerak ke atas atau kebawah secara otomatis.

Ikuti langkah-langkah dibawah ini.

1. Login ke blog, dari halaman dasbor pilih pengaturan Template.
2. Klik Edit HTML, kemudian cari kode  <div class='widget-content popular-posts'>
3. Selanjutnya Copy aba-aba berikut dan tempatkan di Sebelahnya.
<marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
4. Langkah selanjutnya, masukan aba-aba </marquee> di final rangkaian kode. Jadinya menyerupai ini.
</ul>
    <b:include name='quickedit'/></marquee>
  </div>
</b:includable>
  </b:widget>
5. Susunan Kode lengkapnya.
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'><marquee direction='down' height='200' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='100' width='auto'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <!--b:include name='quickedit'/--></marquee>
  </div>
</b:includable>
  </b:widget>
6. Save Template Selesai.

Keterangan kode:

• marquee direction='down' arah gerakan, dapat diganti dengan up, left, atau right.
• height='200' tinggi dan width='auto' untuk mengatur tinggi lebar widget entri pupoler yang akan ditampilkan.
• scrollamount='2' scrolldelay='100' Waktu gerakan.
• Silakan ganti sesuai dengan yang kalian ingnkan.

Silakan baca juga artikel wacana cara menciptakan artikel berjalan di blog. Lanjutan kombinasi dari entri terkenal bergerak ini. Contohnya dapat dilihat DISINI, diblog aku satunya.

Semoga Bermanfaat.

Read More

Cara Menciptakan Hidangan Yang Melekat Di Dinding Blog

Cara menciptakan sajian yang menempel, mengambang, melayang diatas atau dibawah dinding blog. Ketika kursor naik atau turun, sajian masih pada posisi yang sama. Silakan lihat rujukan sajian hijau dibagian bawah.

Untuk lebih jelasnya perihal cara menciptakan sajian melekat diatas atau dibawah dinding blog. Ikuti langkah² dibawah ini.

1. Buatlah sajian terlebih dahulu. Caranya: Ke Pengaturan Tata Letak, kemudian tambahkan Gadget. Trus Pilih HTML/JAVASCRIPT.
2. Selanjutnya copy arahan dibawah ini. Dan pastekan di gadget HTML/JAVASCRIPT tadi.
<style>

#cssmenu {
  background: transparent;
}
#cssmenu ul {
float: left;
}
#cssmenu ul li {
  float: left;  padding:10px;
  background: transparent;  list-style: none;
}
#cssmenu ul li a {
  float: left;
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #FFFFFF;
font-weight:bold;
}
</style>
<div id='cssmenu'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'>Beranda</a></li>
   <li><a href='https://www.facebook.com/fandra.juani'>Facebook</a></li>
   <li><a href='https://twitter.com/fandrajuani'>Twitter</a></li>
</ul>
</div>
3. Beri judul HTML/JAVASCRIPT dengan nama Menu Tempel. Lalu Save
4. Setelah itu pengaturan template, klik edit HTML dan cari arahan Menu Tempel, gunakan ctrl F untuk mempermudah pencarian. ibarat dibawah ini.

5. Sekarang Copy id dari sajian tempel yang bergaris bawah HTML2, ibarat gambar diatas.
6. Lalu Pastekan di Notepad. Selanjutnya tambahkan arahan css dibawah ini.
#HTML2 {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 12px;
z-index: 99;
  white-space: nowrap;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
7. Copy arahan diatas, dan pastekan diatas ]]></b:skin> .
8. Dan Save Template.
9. Selanjutnya kembali ke tata letak, dan klik Gadget Menu Tempel Tadi,  kemudian hapus judulnya, biarkan gadget tidak berjudul. 
10. Terakhir Save Gadget, Selesai.

Keterangan Kode Langkah 6:

• top:0px ini fungsinya menempatkan sajian dibagian atas, untuk merubahnya kebagian bawah ganti menjadi bottom:0px;
• height: 30px; ini untuk mengatur tinggi menu, silakan diganti sesuai yang diinginkan.
• background-color: #336699; dan #336699 100%); untuk warna background

Keterangan Kode Langkah 2:

• http://fandrajuani.blogspot.com/ dan https://www.facebook.com/fandra.juani
• Dan juga https://twitter.com/fandrajuani yaitu url yang kalau diklik akan terbuka dari halaman url tersebut. silakan diganti dengan url yang kalian inginkan sendiri.

Itulah sedikit cara menciptakan sajian yang melekat di dinding atas atau bawah blog yang dapat aku bagikan. Semoga Bermanfaat.

• Beranda
• Desain Blog
• Tips Dan Trik

Read More

Cara Menciptakan Artikel Berjalan Di Blog

Cara Membuat Artikel Berjalan di Blog. Sebelumnya aku sudah membagikan ihwal cara menciptakan entri terkenal bergerak ke bawah ataupun keatas. Dan kali ini yaitu lanjutannya entri terkenal akan bergerak ke arah kanan ataupun kiri. Jadinya menyerupai artikel berjalan. Ketika di sentuh mouse, maka artikel akan berhenti, dan ketika di klik maka akan terbuka halaman baru, sesuai dengan judul artikel yang dibuka. Dan pada ketika tidak disentuh mouse, maka artikel akan berjalan kembali.

Contoh artikel berjalan, dapat dilihat DISINI, di blog aku satunya. Untuk lebih jelasnya ihwal cara menciptakan artikel berjalan di blog. Ikuti langkah-langkah dibawah ini.

1. Pasanglah widget entri terkenal di blog.
2. Lalu atur entri terkenal tanpa gambar dan cupilkan, dan save widget.
3. Selanjutnya memasang aba-aba berjalan, baca di cara menciptakan entri terkenal bergerak.
4. Setelah simpulan menciptakan entri terkenal bergerak. Ke pengaturan Template > klik Edit HTML dan cari aba-aba ]]></b:skin>
5. Setelah itu copi aba-aba berikut, dan pastekan diatas ]]></b:skin>
.popular-posts {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 12px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}


.widget .popular-posts ul {list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)
}

.popular-posts ul li{
 float:left;
}


.popular-posts ul li a{
 float:left; 
 width:auto; 
 font-weight:Bold;
 color:#FFFFFF;
 text-align:justify; 
 padding:0px 10px 0px 0px;
}
6. Save template, selesai.

Keterangan aba-aba langkah 5:

•  .widget .popular-posts ul {list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)} aba-aba ini gunanya untuk menambahkan gambar disamping goresan pena artikel² yang berjalan, silakan ganti aba-aba Biru dengan url dari gambar yang kalian inginkan.
• Jika tidak ingin memakai gambar, ganti aba-aba list-style:url(http://1.bp.blogspot.com/-xXdQT4qf8vM/UjNbFmWh9nI/AAAAAAAAAuA/uBAUMBg_odU/s1600/Desain+Blog.JPG)} dengan aba-aba list-style:none;
• top: 0px; mengatur letak posisi diatas, kalau ingin ditempatkan dibawah ganti top dengan bottom.

Update:

• Jika warna tulisannya hitam, tambahkan aba-aba .widget .popular-posts ul li a:link, .widget .popular-posts ul li a:visited{color:white;} diatas ]]></b:skin>.
• Untuk menghilangkan judulnya, tambahkan aba-aba #PopularPosts1 h2{display:none} diatas ]]></b:skin>.
• Jika masih ada background yg tertinggal, tambahkan kode  #PopularPosts1 {background:transparent; box-shadow:none;}

Ganti aba-aba color:white; dengan warna yang kalian inginkan. Selesai sudah cara menciptakan artikel berjalan di blog, silakan dibaca juga artikel lainnya menyerupai ihwal cara cara menciptakan icon untuk website yang dapat dipakai untuk gambar disamping goresan pena artikel berjalan pada artikel diatas. Semoga bermanfaat. 

Read More

Cara Menciptakan Sajian Vertical Sederhana

menu horizontal yang memanjang kesamping.

Menu vertical akan memanjang atau menurun kebawah. Biasanya sajian vertical ditempatkan dibagian kanan atau kiri sidebar blog. Silakan lihat pola gambar disamping, atau pola sajian dibawah ini.

• Beranda
• Profil
• Contact

Untuk lebih jelasnya wacana cara menciptakan sajian vertical diblog. Ikuti langkah² dibawah ini.

1. Login ke blogger, dan pilih pengaturan template.
2. Lalu klik tambahkan gadget, dan pilih HTML/Javascript.
3. Selanjutnya copy aba-aba dibawah ini.
<style>

#vertical {
  background: transparent;
}
#vertical ul {
}
#vertical ul li {
  background: #aaaaaa;  list-style: none;border:1px solid #1780dd;
}
#vertical ul li span {
  text-transform: uppercase;
  font-family: 'Helvetica Neue', helvetica, 'microsoft sans serif', arial, sans-serif;
  font-size: 12px;
  color: #444444;
font-weight:bold;
padding:0px 0px 0px 10px;
}
</style>
<div id='vertical'>
<ul>
   <li ><a href='http://fandrajuani.blogspot.com/'><span>Beranda</span></a></li>
   <li><a href='#'><span>Facebook</span></a></li>
   <li><a href='#'><span>Twitter</span></a></li>
</ul>
</div>
4. Dan Pastekan di gadget HTML/Javascript tadi.
5. Terakhir, save gadget. Dan pindahkan gadget ke daerah yang kalian inginkan. Selesai.

Keterangan aba-aba langkah 3:

• <a href='http://fandrajuani.blogspot.com/'> dan <a href=''> Isi dengan URL yang kau inginkan.
• Jumlah sajian diatas ada 3. Untuk menambahkan jumlah menu?
  Tambahkan aba-aba <li><a href=''><span>Nama Menu kamu</span></a></li>
  Dibawah aba-aba <li><a href=''><span>Twitter</span></a></li>
• background: #aaaaaa; warna background
• border:1px solid #1780dd; warna garis biru yang memisahkan antar menu.
• text-transform: uppercase; aba-aba ini menciptakan Menu memakai abjad besar semua.
  Jika tidak ingin memakai abjad besar, hapus kodenya.
• padding:0px 0px 0px 10px; spasi goresan pena sajian sebelah kiri.

Silakan dibaca juga artikel wacana sajian yang lainnya. Seperti menciptakan menu dengan gambar disampingnya, cara menciptakan sajian dropdown di blog atau jikalau masih galau dengan cara menciptakan sajian di blog, silakan baca cara menciptakan dan mengisi sajian blog. 

Itulah sedikit cara desain blog dan tips trik wacana cara menciptakan sajian vertical sederhana di blog. Semoga Bermanfaat.

Read More

Tulisan Dengan Warna Yang Berbeda

Tulisan dengan warna yang berbeda. Setiap aksara memiliki warna yang berbeda. Bisa dipakai sebagai goresan pena di menu blog. Pada ketika goresan pena tersebut di klik, akan terbuka halaman baru.

Sebagai contoh: aku menciptakan sajian dengan judul Fandra Juani. Setiap aksara memiliki warna yang berbeda-beda. Dan pada ketika diklik akan terbuka halaman ihwal saya. Lihat contoh dibawah ini.

• FANDRA JUANI

Untuk lebih jelasnya ihwal cara menciptakan goresan pena dengan warna yang berbeda di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor pilih pengaturan tata letak.
2. Lalu, klik tambahkan Gadget. Dan pilih HTML/Javasript.
3. Selanjutnya copi isyarat dibawah ini.
<style>
#tentang{background:transparent}
#tentang ul{float:left}
#tentang ul li{float:left;list-style:none}
#tentang ul li span{float:left;text-transform:uppercase;font-family:Ravie;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold;padding:0}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
#tentang ul li span:hover{background:transparent;font-weight:bold;color:#aaa;font-size:14px;font-family:Calligraffitti;text-shadow:2px 2px 3px #3af}
</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>
</ul>
</div>
4. Dan pastekan di Gadget HTML/Javascript Tadi. Save, kemudian tempatkan gadget kemanapun yang kalian inginkan. Selesai.

Keterangan Kode Diatas:

• #tentang ul li span { fungsinya untuk mengatur tebal fon-family dan ukuran aksara yang digunakan.
• #tentang ul li span:hover{ fungsinya untuk mengatur tebal fon-family dan ukuran aksara pada ketika di sentuh kursor.
• Kode Merah d hingga r. untuk mengatur warna tiap² huruf.
• Kode Biru ialah kalimat yang akan ditampilkan.
• Jadi Intinya setiap aksara memiliki isyarat tersendiri. <d></d> untuk f dan seterusnya. 
• Terakhir, jangan lupa diganti  http://fandrajuani.blogspot.com/p/blog-page_25.html dengan alamat URL kalian sendiri.

Contoh yang aku berikan ini jumlah hurufnya ada 11, jadi ada 11 isyarat tersendiri di setiap hurufnya. Jika jumlah aksara kalian lebih dari 11. Tambahkan isyarat yang lain, contohnya <z></z> ,<t></t>.

Jika aksara yang ingin kalian buat kurang dari 11, silakan dikurangi saja beberapa isyarat diatas. Misal aksara kalian 6, maka gunakan isyarat merah d hingga k saja. Kode l sampai r hapus.

Begitu juga untuk isyarat biru gunakan <d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> saja. Kode <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r> hapus.

Itulah sedikit cara menciptakan goresan pena dengan warna yang berbeda yang sanggup dipakai di sajian blog. Semoga Bermanfaat.

Read More

Cara Buat Header Dan Tabs Tanpa Jarak

Cara menciptakan header dan tabs penuh full body, tanpa ada jarak pemisah antara kiri dan kanan blog. Dibeberapa template header dan juga tabs blog tidak menampilkan background secara penuh, ada jarak kosong diantara kiri dan kanannya. Namun ada juga template yang menampilkan header dan tabs secara penuh tanpa ada jarak.

Cara mengubah header atau tabs blog menjadi penuh tanpa batas, Ikuti langkah-langkah dibawah ini.

Cara Membuat Header Penuh

1. Login ke blogger. Lalu pada halaman awal dasbor. Pilih pengaturan Tata Letak.
2. Selanjutnya Klik Desainer Template > Tingkat Lanjut > Dan Klik Tambahkan CSS.
3. Dan Masukan isyarat dibawah ini.
#header {background:black;margin:0px -235px 0px -235px;padding:0px 0px 0px 240px;overflow:hidden;}
4. Setelah itu lihat dulu perubahan dari warna background blog kamu. Jika sudah pas memenuhi semua body, gres klik Terapkan ke Blog.
5. Jika belum, tambahkan nilai pada isyarat margin:0px -235px 0px -235px; Contoh:-245. Jika sudah melebihi batas penuh. Silakan dikurangi nilai pada isyarat marginnya.
6. Keterangan isyarat margin:0px (Atas) -235px(kanan) 0px(bawah) -235 (kiri).
7. Untuk isyarat padding sama halnya ibarat margin. Tapi padding dipakai untuk merubah posisi bab dalam, jadi tulisannya sanggup kita tempatkan ditengah. Sedangkan margin untuk bab luar.
8. overflow:hidden; isyarat ini gunanya semoga tampilan header tidak melebihi halaman blog.
9. Setelah semuanya sudah sesuai dengan yang kalian inginkan, Klik Terapkan Blog. Selesai.

Cara Membuat Tabs Penuh

1. Sama ibarat cara menciptakan header penuh. yang berbeda hanya isyarat yang harus dimasukan. Kodenya dibawah ini.
.tabs-inner .widget ul {margin:0px -265px 0px -265px;padding:0px 0px 0px 240px;overflow:hidden;}
2. Perbedaannya dengan isyarat header. Kita sanggup mengatur warna background tabs dibawah header pribadi dari Desainer Template > Tingkat Lanjut > Latar Tab.
3. Jangan lupa diatur juga isyarat margin dan paddingnya semoga sesuai dengan keinginan. Selesai.

Semoga sanggup bermanfaat untuk anda.

Read More

Cara Menciptakan Background Di Halaman Posting

Cara menciptakan atau memasukan gambar yang akan dijadikan background dihalaman posting blog, background dapat kita gunakan dengan gambar yang berbeda, disetiap posting. Sebelumnya aku sudah menciptakan artikel wacana cara menciptakan background berbeda dihalaman berbeda, yakni dengan cara memasukan background menurut URL halaman.

Dan kali ini background di halaman posting, pribadi dari artikelnya. Makara kita memasukan gambar ke artikel untuk dijadikan background. Untuk lebih jelasnya silakan lihat background gambar dibagian selesai artikel ini. Atau lihat halaman profil dan halaman Contact di blog ini.

Langsung saja, cara menciptakan background disetiap postingan blog, ikuti langkah-langkah dibawah ini.

1. Login ke blogger, kemudian buatlah entri baru. Atau edit artikel yang lama.
2. Selanjutnya copy arahan dibawah ini.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: url(&quot;http://4.bp.blogspot.com/-FQDSndI386M/Ulik2SQu81I/AAAAAAAAA68/_wj6HJ1qhwI/s1600/Fandra+Juani+copy.png&quot;) no-repeat right bottom;">
3. Dan pastekan di awal goresan pena blog, pada bab HTML. Contoh Gambar.

4. Setelah itu masukan arahan </div> diakhirtulisan blog, masih pada bab HTML.
5. Selanjutnya, pratinjau gambar, untuk memastikan apakah background sudah ada atau belum.
6. Jika sudah gres publikasikan(untuk artikel baru), atau Perbarui(untuk artikel lama). Selesai.

Keterangan Kode langkah 2:

•  http://4.bp.blogspot.com/-FQDSndI386M/Ulik2SQu81I/AAAAAAAAA68/_wj6HJ1qhwI/s1600/Fandra+Juani+copy.png ini url gambar yang akan dijadikan background. Silakan diganti dengan URL gambar kalian sendiri.
•  no-repeat berfungsi semoga background gambar tidak berulang. untuk mengubah background gambar berulang, ganti menjadi repeat-x;
• right bottom ini posisi background, dapat diganti dengan.
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

Jika belum tau cara menciptakan dan mengambil URL gambar sendiri, kau dapat baca di cara cara upload dan ambil url gambar. Disitu ada cara upload dan ambil url sendiri dengan mudah. Background pada artikel ini aku letakan dibagian paling bawah, yakni dibagian center bottom. Karena warna background nya terang, jadi tulisannya tidak terlihat.

Kalian dapat gunakan background dengan warna yang gelap, semoga goresan pena artikel dapat terlihat.

pola background dengan gambar.  Tulisan ini sengaja aku blog, karenga tidak terlihat.         Semoga Bermanfaat.

Read More

Cara Memasang Icon Yang Berbeda Di Setiap Judul Widget Blog

Cara memasang icon yang berbeda disetiap judul widget di blog. Untuk lebih jelasnya, silakan ikuti langkah-langkah dibawah ini.

Contoh gambar disamping: 3 widget dengan judul Total Tayangan Laman, Cari Blog ini, dan Blog archive.

---

Langkah Pertama, mencari kode id dari setiap widget yang akan diberi Icon, Caranya:

---

1. Login ke blogger, ke pengaturan template.

2. Lalu Klik edit html.

3. Setelah itu cari judul widget, Contoh: widget dengan judul Cari Blog Ini. Tekan Ctrl + F dikeyboard untuk memudahkan pencarian. Seperti gambar dibawah ini.

4. Selanjutnya copy isyarat id nya ke notepad, menyerupai gambar diatas yang diberi tanda kotak merah.

5. Dan lanjutkan mencari isyarat id dari widget yang lainnya, disini misalnya Total Tayangan Laman dan Blog archive. 

6. Kode id dari ke tiga widget diatas.

CustomSearch1
BlogArchive1
Stats1

---

Langkah Kedua, memasang isyarat icon diatas ]]></b:skin> , Caranya:

---

1. Buka Notepad tadi, kemudian tambahkan isyarat menyerupai ini,

#CustomSearch1 h2 {
background:url("http://1.bp.blogspot.com/-H05eMOVOPc0/UkHLnYVeExI/AAAAAAAAAzE/n0_iarY33-g/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

#BlogArchive1 h2 {
background:url("http://2.bp.blogspot.com/-0BX4Igo9kgc/UkHxVMJhgzI/AAAAAAAAA0o/LQDcCVG91zs/s1600/DESAIN.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

#Stats1 h2 {
background:url("http://2.bp.blogspot.com/-ntiLtgdxp0Q/Ukm3g4GI_EI/AAAAAAAAA2k/tHPE4nnOtck/s1600/fandra-juani.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

2. Selanjutnya, Copy semua isyarat yang ada di Notepad,  dan pastekan diatas ]]></b:skin>.

3. Setelah itu, save Template, Selesai.

Keterangan isyarat diatas:
http://1.bp.blogspot.com/-H05eMOVOPc0/UkHLnYVeExI/AAAAAAAAAzE/n0_iarY33-g/s1600/32x32.jpg Kode URL dari gambar yang akan dijadikan icon.
no-repeat, gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi tulisan.
height:22px; tinggi.

Contoh gambar: sesudah diberi icon disetiap judul widget.

Untuk menciptakan icon sendiri, silakan baca cara menciptakan icon blog, dan cara upload dan ambil url  gambar, baca di cara upload dan ambil url gambar. Itulah sedikit cara desain blog ialah perihal cara memasang icon yang berbeda disetiap judul widget. Semoga Bermanfaat.

Read More

Cara Menciptakan Gambar Posting Membesar

Cara menciptakan gambar posting membesar pada ketika disentuh mouse. Sedikit berbeda dengan artikel aku sebelumnya ialah perihal cara menciptakan gambar posting berputar, gambar akan berputar dan juga membesar. Kali ini gambar di posting blog akan kita perbesar saja. Dengan begitu kita sanggup memakai gambar dengan ukuran yang kecil. Ketika disentuh mouse, maka gambar akan membesar.

Kaprikornus sanggup menghemat ruang tulis kita di blog. Loading blog pun akan jauh lebih cepat pada ketika dibuka. Dan juga menciptakan goresan pena terlihat rapi. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya, Klik Edit HTML dan cari isyarat ]]></b:skin>.
3. Setelah itu, copy isyarat dibawah ini, dan pastekan diatas ]]></b:skin>
.post img{
vertical-align:bottom;max-width:90%;max-height:90%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease}
.post img:hover{
-o-transform:scale(1.4) translate(0px);
-moz-transform:scale(1.4) translate(0px);
-webkit-transform:scale(1.4) translate(0px);
-o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}
4. Terakhir Save Template. Selesai.

Keterangan isyarat langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada ketika di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, ketika memperbesar gambar.

Itulah sedikit tuorial perihal cara menciptakan gambar di posting blog membesar pada ketika disentuh mouse. Silakan dibaca juga artikel aku yang lainnya. Semoga sanggup bermanfaat untuk anda.

Read More

Fungsi Border Dan Penggunaannya Di Blog

Fungsi border dan cara pengguaannya di blog. Border merupakan arahan css yang dipakai untuk menciptakan kotak di blog atau website lainnya. Salah satu pola penggunaan border ialah pembuatan kotak script, untuk menempatkan arahan script di posting blog. Berikut contohnya.

1.  Buka entri gres atau post usang kamu.
2.  Klik HTML kemudian masukan arahan sricpt dibawah ini.
<div style="border: 1px #cccccc solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
3. Lalu klik pada bab Compose. Maka tampilannya akan menyerupai ini.
.kode script disini.
4. Klik .kode script disini. hapus dan ganti dengan arahan script yang kalian masukan.

Keteranga arahan langkah 2: 

border: 1px ketebalan kotak, #cccccc warna garis kotak, solid(bentuk kotak)
background-color:#ffffff; warna kotak
height: 80px; tinggi kotak yang akan ditampilkan diposting blog.
overflow: auto; akan ada scroll dikotak, kalau sudah melebihi tinggi kotak height: 80px;

Berikut ini ialah bentuk kotak lain yang sanggup digunakan, untuk menggantikan bentuk solid.

dotted

dashed

double

groove

ridge

inset

outset

Satu lagi penggunaan warna yang berbeda disetiap border, atas,kanan,bawah,kiri.

untuk menciptakan border menyerupai ini, arahan yang digunakan:
 <div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
 

Contoh-contoh diatas ialah penggunaan border didalam posting, berikut ini ialah penggunaan border di bab sidebar blog.

.sidebar .widget h2 {
 border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}

Contoh gambar:

Artikel diatas merupakan sedikit pola penggunaan border diblog, masih banyak yang sanggup diberi border diblog, yang terpenting kita mengetahui arahan pada bab mana yang akan kita beri border. Semoga bermanfaat untuk anda.

Read More

Cara Menciptakan Search Kotak Penelusuran

Cara menciptakan tombol search atau kotak penelusuran di blog. Kotak penelusuran, jikalau kita memasukan kata kunci didalam kotak penelusuran, maka akan muncul artikel-artikel dari dalam blog kita, yang sesuai dengan kata kunci yang kita masukan. Tidak hanya kata kunci yang mendekati judul dari artikel kita, tapi juga artikel dengan isi yang sesuai dari kata kunci yang dimasukan di kotak search.

Untuk lebih jelasnya, silakan masukan kata kunci didalam kotak search dibawah ini. Maka akan terbuka halaman gres yang menampilkan artikel-artikel dari blog ini, yang berkaitan dengan kata kunci yang dimasukan.

Cara menciptakan kotak search atau kotak penelusuran di blog, Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman dasbor. Pilih pengaturan TATA LETAK.
2. Tambahkan Gadget, Dan pilih HTML/Javascript.
3. Selanjutnya, copi instruksi dibawah ini. Dan pastekan di gadget HTML/Javascript tadi
<form action="http://fandrajuani.blogspot.com/search" method="get">
<input class="textinput" name="q" size="48px" type="text"/>
<input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
4. Save Gadget, kemudian pindahkan ke daerah yang kalian inginkan. Selesai.

Keterangan Kode Langkah 3: http://fandrajuani.blogspot.com/ ganti dengan URL blog kalian, dan 48px lebar kotak search, semakin besar angkanya maka akan semakin lebar kotak search nya.

Sebenarnya widget search/kotak penelusuran, sudah disediakan oleh blogger. Tapi lebarnya kotak penelusuran otomatis, mengikuti lebar dari layout yang kita pasangi widget search/kotak penelusuran. Dengan memasang kotak search menyerupai diatas, kita sanggup mengatur lebar kotak search sesuai dengan yang kita inginkan, kodenya juga sedikit, tidak menciptakan blog menjadi berat atau usang untuk dibuka.

Untuk menciptakan kotak penelusuran yang sedikit lebih sulit, yang ada goresan pena googlenya, baca di google custom search di blog. Silakan baca juga artikel aku yang lainnya, menyerupai cara cara menciptakan tombol share di blog atau cara menciptakan artikel terkait di blog dan juga artikel aku yang lainnya.

Semoga sanggup bermanfaat untuk anda.

Read More

Cara Merubah Tampilan Header Blog

Cara Merubah Tampilan Header Blog.

Misalkan header blog anda menyerupai gambar diatas. Kita sanggup merubah tampilanya, dibawah ini ada 2 cara yang sanggup digunakan.

Cara Pertama: Menggunakan gambar background dengan ukuran yang besar, goresan pena judul dan deskripsi blog disembunyikan. Yang terlihat hanyalah gambar saja dan gambar diletakan dibagian tengah. Kekurangaannya adalah, gambar tersebut tidak sanggup diklik, menyerupai goresan pena judul-deskripsi blog.

Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.

2. Lalu klik Desainer Template > Tingkat Lanjut > Tambahkan Css.

3. Selanjutnya masukan isyarat ini didalamnya.

#Header1 {
background:url(http://3.bp.blogspot.com/-k8uDVje8mIg/UmOM8jOfjfI/AAAAAAAAADI/R34W-yclJdk/s1600/Fandra+Juani.jpg)no-repeat center;margin:-40px 0px -40px 0px;}
.Header h1{ visibility: hidden;}
.Header .description{ visibility: hidden;}

 Keterangan kode:

• http://3.bp.blogspot.com/-k8uDVje8mIg/UmOM8jOfjfI/AAAAAAAAADI/R34W-yclJdk/s1600/Fandra+Juani.jpg ialah alamat url gambar yang akan dijadikan background.
• no-repeat menciptakan gambar tidak berulang.
• center ialah posisi gambar ditengah, sanggup diganti dengan left(kiri), dan right(kanan).
• margin:-40px 0px -40px 0px; untuk mengatur jarak -40(atas) 0(kanan) -40px(bawah) 0(kiri) dari background gambar.
• .Header h1 goresan pena dari judul blog
• .Header .description goresan pena dari deskripsi blog.
• visibility: hidden; menyembunyikan tulisan.

4. Klik terapkan ke blog, selesai.

Cara Kedua: Menggunakan background gambar dengan ukuran yang lebih kecil. Gambar diletakan disamping kiri, dan goresan pena judul-deskripsi blog di letakan disamping kanannya. 

1. Sama menyerupai cara pertama, tapi pada bab langkah 3 masukan isyarat dibawah ini.

#Header1 {
background:url(http://1.bp.blogspot.com/-GNkkBX0oPFk/UmOPParqjKI/AAAAAAAAADQ/azXfJEHpIO8/s1600/Fandra-Juani.png)no-repeat left;}
.Header h1{ margin:0px 0px 0px 80px;}
.Header .description{ margin:-20px 0px 0px 80px;}

2. Klik terapkan ke blog, selesai.

Silakan berkreasi sendiri dengan cara-cara diatas, dan baca juga cara cara mengganti judul blog dengan gambar yang sanggup menjadi pilihan anda dalam mengubah tampilan header blog anda. Jika ada yang ingin ditanyakan wacana artikel diatas, masukan komentar dibawah. Semoga Bermanfaat.

Read More