My World Is Yours: Blogging

Showing posts with label Blogging. Show all posts

Membuat Text Area

Text area adalah sebuah area yang dibuat dengan menggunakan kode-kode tertentu yang tujuannya untuk menghemat tempat pada sebuah artikel/blog.

Text area atau scroll box bisa sangat-sangat diperlukan ketika kita akan menuliskan kode HTML misalnya (seperti yang saya buat di artikel tentang How to make Threaded Comment in blog) yang rata-rata sangat panjang. Kalau kita tulis tanpa menggunakan scroll box, bisa sangat panjang jadinya.

Atau kita ingin membuat list nama daerah (kalu iseng) yang mungkin isinya banyak sekali, maka scroll box sangat diperlukan.

Oke, berikut langkah-langkahnya :

1. Kode yang digunakan adalah (dari "<div ...... sampai </div>)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 250px;
height: 100px;
text-align: center; ">
ISI DENGAN APA YANG ANDA INGINKAN
</div>

keterangan :
~warna merah menunjukkan ketebalan dari garis tepi kotak. bisa kalian ganti dengan angka yang lebih besar agar garis tepinya lebih tebal
~warna orange menunjukkan warna dari garis tepi kotak, bisa diganti dengan warna yang lain. Untuk acuan kode warna RGB, bisa dilihat disini.
~warna hijau menunjukkan lebar kotak.
~warna biru menunjukkan tinggi kotak
~warna pink menunjukkan letak text yang ada didalam kotak, selain "center", bisa juga digunakan "left" atau "right".
~warna ungu adalah text yang akan muncul didalam kotak nanti

2. Nantinya hasil dari kode tersebut akan menjadi seperti ini :

ISI DENGAN APA YANG ANDA INGINKAN

3. Jika kodenya saya ganti menjadi :

<div style="border: 5px solid rgb(218, 123, 34);
overflow: auto;
width: 350px;
height: 100px;
text-align: left; ">
<a href="http://rumah-dagip.blogspot.com/" target="_blank">My World Is Yours</a>
</div>

4. Maka hasilnya seperti ini :

My World Is Yours

5. Jika isi dari kotak ternyata sangat banyak (tidak dapat dimuat dalam 1 halaman oleh kotak yang telah kita tentukan ukurannya tersebut). Maka secara otomatis kotak akan menjadi scroll box. dapat juga diberi nomor disetiap link atau apa saja yang akan menjadi isi dari kotak tersebut. berikut contonya :

<div style="border: 5px solid rgb(218, 123, 34);
overflow: auto;
width: 350px;
height: 100px;
text-align: left; ">
1. alamat blog saya <a href="http://rumah-dagip.blogspot.com/" target="_blank">My World Is Yours</a><br>
2. selain blog saya <br>
a. <a href="http://www.google.com" target="_blank">Google</a><br>
b. <a href="http://www.yahoo.com" target="_blank">Yahoo</a><br>
c. <a href="http://www.msn.com" target="_blank">MSN</a><br>
d. <a href="http://www.facebook.com" target="_blank">Facebook</a><br>
e. <a href="http://twitter.com" target="_blank">Twitter</a><br>
3. <a href="http://www.profitclicking.com/?r=gBi4iMLZyQ" target="_blank">Profitclicking</a><br>
</div>

6. Maka hasilnya adalah :

1. alamat blog saya My World Is Yours
2. selain blog saya
a. Google
b. Yahoo
c. MSN
d. Facebook
e. Twitter
3. Profitclicking

7. Jika ingin membuat list namun tidak dengan nomor, dengan icon misalnya, maka diperlukan tambahan kode seperti berikut ini :

8. Maka hasilnya akan seperti ini :

border-bottom:1px dotted #ddd;line-height:1.2em;padding:3px 0px 0px 20px;}

MSN

Sekian tutorial yang bisa saya berikan mengenai pembuatan text area/scroll box. Kawan-kawan bisa bereksperiment sendiri dengan kode-kode yang lain. Trik ini bisa diaplikasikan pada artikel maupun widget kawan-kawan. Selamat mencoba.

Source : http://www.agungadhyaksa.com/ & http://www.hermanblog.com/

Make Widget show only in home page or post page

This time I will share some tutorial about blogging, How to make widget only show in Home Page or Post. This trick very useful to make loading page faster also make our blog template more elegant.
The concept to make widget only show in home page or post page, just need to put a little code like this bellow in your template or widget HTML. Check this one :

1. If you need to show the widget only in homepage, you need put this code between your widget code :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
“Your widget code here”
</b:if>

2. And if you need to show your widget only in post page, you need put this code :

<b:if cond='data:blog.pageType == "item"'>
“Your widget code here”
</b:if>

To make you more understand about this tutorial, this is the application in tamplate HTML. Login into your blogger account ==> edit HTML ==> Expand Template Widget. Try to fine some code like this <b:widget id=
This bellow the complete one (example)

<b:widget id='HTML14' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

The red code is code that you must put, in this case, this widget will be displayed only in homepage. If you need to make it display in post page, just replace the red code with code that I give in above. If you don’t wont to edit via template HTML, you can edit or add this code via layout. Just open your widget HTML code, and put which one code you need. Just easy, right???

How to make Threaded Comment in blog

There are several things that can be support the appearance of your blog, this time I will tell one of them. Its name "Threaded Comment. Threaded Comment is comment form where the reply comments would be located below the main comments.
With this facility, my friends no longer need to moderate comments with reason to facilitate reply to these comments. As a note, by installing a Threaded Comment on your blog, the emoticon that you put in your blog will not appear in the comment box. For my friends who interested in making Threaded Comment, please follow the tutorial.

A. Without edited HTML

1. Log in into your blogger account.
2. Back up your template
3. and then make your template into default template (from google)
NOTES :
This way can make all of your feature like widget, breadcrumb, related post, etc will gone. So, if you already installing widget and other, you can follow this tutorial below.

B.

1. Log in into your blogger account.
2. Back up your template
3. Click "expand widget template"
4. Take this code "BEFORE" ]]></b:skin>

