MyInspiration

Home All posts

Kamis, 16 Februari 2012

Cara Membuat Menu Tab View Tanpa Edit HTML

✔ Anonim 22.44 Comment

Cara Membuat Menu Tab View Tanpa Edit HTML - Apa kabar sobat blogger?? wah.. jarang - jarang nich christian tatelu posting 2 artikel sehari, mudah- mudahan bisa begitu terus.. heheh. Setelah sebelum telah memposting tentang cara mengetahui blog dofollow atau nofollow, kali ini saya aka kasih tahu pada sobat blogger bagaimana cara membuat memasang menu tab view tanpa harus edit html.

Seperti kita tahu bersama bahwa Tab view adalah salah widget berguna terutama untuk menghemat halaman blog sobat. Widget ini sifatnya seperti menyembunyikan widget yang kemudian bisa tampil kembali jika kita mengkliknya. contohnya bisa sobat lihat di bagian footer sebelah kiri dari blog ini.

Cara ini ini sebenarnya sudah banyak yang posting tapi sembari menunggu hujan berhenti tak apa lah, siapa tahu makin banyak follower blog nya, iya toh???? hehehe. Sobat yang tertarik untuk memasang widget menu tabview tanpa edit HTML silahkan ikuti tutorialnya.

Cara Membuat Menu Tab View Tanpa Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan -->Elemen laman --> Tambah Gadget --> pilih HTML/Javascript
3. Masukkan kode berikut ke dalam konten dan jangan beri nama widgetnya.

4. Klik save dan lihat hasilnya

BLOG Blogger Template

Cara Mengganti Template Blogger

✔ Anonim 21.09 Comment

Cara Mengganti Template Blogger - Sobat yang bosan dengan tampilannya blognya dan ingin menggantinya dengan template baru, sepertinya sobat berada di tempat yang benar. Kali ini kita akan membahas bagaimana cara mengganti template blogger blogspot.

Sekedar pemberitahuan bahwa sebelumnya christian tatelu telah mengeluarkan 2 template seo friendly yang bisa sobat download gratis. yaitu tatelu blogger template dan tatelu blogger template V2. bagi sobat yang berminat silahkan di download.

lanjut....

Sobat yang berniat mengganti template blogger silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik Rancangan -->Edit HTML
3. Klik tombol Browse

4. Pilih file XML dari template yang akan di pakai kemudian klik open.

5. Klik Unggah.

6. Setelah selesai di unggah maka akan ada peringatan tentang widget dari template sebelumnya.

Pilih pertahankan widget jika ingin mempertahankan widget dari template sebelumnya.
Pilih Hapus widget untuk menghapus widget dari template semula.
Pilih batal untuk membatalkan proses penggantian template.

7. Klik Simpan.

Tambahan :
Umumnya template yang sobat download di internet ber format rar untuk itu harus di ekstrak terlebih dahulu ke file XML. caranya seperti gambar berikut.

Semoga Cara Mengganti Template Blogger di atas berguna untuk sobat blogger.

Rabu, 15 Februari 2012

BLOG

Cara Membuat Threaded Comment di Blog

✔ Anonim 19.32 Comment

Cara Membuat Threaded Comment di Blog - Ada beberapa hal yang bisa menunjang penampilan blog sobat, kali ini saya akan kasih tahu salah satunya. Namanya Threaded Comment. Threaded Comment adalah form komentar di mana komentar balasan letaknya akan berada di bawah komentar utama.

Dengan Fasilitas ini, sobat tak perlu lagi memoderasi komentar dengan alasan untuk memudahkan membalas komentar tersebut. namun perlu di perhatikan bahwa dengan memasang Threaded Comment di Blog, maka emoticon yang sobat pasang baik itu emoticon onion , emoticon kaskus, emoticon skype ataupun yang lain akan terhapus dan tak akan muncul di kotak komentar blog sobat. Bagi sobat yang tertarik membuat comment threaded silahkan ikuti tutorial berikut.

Cara Membuat Threaded Comment di Blog

A. Tanpa Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik Download template lengkap untuk antisipasi kegagalan.
3. Klik tulisan Kembalikan template widget ke default kemudian klik OK.
4. Selesai.. sekarang Threaded Comment nya sudah ada.

