Tampilkan postingan dengan label blog. Tampilkan semua postingan

Senin, 21 November 2011

Cara membuat Related Posts | artikel terkait dibawah posting

Related posts atau artikel terkait yaitu berfungsi untuk menautkan ke artikel lain agar pengunjung melihat dan membuka artikel yang lain, sehingga pengunjung akan betah berlama-lama di blog kita.

Pada pembuatan template agar SEO friendly pun juga sangat disarankan menggunakan related post atau artikel terkait ini.Nah, Kalau pengunjung blog kita banyak rangking alexa pun juga naik, ya gag??

Pada related post ini akan menampilkan artikel dengan label yang sama pada artikel yang dibaca.

Langkah-langkah untuk membuat artikel terkait sebagai berikut :
1. Silahkan login ke blog sobat
2. Pada halaman dasbor pilih Rancangan >> Edit HTML
3. Centang expand template widget
4. Cari kode </b:template-skin>
5. Letakkan kode dibawah ini dibawah </b:template-skin>

<span class='post-labels'>
<b:if cond='data:post.labels'>
<img alt='Comments' height='18' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwTTQqH3qlQuDWMBlcDMm1EU3QnnMCduNcHfVY5dDhAAwnegJITl2pv0u7_UgJ-wpYSpc3BmIgTJ0kK7Symsen596DIK1-gzXDu778YyVLZdKlf7N1RVNoUQ2uQKA2UeeJA1VVkMiiVS4/s1600/folder.png' style='margin-bottom: -5px; margin-left: 0px;' width='18'/>
Posted in:
<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>
</span>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<br/><br/>
<b>Artikel Terkait :</b>
<div style='overflow:auto; width:448px; height:145px; padding:15px; border:4px double #CCCCDD;'><script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script></div>

6. Cari kode <div class='post-footer-line post-footer-line-2'>
7. Letakkan kode dibawah ini dibawah <div class='post-footer-line post-footer-line-2'>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<br/><br/>
<b>Artikel Terkait :</b>
<div style='overflow:auto; width:448px; height:145px; padding:15px; border:4px double #CCCCDD;'><script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script></div>

8. Simpan template

Nah, Sekian artikel tentang cara memasang related post atau artikel terkait pada blog,, Semoga bermanfaat bagi sobat semua.. ^_^

Minggu, 20 November 2011

Cara memasang breadcrumbs pada blog

Breadcrumbs adalah bantuan navigasi antuk memudahkan para pengunjung untuk mengetahui letak halaman pada artikel yang dibaca. Dan bahkan kini mbah google sekarang juga sangat mempertimbangkan blog yang menggunakan breadcrumbs jadi tunggu apalagi segeralah pasang breadcrumbs pada blog sobat. Kalau google suka pengunjung banyak peringkat alexa naik juga kan??

Untuk contoh bisa sobat lihat diatas judul artikel ini. Dengan menggunakan breadcrumbs pada blog kita maka akan mudah juga search enginer membaca blog kita karena breadcrumbs adalah salah satu cara agar template kita menjadi tambah SEO friendly. Sobat mau?? Kasih gag ya,,hehehehe.. kasih dah,, :P

Langkah-langkah pembuatan breadcrumbs adalah sebagai berikut :
1. Silahkan login pada blog sobat
2. Pada halaman dasbor pilih Rancangan >> Edit HTML
3. Centang Expand template widget
4. Cari kode ]]></b:skin>
5. Letakkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumb {
border-bottom: 1px solid #CFE2F3;
font-size: 95%;
line-height: 1.4em;
margin: -11px -15px 8px;
padding-left: 3px;
}

6. Setelah itu cari kode <b:includable id='post' var='post'>
7. Letakkan kode dibawah ini dibawah <b:includable id='post' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
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>

8. Save

Simpelkan sobat?? Nah, ayo tunngu apalagi, segera pasang pada blog sobat.

Sekian tutorial tentang cara memasang breadcrumbs pada blog, Semoga bermanfaat bagi sobat semua, terima kasih.. ^_^

Jumat, 18 November 2011

Cara mengetahui pengunjung jumlah pada blog | Visitor menggunakan geovisite

