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 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 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 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

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

Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibentuk dengan bentuk bulat. Dan saat disentuh kursor mouse icon tersebut akan berputar.

• Fandra Juani
• Facebook
• Twitter
• Google +

Cara membuatnya ikuti langkah² dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan instruksi dibawah ini.
<style>
#tentang{background:transparent;height:150px}
#tentang ul{float:left}
#tentang ul li{width:200px;float:left;list-style:none}
#tentang ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}
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}
t{font-size:180%;color:yellow}
x{font-size:180%;color:#3af}
#tentang ul li span:hover{padding:0 0 0 20px}
#tentang ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;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}
#tentang ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani" src='https://lh5.googleusercontent.com/-LeOgiup3fqM/Ul7UfgCMxSI/AAAAAAAAA9w/pK-pvuyLHtg/s128/fandra-juani.jpg' width='32' height='32' title="Menu Vertical 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>

<li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani"src='https://lh4.googleusercontent.com/-vy-4Eky2V_0/Ul7UF1hilwI/AAAAAAAAA9Q/6On9FmDTA_M/s128/Fb.jpg' width='32' height='32' title="Menu Vertical Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

<li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt=" Menu vertical ini berisi goresan pena dengan warna yang berbeda disetiap hurufnya Menu Vertical Fandra Juani" src='https://lh5.googleusercontent.com/-ygEFjz3uXeA/Ul7ULq9EOOI/AAAAAAAAA9o/7SkDHL7AKp8/s128/Twitter.jpg' width='32' height='32' title="Menu Vertical Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

<li><a href=' ">Membuat sajian vertical sederhana.
Tulisan dengan warna yang berbeda. 
Membuat icon sendiri untuk website. 
Cara upload dan ambil URL Gambar.
Membuat gambar bentuk lingkaran diblog.
Membuat gambar berputar diblog.

Silakan berkreasi, dan agar dapat bermanfaat untuk anda.

Read More

Cara Menciptakan Contact Form Di Posting Blog

Cara menciptakan contact form di blogger, pada halaman posting atau laman blog. Contact form ini fungsinya Untuk memudahkan pengunjung menghubungi kita. Dengan mengisikan nama, email dan juga pesan yang ingin disampaikan ke penulis melalui kotak form yang telah disediakan. Pesan yang dikirimkan, akan masuk ke alamat email yahoo kita, yang kita gunakan diblog. Makara tinggal buka yahoo dan lihat apakah ada pesan yang masuk dari kontak blogger.

Gambar diatas yaitu pola contact form yang akan kita buat. Caranya ikuti langkah-langkah dibawah ini.

Langkah pertama : Membuat contact form dihalaman posting atau laman blog.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak
2. Lalu klik tambahkan Gadget > Gadget Lainnya > kemudian pilih Formulir Kontak > Dan letakkan dibagian sidebar paling bawah.
3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel gres atau buat dilaman > Laman gres > Laman Kosong. Dan Copi instruksi dibawah ini kemudian pastekan dibagian HTML(disebelah compose).
<form name='contact-form'>
<div>Nama Kamu:</div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

<div>Email:</div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

<div>Pesan:</div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>

<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div>
</form>
4. Terakhir beri judul, dan Publikasikan. Selesai.

Langkah kedua : Merubah tinggi dan panjang dari form nama, email, pesan.

1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan instruksi ini kedalamnya.
/* untuk mengatur ukuran form name dan email*/
.contact-form-name, .contact-form-email {
max-width: 300px;
width: 100%;
}
/* untuk mengatur ukuran form pesan*/
.contact-form-email-message {
max-width: 300px;
width: 100%;
}
2. Lalu terapkan ke blog, bila ingin merubah tingginya tambahkan instruksi height:100px;. Silakan diatur sendiri.

Langkah ke 3 : Menghilangkan Contact Form di halaman Blog.

1. Ke pengaturan Template > Edit HTML > Dan klik Lompat ke Widget > Pilih ContactForm1.
2. Selanjutnya, buka semua kode, dan hapus beberapa instruksi didalamnya(hanya instruksi dibagian ContactForm1 bab lain jangan dihapus). Sampai yang tertinggal hanya instruksi dibawah ini
<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm'>
    <b:includable id='main'>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
3. Setelah itu, cari instruksi ]]></b:skin> dan tempatkan instruksi dibawah ini, fungsinya untuk menghilangkan sisa dari widget contact form dihalaman blog.
#ContactForm1 {
height: 0px;
visibility: hidden;
display: none;
background:transparent;
box-shadow:none;}
4. Save temlate, selesai.

