Cara membuat Blogroll

Cara membuat Blogroll

Sebelumnya kita cari tahu dulu, apa itu Blogroll?? Apa ya...
Blogroll adalah sebutan kode script untuk membuat box yang dilengkapi dengan tulisan teks, sementara box tersebut dapat ditarik-tarik dengan menggunakan scroll jika terdapat kelebihan muatan teks.

Blogroll sering digunakan untuk link halaman pos pada widget, atau link sahabat untuk tukeran link.

Gimana ya cara buatnya:

1. Masuk ke blogger kamu
2. Pada dashboard pilih > Tata Letak > Tambah gadget > HTML/Javascript
3. Nah, masukin kode berikut ini

<div style="border:0px none;overflow:auto;width:160px;height:400px;text-align:left;background:#FFFFFF">

<div style="background:#020D8A;"><font color="#FFFFFF"><b>Alat Listrik</b></font></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/lampu-philips.html"><font color="#000000">- Lampu Philips</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/lampu-osram.html"><font color="#000000">- Lampu Osram</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/"><font color="#000000">- Kabel Listrik</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/box-mcb.html"><font color="#000000">- Box MCB</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/inbox-outbox.html"><font color="#000000">- Inbox & Outbox</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/stop-kontak-1-6-way.html"><font color="#000000">- Stop Kontak 1-6 Way</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/stop-kontak-saklar.html"><font color="#000000">- Stop Kontak + Saklar</font></a></div>

<div style="background:#020D8A;"><font color="#FFFFFF"><b>Elektronik</b></font></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/microphone-yamaha-ya-7970-memiliki.html"><font color="#000000">- Microphone Yamaha</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/energizer-recharge-mini.html"><font color="#000000">- Baterai Charge</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/lampu-emergency.html"><font color="#000000">- Lampu Emergency</font></a></div>

<div style="background:#E7F5FF;"><a title="Klik untuk masuk halaman" href="http://raihanlistrik.blogspot.com/2013/07/seterika.html"><font color="#000000">- Seterika</font></a></div>

</div>

• Setelah itu klik simpan, dan lihat hasilnya, mantap bukan??

Cara modifikasi kode diatas:

• width:160px;height:400px = lebar dan tinggi, sesuaikan dengan blog kamu ya
• Kamu bisa merubah warna latar belakang dan huruf yang digunakan, dengan mengganti kode warna HTML yang berwarna merah
• Tulisan berwarna biru adalah link untuk halaman kamu, dan juga tulisan yang timbul di blog nantinya

Contoh jadinya seperti ini dengan width:160px;height:200px :

Alat Listrik

- Lampu Philips

- Lampu Osram

- Kabel Listrik

- Box MCB

- Inbox & Outbox

- Stop Kontak 1-6 Way

- Stop Kontak + Saklar

Elektronik

- Microphone Yamaha

- Baterai Charge

- Lampu Emergency

- Seterika

Selamat Mencoba...
Kalo berhasil, komen boleh lah... :)

Read More

Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentangmembuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

DEMO

Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya padaMembuat Slider Carousel Otomatis Berdasarkan Label.

Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
2. Pilih blog yang ingin anda tambahkan slider image ini.
3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
   #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
   #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
   #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZDD7bhnb0pHwFQWt93RMb3oaLJSuW0oC_n9OPe7Dcqd7RdBKJa3d_HLCa1f_1mM8lzY1-tsnizSw_rfTxt-Qi4tQpVl_2yd2Y5c04W4qtji2r0PtQlgvQdyLLYJqqt_kZgCRskmqbA7s/s1600/transparant.png)}
   #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
   #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
   #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
   #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
   #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
   #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
   #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
   #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
   #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
   Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
6. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   Keterangan :
   Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Warna biru : Jumlah post yang ditampilkan dalam slider
   Warna hijau : Panjang dan lebar image besar
   Warna merah tua : Panjang dan lebar image kecil
7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
   Keterangan :
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
   Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :

   script src=\"/feeds/posts/default/-/sport?max-results

   dengan kode berikut :

   script src=\"/feeds/posts/default?max-results