Setelah kemarin memposting tentang cara memasang widget histats pada blog yaitu juga berfungsi untuk mengetahui pengunjung pada blog, kali ini saya juga akan memposting cara mengetahui pengunjung pada blog dengan menggunakan widget geovisite.

Tampilan geovisite menurut saya lebih menarik. Selain untuk mengetahui pengunjung pada blog geovisite juga memberikan banyak widget-widget yang lain. Nah tak usah berlama-lama mari kita langsung ke tutorial cara mengetahui pengunjung pada blog menggunakan geovisite :

1. Silahkan buka alamat www.geovisites.com
2. Klick “Sign up now” pada bagian kiri atas
3. Setelah masuk kehalaman sign up isi formulis sesuai blog sobat
4. Tekan save
5. Buka email sobat untuk konfirmasi pendaftaran
6. Silahkan “Log in” ke alamat geovisite
7. Setelah log in pilih “Geomap”
8. Setelah itu silahkan sobat copy script yang deberikan
9. Silahkan login ke blog sobat
10. Pada halaman dasbor pilih Rancangan >> Elemen laman
11. Tambah gadget HTML/JavaScript
12. Paste Script tadi ke gadget HTML/JavaScript.
13. Simpan.

Nah, Sekian tutorial cara untuk mengetahui pengunjung/visitor pada blog..
Semoga bermanfaat bagi sobat, Sekian dan terima kasih,, ^_^

Kamis, 17 November 2011

Cara pasang widget SMS gratis di blog | Tanpa iklan

Nah sobat pasti sering melihat di blog-blog ada menu SMS gratis, pasti sobat bertanya-tanya”Beneran gratis gag??” nah silahkan sobat coba sendiri beneran gag?? Silahkan coba disini. Jangan percaya bila belum mencoba, Gimana gan, sudah dicoba belum?? Wah rugi juga kalau gag nyoba,, mumpung gratis,, hehehe..

Jika sobat telah mencoba, dan akhirnya bisa, pasti sobat juga bertanya-tanya “gimana sih cara membuatnya??” Nah beruntung sobat mampir disini,, Disini saya akan berbagi tentang cara membuat widget SMS gratis pada blog sobat, Jika sobat pernah tau atau bahkan memasang widget SMS gratis tetapi biasanya terdapat iklan dibawah widget SMS gratis tersebut. Disutulah letak perbedaannya. Dengan menggunakan cara ini dijamin 100% tak ada tambahan iklan kecuali sobat sendiri yang nambahi,, hehehe..
Nah mari langsung kita ke cara membuat widget SMS gratis tanpa iklan, berikut langkah-langkahnya :

1. login ke blogger
2. Design > Elemen Laman > Add a Gadget > HTML/JavaScript
Trus masukkan Kode Script di bawah ini, kasih Judul sesuai keinginan,

Catatan : Teks yang berwarna biru bisa di ganti sesuai keinginan untuk mengikuti lebar sidebar kita
Teks yang berwarna merah untuk menetukan tinggi widget
3. Terus Save,
dan silahkan atur penempatannya sesuai keinginan.

Nah jika sobat yang sudah menggunakan widget SMS gratis tetapi yang masih ada iklannya, ayo cepetan ganti dengan yang ini, hehehehe..
Selamat mencoba dan semoga bermanfaat. Wassalam,, ^_^

Selasa, 08 November 2011

Cara menyembunyikan widget di halaman tertentu versi 2

Nah jika sebelumnya kita pernah mengulas tentang cara menyembunyikan widget dihalaman tertentu versi pertama yaitu caranya dengan menyisipkan kode kedalam widget yang kita pasang. Nah kini dengan menggunakan cara menyembunyikan widget versi kedua ini akan berbeda dan lebih simpel dan tentunya lebih aman daripada menggunakan cara lama. Mari kita langsung bagaimana cara untuk menyembunyikan widget untuk versi kedua ini

1. Silahkan login ke blog sobat
2. Pada halaman dasbor pilih Perancangan >> pilih Edit HTML
3. Cari kode ]]><b:/skin> tekan CTRL+F untuk mencari
4. Letakkan Kode dibawah ini dibawah kode ]]><b:/skin>

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<style>

#HTML14,#HTML15,#HTML9 {

display:none;

background: transparent;

}

</style>

</b:if>