Tambahan :
Cara di atas akan menghapus seluruh data widget di HTML blog sobat. termasuk navigasi breadcrumb,related post dll. jadi bagi sobat yang sudah terlanjur memasang navigasi breadcrumb, related post dll, saya sarankan untuk menggunakan tutorial yang berikut.

B. Edit HTML

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik Download template lengkap untuk antisipasi kegagalan -->Klik Expand widget template.
3. Cari kode berikut dengan menggunakan Ctrl + F.

<b:include data='post' name='comments'/>

4. Ganti dengan kode berikut.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
5. Klik save dan selesai.

tambahan :

Sobat akan menemukan 4 kode <b:include data='post' name='comments'/>. hapus dan ganti semuanya.

Sobat yang ingin membuat threaded comment seperti blog ini silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik Download template lengkap untuk antisipasi kegagalan -->Klik Expand widget template.
3. Letakkan kode berikut di atas kode ]]></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/AVvXsEiAn69h0q0cxrVGDHZ1MAAFY4Q1PTbNW6wwYiJBJST0WUPVuY3QrwG-03gIICZ3HAcyYkWkyPanA8zh-5g3XEtc8sDm4mhP1T0zNIjxMPoDt61lSCM12lzwk8bVVCYmYvX6uozPRxiXyaM/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. Letakkan kode berikut di atas kode </body>

5. Cari kode berikut dan hapus kode di antara ke 2 kode tersebut. ( kode tersebut cukup panjang )

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

Kode yang harus di ganti

</b:includable>

6. Ganti dengan kode berikut:

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 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='"https://www.blogger.com/comment.g?blogID=__BlogID__&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=600,height=500"); 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='"https://www.blogger.com/comment.g?blogID=__BlogID__&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=600,height=500"); 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>

6. Ganti __BlogID__ dengan id nya sobat. untuk mengetahui id blog sobat lihat gambar berikut.

7. Simpan template dan lihat hasilnya..

semoga Cara Membuat Threaded Comment di Blog ini bisa membantu sobat dalam menghias blog.

Senin, 13 Februari 2012

Blogger Template

Tatelu Blogger Template V2

✔ Anonim 23.45 Comment

Tatelu Blogger Template V2 - Setelah beberapa hari lalu mengeluarkan sebuah template yang di beri nama christian tatelu blogger template, kali ini christian tatelu kembali mengeluarkan template yang nggak kalah dengan template yang sebelumnya dan juga nggak kalah sama template yang biasa sobat download di om google.(hehe.. masa sih??). Namanya templatenya adalah Tatelu Blogger Template V2

Template ini di modif dari template minima yang sempat saya bilang adalah template blogspot terbaik... benar template terbaik.. buktinya dengan template minima ini saya yang seorang newbie bisa berkreasi menciptakan sebuah template, meskipun hasilnya nggak keren - keren amat. Sobat yang tertarik untuk mendownload template ini silahkan download dengan mengklik tulisan DOWNLOAD atau sekedar ingin lihat demonya silahkan klik tulisan DEMO.

DEMO / DOWNLOAD

BLOG

Cara Membuat / Meletakan Footer di Sisi Kanan atau Kiri Blog

✔ Anonim 02.33 Comment

Cara Membuat / Meletakan Footer di Sisi Kanan / Kiri Blog - Beberapa hari ini serasa dilema bro!!! Semangat memposting artikel yang sebelum membara di awal tahun 2012 kini mulai luntur, entah apa yang membuat saya sampai se jenuh ini. Namun hal tersebut coba saya siasati dengan sesuatu ( rahasia ).
setelah sebelumnya memposting artikel tentang Cara Mengetahui Blog Dofollow atau Nofollow, kali ini saya akan coba memposting artikel yang sedikit aneh, yaitu membuat atau meletakkan footer di sisi blog entah itu di sebelah kanan blog, sebelah kiri blog, ataupun tengah. namun khusus pada tutorial ini kita hanya akan membahas tentang cara membuat footer berada di sisi kiri blog atau bisa di bilang sidebar ke duanya. hehehe.

Postingan aneh dengan judul yang aneh pula ini saya posting dengan harapan bisa mengobati rasa bosen ngeblog. sobat yang tertarik untuk ber eksperimen dengan trik ku ini, silahkan ikuti tutorial berikut.