8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotakHMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>

   /* Slide Content
   ----------------------------------------------- */
   .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
   word-wrap: break-word; overflow: hidden;} 
   .slide {color: #666666;line-height: 1.3em;}
   .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
   .slide li {margin:0;padding-top:0;
   padding-right:0;padding-bottom:.25em;
   padding-left:0px;text-indent:0px;line-height:1.3em;}
   .slide .widget {margin:0px 0px 6px 0px;}

9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :

   <b:if cond='data:blog.url == data:blog.homepageUrl'>
         <div id='slide-wrapper'>
   <b:section class='slide' id='slide' preferred='yes'/>
         </div>
   </b:if> 

   

Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat

Read More

Cara Membuat Menu/Tombol DropDown di Blogger

Cara Membuat Menu/Tombol DropDown di Blogger

Cara Membuat Menu/Tombol DropDown di Blogger – Menu dropdown(combo box) merupakan menu yang jika di-klik akan menampilkan submenu dari menu tersebut. Preview dari menu drop down dapat Anda lihat seperti gambar dibawah ini. Cobalah untuk memilih salah satu submenunya, maka Anda akan dibawa pergi ke url yang terdapat dalam submenu tersebut. Menu drop down ini dapat digunakan sebagai alternatif pengganti menu bar blog Anda, karena menu drop down ini kecil dan hanya sedikit memakan tempat.

Menu/tombol drop down ini dapat digunakan untuk navigasi dalam blog, seperti navigasi laman, daftar tags/label, tautan menuju situs favorit dan lain sebagainya. Untuk memasang menu drop down ini, perhatikan script menu drop down dibawah ini :

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);'style="width: 100%";>
<option value="#" />--Judul Drop Down--
<option value="url1" /> title link 1
<option value="url2" /> title link 2
<option value="url3" /> title link 3
</select>

Jika script menu drop down tersebut dipasang di blogger (melalui Tambah Gadget -> HTML/Javascript), script tersebut akan terlihat seperti tombol menu drop downdibawah ini.

 --Judul Drop Down--   title link 1  title link 2  title link 3 

Nah, misalkan saya menginginkan title menu dropdown ini adalah Label Blog, kemudiantitle link 1 pada menu dropdown itu menjadi Tips Trik Blogging, dan jika di klik akan menuju ke url : http://xxpc123xx.blogspot.com/search/label/tips%20trik%20blogging, maka tinggal lakukan pengubahan pada --Judul DropDown-- , url1 dan title link 1. Selengkapnya, lihat beberapa pengubahan yang saya lakukan pada script menu drop down dibawah ini :

<select onchange='javascript:window.open(this.options[this.selectedIndex].value);'style="width: 100%";>
<option value="#" />Label Blog
<option value="http://xxpc123xx.blogspot.com/search/label/tips%20trik%20blogging" /> Tips + Trik Blogging
<option value="url2" /> title link 2
<option value="url3" /> title link 3
</select>

Sehingga previewnya akan seperti ini :

 Label Blog  Tips + Trik Blogging  title link 2  title link 3 

Untuk mengetes menu drop down ini, cobalah untuk mengklik salah satu menu diatas.Untuk Anda yang menginginkan menu dropdown ini memiliki submenu lebih dari 3, Anda dapat menambahkan <option value=’link tujuan’/> Judul Link, sebelum </select>

Cara Memasang Menu DropDown di Blogger :

1.     Buka blog Anda di blogger, lalu klik Tata Letak.

2.     Pada Tata Letak, pilih Tambahkan Gadget -> HTML/Javascript.

3.     Berikan judul pada kotak isian Judul, lalu pastekan kode HTML pada kotak dibawahnya.

4.     Klik Simpan untuk menyimpan menu dropdown.

5.     Buka blog Anda untuk melihat preview menu drop down di blog Anda

Sekarang, visitor blog Anda dapat menggunakan menu drop down tersebut sebagai alternatif navigasi di blog Anda. Selamat mencoba membuat menu drop down di blog!