Contoh diatas adalah contoh untuk menyembunyikan widget HTML hanya di homepage.

Sebenarnya kode <b:if cond='data:blog.url != data:blog.homepageUrl'> yaitu untuk menampilkan widget selain di homepage, itulah perbedaan dari cara menyembunyikan widget versi pertama, jika cara sebelumnya kode untuk menyembunyikan widget di homepage menggunakan kode <b:if cond='data:blog.url != data:blog.homepageUrl'> maka jika menggunakan versi ke 2 ini justru kebalikannya kode yang seharusnya untuk meyembunyikan di homepage justru akan muncul hanya di homepage.

Untuk melihat nama dari widget bisa sobat lihat gambar di bawah ini

Cara menyembunyikan widget di halaman tertentu

Untuk melihat kode lengkap menyembunyikan di halaman tertentu silahkan klik disini.

Nah, sekian cara untuk menyembunyikan widget dihalaman tertentu versi 2 ini semoga bermanfaat, terima kasih, jangan lupa tinggalkan komentarnya ya,, ^_^

Cara Membuat TAB View pada blog

Pada sesi sebelumya kita pernah membahas cara untuk menampilkan widget dihalaman tertentu yaitu untuk menghemat tampilan di blog kita tentu saja agar loading pada blog kita tidak berat. Nah, kini kita akan mencoba bagaimana membuat tab view pada blog. Tab view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. masuk ke tab Perancangan lalu pilih edit HTML
3. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
4. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

5. Letakkan kode dibawah ini diatas kode </head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div>
<div class="Page">
Disini letakkan kode untuk tab 2 anda
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Setelah itu simpan dan lihat hasilnya.

Demikian tutorial cara membuat tab view pada blog semoga bermanfaat, jangan lupa tingggalkan komentar ya, terimakasih,, ^_^

Sumber : Ateonsoft.com

Selasa, 01 November 2011

Cara menghilangkan navbar blog

Navbar, pasti sobat blogger bertanya-tanya apa itu sih navbar itu? Apalagi nyuwbi seperti saya, hehehe..
Navbar adalah kotak navigasi blogger yang berada diatas header blog kita, dalam navbar terdapat kotak pencarian berfungsi untuk mencari isi dalam blog tersebut, selain itu terdapat fitur-fitur untuk memenage blog anda, jika sobat kurang jelas lihat gambar dibawah ini.

Nah, mari kita langsung ke cara menghilangkan navbar pada blog. Berikut tutorialnya:

1. Masuk ke akun blogger anda, di dasbor klik rancangan, lalu klik Edit.
2. Cari kode ]]><b:/skin> untuk mencari tekan CTRL+F pada browser sobat.
3. Lalu letakkan kode di bawah ini di atas kode ]]><b:/skin>

/* hilangkan navbar */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Sekian tutorial cara untuk menyembunyikan navbar pada blogger semoga bermanfaat bagi sobat semua, makasih,, ^_^

Senin, 31 Oktober 2011

Cara membuat read more / baca selanjutnya pada blog

Read more atau baca selanjutnya yaitu berfungsi untuk memotong sebagian text artikel yang akan ditampilkan agar isi artiket tidak semuanya tampil di halaman utama atau home page. Dengan cara memotong sebagian text dari sebagian artikel selain membuat tampilan menjadi lebih simple dan menarik pengunjung yang membaca artikel akan penasaran apa lanjutan isi dari artikel sobat sehingga pengunjung akan tertarik sehingga akan membaca semua isi dari artikel sobat. Nah mari kita langsung kelangkah-langkah pembuatan readmore Langkah pertama silahkan login ke blog sobat, setelah itu silahkan sobat menulis artikel yang angin anda publikasikan, setelah selesai menulis potong sebagian artikel dengan mengeklik icon seperti gambar dibawah ini

Gambar diatas terdapat garis, pada bagian atas garis adalah text yang akan ditampilkan dihalaman utama blog, dan dibawah adalah sebagian text yang tersembunyi. Nah jika sobat ingin membuat read more secara otomatis atau yang sering disebut auto readmore silahkan baca artikel cara membuat readmore otomatis pada blog. Nah selamat mencoba, semoga berhasil dan semoga bermanfaat bagi sobat. Terima kasih..
Demikian tutorial tentang cara membuat read more pada blog semoga bermanfaat bagi sobat semua.. ^_^