DEMO

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML
3. Cari kode yang mirip dengan kode berikut.

#outer-wrapper {
width: 950px;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

4. ganti kode tersebut dengan kode berikut.

#outer-wrapper {
width: 950px;
margin-left:350px;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

( kode di atas hanya ada tambahan pada margin, karena kita membutuhkan space untuk meletakkan footernya.)

5. Ganti kode footer-wrapper template sobat dengan kode berikut.

/* footer */
#footer {
clear:both;
width:950px;
position:relative;
text-align:left;
color:#000000;
font-family:julee;
background:#252525;
border:1px solid #000000;
margin:0 auto;
padding:0;
}

#footer {
width:300px;
clear:both;
float:center;
line-height:1.6em;
margin:0 auto;
padding:0;
}

.footer-bot {
padding:0px;
}

.footer-bot ul {
color:#222;
margin:0;
padding:0;
}

.footer-bot ul li {
list-style-type:none;
background:;
padding-left:15px;
margin-bottom:8px;
}

.footer-bot a {
color:#222;
text-decoration:none;
}

.footer-bot a:hover {
border-bottom:1px solid #222;
color:#000;
}

#footer-right {
width:250px;
float:left;
padding:5px;
margin-left:15px;
margin-bottom:10px;
background:#ffffff;
border:1px solid #222;
}
#footer-center {
width:250px;
margin-bottom:10px;
float:left;
margin-left:15px;
padding:5px;
background:#ffffff;
border:1px solid #222;
}
#footer-left {
width:250px;
background:#ffffff;
margin-bottom:10px;
padding:5px;
margin-left:15px;
margin-top:10px;
float:left;
border:1px solid #222;
}

6. Kemudian letakkan kode berikut di atas kode ]]></b:skin>.

#trik_tatelu {
position:fixed;_position:absolute;top:0px; background:#000000; left:px; width:320px;
border:1px solid #000000; height:585px;;overflow:auto;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

7. Letakkan kode berikut di atas kode </body>

8. Klik save.

Perhatian!

Sebelum sobat menggunakan trik ini, ada baiknya download terlebih dahulu template blog sobat.
Cara ini di anjurkan pada template dengan lebar yang sesuai dengan outer wrapper 950px, untuk lebar kurang dari atau lebih dari 950px, sobat perlu ketelitian dan pengetahuan tentang html. ( bukan newbie ).
Trik ini akan menggeser posisi outer wrapper blog sobat.
Trik ini saya coba pada template minima yang telah di hilangkan sidebarnya.
Mohon sobat atur sebaik mungkin jika setelah jadi hasilnya kurang bagus atau kurang cocok.
Semoga cara membuat footer berada di sisi kanan atau kiri blog bisa membantu sobat blogger.

Sabtu, 11 Februari 2012

Blogger Template

Tatelu Blogger Template

✔ Anonim 01.42 Comment

Tatelu Blogger Template - Ah .. entah apa yang ada di otak ane hingga kepikir membuat sebuah template dan menamai template ini dengan nama blogku sendiri. Awalnya cuma iseng - iseng utak - atik template, eh.. ternyata kelihatan bagus.. nah langsung dah ane bagi- bagi untuk sobat blogger.

Template ini adalah template minima yang saya modifikasi dan bongkar keseluruhan hingga ke akar - akarnya. adapun alasan saya memilih template minima karena kemudahan dalam mengedit kode - kodenya, jadi saya sarankan bagi sobat - sobat blogger yang niat atau mau membuat template sendiri, gunakanlah template minima.

Untuk kelebihan dan kekurangan dari template ini nanti sobat yang nilai sendiri saat sobat mencobanya, Sobat yang tertarik menggunakan ataupun ragu menggunakannya, ada baik mempertimbangkan dengan melihat screenshot berikut.

DEMO / DOWNLOAD

Semoga template buatan anak bangsa ini bisa bermanfaat untuk sobat blogger.

Kamis, 09 Februari 2012

BLOG Widget

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

