Cara Membuat Twitter Terbang di Blogspot

      Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

• Klik Layout > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieqAH10KmHdBcOWutozaxDRpkvZoq9YMD-pYYwwKwGA65Ag5zObLe1ATS-uh862e-VIciUxnJ-RunJ12ynzGs-UE1LvLBN2vhiMGFVUkSgVXW7Fzg9cLFwFrNMu2Y3GaCJKkXycAQ8cZc/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
• Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2yRqjiS3fWsJZWA_9vXUWA5d-bKZ3J5HA7kZILo_841Ml_i9lMHOl2rUbmBC2VMCZEcxfCd-xf3ip191Ba7OWlnp97GXv1T84uf4dJf5iInggazv6r_2-BJnsS3saCLCvJ4J3RbDcMkM/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGl_jXEjvL_g9mBysBTRdUAHhOIaJbOMESyyhEXNTfdAEHoLRWCRCX2Pl34B3oAaIBB7feqypgkmrq08pA1uSs4oAaWxnrWq_zSMmgnW7Vwc1xx_vKu3kE-KxY0DZkm9g83WFaml2zAno/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ZjMK_31gYbmp3GHyaYpJN304cqKCql7C2so4DWZHexwGfZY3OP30bt5i8zB4IEpWgUI5aiqBoOiiFj5tv55gENJ12afURQNOv2_jFQ65E8tpfcdZwU9BW9uH7x7lnyNBn5lxrHuDW8w/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFVS3SXknPjx93UtR-e4_JgPkNP605LBboqwF_Hub6jmxMREcBAOy6calE_2tT7jOaCQNkNhyFAP0nmmAQ6mZyOlTDQHbNSAxTZq3_nutL56VJLja6Kt963wB26EOjq1OzGxZXqXjDJq8/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzqRaaKE9YxAurvkS39Fzi6uRMFMUfuL79xfk56jtHngLzgp_1kcQI8bsr716Z_Th3goFFJ7fug0U0n7kATyRn6C3PPK-QcHusdaezZBz5QN_VrnFhzyOPDM-xQ17Y-oW8scrImONqCnU/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeIpJIbczSq5wTfu6CHaf1jhjw6TVDLuxJNPZi9jBrCXjmhUW7WBg1jtmQAlPUBGv10uV8RwHvMeC5uxp0P6BiPSAz0PQtgc_E0PZ5JYeLDIcnymTnCQMCuDd9ygYI5eoKe0t0goZVOw4/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtWSka_E4bz8l8uu0M56jpuz9McDBRR7b-s41_aXbREhuhikX6D0SaXdmcBc7Ns4u1xWdn1EL15Q9zSBACW2q5NPksCJ2KUpFhZzP5G-5NVTY0RWndAWp1zMp81BNw4EDTTLeOYgNjhEM/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5EWFhF5aKtzd1YLg-ZRPFNUuien1Jf2LkMWIwV7orHoKTSK0Hd_4nD2wv9loC9y30J_hg5f1hIXIn7cn4AvcTpRiT_PQBSkDrmKouBTAqZGkp3yh7_8otYCzWQMZDg6TMec-dkOvrTGQ/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Read more ...

Cara Edit Slide Default Template

Langsung Aja sob simak tutorialnya diBawah ini:

1. Masuk ke dashbor blog

2. Klik "Template"

3. Kemudian Klik "Edit HTML"

4. Cari tulisan (This is default featured slide 4 title) untuk mempermudah pencarian bisa menggunakan CTRL+f

5. Setelah itu akan mucul kode seperti dibawah ini:

<!-- Slide 4 Code Start -->
<div class='fp-slides-items'>
<div class='fp-thumbnail'>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVwcDHLKmuxv6dT0Pyi5JNp2Bz_q4ODi0BdYmvYRXvNf1oBrgBUTcJv_qStOvGRJQUgh47OksVP9cb3bptK8gh7nUXWSFWpRMvWmWvHrwMcibbbGIVgspV_3eN6iwUN0rzwNcFmd40CE4V/s0/4.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<a href='#'>This is default featured slide 4 title</a>
</h3>
<p>
Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.
</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 -->

• Ganti yang berwarna Biru dengan lokasi gambar yang akan ditampilkan
• Ganti yang berwarna Merah dengan link jika diklik 
• Ganti yang berwarna Orange dengan URL yang ingin dituju
• Ganti yang berwarna Hijau dengan alamat Blog

