Ribdy Trik Blogger

Cara membuat Read More Otomatis Di Blogger

Posted by warismankevin Posted on 02.48 with No comments

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?
Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.
Langkah-langkah cara membuat Read More Otomatis di Blogspot

Login ke Blog anda
Buka halaman design > Edit HTML > centang Expand template widget
Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
Paste kode berikut tepat dibawah </head>

Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p> ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian). Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.

Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. berikut ini adalah keterangannya data yang bisa dirubah :

summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Semoga artikel cara membuat read more otomatis di blog ini bermanfaat. Selamat mencoba dan semoga berhasil.

Cara Membuat Widget Translate Yang Keren di Blog

Posted by warismankevin Posted on 01.45 with 1 comment

Dipostingan Gagaje kali ini, saya akan coba share , lagi-lagi untuk para NEWBIE seperti Gagaje tentang bagaimana Cara Membuat Widget Translate atau Terjemah Yang Keren di Blog *itu sih menurut Gagaje. Sebenarnya Google juga telah menyediakan widget translate yang bisa dipakai untuk blog, tapi widget ini Gagaje tidak mengambil dari google melainkan dari situs lain, seperti yang Kamu lihat di blog Gagaje.

Untuk caranya lihat ne step by step yang ada di bawah ini :

1.    Log in ke Blogger Kamu
2.    Pilih tata letak, lalu klik tambah gadget
3.    Pilih dan klik html/javascript
4.    Lalu masukan kode dibawah ini :

<div id="translate-this"><a style="width:180px;height:18px;display:block;" class="translate-this-button" href="http://www.translatecompany.com/">translate</a></div>

<script type="text/javascript" src="http://x.translateth.is/translate-this.js"></script>
<script type="text/javascript">
TranslateThis();
</script>

5. Simpan dan lihat hasilnya

Cara Membuat Tombol Super Keren di Blog

Posted by warismankevin Posted on 01.37 with No comments

Tombol share berfungsi untuk memudahkan dalam membagikan artikel blog atau website ke jejaring sosial misalnya facebook, twitter dll.

Berikut ini tips mudah dan cepat membuat tombol share keren di blog :

1. Login terlebih dahulu ke blogger
Cara Mudah Membuat Blog Blogger

2. Pilih Tata letak

3. Klik tambah gadget

4. Pilih HTML/JavaScript

5. Masukkan kode berikut.

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"><a href="http://syamsblog95.blogspot.com/2013/06/cara-membuat-tombol-super-keren-di-blog.html" target="blank"><font color="black">Ambil Kode</font></a></div></div>

6. Klik simpan

Hasilnya akan seperti ini

Selamat mencoba !!

CARA MEMBUAT GAMBAR ANIMASI BERGERAK DI BLOG

Posted by warismankevin Posted on 01.35 with No comments

Selamat sore sahabat kali ini saya akan memberikan sebuah trik, trik nya adalah CARA MEMBUAT GAMBAR ANIMASI BERGERAK DI BLOG untuk sahabat yang mungkin sangat senang sekali merias blog kesayangan dan ingin terlihat blog nya berbeda dengan yang lain dan menjadi unik jika anda ingin membuat nya sangat lah mudah yang anda harus lakukan adalah menyimak bagaimana cara membuat nya oke dan langsung saja deh sahabat lihat di bawah bagaimana cara membuat gambar bergerak di blog.

   1.Masuk ke Blogger Sobat
   2. Pilih Tata Letak & Klik Tambah Gadget
   3. Pilih Gadget HTML/Java Script
   4. Paste Kode gambar animasi yang sobat inginkan dibawah ini:
   5. Kalau sudah Klik SIMPAN

<a href="http://myniceprofile.com/anime-80745.html" title="Anime Comments Pictures"><img src="http://i.myniceprofile.com/807/80745.gif" alt="Anime Comments Pictures" border="0"></a><br><a href="http://myniceprofile.com/" title="Anime Comments Pictures"></a>

jika sahabat ingin lebih banyak lagi gambar animasi nya silahkan sahabat

Cara membuat popular post warna warni Seperti Abang Ribdy

Posted by warismankevin Posted on 01.32 with No comments

Gambar 1. Popular Post Warna-warni

Cara membuat popular post warna warni seperti gambar diatas atau yang ada diblog ini caranya sangat gampang. Tapi sebelumnya pastikan widget popular post diblog kamu hanya menampilkan thumbnail dan judul saja. (lihat gambar 2)

Gambar 2. Penerapan widget popular post

Setelah itu masuk ke Editor HTML Template, lalu copas kode dibawah ini tepat diatas kode ]]></b:skin> atau </style> :

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0;
padding:.5em 1.5em .5em .5em;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
font-weight:bold;
font-size:120%;
color:inherit;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num);
display:block;
position:absolute;
background-color:black;
color:white;
width:30px;
height:30px;
line-height:30px;
text-align:center;
top:50%;
right:-10px;
margin-top:-15px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border-radius:30px;
}
/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Terakhir Simpan Template dan selesai.

Cara Membuat Form Registrasi Online di Blog

Posted by warismankevin Posted on 01.26 with No comments

Cara Membuat Form Registrasi Online di Blog memang hal penting jika kita sedang memerlukannya.Form seperti ini kita tahu memiliki banyak fungsi seperti Registrasi anggota,pendaftaran online dan malah bisa juga ke hal yang lebih komersil seperti untuk formulir pembayaran.Kali ini mas gusti akan membahas seputar Form Registrasi dan cara membuatnya.