✔ Anonim 18.28 Comment

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu- Mengertikah sobat akan maksud dari judul di atas? Sobat mungkin sering menemukan artikel mirip seperti ini dengan kata kunci " Membuat daftar isi per label", atau tak jarang juga dengan keyword cara membuat daftai isi sitemap. tapi satu mungkin yang membedahkan trik ini dari cara membuat daftar isi yang lain, yaitu cara ini yang hanya menampilkan artikel - artikel dalam 1 kategori atau label tertentu. Masih kurang mengerti juga?

Kali ini kita akan coba membuat daftar isi otomatis pada satu kategori tertentu. Untuk lebih jelasnya, coba sobat lihat daftar isi di sidebar paling atas di blog ini.

Trik seperti ini sebenarnya bisa sobat lakukan secara manual dengan cara memasukkan secara manual link - link artikel sobat , namun seperti biasa, waktu sobat mungkin akan sedikit terkuras. Untunglah jika sobat hanya memiliki sedikit artikel.. bagaimana jika banyak?? wah. bisa pegel ni jarinya.. hehe

Widget ini di lengkapi scroll yang berfungsi menghemat halaman sobat, jadi jangan perlu takut kalau - kalau tidak muat lamannya karna kebanyakan artikel. Bagi sobat yang tertarik untuk membuat daftar isi otomatis pada label tertentu silahkan ikuti tutorial berikut.

Cara Membuat Daftar Isi Otomatis Untuk Label Tertentu

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Elemen laman --> Tambah Gadget -->HTML/Javascript
3. Masukkan kode berikut kedalam kotak yang di sediakan dan berikan judul sesuka hati sobat.

<div style="overflow:auto; width:auto; height:150px; padding:5px;border:0px solid #000000; font-family:julee; font-size:15px; font-color:#0000FF;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script><ol>
<script src="http://www.blooger.co.idm/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :

width:auto : menunjukkan bahwa lebar scroll box akan menyesuaikan dengan lebar sidebar.
height:100px : tinggi scroll box. silahkan sobat ganti sesuai keinginan.
border:1px solid #e6e4e3 : adalah ukuran, jenis dan warna dari border. 1px adalah tebal border, solid adalah jenis border ( jenis - jenis border lihat di sini!) dan #e6e4e3 adalah warna border.( kode warna lihat disini! )
font-size : adalah ukuran huruf.
<ol> : adalah Numbered LIst , sobat bisa menggantinya menjadi bullet list dengan kode <ul>
Ganti http://www.blooger.co.idm dengan Url blog sobat.
Ganti SEO%20BLOG dengan label yang sobat inginkan. Perhatikan penulisan labelnya. sesuaikan dengan yang terterah, jika satu huruf saja salah penulisannya, makan daftar isinya tak akan muncul. %20 adalah Spasi jadi ganti spasi dengan kode %20.

3. Klik simpan.

Untuk menampilkan daftar isi lebih dari satu label, misalnya untuk label SEO BLOG dan BLOG, maka kode yang harus sobat pakai adalah seperti berikut.

<div style="overflow:auto; width:auto; height:100px; padding:5px;border:1px solid #e6e4e3; font-size:15px;">
<ol>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://tateluproject.googlecode.com/files/postlabel%281%29.js'></script>
<h3>BLOG</h3>
<ol>
<script src="http://www.blooger.co.idm/feeds/posts/default/-/BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
<br/>
<h3>SEO BLOG</h3>
<ol>
<script src="http://www.blooger.co.idm/feeds/posts/default/-/SEO%20BLOG?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ol>
</ol></div>

tambahan :

Sesuaikan tulisan yang berwarna biru dengan label yang sobat gunakan.

Nah.. Bagaimana sob.. gampang kan?? Sampai di sini dulu tutorialnya, tunggu lagi kelanjutan postingan dari Christian Tatelu.

Senin, 06 Februari 2012

BLOG

Cara Mendapatkan Banyak Follower / Pengikut Blog

✔ Anonim 18.11 Comment

Cara Cepat Mendapat Follower / Pengikut Blog - Apa kabar sobat blogger? di pagi yang indah ini setelah semalam om gugel menghadiahi sebuah pagerank untuk blog ini, saya semakin semangat untuk memposting artikel. kali ini kita akan coba membahas bagaimana memperbanyak follower / pengikut blog dengan mudah dan cepat.