Read more ...

Cara Membuat Read More Otomatis

Cara Mudah Membuat Read More Otomatis di Blog – banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “Read More”, “Baca Selengkapnya", " Lanjutkan Membaca”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Untuk demonya silahkan klik link dibawah ini.

CONTOH READ MORE

Cara membuat readmore otomatis dengan gambar

• Silahkan buka template anda. Pilih: Template >> Edit HTML.
• Cari Kode </head>.
• Copy paste kode dibawah ini tepat di atas kode </head>

<!--ReadMore http://trikseosimple.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

• Save Template anda.
• Kemudian cari kode 

      <b:includable id='post' var='post'>

• selanjutnya cari lagi code ini.

       <data:post.body/>

       (pencarian dilakukan 2 kali, karena code tersebut tidak hanya berjumlah 1)

•  Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

• Klik Save / Simpan dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

Read more ...

Website Penyedia Template

Jika Anda sudah bosan dengan tampilan blog Anda di Blogger dan merasa tidak puas dengan pilihan template yang disediakan Blogger, Anda bisa menggunakan desain template buatan pihak ketiga yang tersedia secara gratis. Jika Anda melakukan pencarian dengan Google, Anda akan dengan mudah menemukan situs-situs penyedia template blogger tersebut. Pada posting kali ini, saya merekomendasikan 15 situs yang menyediakan template blogger dengan kualitas bagus secara gratis….

Untuk menggunakan template dari pihak ketiga ini, terlebih dahulu Anda harus mendownload file template yang disediakan situs-situs tersebut. Beberapa situs menyertakan file “readme.txt” yang berisikan petunjuk penggunaan template pada file yang Anda download tadi. Selanjutnya Anda akan mengupload file .xml ke dalam akun Blogger Anda. Tata cara pengunggahan ini ada pada posting saya di Cara Mengganti Template Blogspot yang lalu.

1. Blogger Themes

 

2. Blogger Templates Blog

 

3. Blogger Styles

 

4. BTemplates

 

5. Theme Craft

 

6. Hook Up Your Blog

 

7. Deluxe Templates

 

8. Blogger Templates Free

 

9. Blogger Blog Templates

 

10. Blog Crowds

 

11. Zoom Template

 

12. Blog Template 4 U

 

13. Chica Blogger

 

14. Blogger-Templates

 

15. All Blogspot Templates

Read more ...

Cara Mengganti Template Blogspot

Mengganti template blogger atau mengganti tema blogspot sudah lazim dilakukan oleh kebanyakan blogger. Dengan alasan agar tampilan blog lebih keren. Sebagian orang bertanya-tanya, bagaimanakah caranya mengganti template blogspot? Saya akan jelaskan caranya pada post kali ini.

Untuk yang masih belum tau alamat untuk mendownload template, bisa di klik di baris menu tepat di atas Posting Blog.

Contoh Ilustrasi Blogger Template

Berikut adalah caranya :

1. Login atau Masuk ke halaman Dasbor Blogspot kamu.
2. Klik Template

3. Klik Cadangkan/Pulihkan

Gambar-2

 3. KLIK: Cadangkan/Pulihkan
Biar lebih jelas silahkan lihat gambar-2 di atas:
Setelah meng-Klik: Cadangkan/Pulihkan akan muncul kotak Template Cadangkan/Pulihkan, seperti gambar-3 di bawah ini:

Gambar-3

4. Klik Unduh template lengkap
Sebaiknya unduh terlebih dadulu template blog anda sebelum mengganti dengan template hasil download untuk berjaga-jaga jika template hasil download tidak berjalan atau ada galat, template yang kamu pakai sebelumnya masih bisa digunkan lagi setelah diunduh dan disimpan di hardisk komputer atau laptop kamu

5. Unggah template dari file hard drive kamu
Cara mengunggah template dari file hard drive caranya denga Klik Browse.

Gambar-4

6. Pilh file dengan cara Klik File Template hasil download kamu di hard drive.
7. Klik Unggah file template

Selesai...

Template berhasil di terapkan ke blogspot, sesuai dengan yang anda inginkan. Namun semua isi template itu masih default / asli dari template yang anda download tadi. Saya akan menjelaskan bagaimanakah cara mengaturnya pada posting saya yang akan dating…

Read more ...