Jumat, 28 Oktober 2011

Cara memasang favicon blog untuk semua browser

Apa itu favicon? favicon adalah icon kecil yang tampil disamping kiri di samping alamat suatu website pada tab di browser anda, untuk lebih jelasnya lihat gambar di bawah ini

Pada gambar diatas adalah favicon dengan menggunakan browser mozila firefox. untuk template baru di blogger kini sudah dilengkapi tempat untuk mengganti favicon yaitu pada tab perancangan, tapi kekurangannya adalah jika kita memasukkan favicon gerak (.gif) maka gambar tersebut tidak akan bisa bergerak. Nah, jika di blog sobat belum terdapat tempat untuk mengganti favicon, berikut tutorial untuk mengganti favicon dengan menambahkan kode pada edit HTML blog

Langkah 1
1. Silahkan loggin ke blogger sobat
2. Pada halaman dasbor pilih "Rancangan"
3. Pilih "Edit HTML"
4. Cari kode untuk mencari tekan "CTRL+F"
5. Masukkan kode berikut ini diatas kode

<link rel="shortcut icon" href="URL gambar favicon"/>

6. Klik save dan lihat hasilnya

Tetapi kode diatas favicon hanya akan terlihat pada browser mozilla firefox saja dan tidak akan tampil ke browser lainnya seperti opera, internet explorer, google chrome dan lainnya. Nah untuk menampilkan favicon pada semua browser kita perlu kita perlu menambahkan sedikit tambahan kode pada kode diatas, berikut kodenya

<link rel="shortcut icon" href="URL gambar favicon" type="image/vnd.microsoft.icon"/>

Dengan menambahkan kode diatas maka favicon akan terlihat pada semua browser. Nah demikian tutorial Cara menambah favicon blog untuk semua browser silahkan dicoba semoga berhasil.. ^_^

Kamis, 27 Oktober 2011

Cara Menampilkan dan Menyembunyikan Widget Pada Halaman Tertentu

Kalau dulu kita sudah mempelajari tentang cara membuat tampilan berbeda antara homepage dan isi dengan menyembunyikan widget, sekarang kita akan mencoba cara untuk memunculkan gadget di halaman yang kita inginkan, bahkan pada Postingan tertentu. Sebenarnya caranya sama dengan memunculkan widget di home saja, cuma kita lakukan sedikit modifikasi pada HTML penyembunyi widgetnya.

Berikut tutorialnya:
Menampilkan widget Hanya di homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>

Menampilkan widget selain di homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</b:if>

Menampilkan widget hanya di archivepages

<b:if cond='data:blog.pageType == "archive"'>
......................................
</b:if>

Menampilkan widget selain di achivepages

<b:if cond="data:blog.pageType != "archive"">
....................................................
</b:if>

Menampilkan widget hanya di itempages / postingan

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

Menampilkan widget selain di itempages

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

Menampilkan widget hanya di staticpage

<b:if cond='data:blog.pageType == "static_page"'>
..................................
</b:if>

Menampilkan widget selain di staticpages

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

Menampilkan widget pada URL postingan tertentu

<b:if cond='data:blog.url == "alamatpostingan"'>
.........................................
</b:if>

catatan: pada "alamat posting", ganti dengan url postingmu

Menampilkan widget selain di URL postingan tertentu

<b:if cond='data:blog.url != "alamaatpostingan"'>
................................................
</b:if>

catatan: pada "alamat posting", ganti dengan url postingmu

Sekarang Cara mengaplikasikannya adalah dengan menaruh kodenya dengan susunan sebagai berikut:
Misal menyembunyikan label di homepage, jangan lupa beri centang Expand Template Widget pada tab perancangan >> edit HTML

contoh:

<b:widget id='HTML5' locked='false' title='' 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>

Demikian tutorial untuk cara menampilkan atau menyembunyikan gadget dihalaman tertentu semoga bermanfaat bagi sobat semua.. ^_^

Rabu, 26 Oktober 2011

Cara Membuat Header Menjadi Dua Kolom | templete Baru

