TIPS BLOGBEGO

Tampilkan Emoticon pada Thread Comment

noreply@blogger.com (BLOGBEGO) — Fri, 11 May 2012 21:36:00 +0700

Berbicara mengenai Blog agar tampil beda tentu keinginan semua Blogger, dengan cara yang berbeda - beda tentunya, :z tapi disini saya akan berbagi dengan kawan Cara menambahkan Emoticon pada Thread Comment atau Komentar Terbaru Google :r

Kawan masih ingat dengan Postingan saya tentang Ekspresikan Pengunjung Blog dengan..... atau Pasang Emoticon Multi Fungsi di Blog yang semuanya itu hanya untuk Komentar Lama Blog sedangkan pada Thread Comment tidak bisa tampil, tentu saja karena Css Thread Comment beda dengan Komentar Lama Blogger :y Pada kali ini saya mencoba meng-Edit ulang Script Emoticon multi fungsi yang dulu memakai huruf dan tanda baca, :q sekarang saya hanya mempergunakan huruf / alfabet saja [dari huruf a sampai dengan z] Okey cukup sekian ceritanya, langsung saja

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template
Pada Template pilih Edit HTML - Lanjutkan
Cari </body> yang pada Template Designer letaknya paling bawah
Copas Script berikut tepat diatas </body>

<script src='https://sites.google.com/site/blogrenovasi/java-script/Editor_Smyle.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