Salam Blogger!

Read More

Cara BackUp/Mengembalikan Template Blogger

Ketika saya membuat blog dengan menggunakan platform Blogger untuk pertamakalinya, seringkali mengalami kesalahan/error pada saat melakukanperubahan/editing kode html template blog. Dan akan lebih repot untuk mengatasinya jika kita tidak melakukan backup template/menyimpan cadangan template dalam kondisi normal sebelum terjadi error/kesalahan. Nah..untuk mengatasi masalah tersebut, Panduan Bloggers sangat menyarankan Anda untuk selalu melakukannya sebelum mengutak-atik code html template blog, agar apabila suatu saat terjadi maka akan sangat mudah mengembalikannya ke kondisi semula.

Mari kita praktek cara memback-up template dan mengembalikan ke kondisi sebelum kesalahan editing.

1. Login Dashboard > Template > contoh berikut :

Anda akan melihat tombol Backup / Restore di sudut kanan atas halaman Template

2. Klik tombol Backup / Restore :

Akan muncul popup seperti contoh berikut :

3. Klik tombol Download full template : seperti berikut :

4. Akan muncul popup download, lalu Save file ke folder PC Anda :

Simpan baik-baik template backup terakhir hasil download (Sebaiknya pada folder dgn nama Blog yang di backup)

Nah..lalu bagaimana cara mengembalikan template ke posisi semula sebelum terjadi error setelah melakukan editing template?.
Caranya mudah aja, sama seperti mengubah/mengganti template defaul/bawaan Blogger dengan meng-upload custom template file XML buatan pribadi/desainer template lain.
1. Caranya ikuti point 1 dan 2 di atas, kemudian klik tombol Browse untuk mengambil cadangan template backup hasil download tadi dari folder PC. Lihat contoh berikut :

Setelah masuk ke file template xml yang tersimpan, klik tombol Open atau double click pada file. contoh di bawah :

 Maka akan terlihat seperti berikut :

Silahkan klik tombol Upload, tunggu sampai proses upload template backup selesai.

Setelah berhasil upload template, makan akan Anda lihat hasilnya seperti gambar berikut :

Selesai dalam cara mudah backup/restore template blogger. Semoga berguna dan selanjutnya keep nice blogging.

Read More

Cara Mudah Membuat Slide Show Foto di Blog

Cara Mudah Membuat Slide Show Foto di Blog

Sebuah halaman blog yang tidak ada sentuhan foto atau gambar akan terasa membosankan. Jika sudah bosan, maka pengunjung blog tidak akan lama bertahan. Bukan hanya sebagai pernak-pernik, sebuah foto juga bisa memberikan kesan tersendiri. Orang akan lebih hafal dengan gambar daripada tulisan.

Sekarang, kita akan belajar untuk membuat slide show, yaitu foto-foto yang ditampilkan secara bergantian dengan otomatis. Slide show bisa digunakan untuk menampilkan banyak foto tanpa menyita banyak space. Karena foto akan diputar layaknya sebuah video, sehingga lebih menarik dan hemat tempat.

Slide show bisa digunakan untuk menampilkan foto liburan yang banyak, atau memajang foto-foto produk untuk toko online. Cara untuk membuat slide show ini sangat mudah, tidak perlu pintar photoshop atau flash. Kita tinggal menyiapkan foto yang sudah diupload (dihosting). Kita bisa memanfaatkan post blogger, Picasa, Photobucket, dan lain-lain.

Cara Mudah Membuat Slide Show Foto di Blog
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src='http://yourjavascript.com/53816065231/Database5.js' type='text/javascript'></script>
<script type="text/javascript" src="http://yourjavascript.com/65160840132/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content-slider').cycle({
fx: 'fade'
});
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
<img src="URL Foto 1" />
<img src="URL Foto 2" />
<img src="URL Foto 3" />
<img src="URL Foto 4" />
</div>