Berikut ini adalah tutorial untuk cara membuat header 1 kolom menjadi 2 kolom untuk template baru blogger, seperti yang kita lihat pada gambar dibawah ini . Header sebelah kiri adalah header utama yang dipotong sedangkan header yang kanan adalah header potongan dari header utama.

Pada tutorial ini dibawah header masih tetap dapat ditambahkan gadget.

Mari langsung kita ketahap-tahap pembuatannya.
1. Masuk ke dashboard -> Desain-> Edit HTML
2. Klik pada "Expand Template Widget"
3. cari kode dibawah ini (CTRL+F)

.header-outer {
......
}

Silahkan dihapus dan diganti dengan kode dibawah ini.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
min-height: 154px; /* untuk mengatur tinggi header (height) */
}
.header {
width: 45%; /* untuk mengatur lebar header kiri - title, description, image */
margin-right: 10px;
float: left;
}

.headerkanan {
float: right;

width: 49%; /* mengatur lebar header kanan */

margin: 20px 10px 5px 10px;
padding: 2px;

}

.headerkanan .widget {
margin: 3px;
}

4. lalu cari kode dibawah in

<div class='region-inner header-inner'>

Tambahkan kode dibawah ini dibawah kode diatas:

<b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'>
</b:section>

Ket: Untuk yang bercetak merah angka nya bisa anda bisa ganti dengan angka 2,3,4 atau lain nya..maksud nya untuk susunan kolom kebawah.

5. Lalu simpan dan lihat hasilnya.

Demikian tutorial untuk Cara Membuat Header Menjadi Dua Kolom untuk templete Baru semoga behasil,, ^_^

Selasa, 25 Oktober 2011

Cara memasang tombol reply komentar pada blog

Berikut adalah tutorial untuk menampilkan tombol reply pada komentar di blog selain itu juga dilengkapi dengan tampilan komentar akan menjadi lebih cantik dan menarik, berikut tutorial untuk menampilkan tombol reply komentar dan mempercantik kotak komentar pada blog.

1. Masuk ke dashboard -> Desain-> Edit HTML
2. Klik pada "Expand Template Widget"
3. Cari "Ctrl + F" dan menemukan ]]></b:skin>. Letakkan kode di bawah ini sebelum kode ]]></b:skin>:

#comments h4 {

font-size: 24px;

font-weight: normal;

margin: 20px 0;

}

.cm_wrap {

clear: both;

margin-bottom: 10px;

float: right;

width: 100%;

}

.cm_head {

margin: 0;

width: 70px;

float: left;

}

.cm_avatar {

margin: 0;

vertical-align: middle;

border: 1px solid #DDD;

padding: 3px;

background: white;

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;

background: #F7F7F7;

border: 1px solid #E4E4E4;

overflow: hidden;

}

.cm_arrow {

display: block;

width: 9px;

height: 18px;

background: url(http://4.bp.blogspot.com/-8luuqzWL1do/Tl9RmQ6dG6I/AAAAAAAAB6I/1ZxWKOXXlxE/s1600/comment-arrow.png) no-repeat;

position: absolute;

margin-left: -25px;

}

.cm_info {

margin-bottom: 5px;

}

.cm_name {

font-weight: bold;

font-size: 12px;

float: left;

}

.cm_date {

font-size: 10px;

float: right;

font-style: italic;

color: #CCC;

}

.cm_entry p {

margin: 0;

font-size: 13px;

color: #666;

}

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

}

4. Kemudian letakkan kode dibawah ini sebelum :

5. Langkah terakhir adalah untuk mencari kode berikut:

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

baris kode yang Anda harus diganti

</ B: includable>

... dan ganti baris kode antara yang includable dengan kode dibawah ini:

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

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

<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'/>
<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=ID BLOG&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>

<div class='cm_entry'>
<span class='cm_arrow'></span>
<div class='cm_info'>
<div class='cm_name'>
<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>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>

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

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

PENTING: Ganti tulisan warna merah dengan nomor ID BLOG anda sendiri.

Simpan template dan lihat hasilnya.

Sabtu, 22 Oktober 2011

Cara Memasang Widget Histats di Blogger

Widget Histats adalah salah satu widget yang digunakan untuk mengetahui jumlah visitor atau pengunjung ke blog anda. Widget ini biasanya terpasang di sidebar blog anda.