Ada yang tahu tentang Follower blog ??? yap! follower blog atau dalam bahasa indonesia nya pengikut blog adalah fasilitas jalan pintas untuk menuju ke suatu blog yang berupa daftar yang telah kita buat yang akan di tampilkan di dashboard blog dengan tujuan untuk memudahkan kita untuk kembali ke blog tersebut ( menurut gue tuch!!). Follower blog juga seringkali di katakan sebagai tanda bahwa blog sobat adalah blog yang di sukai pengunjung.

Berbeda dengan follower twitter yang bisa dengan mudah kita dapatkan, follower blog mungkin sedikit lebih sulit.( tapi tidak sulit - sulit amet kalo usaha ) tapi tenang bro! kali ini setelah memposting artikel tentang cara membuat blog di tumblr saya akan kasih tahu cara yang mungkin sudah banyak di lakukan oleh blogger - blogger pada umumnya untuk menjaring banyak follower blog. Berikut cara mendapatkan banyak pengikut blog dengan mudah.

Cara Mendapatkan Follower / Pengikut Blog

1. Buka browser sobat dan mulai cari blog yang berkriteria sama seperti sobat. ( kurang follower heheh maaf ya sob becanda ) di pencarian google.
2. Ajak admin blog tersebut untuk saling follow dengan memperhatikan hal - hal berikut.

Pilh blog yang sering update walaupun sebagian atau mungkin seluruh artikelnya Copas. Lihat tanggal postingan terakhir blog tersebut ( jika ada) jika tidak ada, lihat saja pada komentar - komentar di postingan blog tersebut pada tanggal berapa mulai ada yang berkomentar. lihat gambar

jika sudah terlampau jauh misalnya hari ini tanggal 4 february 2012 dan tanggal postingnya 4 desember 2011, itu berarti adminnya sudah jarang update ataupun jarang ngeblog. jangan pilih blog tersebut karna sobat tidak akan mendapat respon cepat dari adminnya.

Pilih blog yang memasang widget follower di blognya. Karna dengan memasang widget tersebut, siapapun yang menjadi followernya akan tampil pada widget tersebut. Dengan demikian memungkinkan sobat untuk mendapat follower plus dapat trafik dari blog tersebut.

Ajak saling follow dengan cara yang santun dan tidak memaksa. Misalnya..

"blog agan sudah saya follow, jika berkenan mohon followback ya!"

jangan seperti ini :

" hey bro! blogmu sudah gue follow bro.. follow balik ya! awas kalo enggak!!"

3. Jika sudah di setujui dan blog sobat sudah di followback, nah.. sekarang waktunya berterima kasih dan jangan lupa! kalo perlu ajak saling tukeran link.Oke sob!!

Semga cara di atas bisa membantu...

Kamis, 02 Februari 2012

BLOG

Cara Membuat Blog di Tumblr

✔ Anonim 19.30 Comment

Cara Membuat Blog di Tumblr - Tumblr adalah platform blogging yang telah berdiri hampir 5 tahun sejak di umumkan oleh David Karp pemiliknya. Berbeda dengan platform blog lain, tumblr bisa di katakan adalah yang paling mudah, mulai dari cara membuat blog di tumblr hingga memposting artikel, semua dapat di lakukan dengan mudah di tumblr ( meskipun aku lebih memilih Blogspot ).

Tumblr sering juga di katakan penggabungan antara Blogger dan Twitter atau blog dengan mikroblog. Kemudahan dalam menulis seperti Twitter dan kustomasi tema dan tampilan berbentuk website seperti pada Blogger. Tumblelogging adalah istilah yang dikenal sebagai aktivitas blogging pada Tumblr.

Sobat yang tertarik untuk membuat blog di Tumblr silahkan likuti tutorial berikut.

Cara Membuat Blog di Tumblr

1. Buka situs Tumblr di sini!
2. Kemudian sobat akan tampilan berikut.

3. Masukkan data - data yang di minta yang meliputi Alamat Email, Password, dan URL blog tumblr. Pada kolom URL, masukkan hanya nama url saja dan jangan menyertakan http://.

Contoh http://Trikblogging.tumblr.com.
hanya tulisan Trikblogging yang harus sobat masukkan.