Widget contact form tetap akan ada di blog kita. Tapi hanya di bab tata letak saja, pada halaman blog tidak akan terlihat. Jika ingin menambahkan background gambar didalamnya, kau baca di artikel cara menciptakan background dihalaman posting. Semoga dapat Bermanfaat untuk anda.

Read More

Cara Menciptakan Author Dibawah Posting Blog

Cara menciptakan author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih gampang untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar dapat lihat dibawah ini.

Untuk lebih jelasnya wacana cara menciptakan author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

1. Login keblogger, pilh pengaturan template.
2. Klik edit HTML dan cari isyarat <data:post.body/> kemudian masukan isyarat ini dibawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='gambar'>
<img src='https://lh4.googleusercontent.com/-n-7Ujm1j6nk/UYqhfNgBZcI/AAAAAAAAAQQ/nAaz8oHf4CM/s361/Fandra%2520Juani.jpg'/>

<div class='Penulis'>
<span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><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></a></span>

<div class='keterangan'>
<span>Ada Pertanyaan wacana artikel diatas, silakan masukan komentar dibawah. </span>

<div class='terimakasih'>
<span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
<div style='clear:both;'/>
</div></div></div></div></b:if>
<div style='clear: both;'/>
</div>
3. Kode <data:post.body/> di template blog, biasanya ada 3, masukan isyarat langkah 2, di bawah isyarat <data:post.body/>, ketiga2nya.
4. Selanjutnya, cari isyarat ]]></b:skin> kemudian masukan isyarat ini didalamnya.
.gambar {
background: url(http://3.bp.blogspot.com/-XQpNUW9Y0BQ/Und_bxqAsyI/AAAAAAAABKI/0xTMRKYDggw/s1600/gt.jpg) repeat-x top center;
box-shadow:0px 1px 10px #aaaaaa;
border:2px solid #eeeeee;
padding:0;
margin:10px 0;
font:bold 12px Arial,Sans-Serif;height:100px;}

.gambar img{
width:70px;
height:70px;
margin:10px;
float:left;
padding:4px;
background:#ffffff;
border:1px solid #dddddd;
position: relative;
-moz-transition:all .4s ease-in-out;;
-ms-transition:all .4s ease-in-out;;
-o-transition:all .4s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .4s ease-in-out;}

.gambar img:hover{
-o-transform: scale(1) rotate(720deg);
-moz-transform: scale(1) rotate(720deg);
-webkit-transform: scale(1) rotate(720deg);}

.Penulis{
float:left;
margin:10px 0px 0px 0px;
text-shadow: 2px 2px 5px #107cde;
font-weight:bold;color:white;}
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}

.Penulis a{
text-transform:uppercase;
font-family:Ravie;
font-size:12px;
text-shadow:2px 2px 5px #1780dd;
font-weight:bold;padding:0}