Pernahkan anda memperhatikan suatu blog atau situs yang sedang melakukan sebuah acara seperti yang paling sering Kontes Seo ? Disana pasti sudah tersedia dengan cantik form registrasi pendaftaran untuk peserta yang ingin bergabung.Nah dari sana sudah bisa kita tau betapa bergunanya formulir seperti ini untuk kelangsungan hubungan social kita dengan anggota dan blogger lain.Untuk itu tidak ada salahnya jika anda menyimak tutorial ringan kali ini tentang cara membuat form registrasi di blog via 123contactform berikut ini :

1. Kunjungi situsnya di 123contactform.com .

2. Klik button Sign Up pada pojok kanan atas.

3. Setelah itu kita akan diberi 3 jenis pilihan antara lain :

Basic ( Fitur gratis untuk selamanya namun fitur tak selengkap Platinum )
Platinum ( Fitur berbayar,lengkap namun tidak selengkap Gold )
Gold ( Fitur berbayar dan paling lengkap )

4. Jika anda ingin menggunakan fitur gratis ,silahkan klik button Sign Up pada bagian bawah kolom Basic ( forever free ).

5. Setelah itu lengkapi formulir pendaftaran akun anda yang sudah tersedia seperti :

Username : isi dengan username untuk anda loggin nanti " tanpa spasi " seperti : Gustiputu
Password : Isikan dengan password anda yang mudah di ingat
Confirm Password : Isikan kembali password yang sudah anda tulis diatas.
Email : isikan dengan alamat email anda yang masih aktif.

6. Klik button Create Account untuk menyelesaikan segera proses pembuatan akun.

7. Setelah itu anda akan dibawa ke halaman Dashboard 123contactform.

8. Posisi anda sekarang ada pada dashbord dan silahkan klik Button Create New Form untuk membuat formulir baru.

9. Setelah itu pilih Form yang akan anda buat > Untuk tutorial kali ini khusus pada form registrasi.Jadi silahkan anda klik pada menu Event Registration Form yang berwarna hijau.

10 Isikan kolom Form Name dengan nama sesuai kebutuhan untuk menandai nama form anda pada dashboard akun anda.

11. Klik button OK untuk melanjutkan.

12. Maka anda akan langsung di bawa ke halaman Editor Form dan editlah sesuai dengan kebutuhan formulir anda.

13. Kalau memang sudah pas > Klik button Continue pada pojok kanan atas.

14. Anda akan di bawa ke halaman Form Setting > untuk menambahkan email penerima,pilih Add Notification Email,jika memang tidak.Langsung aja ke tahap selanjutnya dengan klik Button Continue .

15. Kemudian pada sebelah Kiri layar pilih Platform yang akan anda pasang Form Registrasi.Untuk sekarang saya menggunakan platform blogger sebagai contoh.

16. Setelah itu lihat pada sebelah kanan menu tersebut > Copy kode yang muncul dan pasang di akun blog anda.

Cara Membuat Read More Box Otomatis Di Blog

Posted by warismankevin Posted on 01.24 with No comments

Pernahkah anda melihat sebuah situs yang artikelnya seperti diringkas, kemudian diisi dengan keterangan read more/selengkapnya? Terlihat lebih menarik bukan ?

Ada beberapa manfaat kenapa perlu adanya ringkasan seperti ini:

Pertama, artikel dan tampilan blog akan terlihat lebih menarik. Ini penting agar pengunjung memberikan kesan positif dan beranggapan bahwa pemilik blog adalah seorang blogger yang profesional dan layak untuk selalau dikunjungi.

Kedua, menghemat ruang. Ketika kita memberikan sejumlah ruang di halaman utama blog kita, kemudian kita membatasi jumlah postingan yang bisa dimunculkan di halaman tersebut, maka sangat penting untuk meringkas masing-masing artikel. Kenapa ? Agar pembaca tidak harus membaca satu persatu artikel untuk mengetahui semua artikel yang ada di halaman utama. Sehingga ini bisa memberikan kemudahan bagi pengunjung, karena tidak harus repot-repot melihat sampai jauh ke bawah untuk mengetahui artikel apa saja yang ditulis pemilik blog di halaman utama.

Bagaimana cara membuat read more secara otomatis ?

Langkah Pertama

Masuk ke blog anda

Langkah Kedua

Klik templete

Langkah Ketiga

Edit HTML (jangan lupa centang Expand Widget Templete)

Langkah Keempat

Temukan (Ctrl + F) tag </head>, setelah itu letakan kode script berikut tepat diatasnya :

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Langkah Kelima A

Membuat read more bentuk gambar

Temukan (Ctrl + F) tag <data:post.body/> atau <p><data:post.body/> </p> kemudian gantilah tag tersebut dengan kode script berikut.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://i1339.photobucket.com/albums/o719/nym_artopraph/Tombol%20WEb/buttton10_zps0ff4b929.png'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Langkah Kelima B

Membuat read more otomatis

Temukan (Ctrl + F)tag <data:post.body/> atau <p><data:post.body/></p> kemudian gantilah tag tersebut dengan kode script berikut.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Langkah Keenam

Kemudian save dan lihat hasilnya!

NOTE :

Untuk yang terlanjur menggunakan read more secara manual, tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

Demikianlah sedikit tips cara membuat read more secara otomatis baik menggunakan gambar atau pun secara otomatis dengan tulisan. Semoga tips ini bisa bermanfaat buat anda.

Cara membuat Read More Otomatis Di Blogger

Cara Membuat Widget Translate Yang Keren di Blog

Cara Membuat Tombol Super Keren di Blog

CARA MEMBUAT GAMBAR ANIMASI BERGERAK DI BLOG

Cara membuat popular post warna warni Seperti Abang Ribdy

Cara Membuat Form Registrasi Online di Blog

Cara Membuat Read More Box Otomatis Di Blog

Labels

Labels

Kontak

Terjemahan Web ini

Popular Posts