Berikut ini adalah langkah-langkah cara memasang widget Histats di Blogger:

Langkah 1

1. Silakan kunjungi situs http://www.histats.com
2. Klik menu REGISTER.
3. Isi form Login data.
4. Klik Continue.
5. Isi form additional information.
6. Beri tanda centang pada kotak kecil di bawah.
7. Klik Save.
8. Masuk ke email Anda yang tadi dimasukkan ke form Login data.
9. Buka email dari histats.com yang berjudul histats account activation email.
10. Kemudian klik link yang diberikan.
11. Setelah aktivasi berhasil, klik tulisan www.histats.com.
12. Lalu login.
13. Klik tombol Add a website.
14. Isi form website data.
15. Klik tombol continue.
16. Klik tulisan Website URL Anda.
17. Klik tab Counter CODE.
18. Klik tombol +add new counter.
19. Pilih conter style sesuai selera Anda.
20. Pilih informasi apa yang akan ditampilkan di konter Anda.
21. Klik tombol Save.
22. Klik counter id yang baru saja dipilih.
23. Kemudian copy Counter CODE yang diberikan.

Langkah 2

1. Masuk ke akun Blogger Anda.
2. Pilih menu Rancangan.
3. Klik Elemen Laman.
3. Klik Tambah Gadget di sidebar.
4. Pilih HTML/JavaScript.
5. Beri judul di kolom Judul.
6. Paste kode HTML di bagian Konten.
7. Klik tombol Simpan.
8. Selesai.

Jumat, 21 Oktober 2011

Cara Membuat Auto Readmore (Baca Selanjutnya) di Blog

AutoReadmore atau baca selanjutnya yaitu untuk memotong sebagian posting yang tampil di homepage blog anda secara otomatis. Berikut langkah-langkah untuk auto readmore atau baca selanjutnya.

1. Masuk ke akun blogger anda, di dasbor klik rancangan, lalu klik Edit HTML dan centang Expand Template Widget.

2. Cari kode </head> untuk mencari tekan CTRL+F atau F3 Pada mozila anda.

3. Lalu letakkan kode di bawah ini di bawah kode </head>

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 150;

img_thumb_width = 150;

</script>
<script type="text/javascript">
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(thumbnail_mode == "yes") {
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
}
var summary = imgtag + '<div>

' + removeHtmlTag(div.innerHTML,summ) + '</div>
';
div.innerHTML = summary;
}
//]]>
</script>

Yang berwarna merah adalah jumlah dan ukuran tampilan,
*) summary_noimg = jumlah karakter tanpa gambar,
*)summary_img = jumlah karakter dengan gambar,
*)sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel).
Ubahlah sesuai dengan keinginan.

4. Kemudian cari kode dan ganti dengan :


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


Untuk mengganti karakter readmore dengan gambar image ganti karakter Read More >> dengan URL gambar anda.

Contoh:

< src='url (direct link) gambar readmore'/>

5. Selesai

***Semoga Bermanfaat***

Rabu, 19 Oktober 2011

Cara membuat Lencana profil facebook ke Blog

Lencana facebook adalah gambaran tentang profil diri kita di facebook. Lencana facebook bertujuan untuk memperkenalkan diri kita di facebook yang berharap orang yang membaca akan menambahkan teman ke facebook kita. Lencana facebook dapat dipasang diblog.
berikut tutorial untuk memasang lencana facebook di blog.

1. Login ke akun facebook anda
2. Klik pada profile facebook anda
3. Cari tulisan "Tambahkan Lencana ke Situs Anda" pada pojok kiri bawah di profil facebook anda
4. pada jendela "Lencana profil" kita akan dihadapkan pada pilihan akan diletakkan dimana lencana profil yang akan kita buat
5. Disini kita memilih untuk dipasang ke blogger jadi klik "blogger"
6. Kita akan diarahkan ke jendela blogger
7. pada jendela blogger tersebut pilih "edit konten" maka akan muncul kode
8. Login ke akun blogger anda
9. Pada jendela dasbor pilih rancangan
10. pada tab Elemen laman tambahkan widget HTML/JavaScripts
11. Copy kode tadi kedalam widget HTML/JavaScripts
12. Save.

Selesai