5. Ganti URL Foto 1 dengan URL foto yang sudah dihost (upload)
6. Kita bisa juga menyesuaikan tinggi foto (height) dan lebarnya.
7. Kita bisa menambahkan atau menampilkan foto lebih banyak lagi dengan menambahkan kode sama seperti <img src="URL Foto 4" /> dan seterusnya.
7. Simpan jika sudah selesai. 

Read More

Cara Membuat Slide Show Gambar di Blog

Pada sore hari ini saya akan mennyapaikan Turitorial pendaek bagaimana Cara mebuat slide show gambar di blog . Fungsi dari slide show ini adalah untuk menampilkan gambar pilihan kita.

Slide show ini berbeda dengan slide show biasanya, karena slide show ini berada diatas postingan blog dan berukuran besar untuk demonya anda bisa melihatnya.

Demo

Berikut adalah caranya 

Mempersiapkan gambar

1. Pertama anda siapkan gambar, atau URL gambar. Untuk mendapatkan URL gambar anda bisa mengklik Disni

2. Untuk saran saya, sebaiknya anda menyiapkan gambar yang besar.

Memasang Slide show

1. Login ke blog

2. Template--> edit html

3. Cari kode berikut

 <div id='main-wrapper'>

4. Pastekan kode dibawah ini, letakkan di bawah kode diatas

 <!-- Diandiki blogspot Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='fp-slider clearfix'>
<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jJxUhZmPlyqhNQ9SkCLNs3bQamjrSkCrBEiHr0tVsm9O5KW79XW6tKxzglEXdagi9fxBUqihsOsvaJKr4Oc2Lyf09kqf0v57xxSTJQ4zfpynymaYzkE_asbgDr_ggKQBGwJx5dH5AzKq/s1600/diandiki+banner.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Diandiki Blogspot</a>
</h3>
<p>
  Diandiki blogspot, blog ilmu pengetahuan, dan turitorial blogger --> http://diandiki.blogspot.com 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2R3Oj40qr4n-Tc22T66pgnoGF-x8Jiycpe5Fh7Q7jaKsIqsgF4tpU0BXLNtb723eBnFmuxusNrTlbEObmPQUF1aPD59_Wz2QQQz_E4WUFVAgh8s1rr1d-qrfRnNW1REs9iSZlP5ZygJK/s461/coollogo_com-23487472.png'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Info kuaci</a>
</h3>
<p>
  Kumpulan artikel, cerdas dan unik ---> http://infokuaci.blogspot.com 
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG8-czYMpXF_A-vxbnDR9dBCWqPXOuI05WeyT_I2b-YO6Jp1JQ8_-PEziFkFVjM6JFBncGXQi0Tqk4fixh74rtyWuJQslsqIReClN29DO0vGOnzcg4gwZ4ykmWfPLKvhjHzKr-oOp7lDJ1/s400/mesjid+agung.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>Masjid agung sawahlunto </a>
</h3>
<p>
Masjid yang dulunya merupakan sebuah PLTU
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://indonesia.travel/public/media/images/upload/poi/sumbar_sawahlunto.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>I love Sawahlunto</a>
</h3>
<p>
Saya cinta kota saya, Sawahlunto
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='http://static.pulsk.com/images/2013/07/07/80721a32e66cf34c202e0f0686f837bd.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>I love Indonesia</a>
</h3>
<p>
Saya sangat mencintai produk indonesia
</p>
</div>
<div class='fp-prev-next-wrap clearfix'>
    <a class='fp-next' href='#fp-next'/>
    <a class='fp-prev' href='#fp-prev'/>
</div>
</div>
</div>
<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>
    <span class='fp-pager'/>
</div>
          
</div>
</div>
<div style='clear:both;'/>

</b:if></b:if>

<!-- Diandiki Blogspot Content Slider End -->

Read More

Daftar Blog Gratis di Blogger

Daftar Blog Gratis di Blogger 

