Read more: http://impoint.blogspot.com/2013/03/cara-membuat-auto-readmore-di-blog.html#ixzz2VzTVua3A Dilarang copy paste artikel tanpa menggunakan sumber link - DMCA Protected Follow us: @ravdania on Twitter | pemakan.worell on Facebook

Rabu, 12 Juni 2013

Membuat ReadMore Otomatis

Cara Membuat Readmore Otomatis di Blogspot
Mungkin Templat pada Blog anda belum pakai Readmore atau mungkin sobat pernah Membuat tapi gagal.seperti yang pernah saya alami?jika benar jangan putus asa sobat saya pun pernah juga mengalaminya.jadi anda tidak sendiri dalam hal ini.Sekarang admin sudah berhasil membuatReadmore  Otomatis yang berguna memotong tampilan postingan kita supaya Terlihat Rapi Pada saat ada di halaman Home Page.dan ditambah lagi kita bisa menyisipkan Judul Postingan Blog yang secara tidak langsung itu bisa menambah power Seo Kita.

Berikut Cara Membuat Readmore Otomatis di Blogspot :
1.Login ke blogger (Sebaiknya Back-up dulu templat anda jadi jika nanti gagal tinggal Upluad lagi)
2. Masuk Kedalam Menu TEMPLAT Anda
3. Pilih Edit HTML.
4. Centang tulisan "expand template widget".
5. Lalu cari kode </head> : ( untuk mempermudah pencarian Gunakan CTRL dan F Sebagai Bantuanya.
6. Lalu masukkan code di bawah ini tepat di atas </head>
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </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(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>
6. Kemudian sobat cari kode <data:post.body/> Ganti kode <data:post.body/> dengan kode di bawah ini :  
<b:if cond='data:blog.pageType != &quot;item&quot;'> <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> <span class='rmlink' style='float:right;padding-top:20px;'> <a expr:href='data:post.url'> <b> Readmore</b> &#187;&#187;&#160;&#160; <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>
7. Kemudian Save Template anda Selesai.
Untuk keterangan Readmore Di atas Sebagai Berikut :
var thumbnail_mode = "float"; : Letak gambar / thumbnail berada di “float” kiri atau jika tidak suka silahkan ganti dengan “no-float”;
summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa adanya gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar /thumbnail; img_thumb_height = 120; : Tinggi thumbnail dalam ukuran pixel; img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;
READMORE-: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” “Selanjutnya” terserah sobat. dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, sobat bisa menghapus code script ini <data:post.title/> yang ada di belakang tulisan Readmore.

Cukup Mudah Bukan.saya harap dan yakin anda bisa.Seperti itulah Cara Membuat Readmore Otomatis di Blogspot yang walaupun nanti mungkin aja tidak berpengaruh dalam Seo anda tapi setidaknya tampilan pada templat anda menjadi rapi dengan adanya Readmore.Salam Blogger.

Cara memasang Burung Twitter Terbang Di Blog

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

Memasang Burung Twitter Terbang di 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,Cara Buat / Pasang Burung Twitter Terbang Di Blog 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/AVvXsEig9sHejL7HrvLa01IM0wbqjsZGNWzXm_2hxpD08S87QT-9pxEbL-9UGjknbGMYHP2EL7ahMGZEVY-3SaGJXs1SWDSkvkkuUAUoUu9TaYN7pKp4-jQwCwYKTm_Mx4HFnLxuEE4E01dlre8/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

Rubah Warna Burung 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/AVvXsEi1xWZiiwFVU_Kp4PyClXpzjy9rJOBKPf5J9xszSCfkKK3yH5psvuJuh1GJ34ccpg_sR_Q2JN1XFDo16KLawUgP7WS7A2gPTOR03PSL2rqtTBMyshKSZtJIqODgx6MM-mCdbi_YV-eQb3Y/s1600/yellow+bird.png
Warna Hitam

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbxX3ZQrVncSm3zIPav0qyCNLrvngLoGbGpIbY0BsWVzNVXD0FaC_6CDYyvOVWnvv2TcXuFCmTyO6R07l2vhBX8IYYh5yjUyQ1FAMmR6R5Ra9frmZm9Bgh8TMYA9aMmtkBNmdaaKdV99E/s1600/black+bird.png
Warna Biru

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTiZLYOU8-9oKhyq67vYCJgQY7omhANUPf5gnO_gIPd9vCNH8W7-S5pzlObfEtShGdZKCbh_olQt9edt3D_260RxXUvbX5xzq76elI34ahv0mcXaxKOLBmXtBy5YWFiYfviFNtgiRNYRE/s1600/Blue+bird.png
Warna Coklat

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqSgFsUPuiZVENMhvLArparupqfFjsYUQbmo_jRvXEA4n19_LTn9T-cfR6w2fKo9-oxdqhBui3bjsTM6iyDlRDGJy1-b7YYRsFdaA4nKLpalvwIX1zqgHWUG7XI7t8UGFRElPHvn8AFqY/s1600/brown+bird.png
Warna Hijau

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ogO8uo63_RENPg5tjuiX6f07bKHCWBYezvPs6RxsEuHvn7Qbh0_IOBLfCqN93DrW5XUU5X0UtXLOtr-wh30GnNUB2XkWYEZ3RhCL07XGoPyrcK0QYi_b11ggFJj2JVcSx3hDHMW58og/s1600/Green+bird.png
Warna Ungu

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV-74eWOUXEwC3Drd5QMryXTMYIv_1h1auo6tguAjeLmq4OmRmniRIYpVteS8Uy0tfNBlE2nlTjfflo0XKqjh3Wqitp1OtaJsgS1S1238fqh1WWUnJlI2yVWZy5D67bdIrjM_Q5g_r_QA/s1600/purple+bird.png
Warna Putih

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd6VTcuov5q_pw9FtxN0niKsVgpTITerh71DvmQ7k5tSXUfC9Hzb6WXCsT19MDKXGUOZs6FAT8q83aGZqDlPDoCo-kdoBgXUHhFy38XXdVyIy023lbRcv56oJqqWvIMSGvHgufjBDuJh4/s1600/white+bird.png
Warna Merah

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNYvX7e2Dkqx7VL6oPvfQ8Wp-8U2UOYPNyHytit-7xKPyKJuje9ABG1uFkULaEVthmjlvVJkU3rTq809WXUKALHnQLDL1gekIsP6qVirlCPmiEmP0imqofGUhSECQHC9w4jz5u4BXsfm8/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!