/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}

.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}

.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}

.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTdDTkVh3qZX_OEgo7smJnW-EPaht_HVEvvF-d5ufEZ_3BpG8o66ZpKNx6ocn5O4bOUziWh1ElJTl1-8vbkiHKoeBoLK-ia9H2ajWsCftJrdHX9ulLSygUDi2cd_MlPtgzQvR-5VqYQt0/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}

.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}

.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;

}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;

}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;

}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

5. Take this code "BEFORE" </body>

6. Fine this code, and change code between 2 code (the code must be long)

<b:includable id='comments' var='post'>
Code Must Be Change
</b:includable>

7. Replace with this code :

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='cm_reply_css'/>

<div class='cm_pagenavi' id='cm_page'/>

<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_head'>
<div class='cm_avatar_a'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<b:else/>

<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=__BlogID__&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_entry_a'>
<span class='cm_arrow'/>
<div class='cm_info_a'>
<div class='cm_name_a'>

<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>

<b:else/>

<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>

<b:else/>

<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>

<b:if cond='data:comment.author == data:post.author'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</b:if>
</div>

<b:if cond='data:comment.author == data:post.author'>
<div class='cm_date_a'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>

<b:else/>

<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</b:if>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-body-author'>
<p><data:comment.body/></p>
</div>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</div>
</b:if>
</div>
</div>
</b:if>
</b:loop>
</div>

<div class='cm_pagenavi' id='cm_page_copy'/>

<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>

</b:if>
</div>