Mempunyai blog pastinya sebuah keinginan bagi meraka yang menyukai akan dunia tulis-menulis, dengan alasan agar hoby mereka dapat tersalurkan dan karya mereka dapat dinikmati oleh semua kalangan masyarakat, tak terkucuali bagi mereka yang menginginkan penghasilan tambahan lewat internet.

Nah kali ini saya akan menjelaskan cara membuat blog gratis di blogger/ blogspot. Sebenarnya banyak sekali yang menyediakan blog gratisan seperti wordpress, joomla dll. tetapi saya lebih memilih blogger dengan alasan karena bloggerlah yang paling popular saat ini dan juga agar kita dapat memaksimalkan fasilitas yang telah disediakan oleh raksasa google.

Sebelum memulai alangkah baiknya kita mengetahui sekilas apa itu yang dimaksud dengan blog?. Blog adalah singkatan dari webblog, yang isinya dapat diupdate kapanpun dan dimanapun serta dapat memberikan sebuah komentar dari apa yang kita postingkan.

Tanpa panjang lebar langsung saja kita akan membahas caranya, tetapi terlebih dahulu kita harus mempunyai email dari akun google. jika anda belum mempunya baca artikel cara membuat email di google.

Cara daftar blog

1. Buka alamat www.blogger.com
2. Masukkan akun gmail anda seperti pada gambar, lalu klik Masuk
   
3. Selanjutnya akan dibawa ke halaman konfirmasi profil, lalu klik Lanjutkan 
   
4. Kemudian anda akan diarahkan ke halaman home blogger, lalu klik Blog Baru untuk membuat akun blog anda
   
5. Isikan judul blog, usahakan sesuai dengan isi topik blog anda. Lalu masukkan alamat blog dan tunggu sampai proses pengecekan ketersediaan selesai dan muncul tulisan Alamat blog ini tersedia, dan pilih salah satu tampilan untuk blog anda, lalu klik Buat blog 
   
6. Anda akan mendapat pemberitahuan bahwa blog anda telah jadi seperti pada gambar berikut
   
7. Jika ingin melihat tampilan blog, anda tinggal mengklik Lihat blog dan akan muncul seperti pada gambar berikut. 
   
8. Selamat blog anda sudah jadi terlihat seperti gambar diatas

Itulah tadi tutorial cara daftar blog gratis di blogger, selanjutnya tinggal bagaimana sobat merawatnya dengan cara memperbagus blog dengan menambahkan gadget menarik dan tak lupa mengisi dengan artikel-artikel yang bermanfaat tentunya.

Read More

Cara Membuat Animasi Cursor Diikuti Teks Di Blog

Cara Membuat Animasi Cursor Diikuti Teks Di Blog merupakan lanjutan dari artikel sebelumnya yaitu Cara Membuat Tulisan Berjalan Di Blog,hampir sama tampilannya namun untuk yang satu ini sedikit berbeda yang mana teks akan selalu mengikuti arah cursor kemanapun cursor mengarah,cukup unik juga saya lihat tampilan ini jadi jangan sampai sobat tidak mencobanya animasi yang satu ini.

Meski telah banyak yang membahas tentang Cara Membuat Animasi Cursor Diikuti Teks Di Blog namun tidak ada salahnya saya sekedar mengingatkan kembali tentang animasi yang satu ini demi menyempurnakan artikel demi artikel yang saya buat.

Buat kalian yang penasaran nih dan ingin segera mencobanya silahkan perhatikan caranya di bawah ini.


1. Seperti biasa kalian harus login terlebih dahulu.
2. Pilih menu Tata Letak kemudian Add gadget kemudian pilihHTML/Javascript.
3. Copy script di bawah dan pastekan pada HTML/Javascript bagian konten.

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'Cambria', verdana, arial;
color: #4acb35;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Silahkan Ganti Tulisan Ini";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

Keterangan :

• Tulisan berwarna hijau adalah jenis hurup silahkan kalian ganti sesuai keinginan
• Tulisan berwarna merah adalah teks yang akan mengikuti arah cursor silahkan kalian ganti.

4. Setelah semuanya beres kemudian save dan lihat hasilnya.

Read More