4. Klik Start Posting. Sobat akan di minta untuk memasukkan Captcha kemudian klik tulisan I'm human ( ada - ada aja ni tumblr )

5. Nah jadi dech akun tumblr nya!!! Untuk cara memposting di Tumblr nanti ane posting kalau - kalau artikel ini ada responnya... hehehe

makasih ya telah membaca cara membuat blog di Tumblr..

BLOG

Cara Memasang Tombol Like Facebook di Blog

✔ Anonim 16.22 Comment

Cara Memasang Tombol Like Facebook di Blog - Apa kabare sobat blogger?? baik kan?? Setelah sebelumnya tatelu memposting cara membuat Navigasi Breadcrumb di blog, kali ini saya akan memposting artikel tentang Cara Memasang Tombol Like Facebook di Blog.

Berbeda dengan Fanpage facebook, tombol ini hanya berfungsi untuk menampilkan 1 tombol yang kemudian bisa di klik dan bertambah nilainya. Jumlah like pada tombol tersebut tidak menambah jumlah like fanpage facebook sobat namun sekedar menunjukan seberapa berguna atau seberapa baik artikel sobat di mata pengunjung.

Jika artikel sobat di anggap bagus oleh pengunjung maka tak salah jika pengunjung yang terutama datang dari facebook untuk memberikan Like pada postingan sobat tersebut. Bagi sobat yang tertarik memasang tombol facebook like di blog silahkan ikuti tutorialnya.

1. Log in ke akun blog sobat.
2. Klik Rancangan --> Edit HTML --> Klik download template lengkap --> Centang kotak di samping tulisan Expand Template Widget.
3. Letakkan kode berikut di atas kode <data:post.body/> ( gunakan Ctrl + F untuk memudahkan pencarian )

4. Simpan template.

tambahan :

Cara di atas akan menampilkan tombol like facebook di bawah judul artikel. Untuk menaruhnya di bawah postingan, sobat hanya tinggal memindahkan kode tersebut di bawah kode <data:post.body/>.
Sobat bisa mengubah Tulisan standard dengan button_count dan Light dengan dark bila sobat mau.

SELESAI!!!

BLOG

Cara Membuat / Memasang Navigasi Breadcrumb di Blog

✔ Anonim 00.21 Comment

Cara Membuat / Memasang Navigasi Breadcrumb di Blog - Pada awal saya ngeblog, saya sempat membaca sebuah artikel yang dalam satu kutipan bilang begini " Navigasi breadcrumb adalah bagian dari blog yang keberadaannya dapat menunjang blogmu di mata search engine" membaca kata tersebut maka langsunglah saya membuat navigasi breadcrumb. eh pas mau buat ternyata nggak semuda yang di bayangkan, ternyata eror sob!!.
Sudah banyak macam breadcrumb navigasi yang saya pasang di blog saya tapi tak ada satupun yang bisa.. eror semua, terutama jika menerapkan 2 atau lebih kategori dalam 1 artikel. Dari situlah saya tahu, ternyata permasalahnnya adalah perbedaan kode di setiap template. Template yang ku pakai adalah template minima.
Navigasi breadcrumb sendiri adalah sebuah navigasi atau penunjuk halaman yang umumnya berfungsi untuk membantu memberikan informasi kepada si pembaca tentang di artikel mana dan di menu apa si pembaca berada. bagi sobat yang tertarik untuk memasang navigasi breadcrumb di blog sobat, silahkan ikuti tutorial nya di jamin tidak eror dan so pasti SEO friendly...

Berikut Cara Membuat Navigasi Breacrumb di Blog.

1. Log in ke akun blog sobat.
2. Klik Rancangan---> Edit HTML --> Klik Download template lengkap
4. Letakkan kode berikut di atas kode ]]></b:skin>. ( gunakan Ctrl + F untuk memudahkan pencarian)

.breadcrumbs{
padding:5px 5px 5px 0;
margin:0;
font-size: 90%;
line-height:1.4em;
border-bottom:1px solid black;
}

5. Kemudian sobat cari kode seperti ini :

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

6. Pastekan kode berikut tepat di bawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
You are Here > <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>
</b:if>

7. Yang terakhir sobat tinggal simpan template dan lihat hasilnya.

Semoga cara / trik di atas bisa membantu sobat blogger...