8. Change __BlogID__ with your ID. Just open your layout (or anything in your blogger account, and fine in the address bar, your id can show like "blogID=8169464817615630710#pageelements". the blue number is blog id (this one is mine, try to fine your own)

9. Save your template, and look your comment form.

Source : christiantateludotblogspotdotcom

Animasi kursor Bounce Ball (id)

Aku mau share tutorial buat ngasi animasi di kursor. aku kasi bayangan dikit, intinya, setelah masukin script dibawah ini, kursor kamu akan ada "buntutnya" yaitu bola-bola yang bisa memantul. berhubung aku g da blog "korban", aku g bisa ngasi SS contohnya. Buat temen-temen yang uda nyoba, bisa kasi SS di komentar y... buat referensi yang laen.... :P
Ni langkah-langkahnya :
1. Buka blogger.com trus login
2. Masuk dashbord, trus pilih "design" blog yang mau kamu pasang animasi ini.
3. klik "edit HTML"
4. centang "Expand Widget Templates"
5. trus cari tag </body> (biar gampang, tekan ctrl + f)
6. Copy semua script yang di kolom bawah ni tepat "DIATAS" atau "SEBELUM" tag </body>

7. Jangan lupa mengganti URL/sumber gambar bolamu.
8. Save, trus coba buka blog kamu.

Ni aku kasi contoh bola sama URL gambar bolanya.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWGALoJCoud5nWN7wvRSpjrGLHvXf9OU7lMqrWDATVUK2QLfZC6Eaow5L8BR_m8Wcb2wMcKZXMHms3M_bueKsDdzx0iOUDq0v6cI9QIBmjLzzoAq_L3Um47jyTZ7KojMcHQ8V9YBsP7i3d/s11/Blue%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuWjEVuIBeHMQR6KnByjTJnkqXE-dIVGm59DeYnxnNcwgBas623LkkyMifVsumPs7-KIWi1KtjitjPSxJF92ktcMgEzG2VetreFCVZsigvc6TyY268KqczjUvoEg3S-dw38Ez0Lu6rQEPq/s128/Gray%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1yyKpkAnsxKzucXCCAb_kgHZFAhQ5I-Ie542NTt4XdV3xLtGGjO8QBfOUQ4-wtPA6mIZ_n0s-6EHewqJNQlCPHRXJZnh8oCR3jmND66g2xCGsdUjleLaSZ_wWvqST2ExieGj0ssLQ3ZCq/s128/Green%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZSAbEcvpWDeTPhAr9C_8NDCYWpmRtr4Fm17GcXmn-5sP8tNIdkYApvovk6RDcSeakAukOeoExRy9m9u43gmvF9TQTlkvSofmtdzHPiXbJwiAPWA1eaeMHEK7NE6pqfCzFpT-3qEfAn3Pr/s128/Purple%252520Ball.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmW019DYpkEjz3xBNDcYyjLHzGfSQslgRzqcVv0O4fjxune0bno_hX_v1Bl8866WbF4_-KU8tRgi2Y1RvMv9wCB546EE0lR5wL4Ixk4inXlGhuKpewUUWxHH-ap6wnU_vjfynHjDwd5VD/s128/Red%252520Ball.gif

Cara Cepat Meningkatkan Peringkat Alexa

Kaget sebenarnya setelah mengetahui fakta yang satu ini. Awal saya mulai membuat blog ini trus daftar di alexa, peringkat blog saya dimata alexa sekitar 24.000.000. Dalam hati saya bergumam "wajar, blog baru... g mungkin langsung masuk 5jtan".
Tapi beberapa hari belakangan saya baru sadar kalo ternyata blog saya sudah masuk jadi 4jtan. Seneng sih, tapi juga bingung, "kenapa bisa??" padahal saya g ngerasa ngelakuin sesuatu buat naikin alexa rank.
Usut punya usut, ternyata ini efek dari saya bergabung di infolinks.com dan clicksor. Awalnya sih g percaya, akhirnya saya coba pasang script infolinks di blog saya yang satu lagi (yang dimata alexa masih tidak ada data peringkat). 3 hari setelah pemasangan, ternyata blog saya tu dah masuk peringkat 8jtan.
Atas dasar itulah, saya ingin berbagi info ini buat temen-temen yang g sengaja nyasar kesini. buat daftar infolinks, ada beberapa persyaratan, yang utama "blog harus berbahasa inggris".
Cara mengakalinya, kamu simpan dulu semua artikel kamu jadi draft, trus posting 5-10 lirik lagu bahasa inggris. Selain tu, biar lebih aman, kamu bisa hilangkan dulu semua widgetmu. trus daftar di infolinks.com, tunggu konfirmasinya. Kalo belum da konfirmasi, jangan posting dulu artikelmu yang tadi kamu draft-in tu. Kalo dah ada konfirmasi, baru kamu tampilkan lagi semuanya n jangan lupa pasang juga script infolinks.com (y iya lah, buat pa daftar kalo scripnya g kita pasang???).
Untuk daftar di clicksor, g da persyaratan seperti di infolinks.com, tinggal daftar trus copas script widgetnya.

Oy, buat ngeliat secara real-time (dan bisa untuk semua web/blog) alexa rank, kamu bisa pasang tolbarnya, sudah aku kasi tutorialnya di alexa untuk blogmu.
Semoga tutorial kali ni bisa berguna buat temen-temen blogger. Keep spirit to Blogging. :P

Blog percobaan : http://album-dagip.blogspot.com/
Link daftar Alexa : alexa.com
Link daftar infolinks.com : infolinks.com
Link daftar clicksor : Clicksor.com

Alexa untuk blogmu

Setelah muter-muter nyari cara buat ningkatin peringkat dari Alexa, akhirnya dapet juga. Dari beberapa blog yang udah aku buka-buka, kira-kira seperti ini tips yang diberikan mereka.

Buka web alexa trus pilih tab site tools kemudian di bawah da tulisan "Claim Your Site", trus ikutin langkah-langkahnya mpek kelar.
Selesai yang pertama, lanjut ke pemasangan widgets alexa, disebelah "Claim Your Site" tadi, trus pasang di blog kamu.
Instal toolbar alexa di browser kamu, kata para tetua sih ni bisa ningkatin page rank kita soalnya tiap kita buka web/blog kita dengan browser yang udah kepasang alexa toolbar, point kita akan di hitung ma si alexa tadi. :P
Buat tulisan yang terkait dengan alexa, baik pa tu alexa, cara pasangnya, keuntungan to kerugiannya dan lain-lain yang berhubungan dengan alexa. katanya sih da yang mpek naik 200.000 habis nulis artikel gituan.

Tu sebagian (semua yang aku tahu) tentang cara naikin rank blogmu di mata alexa. Tapi aku yakin masih banyak lagi cara yang bisa dilakukan untuk mempopulerkan blog/web kita. Bila ada yang mau berkomentar sembari meninggalkan link, saya persilahkan.

Membuat Text Area

Make Widget show only in home page or post page

How to make Threaded Comment in blog

Animasi kursor Bounce Ball (id)

Cara Cepat Meningkatkan Peringkat Alexa

Alexa untuk blogmu

Translate Here

Your Ads Here

Popular Posts

Blog Archive

Kategori