.keterangan{
padding:15px 0px 0px 0px;
color:white;font:italic 12px Arial, Sans-Serif;
text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

.terimakasih{
margin:13px 0px 0px 150px;
font:italic 12px Arial, Sans-Serif;color:black;
text-shadow: 2px 2px 5px #ffffff;}
5. Save template, selesai.

Keterangan isyarat langkah 2: 

• Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
• Penulis isi dengan nama kamu, tulisannya aku buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.

Keterangan isyarat langkah 4: 

• Gambar untuk menawarkan background disemua tulisan. Height nya aku atur 100px dapat anda ganti sesuai dengan cita-cita anda.
• .gambar img{ untuk mengatur ukuran gambar profil author dan juga embel-embel isyarat gambar berputar.
• .gambar img:hover{ gambar akan berputar dikala disentuh mouse. Penjelasannya baca di artikel cara menciptakan gambar berputar diblog
• .Penulis a{ untuk mengatur font atau jenis goresan pena nama author.
• .keterangan{ jika memakai keterangan yang panjang. Hapus isyarat float:left; yang ada di isyarat .Penulis{ biar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan cita-cita anda sendiri. Dan baca juga artikel wacana cara menciptakan tanda penulis dikotak komentar blog, biar terlihat berbeda dengan komentar dari pengunjung, sehingga orang dapat membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

Read More

Cara Menciptakan Tombol Sosial Media Share Diblog

Cara menciptakan sosial media share, ibarat facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share sanggup kita tempatkan dibawah judul posting atau dibawah posting. Dan sanggup juga ditempatkan diwidget HTML/javascript di bab sidebar blog.

Cara menciptakan sosial media share di blog, ikuti langkah-langkah dibawah ini.

1. Login ke blog, kemudian pilih pengaturan Template.
2. Klik edit HTML dan cari isyarat </head> kemudian masukan isyarat berikut ini diatasnya.
<script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
<script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
3. Save template. Selesai.

Setelah menempatkan isyarat script. Sekarang kita akan coba memasukan isyarat share di bagian2 blog, ibarat di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya ibarat dibawah ini.

Sosial media share dibawah judul posting

1. Ke pengaturan template, klik edit hmtl dan cari isyarat <div class='post-header-line-1'/>
2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 kemudian masukan kode share button ini dibawah nya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left' class='kode-share-buttons'>
<keterangan>Bagikan Artikel >>></keterangan>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p></b:if>
3. Silakan gunakan isyarat share yang kalian inginkan, dan untuk goresan pena Bagikan Artikel >>> Kamu sanggup ganti dengan kata yang kau inginkan. Setelah itu save template, selesai.

Sosial media share dibawah posting

1. Ke pengaturan template, klik edit hmtl dan cari isyarat <data:post.body/>
2. Kode <data:post.body/> ada 3,  piih yang nomor 3 kemudian masukan kode share button dibawah nya.
3. Kode kode share button yang dipakai sama ibarat kode Sosial media share dibawah judul posting
4. Save template, selesai.

Sosial media share di widget atau sidebar

1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
2. Lalu masukan kode share button yang dipakai sama ibarat kode Sosial media share dibawah judul posting
3. Save gadget/widget, kemudian tempatkan sesuai dengan yang kalian inginkan, selesai.

Dan yang terakhir yaitu menambahkan  isyarat css untuk menambah tampilan dari tombol sosial media share. Caranya.

1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan isyarat ini kedalmnya.
.kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
keterangan {color:#000;font-weight:bold;margin-right:20px;}
2. Terapkan ke blog selesai.

Semoga Bermanfaat.

Read More

Cara Menciptakan Google Custom Search Diblog

Cara menciptakan google custom search di blog, yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang ada diblog. Cara menggunakannya, masukan kata kunci goresan pena ke dalam kotak search, kemudian enter atau klik tombol search, maka artikel2 yang bekerjasama dengan artikel yang dicari akan muncul. Contoh gambar kotak search google custom.

Seperti pola gambar diatas, ada goresan pena Google^TM Pencarian Kustom didalam kotak penelusurannya. Untuk lebih jelasnya perihal cara menciptakan google custom search di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Selanjutnya kunjungi situs ini https://www.google.com/cse/
2. Lalu pada situs itu, Masukan alamat blog kamu. Dan atur languange nya ke bahasa indonesia(jika ingin menyerupai pola gambar diatas) untuk bahasa inggris tulisannya kira-kira akan menjadi menyerupai ini Google^TM Custom Search. Silakan diatur sesuai dengan yang diinginkan. Lalu klik Create.

3. Setelah itu klik get code dan copi arahan scriptnya.
4. Selanjutnya, kembali ke blogger. Pilih pengaturan Tata Letak > klik Tambahkan Gadget > HTML/Javascript dan pastekan arahan script dari google tadi.
5. Save dan tempatkan gadget sesuai dengan yang kalian inginkan. Selesai.

Untuk merubah tampilan kotak google custom search, kunjungi lagi situs  https://www.google.com/cse/ lalu  klik search engine yang telah dibentuk tadi, dan pada pilih Look and Feel. Nah disitu ada pengaturan Layout, Themes, Customize, dan Thumbnail silakan atur sesuai dengan yang dinginkan. Setelah final memodifikasi tampilannya, klik Save & Get Code dan pastekan lagi ke Gadget HTML/Javascript di pengaturan Tata Letak tadi. 

Jika ingin hasil pencarian dari kotak seacrh google custom terbuka dihalaman tab baru. Pada pengaturan layout di situs google custom tadi, pilih Google Hosted dan pilih New Window. Jangan lupa disave dan ambil/copi arahan scriptnya, dan pastekan kembali ke gadget HTML di blogger.
Untuk pembuatan kotak penelusuran yang lebih mudah, silahkan baca di cara menciptakan kotak penelusuran. Selesai. Semoga Bermanfaat.

Read More