function replaceText(){if(!document.getElementById){return;}

bodyText = document.getElementById("comment-holder");

theText = bodyText.innerHTML;

theText = theText.replace(/:a/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>");

theText = theText.replace(/:b/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>");

theText = theText.replace(/:c/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif'/>");

theText = theText.replace(/:d/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>");

theText = theText.replace(/:e/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>");

theText = theText.replace(/:f/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>");

theText = theText.replace(/:g/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>");

theText = theText.replace(/:h/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/>");

theText = theText.replace(/:i/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif'/>");

theText = theText.replace(/:j/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/>");

theText = theText.replace(/:k/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif'/>");

theText = theText.replace(/:l/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif'/>");

theText = theText.replace(/:m/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>");

theText = theText.replace(/:n/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/>");

theText = theText.replace(/:o/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif'/>");

theText = theText.replace(/:p/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif'/>");

theText = theText.replace(/:q/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>");

theText = theText.replace(/:r/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>");

theText = theText.replace(/:s/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif'/>");

theText = theText.replace(/:t/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif'/>");

theText = theText.replace(/:u/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>");

theText = theText.replace(/:v/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif'/>");

theText = theText.replace(/:w/gi, "<img src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif'/>");

theText = theText.replace(/:x/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE3glOQIZjspIhxrIkFlP83TEEHK2rGqxMw0Y8V0dzkal0RhpFeMl3iuAdgSyN87Ih_VSbEDo7fWhdrqbYbevZnDBxlVMqCfX8DFGno23fQSouWSm5gK_EBiiO7aU-aw6G0ZtZm84VXM/s1600/buatD.gif'/>");

theText = theText.replace(/:y/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RcYqblRwh6u8fyMYSKlZIhwn_B4JrneCHRb3O0oKxWaFtYBAHsUzvPdsf4MuZllKLzld-5IzkC0cml0ZNsuSQV5hMlEkjOnY7qImmgSVHC8z6Qa_WFT_CG2qy9rZHe9NnDqe079l5Xw/s1600/joget.gif'/>");

theText = theText.replace(/:z/gi, "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzGWx0wmceIvpT79Hu_9RIyJinIU65JVFTWAvzDq0bfsewr6oic-yVoPwTFnsG92i2DnTZj9E0s7sYqG1YB37JyISV4L80uHNfjTbzIBjcrOIwgAO-b6OfRkfI_LjbrBBUUPbQogRbzc/s1600/xKopi.gif'/>");

bodyText.innerHTML = theText;

}replaceText();

//]]>

</script>

Simpan Template kawan

Penjelasan :

Script Js yang saya beri warna merah khusus dipergunakan pada Editor Post
Kalau kawan ingin mengganti image Emoticon smiley atau mengganti Kodenya [dari alfabet] menjadi angka silahkan asal kawan simpan kembali Scriptnya di tempat kawan menyimpan file, karena script tersebut saya simpan menyatu dengan Script Js diatas.

Bagaimana cara menampilkan Kodenya di Blog, agar pengunjung yang memberikan Komentar bisa mengetahuinya ? :y - :r

Terus terang ini yang agak ribet sedikit, tapi kawan jangan berkecil hati, karena saya kasi tahu caranya, yaitu mencoba-coba karena struktur Template pada umumnya berbeda-beda, tapi pada prinsip dasarnya yang kawan cari adalah kode seperti ini <p><data:blogCommentMessage/></p> [ini pada Template jumlahnya berbeda, ada 3, atau 4] :w disamping tampilannya bisa diatas / dibawah Post Editor Komentar

Atau kawan bisa cari

<b:if cond='data:post.embedCommentForm'> yang pada Template saya jumlahnya ada 2 [pakai yang pertama] tampilannya menetap diatas Komentar

Okey langsung saja :

Posisi kawan masih tetap pada Template - Edit HTML
Beri tanda cek disamping Expand Template Widget
Cari
<p><data:blogCommentMessage/></p> yang dibawahnya ada <data:blogTeamBlogMessage/>
Simpan Script berikut diantaranya

<div style='overflow:hidden;width:420px;height: auto; padding:10px; margin-left:8px;border:1px solid #000;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;text-align: left; line-height: 20px; font-size: 14px; font-family: Arial bold; color:#000; background:#95CAFF;'>

<span style='color: rgb(0, 0, 255); padding:5px; font-size:16px; font-family: Arial bold;'><center><blink>BERIKAN KOMENTAR SESUAI TOPIK <br/> BUKAN SPAM - PORNO MAUPUN SARA </blink> <br/><br/>

EKSPRESIKAN KOMENTAR KAWAN DENGAN EMOTICON : </center></span>

<br/><br/><center>

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif&#39;/&gt; :a

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif&#39;/&gt; :b

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif&#39;/&gt; :c

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif&#39;/&gt; :d

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif&#39;/&gt; :e

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif&#39;/&gt; :f

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif&#39;/&gt; :g

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif&#39;/&gt; :h

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/109.gif&#39;/&gt; :i

<br/>

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif&#39;/&gt; :j

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/33.gif&#39;/&gt; :k

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/36.gif&#39;/&gt; :l

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif&#39;/&gt; :m

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif&#39;/&gt; :n

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/63.gif&#39;/&gt; :o

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/39.gif&#39;/&gt; :p

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif&#39;/&gt; :q

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif&#39;/&gt; :r

<br/>

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/40.gif&#39;/&gt; :s

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/69.gif&#39;/&gt; :t

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif&#39;/&gt; :u

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/65.gif&#39;/&gt; :v

&lt;img src=&#39;http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/68.gif&#39;/&gt; :w

&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdE3glOQIZjspIhxrIkFlP83TEEHK2rGqxMw0Y8V0dzkal0RhpFeMl3iuAdgSyN87Ih_VSbEDo7fWhdrqbYbevZnDBxlVMqCfX8DFGno23fQSouWSm5gK_EBiiO7aU-aw6G0ZtZm84VXM/s1600/buatD.gif&#39;/&gt; :x

&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RcYqblRwh6u8fyMYSKlZIhwn_B4JrneCHRb3O0oKxWaFtYBAHsUzvPdsf4MuZllKLzld-5IzkC0cml0ZNsuSQV5hMlEkjOnY7qImmgSVHC8z6Qa_WFT_CG2qy9rZHe9NnDqe079l5Xw/s1600/joget.gif&#39;/&gt; :y

&lt;img src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPzGWx0wmceIvpT79Hu_9RIyJinIU65JVFTWAvzDq0bfsewr6oic-yVoPwTFnsG92i2DnTZj9E0s7sYqG1YB37JyISV4L80uHNfjTbzIBjcrOIwgAO-b6OfRkfI_LjbrBBUUPbQogRbzc/s1600/xKopi.gif&#39;/&gt; :z

</center>

</div>

Width : 420px; silahkan kawan menyesesuaikan dengan lebar Kotak Komentar kawan
Hasilnya seperti

Cara Membuat Total Posting dan Komentar

noreply@blogger.com (BLOGBEGO) — Thu, 22 Mar 2012 05:30:00 +0700

Sekarang saya akan berbagi dengan kawan Cara Membuat Total Post dan Comment di Blog, :r Apa itu Total Post dan Comment, mungkin semua Blogger sudah tahu apa yang saya maksud, tapi tak ada salahnya saya memberikan gambaran untuk kawan yang kurang memahami Apa itu Total Post dan Comments disini yang menurut pemahaman saya adalah Jumlah Artikel yang sudah kita Publish dan Jumlah Komentar yang ada pada Blog kita :O Langsung saja ke Topik Cara Membuat Total Post dan Comments di Blog :

Cara Pasang Kalender di Blogspot

noreply@blogger.com (BLOGBEGO) — Tue, 20 Mar 2012 15:19:00 +0700

Pernahkah kawan menikmati makanan tanpa garam.......?! akan terasa hambar bukan ?, begitu juga dengan Web site atau Blog tampilannya akan terasa kurang lengkap tanpa diisi pernak-pernik seperti Jam, Kalender maupun yang lainnya :z

Sudah banyak para Blogger memasang pernak-pernik tersebut di Blognya, dan banyak pula yang tidak memasangnya, yang kemungkinan disebabkan terlalu banyak memerlukan tempat pemasangan, atau mungkin dianggap memperlambat loading atau kawan ingin memasangnya tapi belum menemukan Kalender yang simple [karena pada umumnya Kalender seperti gambar disamping :r

Sekarang saya akan berbagi dengan kawan Cara Membuat dan Menampilkan Kalender di Blog

Untuk Demonya kawan bisa lihat Kalender / Tanggal di bawah Header Blog ini atau dibagian bawah post Artikel ini :O

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Cari kode <body>
Copas script berikut dibawahnya

<div id='Kalender'>

<script src='https://sites.google.com/site/blogrenovasi/java-script/Tanggal.js' type='text/javascript'/>

</div>

Penjelasan Tambahan :

Kawan bisa menempatkan dibawah kode <body> maksudnya bisa dipindah-pindah sesuai dengan keinginan kawan

Selamat berkreasi

Cara Membuat Kumpulan Komentar Plus

noreply@blogger.com (BLOGBEGO) — Sun, 18 Mar 2012 13:01:00 +0700

Sebelumnya saya berbagi dengan kawan Cara Membuat Kumpulan Komentar, rasanya masih kurang lengkap Kumpulan Komentar tersebut kalau tanpa Avatar, seperti Kumpulan Komentar Blog saya ini :O

Bagaimana, apa kawan tertarik hehehe ?!

Baiklah sekarang saya akan berbagi dengan kawan Cara Membuat Kumpulan Komentar Plus Avatar yang saya dapatkan pada Blogger Harish saat Blogwalking

OK langsung saja ke caranya :

Cara Membuat Web Hosting Gratis Ke-2

noreply@blogger.com (BLOGBEGO) — Mon, 12 Mar 2012 11:21:00 +0700

Salah satu cara untuk mempercepat Loading Blog adalah dengan milik Blog Pribadi khususnya untuk penyimpanan File baik itu JavaScript, CSS, HTML, Image atau Gambar maupun File yang lainnya :#

Nah sekarang saya akan mencoba berbagi dengan kawan Cara membuat Brankas untuk Menyimpan harta Blog yang lazim disebut Hosting di Blogspot secara Gratis :O

Cara Modifikasi Css Thread Comment ke-2

noreply@blogger.com (BLOGBEGO) — Mon, 5 Mar 2012 10:29:00 +0700

Setelah sebelumnya saya memposting tentangThread Comment Seperti Komentar Gaya FB dan Cara Memodifikasi Css Thread Comment, begitu juga dengan Cara Praktis Tampilkan Thread Comment, yang tampilannya masih standar, karena Css yang akan dimodifikasi tersebut sekarang sudah tidak ada lagi di Template Blog, dan karena ada beberapa Komentar menanyakan masalah ini, sayapun tak bisa menjawabnya hehehe :z

Modif Kotak Komentar supaya Admin bisa Reply

noreply@blogger.com (BLOGBEGO) — Sat, 25 Feb 2012 11:35:00 +0700

Kawan masih ingat artikel saya tentang Cara Membuat Reply Plus Gaya Blog Bego dan Modif Kotak Komentar agar Reply sesuai Keinginan, :DSekarang Kotak Komentar Blogspot secara otomatis disisipkan Thread Comments pada Template Blog. :O

Sebagai Blogger Pemula tidak ada salahnya mencoba Memodifikasi lagi Kotak Komentar yang ada agar mirip seperti Thread Comments, cuma bedanya tidak bisa balas membalas berkelanjutan [Perhatikan Gambar diatas] untuk Demonya silahkan lihat Komentar Blog ini :r

Cara Modifikasinya kawan cukup menambahkan beberapa script pada Css Komentar Blog [Kalau kawan menerapkan Artikel saya tentang Modif Kotak Komentar agar Reply sesuai Keinginan] kawan cukup mengganti Script Kode Css Commentnya saja :

Masuk ke Account Blogger dengan ID kawan
Pada Designer / Perancang Template pilih Edit HTML
Beri tanda centang pada disamping Expand Template Widget
Untuk jaga-jaga download / simpan dulu template kawan
Cari Script Kode #comments [letaknya sebelum ]]></b:skin>]

Contohnya :

#comments h4 {
color:#000;
font-weight:bold;
letter-spacing:0.2em;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
Background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw2yx54gBXVrXykRd-HSqzaUb0X8Aq-YdjGem6w1jlz0e7lS2-oU8y3A3dx0JOJqAQHeOQhAhxpLDvq89yvL24WKp85D4juMCAQY9TWvptOBt0JA1-FZYkGYv57SnNk5JcxIU989aPScQ/s1600/x.jpg);
border:1px solid #00f;
font-size:15px;
font-weight:normal;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#95B4BB none repeat scroll 0 0;
border-color:#95B4BB;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
background:#FFF;
color:#000;
border-left:1px solid #00f;
border-right:1px solid #00f;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
background:#95B4BB;
border-bottom:1px solid #00f;
border-left:1px solid #00f;
border-right:1px solid #00f;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}

Kalau sudah ketemu, selanjutnya Hapus semua kode tersebut dan ganti dengan kode berikut :

#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: transparent;
}
#comments h4{
color:#FF0;
margin:0;
padding:7px 10px;
font-size:140%;
font-weight:normal;
line-height:1.3em;
background: #000;
}
#comments p.notice{
text-align:center;
font-weight:700;
margin:0 0 10px;
padding: 0;
}
.commentlist,.commentlist-destacado{
clear:both;
float:right;
width: 525px;
background: transparent;
list-style:none;
margin: 5px 0;
padding: 0;
}
.commentlist li,commentlist-destacado li{
clear:both;
float:right;
width:465px;
background: #95CAFF;
color: #00F;
font-size:12px;
margin:0 5px;
padding:0;
}
#comments .commentlist li.pingback div.comment-body,
#comments .commentlist li.trackback div.comment-body{
border-bottom:0px solid #F00;
}
#comments .commentlist li div.comment-author .avatar{
float:left;
width:40px;
height:40px;
border:5px solid #E0E4CC;
margin:0 10px 0 0;
padding:0;
}
cite.fn{
font-size:17px;
color:#6b6b6b;
font-style: normal;
font-weight:700;
font-style:bold;
}
.says{
margin-left:3px;
display:none;
}
.comment-meta{
margin-bottom:10px;
font-size:12px;
color:#00F;
}
.comment-meta a{
text-decoration:none;
color:#00F;
}
#comments .commentlist li p,
#comments .commentlist-destacado li p{
margin: 0 0 10px;
padding: 0;
}
.comment p{
display:block;
}
.comment-author{
color: #000;
font-size:12px;
margin:5px 0 0 0;
padding:0;
line-height:1.3em;
}
.avatar-image-container{
float:left;
width:40px;
height:40px;
border:0px solid #ccc;
margin-right:10px;
padding:1px;
}
.avatar-image-container img{
width:40px;
height:40px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRTHeAxXGazFkSBeurlETZnMTeigK36AzCd9WL0EmMEffWpsZUiLLCEwIcfIBJ1QOC3BFTbGKpQpZ7d6nDq0yXbij8Xbt5kZwgBqte9Pmc23UfY6mMRtklu-xgVikwDzwXqmitCxCFy5U/s1600/no-avatar.png);
}
.comment-form{
width:450px!important;
max-width:450px!important;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li div.comment-body{
background: transparent;
margin:5px;
padding: 5px 10px;
border: 1px solid #95CAFF;
}
#comments .commentlist li div.comment-body,
#comments .commentlist-destacado li ;
}

Teks yang berwarna merah silahkan disesuaikan dengan lebar Blog kawan
Simpan Template kawan :D karena Modifikasi sudah selesai

INGAT : sekali lagi bagi kawan yang mengadakan perubahan Kotak Komentar seperti yang saya sampaikan dulu, karena Modif sekarang saya tetap mempergunakan Model Komentar itu. :z

Sedangkan kalau kawan ingin merubah menjadi seperti Kotak Komentar Blog saya ini, silahkan lanjutkan ke tahap kedua :D

Selanjutnya cari kode seperti ini :

</b:includable>

<b:includable id='comments' var='post'> beri tanda [ Perhatikan gambar dibawah]

Terus scroll kebawah dan cari kode seperti ini : <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' ><data:postCommentMsg/></a> dan beri tanda juga untuk gampangnya kawan mencari batas atas dan bawah [Perhatikan gambar dibawah],

yang batas bawah selengkapnya seperti berikut

<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Hapus semua kode tersebut sampai </b:if> dan ganti dengan kode berikut :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/> : “<data:post.title/>”
</b:if>
</h4>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<ol class='commentlist-destacado'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'><b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></cite>
<span class='says'><data:commentPostedByMsg/>:</span>
</div>
<p>
<data:comment.body/>
<span class='interaction-iframe-guide'/>
</p>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</div>
</li>
</ol>
<b:else/>
<ol class='commentlist'>
<li class='comment' id='comment'>
<div class='comment-body' id='div-comment'>
<div class='comment-author vcard'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<cite class='fn'> <b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if></cite>
<span class='says'><data:commentPostedByMsg/>:</span>
</div>
<p>
<data:comment.body/></p>
<span class='interaction-iframe-guide'/>
<div class='comment-meta'><a expr:href='data:comment.url' title='comment permalink'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=4600536250166325978&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><span style='color: rgb(255, 0, 0); font-size:14px; font-weight:normal;float:left;padding-right:10px;'><blink>» Reply </blink></span></a>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
</b:if>
</div>
</li>
</ol>
</b:if>
</b:loop>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
 
<data:post.commentRangeText/>
 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Jangan lupa ganti teks yang berwarna merah dengan latar hijau [4600536250166325978] dengan ID Blog kawan :O
Jangan lupa hapus kembali tanda batas yang dibuat tadi
Simpan Template kawan
Mudah-mudahan kawan tidak menemukan masalah :#

Ini semua tidaklah mutlak harus begini, dan apa yang saya sampaikan ini hanyalah contoh sebagai gambaran saja, disamping keterbatasan dan kekurangan-kekurangan saya sangatlah banyak untuk itu dengan senang hati saya menerima saran pendapat dari kawan seandainya kawan mempunyai solusi lain yang lebih praktis untuk menambah wawasan saya sebelumnya saya ucapkan banyak terima kasih :@

Cara Lain dan Praktis tampilkan Thread Comments

noreply@blogger.com (BLOGBEGO) — Tue, 7 Feb 2012 00:00:00 +0700

Sebelumnya saya sudah berbagi dengan kawan tentang Thread Comments yaitu : Thread Comments seperti Gaya PB dan Cara Modifikasi CSS Thread Comments yang selanjutnya khusus pada Css Thread Comment sepertinya sudah tidak ada lagi pada Template
Blogspot, makanya kalau ingin memodifikasi Cssnya saya pribadi sekarang mengalami kesulitan, tapi diluar dugaan saya mendapatkan Cara Praktis Tampilkan Thread Comments :r
Tapi sebelumnya saya sampaikan dulu sebagai gambaran kawan pada perubahan Komentar Blog

Komentar Lama

Caranya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Sebaiknya Unduh Template Lengkap dulu, siapa tahu kawan ingin kembali ke Template sebelum perubahan.
Pada Edit HTML scroll ke bawah » Klik Kembalikan template widget ke default terus OK [Perhatikan gambar disamping]
Simpan Template kawan dan lihat Artikel yang ada Komentarnya

Kenapa Komentar Blog tidak seperti Gambar dibawah, Komentar Reply agak sedikit masuk kedalam, sudah pasti kawan ada yang bertanya demikian, itu wajar kawan karena semua Komentar sebelum perubahan [lama] akan tampil lurus di pinggir kiri :z

Sekarang coba kawan berikan Komentar dengan Klik Reply pada salah satu Komentar yang ada, hasilnya pasti akan kelihatan seperti gambar dibawah :#

Catatan Tambahan :
Background Thread Comments keseluruhan adalah warna Putih, kalau kawan ingin memberikan warna background keseluruhan caranya cari Kode Css Comment yang letaknya sebelum ]]></b:skin> atau biasanya sesudah Post Content atau main wrapper
contohnya :

#comments{
clear:both;
float:left;
width:525px;
margin: 0;
padding:10px;
line-height:1.4em;
background: #95CAFF; » warna background Biru
}
#comments h4{ » Judul Komentar
color:#FF0;

Okey kawan jangan lupa simpan Template kawan
dan Selamat Berkreasi :@

Cara Modifikasi CSS Thread Comment

noreply@blogger.com (BLOGBEGO) — Tue, 24 Jan 2012 22:47:00 +0700

Artikel saya sebelumnya tentang Thread / Reply Comment Blogger Gaya FB, yang tampilannya masih polos atau tanpa warna background artinya warna latar Komentar adalah transparan disamping jarak antara Komentar sedikit agak longgar, bagi saya pribadi sangat perlu di adakan perubahan

Tampilan Thread Comment aslinya :

Tanpa warna latar belakang [background]
Komentar Admin [Replies dan Reply] dipinggir kanan agak masuk ke kiri seperti pinggir kiri Komentar

Cara Memodifikasi Thread Comment :

Masuk ke Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Beri tanda ceklist disamping Expand Template Widget
Sebaiknya Simpan dulu Template kawan
Cari kode <b:includable id='threaded_comment_css'>

Kalau sudah ketemu mulai

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
sampai ..................................................
...............................................................
...................................................dengan
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

Hapus dan Ganti dengan

Hasil Modifikasi Blog Bego

<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
}
.comments .comment .comment-actions a {
padding: 5px 5px 0 0;
}
.comments .comment .comment-actions a:hover {
text-decoration: none;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 1px 0 1px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: -2px;
margin-left: 36px;
width: 501px;}
.comments .comments-content .comment {
margin-bottom: 0;
}
.comments .comments-content .comment:first-child {
padding-top:1px;
}
.comments .comments-content .comment:last-child {
border-bottom: 0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
font-size: 14px;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0;
}
.comments .comments-content .datetime {
float: right;
margin-right:5px;
font-size: 11px;
color: #00F;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin: 0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
background: transparent;
cursor: pointer;
text-align: right;
}
.comments .continue a {
display: block;
padding: 0.5em;
margin-left: 48px;
font-weight: bold;
background: #95cafF;
color: #F00;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: inline-block;
}
.comments .thread-toggle {
background: #95CAFF;
display: inline-block;
padding: 3px 0;
width: 100%
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 0;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
margin: 4px 2px 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
background: #95CAFF;
margin-left: 48px;
padding: 5px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

Khusus untuk width: 501px; adalah lebar untuk Replies dan Reply silahkan disesuaikan dengan lebar Komentar Blog kawan atau bisa dihilangkan
Jangan lupa simpan Template kawan

Thread / Reply Comments Blogger Gaya FB

noreply@blogger.com (BLOGBEGO) — Tue, 17 Jan 2012 21:55:00 +0700

Kabar gembira ini mungkin kawan Blogger sudah mengetahuinya sedangkan saya mengetahuinya secara tak sengaja saat setting pada Reply template dengan menekan Ctrl+F mencari kata Reply yang menjadi sangat banyak sekali :z

sayapun jadi bingung dan setelah saya cek template ada script kode Thread Comment yang disusupkan secara otomatis oleh Blogger tentunya, sayapun mencari informasi pada mbah Google untuk mengaktifkan :r yang akhirnya saya dapatkan pada Blogger Buzz :#

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Setelan » Lainnya » Bolehkan Umpan Blog ?

Perhatikan Gambar

Tetap pada Setelan » Pos dan Komentar » Lokasi Komentar ?

Perhatikan Gambar

Simpan Blog kawan dan lihat hasilnya sudah pasti belum berhasil menampilkan Thread Comment karena kawan Blogger berada di Indonesia kecuali kawan berada di Negara mbah Google, untuk itu kawan jangan berkecil hati karena disini diperlukan sedikit peng-Editan pada Template :z

Caranya :

Pada Perancang Template pilih Edit HTML
Beri tanda disamping Expand Template Widget
Simpan dulu Template kawan untuk jaga-jaga
Cari kode » <b:include data='post' name='comments'/> selengkapnya seperti berikut

<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

<b:include data='post' name='comments'/> di Template saya terdapat 4 pada 2 tempat yang berbeda
Ganti semua script tersebut dengan :

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/></b:if></b:if>

Simpan Template kawan

Tampilan CBox sesuai selera Blogger

noreply@blogger.com (BLOGBEGO) — Sat, 10 Dec 2011 19:16:00 +0700

Kawan masih ingat dengan postingan saya yang berjudul CBox Kotak Chatting Alternatif dan karena ada beberapa pertanyaan kawan Blogger di CBox yang menanyakan cara membuat tampilan CBox seperti ini, termasuk juga di Blog saya yang lain yang isinya seperti berikut :r

gan, buat cbox kaya gini gmn sih gan ? ak cari - cari di postingan agan kq gk ada?

memang sudah ada yang saya kasi tahu, tapi tak ada salahnya saya posting disini.

Sebenarnya itu CBox memberikan kita sebagai pengguna kemudahan-kemudahan maupun fasilitas yang cukup baik dibandingkan dengan Kotak Chatting lainnya dari mengganti background CBox, mengganti Emoticon tanpa batas sampai model tampilan yang Blogger inginkan.

Caranya :

Login ke CBox dengan Account kawan
Pilih Publish!
Lihat kebawah Step2: Choose a variation : disana ada 4 pilihan yang bisa kawan pakai

Inline [Default]
Popup Link
Floating Button
Deferred Load

Sedangkan CBox di Blog ini saya pakai Floating Button yang tampilannya hampir sama dengan Popup Link, bedanya hanya pada Button dengan Link. :D

Script Floating Button seperti berikut :

<div id="cboxbutton" style="position: fixed; bottom: 8px; right: 16px; width: 300px; padding: 3px; text-align: center; cursor: pointer; background-color: #EDF3F7; border:#C3D7E5 1px solid;border-radius: 3px; font-family: Tahoma, sans-serif; font-size: 14px;" onclick="togglecbox()"><b>Open Cbox</b></div>
<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 16px; width: 300px; background: #EDF3F7; padding: 3px; line-height: 0;border:#C3D7E5 1px solid;border-radius: 3px;"></div>
<script type="text/javascript">
var cbvis = false;
var cbload = false;
var cbcookie = "cboxvis=";
function togglecbox () {
var cbdiv = document.getElementById("cboxdiv");
var cbbut = document.getElementById("cboxbutton");
if (!cbvis) {
if (!cbload) {
cbdiv.innerHTML = '<iframe frameborder="0" width="300" height="362" src="http://www2.cbox.ws/box/?boxid=yyyyyyy&boxtag=xxxxxx&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-yyyyyyy" style="border:#0041A8 1px solid;border-bottom:0px" id="cboxmain2-yyyyyyy"></iframe><iframe frameborder="0" width="300" height="78" src="http://www2.cbox.ws/box/?boxid=yyyyyyy&boxtag=xxxxxx&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform2-yyyyyyy" style="border:#0041A8 1px solid;border-top:0px" id="cboxform2-yyyyyyy"></iframe>';
cbload = true;
}
cbdiv.style.display = "block";
cbbut.innerHTML = "Close Cbox";
}
else {
cbdiv.style.display = "none";
cbbut.innerHTML = "Open Cbox";
}
cbvis = !cbvis;
document.cookie = cbcookie+((cbvis)?1:0);
}
// Toggle Cbox open if it was previously
var cbcookiei = document.cookie.indexOf(cbcookie);
if (cbcookiei >= 0) {
if (document.cookie.substring(cbcookiei+cbcookie.length, cbcookiei+cbcookie.length+1) === "1") {
togglecbox();
}
}
</script>

Teks berwarna merah yyyyyyy dan xxxxxx adalah kode CBox saya, yang sudah tentu kode CBox kawan berbeda
Teks yang saya beri warna hijau untuk button dan coklat muda adalah body CBox, yang perlu di edit kalau kawan menginginkan tampilan CBox seperti saya punya, sebagai contoh setelah saya edit :

<div id="cboxbutton" style="position: fixed; bottom: 10px; right: 4px; width: 85px; height:20px; padding: 10px 1px 5px 1px; text-align: center; cursor: pointer; background-color: #000; border:#FFF 2px solid;border-radius: 5px; font-family: Tahoma, sans-serif;font-size: 16px; color:#FF0;" onclick="togglecbox()"><blink>Open Cbox</blink></div>

<div id="cboxdiv" style="display: none; position: fixed; bottom: 48px; right: 206px; width: 300px; background: #95CAFF; padding: 3px; line-height: 0;border:#000 2px solid;border-radius: 3px;"></div>

Oh ya hampir lupa, script CBox tersebut bisa disimpan dimana saja [bisa digabung] pada gadget.

Simpan gadget dan Selamat berkreasi :z

Kenapa Komentar dianggap SPAM oleh Google

noreply@blogger.com (BLOGBEGO) — Mon, 14 Nov 2011 04:09:00 +0700

Terus terang akhir-akhir ini saya lagi malas menulis untuk diposting, karena Blog saya ini makin lama Alexanya bukannya mengecil, tapi sebaliknya malah makin membesar, masalah pengunjung
dan Komentar sudah pasti selalu ada, Terus Apa penyebabnya ?! :r
Penyebabnya sudah pasti ada, maaf kawan-kawan yang sudah setia berkunjung dan berkomentar di Blog saya ini, karena ini akibat dari Blog DoFollow [yang katanya para senior Blogger Link-Link sebagai jejak yang ditinggalkan akan ditelusuri oleh Google] maka Link Komentar tersebut kalau tidak sesuai keteria Google dianggap SPAM. :# [sekali lagi maaf kawan, sepertinya saya ini Sok paling pinter saja].

Kenapa Komentar tersebut dianggap SPAM oleh Google ?! :@

Dalam hal ini kawan sudah pasti tahu dan pernah mengalaminya seperti saya, kalau membuka dan memeriksa Komentar seperti pesan yang disampaikan oleh Google pada Dasbor Blog. :D
ini berdasarkan pengalaman saya : Komentar yang dianggap SPAM tersebut saya pindahkan menjadi bukan SPAM yang seharusnya saya hapus dan tak perlu saya pindahkan untuk ditampilkan di Blog dan membalas Komentar tersebut :z
Komentar yang dianggap SPAM oleh Google apabila Link si pemberi Komentar adalah :

Blog / Web Porno : semua orang sudah tahu, apa itu Porno
Komentar Promosi dan sejenisnya : maksudnya bukan Komentar yang ditulis / dibuat, tapi mempromosikan bisnis [baik barang maupun jasa].
Link Komentator berlebihan : maksud saya pada isi komentar hanya ditulis Link-link saja setelah saya cek satu persatu semuanya sejenis permainan casino

Contoh SPAM :

Contoh : SPAM

Komentar Promosi [SPAM]

SPAM URL / LINK

Kesimpulannya :

SPAM akan secara dratis membesarkan Alexa Blog
Kalau Google sudah menganggap SPAM, sebaiknya Komentar tersebut kawan hapus saja, tak usah ditampilkan / dipindahkan pada Komentar - Bukan Spam.
Kawan tak usah takut ber-Komentar asal wajar - wajar saja
Komentar yang bukan SPAM sangat berarti dan merupakan salah satu membantu mengecilkan Alexa Blog

Mudah-mudahan ada manfaatnya bagi kita semua

SEO dimata Blog Bego gaya punya

noreply@blogger.com (BLOGBEGO) — Thu, 20 Oct 2011 12:50:00 +0700

Banyak para Blogger membicarakan SEO dan yang lebih percaya diri lagi mengatakan bahwa Blognya dengan SEO paling bagus / baik, saya jadi bingung sendiri [maklum saya hanyalah seorang Newbie alias Calon Blogger :z
yang akan mencoba membahas SEO memakai Logika BLOGBEGO tentunya, untuk kawan-kawan yang kurang setuju nantinya saya mohon maaf ini hanya celoteh dipinggir jalan :@

Seumpama Kawan meminta 10 ahli SEO yang berbeda dengan metode SEO terbaik pastinya, Kawan mungkin akan mendapatkan 10 jawaban yang berbeda pula. Mengapa? Karena kebenaran dari hal ini, tidak ada metode SEO terbaik yang mutlak. Karena semuanya disediakan, dan dilaksanakan dengan baik.

Mari saya jelaskan.

Terlepas dari para ahli SEO yang memiliki pendapat yang berbeda. Apakah itu berarti seorang ahli yang benar dan ahli lain yang salah? Tidak, Ini tidak berarti pendapat, analisis dan proses pikiran kita yang dibentuk oleh pengalaman pribadi kita, keberhasilan dan kegagalan. Dan sementara seorang ahli mungkin telah sukses dengan satu metode SEO tertentu, pakar lain mungkin telah sukses dengan metode SEO yang berbeda pula.

Dengan kata lain, para ahli dapat memiliki pendapat yang berbeda tentang topic SEO, yang semuanya benar berdasarkan pengalaman pribadi mereka.

Metode SEO Terbaik

Metode SEO terbaik adalah untuk menciptakan dan mendistribusikan konten yang relevan berkualitas, jika Kawan membuat dan mendistribusikan konten yang relevan kualitas, niscaya Blog kawan akan mendapatkan link ke situs web / blog yang berkualitas, dengan sendirinya Blog Kawan akan terhubung dengan situs web berkualitas, peringkat mesin pencari Kawan akan tumbuh. Bukankah itu intinya SEO yang dimulai dari peringkat mesin pencari ?

Hal ini akan menjadi jelas, ketika kita berbicara tentang peringkat mesin pencari, saya tidak berbicara tentang "PageRank", 0-10 logaritmik toolbar Google yang tidak lebih dari sebuah "kontes kecantikan yang dangkal" karena tidak memiliki dampak langsung pada peringkat sebuah situs / Blog.

Update Panda terakhir telah mengajarkan kita, bahwa Google berkomitmen untuk "membuang sampah." dan jika Kawan menghasilkan konten sampah, algoritma Google akan menghukum Blog.

Harus Punya Kebanggaan dan Membuat Konten Berguna

Selalu pastikan konten di Blog Kawan berguna, informatif, menarik dan / atau menghibur serta mendidik. Jika tidak, pengunjung tidak mungkin untuk kembali atau merujuk Blog Kawan dan juga, pastikan konten Kawan ditulis dengan baik, yang tidak harus sebuah karya jurnalistik, dan jangan malu seandainya kawan menulis seperti anak kelas 3.

Sepatah Kata Tentang Kata kunci

Karena artikel ini adalah tentang SEO, tidak ada salahnya saya sedikit membahas kata kunci, cuma ketika kawan memasukan kata kunci keseluruh halaman agar berhati-hati mengulanginya sehingga tidak tampak dipaksakan. Dengan kata kunci yang berlebihan akan membuat konten Kawan baca tidak wajar, dan akan menyebabkan pembaca / pengunjung blog kurang nyaman.

Selain itu, jika mesin pencari spider menemukan terlalu banyak kata kunci yang sama pada halaman Kawan, Kawan mungkin akan dikenakan sanksi untuk spamming. Ini sangat buruk dan akan mempengaruhi peringkat mesin pencari halaman Kawan. Bahkan mungkin bisa situs Kawan masuk daftar hitam.

Sebagai penutup, Kawan memiliki pilihan untuk membuat konten asal-asalan [copas] yang dianggap sampah dan ditaruh di luar atau di tepi jalan menunggu dijemput untuk dibuang oleh truk pengelolaan sampah [Algoritma Google], atau Kawan ingin menciptakan Konten yang relevan dan berkualitas, yang berguna dan bisa membantu orang lain.

Silahkan Kawan menjawabnya

BLOGBEGO lagi BLANK dan BINGUNG

noreply@blogger.com (BLOGBEGO) — Mon, 10 Oct 2011 13:09:00 +0700

Postingan saya kali ini agak nyeleneh alias lain dari yang lain, apa sih tuh......!!! :z Saya hanya menulis soal Pengunjung Blog BLOGBEGO yang ngalor ngidul tanpa kepastian arahnya :#

Pernahkan kawan merasakan Mengapa Alexa turunnya sedikit tapi naiknya minta ampun yang sangat cepat sekali :r Hal ini terjadi karena keterkaitan antara Pengunjung Blog dengan Pemilik Blog, terutama yang menyolok adalah tanpa adanya Komentar yang diberikan si Pengunjung, untuk itu saya mohon maaf pada kawan-kawan yang Komentarnya tidak saya BALAS [Pada umumnya Blog tersebut tidak ada Kotak Komentarnya] sedangkan yang lainnya seingat saya semuanya TERBALAS, seandainya ada yang terlupakan sekali lagi saya Mohon Maaf yang sebesar-besarnya :D

Kawan kita Bangjal.blogspot.com memposting "Tata Cara Berkomentar Yang Baik dan Benar" menggelitik dan menarik perhatian saya untuk mengulasnya walaupun disana sudah dibahas dengan mendetail, tapi disini saya hanya menambahkan yang khusus untuk Blog saya ini :r seperti :

Sebagai sesama Blogger sudah sepantasnya saling menghargai dan menghormati Blog [Artikel] orang lain dan jangan maunya menang sendiri :z
Tinggalkan Jejak misalnya di C-Box atau Komentar.... apalagi Komentar yang santun [untuk apa berkunjung, baca-baca terus pergi tanpa jejak] misalnya contoh komentar "Ijin Baca-baca...." - Itukan nggak nyambung dengan Artikelnya, tapi itu tetap Komentar Tinggalkan Jejak
Sebagai Admin harus sadar diri dengan Komentar yang diberikan baik berupa Kritik, Saran, Masukkan dan lain sebagainya karena tujuan ngeblog apa - kan terkenal dan Berbagi [share]
Setiap Komentar Usahakan di-Balas dan jangan membedakan Blog Baru tanpa PR dengan Blog Lama punya PR dan Blog NoFollow - DoFollow, karena semuanya ada sisi Baik-Buruknya, sebagai contoh Blogger Senior kita siapa lagi kalau bukan Beben Koben [berkunjung sudah pasti tinggalkan jejak dengan Komentar] :D
Khusus untuk di BlogBego [Blog-Blog saya yang lain] pemberian kawan baik C-Box, Follow apalagi berupa Komentar, semuanya di Balas - PASTI :z

Kesemuanya itu sudah pasti kita sesama Blogger sama-sama diuntungkan disegala bidang Per-Bloggan [to take and to give] kalau nggak salah bahasanya mbah Google

Terakhir sebelum saya menyudahi postingan ini sekali lagi saya mohon maaf kalau ada yang kurang berkenan di hati kawan............. HIDUP BLOGGER INDONESIA !!! :@

Cara Membuat Tab Menu seperti Blog Bego

noreply@blogger.com (BLOGBEGO) — Fri, 30 Sep 2011 22:44:00 +0700

Salah satu kawan pengunjung Blog saya ini, bertanya cara membuat Tab Menu yang terpasang seperti di bawah Header Blog saya ini,
disamping hampir semingguan saya tak sempat posting lagi, :r karena ada kesibukan pribadi

Sebenarnya banyak model Tab Menu penuh aksi dan gaya yang dipasang para Blogger pada Blognya masing-masing, ada yang Horizontal maupun Vertikal, tapi pada umumnya sangat memberatkan loading Blog atau mungkin kawan kita ini sama selera dengan saya yang inginnya simple-simple saja, entahlah itu semua kembali pada pribadi masing-masing :#

Langsung saja ke cara membuat Tab Menu seperti Blog Bego :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Copas Kode berikut dibawah Header atau di atas ]]></b:skin>

#menu {
margin: 10px auto;
width: 96%;
padding: 5px;
background-color: transparent;
font-size: 10px;
color: #FF0;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li {
display: inline;
text-align: center;
}
#menu a {
display: inline;
height: 30px;
padding: 5px;
background-color: background: #699AB8 none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#699AB8');background:-moz-radial-gradient(top, #FFFFFF, #699AB8);background:-webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to( #699AB8));
border: 0px solid #FFF;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: normal;
color: #00F;
}
#menu a:hover {
padding: 5px;
background-color: #000;
text-decoration: none;
color: #FFF;
}

Selanjutnya Copas Kode berikut dibawah <body> atau dibawah / diatas Header

<div id='menu'>
<ul>
<li><a href='http://tips-blogbego.blogspot.com/2011/08/daftar-isi.html' target='_blank'> DAFTAR ISI</a></li>
<li><a href='http://tips-blogbego.blogspot.com/2010/11/kontak-kami.html' target='_blank'> KONTAK</a></li>
<li><a href='http://tips-blogbego.blogspot.com/2011/06/x.html' target='_blank'>FORUM</a></li>
<li><a href='http://tips-blogbego.blogspot.com/search/label/Kreasi' target='_blank'> KREASI</a></li>
</ul>
</div>

Catatan :

Silahkan ganti URL / Link saya dengan Link kawan
Warna, Lebar dan lain sebagainya silahkan diganti sesuai selera kawan

Jangan lupa Simpan template kawan

Cara Membuat dan Menambahkan Breadcumb pada Blog

noreply@blogger.com (BLOGBEGO) — Wed, 21 Sep 2011 20:08:00 +0700

Apa itu Breadcumb saya rasa semua kawan sudah tahu, cuma saya kasi gambaran keberadaannya di atas Judul Artikel dan biasanya pada Full Page :#

Bagaimana kawan, sudah ada gambaran apa itu Breadcumb, kalau kawan bingung wajar, :@ karena saya juga bingung nerangi hahaha [habis saya bukan Guru]

Okey langsung saja ke cara pembuatannya :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Beri tanda Check disamping Expand Template Widget
Cari ]]></b:skin>
Copas Kode berikut diatasnya

.breadcrumbs {
        padding:5px 5px 5px 0;
        margin: 0 0 5px;
        font-size: 80%;
        line-height: 1.4em;
        border-bottom:1px double $bordercolor;
}

Selanjutnya cari <b:if cond='data:post.title'>
Seandainya ada 2[dua] <b:if cond='data:post.title'> pakai yang pertama
Copas Kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
          </b:loop>
        </b:if> » <data:post.title/>
</div>
</b:if>

contoh Breadcumb

Simpan Template kawan

Keterangan :

Teks 80% yang berwarna merah adalah besarnya huruf
Teks yang berwarna biru, supaya Breadcumb hanya tampil pada Full Page saja

Berkreasi dengan Auto Hidden di Home Page

noreply@blogger.com (BLOGBEGO) — Fri, 16 Sep 2011 11:32:00 +0700

Tampilan Home Page

Kawan masih ingat dengan Artikel saya tentang Berkreasi pada Readmore agar Auto Hidden Sekarang saya akan mencoba Berkreasi dengan Auto Hidden di Home Page,
yang saya maksud disini adalah tampilan kawan pada Home Page [Beranda] yang akan kelihatan hanyalah Judulnya saja, tapi kalau mouse berada diatas salah satu Judul Artikel maka baru akan kelihatan isinya. :r untuk Demonya kawan bisa lihat » disini atau » disini

Bagaimana sudah lihat dan coba Demonya

Kalau sudah, untuk membuatnya pada prinsipnya hampir sama dengan cara membuat Berkreasi pada Readmore agar Auto Hidden, cuma kita perlu memindahkan <div class='hidebego'> yang posisi semula dibawah <data:post.body/> menjadi diatasnya, dan ditambahkan sedikit kode tambahan :@

Selengkapnya sebagai berikut

Masuk ke Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Beri tanda check disamping Expand Template Widget
Cari kode ]]></b:skin>
Copas Kode berikut diatasnya

.post .hidebego {
display:none;
}
.post:hover .hidebego {
display:inline;
}

Selanjutnya cari : <data:post.body/>

Selengkapnya seperti berikut

<data:post.body/>
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div></b:if>
<div style='clear: both;'/> 

</div>

» Teks yang berwarna merah adalah Kode Readmore atau Baca selengkapnya

Hapus atau Ganti dengan Kode berikut :

<div class='hidebego'>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
</b:if>

</div>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> 

    </div>

Atau Seumpama Template kawan sudah dirubah / dimodifikasi dengan memakai Readmore+otomatis yang Kodenya kurang lebih seperti ini :

<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 class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<div style='clear: both;'/> 

</div>

» Teks yang berwarna merah adalah Kode Readmore atau Baca selengkapnya

Hapus atau Ganti dengan Kode berikut :

<div class='hidebego'>

<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 class='rmlink' style='float:right'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if></div>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<div style='clear: both;'/> 

</div>

Seandainya ada 2[dua] atau lebih <data:post.body/> pakai yang pertama
Simpan Template kawan

Kalau kawan punya cara yang lain bisa disampaikan lewat Komentar dan kita sharring :D

Cara membuat Animasi Daftar Isi Otomatis

noreply@blogger.com (BLOGBEGO) — Sat, 10 Sep 2011 00:04:00 +0700

Pada saat Blogwalking saya menemukan Animasi yang diberi judul Cara Membuat Feed Carousel Otomatis, setelah saya modif menjadi :r Animasi Daftar Isi Otomatis, Demonya lihat » disini

Untuk mendapatkan scriptnya kita wajib Registrasi dan bergabung dulu pada Forumnya, :z Karena slide ini mempunyai kelebihan tersendiri yaitu akan menambahkan Postingan kita secara otomatis, kalau kawan tertarik silahkan ikuti langkah-langkahnya, sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Cari Kode ]]></b:skin>
Copas Kode berikut diatasnya

/* Star Carousel Otomatis BLOGBEGO*/ h2.widget_title{font-family:times new roman; color:#cd1713; font-size:18px; margin:4px 0; letter-spacing:-1px;text-transform:none;text-align:left;font-weight:normal}h2.widget_title a{color:#fff;}h2.widget_title a:hover{text-decoration:none}#mediabar{width:99%; overflow:hidden; background:#2a2a2a; padding:8px 0 10px 8px; margin-bottom:10px; position:relative; height:223px;}#mediabar .container{position:absolute; left:8px; width:800px; height:223px; overflow:hidden}#mediabar ul{width:10000px; position:relative}#mediabar li{float:left; width:152px; padding:0 8px 0 0}#mediabar .thumb{width:150px; background:#fff; height:113px; border:1px solid #333; padding:1px; margin:0 0 3px 0; overflow:hidden; text-align:center}#mediabar .thumb img{margin:0 auto; max-width:150px; max-height:113px}#mediabar .info{width:148px; position:relative; background:#fff; border:1px solid #333; padding:2px; overflow:hidden; min-height:60px; height:auto !important; height:60px}#mediabar .info p{font-size:11px; line-height:1.2em; font-weight:bold; padding:0 2px 0 2px; margin-top:1px;color:#000;}#mediabar .info p.moreVideo{position:absolute; bottom:3px; right:3px; padding:3px 5px 0 5px}#mediabar .info p.morePhoto{position:absolute; bottom:3px; right:3px; padding:3px 5px 0 5px; margin-bottom:0px;}#mediabar .info p.morePhoto a{color:#50630a; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaW1tW2ibfX5ForakOsNr88Oy-RftQGokvqgXvOUhvRFD0IJBb02YgEzPKJHznA5zkNYG1Ox6Ip71lWHPHWExXZaYBNYepfbOOMy9fKG5AD2GPCbUoCmm4YoP0sShiMMMnTXyVJcfOo8Cw/s1600/icophoto.gif) no-repeat left center; padding:0 0 0 17px}#mediabar #previous_button{position:absolute; width:16px; height:16px; right:35px; top:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2fOLPyH7AYBUWpRlj8cFIM0GfNsAq1bqKiEPW_k_ED1Wb27bAenJeJD6TXTZbAc5fU2p-OBiK2qQmdi-Pt2zBHqUVvFx8UTgB4WgLqI9g4BV7j5oCvcKiTMxBx0MzEeqUGfgAA4azQukz/s1600/prevu.png) no-repeat; z-index:100; cursor:pointer}#mediabar #previous_button.disabled{background:url(http://img214.imageshack.us/img214/9588/prevdisabled.png) no-repeat; cursor:default}#mediabar #next_button{position:absolute; right:10px; top:21px; width:16px; height:16px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrW4umaiV6ZFONsfRsae-FUTxa8SuBaj6Z1eEu2mPysBOgibeUs454aqmjPLIdk60BlPzipkXr-Fwc3BDc2hfE3ORUTLWIM6ISKA3bNTIve4R5fPqJ-x73nkhHxtdubCLJWdJq8R3EnPy2/s1600/nextro.png) no-repeat; z-index:100; cursor:pointer}#mediabar #next_button.disabled{background:url(http://img513.imageshack.us/img513/5651/nextdisabled.png); cursor:default}/* END Carousel Otomatis BLOGBEGO */

Width:800px; berwarna merah adalah lebar Bar Blog [bisa disesuaikan dengan lebar blog]
Width:152px; dan 8px berwarna violet lebar image slide dan pemisah [bisa disesuaikan jumlah image yang akan ditampilkan] untuk 5 image slide.
Selanjunya Copas Kode berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
(function($) { // Compliant with jquery.noConflict()
$.fn.jCarouselLite = function(o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, o || {});

return this.each(function() { // Returns the element collection. Chainable.

var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
var div = $(this), ul = $("ul:first", div), tLi = $(".car", ul), tl = tLi.size(), v = o.visible;

if(o.circular) {
ul.prepend(tLi.slice(tl-v-1+1).clone())
.append(tLi.slice(0,v).clone());
o.start += v;
}

var li = $(".car", ul), itemLength = li.size(), curr = o.start;
div.css("visibility", "visible");

li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
ul.css({ padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
//div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "29px"});
div.css({overflow: "hidden", "z-index": "2"});

var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
var divSize = liSize * v; // size of entire div(total length for just the visible items)

li.css({width: li.width()});
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images

if(o.btnPrev)
$(o.btnPrev).click(function() {
return go(curr-o.scroll);
});

if(o.btnNext)
$(o.btnNext).click(function() {
return go(curr+o.scroll);
});

if(o.btnGo)
$.each(o.btnGo, function(i, val) {
$(val).click(function() {
return go(o.circular ? o.visible+i : i);
});
});

if(o.mouseWheel && div.mousewheel)
div.mousewheel(function(e, d) {
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
});

if(o.auto)
setInterval(function() {
go(curr+o.scroll);
}, o.auto+o.speed);

function vis() {
return li.slice(curr).slice(0,v);
};

function go(to) {
if(!running) {

if(o.beforeStart)
o.beforeStart.call(this, vis());

if(o.circular) { // If circular we are in first or last, then goto the other end
if(to<=o.start-v-1) { // If first, then goto last
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
} else if(to>=itemLength-v+1) { // If last, then goto first
ul.css(animCss, -( (v) * liSize ) + "px" );
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
} else curr = to;
} else { // If non-circular and to points to first or last, we just return.
if(to<0 || to>itemLength-v) return;
else curr = to;
} // If neither overrides it, the curr will still be "to" and we can proceed.

running = true;

ul.animate(
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
function() {
if(o.afterEnd)
o.afterEnd.call(this, vis());
running = false;
}
);
// Disable buttons when the carousel reaches the last/first, and enable when not
if(!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$( (curr-o.scroll<0 && o.btnPrev)
||
(curr+o.scroll > itemLength-v && o.btnNext)
||
[]
).addClass("disabled");
}

}
return false;
};
});
};

function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpwdFGNEzAjgvKzqQYe3bgZXNRwzcCPA9pBeE8MNXSkry5XNisaKxw1WEHKXb14RO_DxAK1xYZt4krY5fjj1-ga9dvLYuUPRv4RcYzbGbsBE5MrxeyJkYN64vMB0OwK3AVkUo7051kWLK/s1600/No+Picture.png";
showRandomImg = true;

numposts7 = 100;

function showrecentposts7(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts7; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="150" height="113" class="alignnone" src="'+img[i]+'"/></a> </div><div class="info"><p>'+posttitle+'</p><p class="morePhoto"><a href="'+posturl+'">L i h a t</a></p></div></li> ';
document.write(trtd);

j++;
}
document.write('</ul>');
}

//]]>
</script>

Angka 100 yang berwarna merah adalah jumlah postingan, bisa disesuaikan
Simpan Template kawan, dan kembali ke Perancang Template
Tambah Gadget
Copas Kode berikut kedalamnya

<div id='mediabar'>
<h2 class='widget_title'><script> document.write(' <a href="http://tips-blogbego.blogspot.com">SLIDE DAFTAR ISI</a>'); </script> </h2><div id='previous_button'></div><div id='next_button'></div><div class='container'><script> document.write("<script src=\"http://tips-blogbego.blogspot.com/feeds/posts/default?max-results="+numposts7+"&orderby=published&alt=json-in-script&callback=showrecentposts7\"><\/script>"); </script></div></div><script type='text/javascript'> (function($) { $(document).ready(function(){ $("#mediabar .container").jCarouselLite({ auto:4000, scroll: 2, speed: 3000, visible: 6, start: 0, circular: true, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script>

Catatan :

Silahkan ganti Link saya teks yang berwarna Biru
Angka 2 yang berwarna merah adalah slide akan bergeser ke kiri 2 slide, angka ini bisa diganti dengan angka 1 sampai sebanyak image yang tampil
Simpan Blog kawan mudah-mudahan tidak ada masalah :@

Komentar Admin dengan warna background beda

noreply@blogger.com (BLOGBEGO) — Wed, 7 Sep 2011 23:28:00 +0700

Pada umumnya warna latar belakang Komentar antara Pemilik Blog [Admin] dengan Pengunjung Blog di Blogspot sama atau tidak ada perbedaan baik untuk warna background maupun warna textnya :z

Biar ada perbedaan antara Komentar Admin dengan Pengunjung, diperlukan sedikit kode tambahan pada Template kawan. Cara membuat latar belakang Komentar Pemilik Blog [Admin] dengan Pengunjung Blog berbeda :r sebagai berikut :

Masuk Account Blogger dengan ID anda
Pada Perancang Template pilih Edit HTML
Centang pada radio disamping Expand Widget Templates
Copas Kode berikut pada Post Komentar atau sebelum ]]></b:skin>

.Comment-body-author {
background: # 95caff;
color:#00f;
border: 1px dotted # fff;
margin: 0 10px 0 5px;
padding: 7px;
}

Catatan : Warna Background dan warna text silahkan kawan menggantinya sesuai keinginan

Selanjutnya kawan cari Kode <data:commentPostedByMsg/>

Selengkapnya akan menjadi seperti berikut

<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></ p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></ span>
<b:else/>
<p><data:comment.body/></ p>
</b: if>
</dd>
</b: if>
<dd class='comment-footer'>
<span class='comment-timestamp'>

Catatan :

Kode Text yang berwarna Biru adalah Kode Aslinya,
Kode Text yang berwarna Merah adalah Kode tambahan
Simpan Template anda

Widget Plipeo membawa BackLink

noreply@blogger.com (BLOGBEGO) — Mon, 5 Sep 2011 22:15:00 +0700

Kali ini saya akan berbagi dengan kawan untuk mendapatkan BackLink berlipat dengan memasang Widget Plipeo.com di Blog kita secara Gratis, kawan boleh percaya boleh tidak,
karena sayapun baru ikut bergabung makanya belum merasakan hasilnya, disamping persyaratannya sangat ringan dan Gratis, cuma kita diwajib memposting Artikel yang isinya tentang Plipeo untuk kita kirim Link ke Plipeo :z

Gambar - 1

Kalau tidak salah saya menangkap cara kerjanya, seperti kita saling kunjung mengunjungi sesama Blogger karena Widget yang kita dapat dan pasang di Blog nantinya akan menampilkan Blog-Blog sesama Anggota yang bergabung di Plipeo atau dengan kata lain seperti Iklan karena setiap Blog kita Refres maka Widget tersebut akan menampilkan Banner yang berbeda :#
Makanya saya berbagi dengan kawan, dan tidak ada salahnya kita mencoba

Gambar-2

Bagaimana...... Tertarik...... Daftarnya GRATIS kok » disini Coba kawan perhatikan gambar-1 disamping, disana tertera persyaratan, cara kerjanya dan jangan lupa isi kolom tersebut sesuai data Blog kawan, kalau semuanya sudah kawan isi tekan kirim - Aplikasi anda telah disetujui, silahkan tekan OK untuk melanjutkan :)
Selanjutnya kawan melihat tampilan seperti gambar-2 disamping untuk mengambil Kode Script yang nantinya kawan pasang di Blog masing-masing. :@
Disini kawan bisa merubah Pengaturan Kode Script, kalau lebar Banner aslinya sebesar 140px, atau mengganti background dan lain sebagainya :s
Buat postingan tentang Plipeo dan kirim Link-nya untuk mengawali mengirim postingan berikutnya, yang setiap harinya kawan dibolehkan mengirim postingan maksimal 5 Artikel :@

Selengkapnya silahkan kawan melihat dan membacanya disana dan sampai bertemu di Plipeo :r

Google Adsense gampang-gampang susah

noreply@blogger.com (BLOGBEGO) — Wed, 31 Aug 2011 23:52:00 +0700

Kali ini saya akan mencoba berbagi lagi dengan kawan Google Adsense gampang-gampang susah, judulnya cukup aneh bukan ?! itulah kenyataannya bagi saya pribadi, karena sampai saat ini saya belum bisa bergabung dan diterima sebagai publisher :#

Kawan masih ingat dengan Artikel saya yang berjudul "Jawabannya ada pada diri kawan" dan banyak juga pihak ketiga yang siap membantu kita agar bisa bergabung di Google Adsense seperti salah satunya di Indyarocks yang persyaratannya masih lebih ringanan dikit tentang umur Blog yang kita buat. :z

Tapi sekarang ada yang betul-betul sangat ringan alias gampang dan perlu kawan untuk mencobanya bagi yang belum berhasil bergabung pada Google Adsense. :r

Mau tahu caranya :

Silahkan kawan masuk dulu pada http://www.google.com/friendconnect/
Kawan akan melihat tampilan seperti berikut

Perhatikan yang saya kurung dengan warna merah yaitu Tambahkan Situs Baru

Setelah semua kotak isian kawan isi

Selanjutnya kawan akan diarahkan seperti tampilan berikut yaitu Google Friend Connect

Tampilan ini adalah jalan menuju sasaran Google Adsense dan silahkan kawan Klik Buat Kode HTML

Kawan tidah usah Copas Kode HTML yang ada, tapi kawan lihat dibawahnya yaitu "Lihat apa lagi yang dapat Anda lakukan dengan Jalinan Teman" silahkan di Klik

Silahkan kawan Lihat dan Klik yang saya kurung dengan warna merah
Perhatikan pada point 1 tampilan berikut yaitu Kawan Klik Asosiasikan dengan account saya

contoh ditolak

contoh diterima

Kalau kawan diterima bergabung pada Google Adsense, kawan dapat memilih ukuran Iklan pada point 2 pada tampilan diatas, yang selanjutkan kawan tinggal Klik point 3 untuk mendapatkan Kodenya

Mudah-mudahan kawan mendapatkan kemudahan-kemudahan dan berhasil bisa bergabung di Google Adsense serta jangan lupa bagi-bagi bonusnya hahaha :@

Simpan Iklan / Banner disamping Kotak Komentar

noreply@blogger.com (BLOGBEGO) — Mon, 22 Aug 2011 23:08:00 +0700

Sebelum saya melanjutkan menulis Artikel ini, saya mohon maaf pada kawan-kawan yang setia mengunjungi Blog ini karena cukup lama saya tak sempat mengurus disebabkan ada kesibukan lain yang tak bisa saya tinggalkan. :#

Sekarang saya akan mencoba berbagi dengan kawan sesuai Judul yang saya berikan yaitu Simpan Iklan Sponsor disamping Kotak Komentar :@ mengapa harus disana ?

mungkin ada kawan yang bertanya begitu !, jawabannya sangat simple dan sangat realistis, coba kawan perhatikan Komentar Blog kawan, banyak tempat kosong disebelah kanannya, benar kan :z

Caranya sangat mudah, masih ingat dengan Kreasi saya sebelumnya yaitu Cara Pasang Iklan Sponsor diatas Kotak Komentar. Oke langsung saja ke cara pembuatannya :

Masuk pada Account Blogger dengan ID kawan
Pada Perancang Template pilih Edit HTML
Beri tanda centang pada radio disamping Expand Template Widget
Demi amannya Simpan / Download Template kawan dulu
Copas kode berikut diatas ]]></b:skin>

.begopost{
padding:1px;
margin:1px 1px;
background:
border:0px solid #FFF;
line-height:1.6em;
}

Selanjutnya kawan cari <b:loop values='data:post.comments' var='comment'>
Selengkapnya kurang lebih seperti ini :

TARUH KODENYA DISINI

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>

Copas kode berikut dan taruh diatasnya [lihat contoh diatas TARUH KODENYA DISINI]

<div class='begopost'>
<table border='0' cellpadding='1' height='auto' width='800'>
<tr><td valign='top'>
<div style='width:480px;height:auto;padding:1px; align:left; border:0px solid #999'>
<br/>
Disini bisa juga ditaruh Kode Iklan / Banner dengan lebar 468px;

Terus scroll kebawah dikit cari <data:comment.body/> yang terakhir
selengkapnya kurang lebih seperti berikut :
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>
</b:loop>
</dl>
</div>
Copas Kode berikut disini

</td><td valign='top'>

</script>

<br/>

</div>

</td></tr></table>

</div>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>

Text warna biru adalah contoh Script Iklan Text Kumpul Blogger, silahkan ganti
Sampai disini sebenarnya sudah selesai, cuma masalahnya "Kalau tak ada komentar" Kotak Editor Komentar akan jauh dibawah atau sejajar dengan batas akhir Iklan Sponsor :r
Cara mengatasinya :

Scrool ke atas atau cari kode seperti berikut :

<h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>

Text 100% yang berwarna biru adalah lebar Kotak Editor Komentar yang ukurannya berbeda-beda.

Move atau cut semuanya jangan "di delete" dan Paste-kan diantara </dl> </div> dengan </td><td valign='top'> atau pada text Copas Kode berikut disini dan tambahkan atau diakhiri dengan </div>

Simpan Template kawan, mudah-mudahan tidak ada masalah :r

Berkreasi pada Read more agar Auto Hidden

noreply@blogger.com (BLOGBEGO) — Wed, 27 Jul 2011 23:31:00 +0700

Berbicara masalah Blog / Web sudah pasti tidak akan terlepas dengan yang namanya Penggalan Artikel yang lazim disebut Read more / Baca selengkapnya atau nama lainnya yang serumpun, dan letaknya ada di kiri maupun dikanan diatas footer blog yang tujuannya untuk memotong / memenggal tampilan pada single post :#

Sekarang saya akan mencoba berbagi dengan kawan cara memindahkan / membuat Read more / Baca selengkapnya yang berada di kiri menjadi di kanan Blog :

Tahap Pertama :

Masuk Account Blogger dengan ID kawan
Pada Dasbor - Design/Perancang Template pilih Edit HTML
Copas kode berikut diatas ]]></b:skin>

.jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding:2px 12px; border:none; background:#236c95; color:#FFF;font-style: normal;border:1px solid #0FF;margin-top:10px;text-decoration:none;}
.more a:hover, .jump-link a:hover{background:#000;color:#FF0;border:1px solid #F00;text-decoration:none; }

Simpan Template kawan dan lihat hasilnya [seperti image diatas]
Read more tersebut adalah berupa text,
Kawan bisa merubah warna-warnanya sesuai keinginan

Tahap kedua :
Sesuai dengan Judul Artikel saya ini, sekarang mari bersama-sama kita Berkreasi pada Read more agar tampil Auto Hidden [akan kelihatan jika mouse kita taruh pada Post Artikel :z dan akan hilang bila mouse kita geser kepinggir] Bagaimana, apa kawan tertarik :O
Caranya :

Beri tanda centang / cek pada radio disamping Expand Template Widget
Copas Kode berikut diatas ]]></b:skin>

.post .hidebego {

display:none;

}

.post:hover .hidebego {

display:inline;

float:right;

}

Selanjutnya scroll ke bawah dan Copas Kode berikut dibawah <data:post.body/> atau diatas <b:if cond='data:post.hasJumpLink'>

<div class='hidebego'>

Karena struktur template berbeda-beda, dan untuk menghindari kesalahan, simplenya copas Kode berikut tepat diatas <b:if cond='data:post.hasJumpLink'> maka selengkapnya akan menjadi seperti berikut :

<div class='hidebego'>

<b:if cond='data:post.hasJumpLink'>

      <div class='jump-link'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

      </div>

    </b:if>

    </div>

Simpan Template kawan dan selesai sudah pekerjaan kita untuk ber-Kreasi pada Read more

Cara Menampilkan Share Buttons Blogspot

noreply@blogger.com (BLOGBEGO) — Thu, 21 Jul 2011 14:37:00 +0700

Akhir - akhir ini para Blogger banyak membicarakan khususnya Google +1 dan memasangnya pada tampilan blognya masing - masing. Bagi para blogger yang bernaung di blogspot dan memakai template bawaan [yang disediakan oleh Google Blogspot] tidaklah menjadi masalah, karena tinggal beri tanda centang pada pengaturannya maka share buttons tersebut akan tampil di bawah kiri posting :z

Bagaimana dengan kawan blogger yang memakai template Design ?!

Sudah barang tentu share buttons tersebut tidak akan tampil,
Sekarang saya akan mencoba berbagi dengan kawan cara membuat dan menampilkan share buttons tersebut di Blog kawan : :#

Untuk menampilkan caranya :

Masuk dulu pada Account Blogger dengan ID kawan
Pada Design / Perancang Template : Klik text Edit yang ada di kanan bawah pada Blog Post [Pengaturan posting]
Cari dan beri tanda centang / cek pada Radio disamping kiri gambar share buttons :r
Scroll ke bawahnya sudah pasti gambar / image share buttons tersebut akan kelihatan
Simpan template kawan

[untuk jelasnya Perhatikan Gambar disamping kanan]

Langkah selanjutnya :

Pada Design / Perancang Template pilih Edit HTML
Beri tanda centang disamping Expand Template Widget
Cari

Selengkapnya sebagai berikut :

<b:include data='post' name='postQuickEdit'/>
</span> simpan disini </div>
<div class='post-footer-line post-footer-line-2'>

Copas kode berikut pada tulisan » simpan disini «

<div class='post-share-buttons goog-inline-block'>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div>

Atau Cari <div class='post-footer'> Copaskan kode tersebut dibawahnya
Simpan Template kawan

Kalau kawan menginginkan agar tampil di sebelah kanan footer caranya kawan cukup tambahkan
<div style='float:right;padding:1px 0px 5px 0px'> Kode Share buttons dan diakhiri dengan </div>

Sedangkan kalau kawan menginginkan biar tampil ditempat lainnya [misalnya di bawah / diatas judul posting] kawan bisa mencoba sambil belajar dan berkreasi :O

SELAMAT BERKREASI

Berkreasi pada Navigasi Menu agar tampil melayang

noreply@blogger.com (BLOGBEGO) — Tue, 19 Jul 2011 11:35:00 +0700

Melanjutkan Artikel saya sebelumnya yaitu Navigasi Menu Blogbego gaya punya, sekarang yang akan saya share-kan sama kawan yaitu Berkreasi pada Navigasi Menu blogbego gaya punya biar tampil melayang, melayang lagi - melayang lagi [ya untuk menghemat tempat disamping tampilan blog biar jangan menoton], :r kalau kawan tertarik silahkan lanjutkan untuk membaca sampai tuntas :s

Kawan masih ingat dengan artikel saya tentang cara membuat elemen melayang di tempat :@ itulah yang akan saya kombinasikan dengan Navigasi Menu sekarang, yang cara pembuatannya disesuaikan dan lebih simpel [tidak perlu menambah css pada template cukup kode pada HTML sebelumnya] :z

Kawan pasti akan bertanya, apakah tidak memberatkan blog - jawabannya sudah tentu pasti, karena apapun yang kita tambahkan pada template [Blog] sudah pasti memberatkan, :# kalau boleh saya bertanya : Adakah Css, JavaScript, HTML atau yang lainnya tanpa memberatkan loading blog ? jawabannya sudah pasti, semuanya memberatkan ! :d

Okey kawan, mari langsung saja ke Cara pembuatannya :

Kawan cukup menambahkan kode berikut pada setiap elemen yang akan kawan bikin melayang dan ditutup dengan </div> Nah gampang kan.

<div style="position: fixed; top: 30px; left: 20px; cursor: pointer; opacity: 1;" title="Beranda">

Kawan cukup mengganti text yang saya beri warna merah [disesuaikan] dengan keinginan kawan, sebagai gambaran kawan saya berikan contoh :

fixed; top: 30px; left: 20px; dan title="Beranda" - artinya elemen tersebut berada di sudut kiri atas dengan title Beranda / Home atau apalah namanya

Untuk menambahkan elemen berikutnya kawan cukup menyesesuaikan [mau yang berjejer ke kanan atau berjejer menurun] kawan tinggal mengganti nilainya, dan text tittle disesuaikan dengan Link elemen tersebut

Konkritnya saya kasi contoh di blog ini saja :

Posisi di Kiri atas berjejer menurun :

<div style="position: fixed; top: 30px; left: 20px; cursor: pointer; opacity: 1;" title="Beranda">

<li><a href='http://tips-blogbego.blogspot.com'>

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0TiRFo8DymVOqQ8CyMguGMAqOmpRGnnNq3Dy0-gUR6IkX9G9m-IYyLIIBNRZBRYKdEcAqo86cyS1-uExK_AOavwWzainTY8V7h2u2cpSN0FFONTIaSzGSb2ll4qD1S1-Q1T1SxR9usPdS/s1600/Home%253D.png" /></a></li></div>

<div style="position: fixed; top: 110px; left: 20px; cursor: pointer; opacity: 1;" title="Siapa Saya">

<li><a href='http://tips-blogbego.blogspot.com/2010/05/siapa-saya.html' target="_blank">

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeh63ArHtBye5WV_BFXcRe6VMM0rXPunf7x5rCVejVeTKufJob-itFTBs11ziAfaV_lT3btoNWWNOTKk2DjcSThJQ61lGrDWFQU318iAXW0ApqjwOyHh44Blnu__zIArJeQYLoLv3-Cn4M/s1600/Profil-.png" /></a></li></div>

Begitu juga untuk menempatkan elemen ini di tempat lain [misalnya kanan, kiri, atas, bawah], kawan cukup mengganti : top / bottom atau left / right dan angka / nilainya yang memakai ukuran pixel [px] nya saja
Kalau kawan mau berkreasi, kode tersebut tidak hanya untuk Navigasi Menu saja....!!! :#