Cara Membuat Spoiler di Blogspot

Bagi Sobat yang gemar berbagi di suatu forum mungkin sudah tak asing lagi dengan yang namanya spoiler. Yaitu teknik menyembunyikan gambar/teks/video dll untuk menghemat space. Spoiler ternyata bisa juga diterapkan di blog. Cara membuat spoiler di postingan blog (baik berbasis blogger/blogspot maupun wordpress) sangat mudah.
Tapi sebelum menginjak ke tutorialnya, yang saya ketahui setidaknya ada dua model spoiler, namun saya tidak akan membingungkan sobat untuk tipsnya, jadi saya hanya memberi satu model spoiler saja biar mudah mengingatnya.

Contoh spoiler seperti dibawah ini dengan gambar artis cantik yang lagi dirundung masalah akhir-akhir ini :

Cara membuatnya gampang kok, langsung saja copas scriptnya seperti dibawah ini :


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">JUDUL</span></span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: rgb(255, 0, 0);">
ISI SPOILER
</span>
</div></div></div></div>

Keterangan :

- Ganti kata yang tercetak merah sesuai yang diinginkan.

- Jika spoiler berisi gambar, anda upload dulu dengan blogspot atau pengupload macam photobucket, tinypic, dll, lalu ganti 'isi spoiler' dengan kode HTML gambar yang sudah diupload.

- Jika spoiler berisi video, ganti 'isi spoiler' dengan embed kode video.

- Jika gambar terlalu besar, sebelum diupload kecilkan dulu size-nya dengan photoshop. Usahakan lebarnya tak lebih dari 10 cm atau sudah ada penyesuaian gambar pada situs uploader tinypic.com atau pun photobucket.com, jadi Anda perlu menyesuaikan besar kecilnya gambar sesuai dengan selera Anda.

Mudah khan? dicoba aja Sob ...

sumber : wawanwae.blogspot.com

Bagaimana Google memberi Peringkat Blog / Situs kita ?

Apabila kita bermain Search Engine Optimization di lahan milik Google, jadi sangat penting untuk tahu aturan mereka.
Kita tahu bahwa Google tidak sembarangan memilih website untuk mereka letakan di urutan teratas.
Mereka memiliki sistem peringkat yang memisahkan website mana yang berhak berada di atas dan mana yang jauh di belakang.

Berikut tipsnya apabila Anda ingin website Anda teroptimasi secara optimal di Mesin Pencari Google :

a. Utamanya link-link dalam website / blog kita memainkan peran penting.

1. Pastikan semua link dalam website kita berfungsi dengan benar, baik link internal maupun eksternal.

2. Rajin-rajinlah memeriksa dan mencari apa bila ada dead link atau broken link dengan cara memasukkan url blog / website kita kedalam http://linkchecker.submitexpress.com/,
apabila Anda menemukan tanda berarti link adalah benar atau tidak rusak, namun jika Anda menemukan tanda berarti link tersebut rusak alias broken dan segera hapus link tersebut atau ganti dengan yang relevan.

b. Kemudian untuk konten.

1. Konten yang mengandung banyak Keyword pilihan kita memang penting, tapi yang lebih penting adalah konten kualitas bagus yang relevan dengan topic website kita.

2. Konten yang kaya keyword namun tidak berguna tidak akan membawa website kita ke peringkat atas. Ingatlah bahwa kita membuat website untuk dinikmati pengunjung kita, bukan untuk search engine.

c. Juga pertahankan navigasi sesederhana mungkin.

Kita melakukan hal ini untuk membuat pengunjung nyaman, tapi sebenarnya lebih dari ini. Navigasi yang sederhana bisa menaikkan posisi kita di Google karena Google crawler akan dengan mudah menjelajah situs kita.

d. Faktor penentu peringkat yang terakhir adalah lamanya waktu loading.

Google baru saja mengumumkan bahwa tahun 2010 ini mereka akan memperhitungkan lama waktu loading sebagai penentu peringkat. Jadi sebaiknya kita singkirkan saja grafis-grafis berukuran besar dan pertahankan kesederhanaan situs kita.

sumber : kaskus.us

Membuat Related Post dengan Thumbnail di Blogger

Nulis lagi ach tentang tutorial blog, tapi maaf nich Sobat, aku nulisnya hanya untuk blog yang memakai domain blogspot.com.

Dalam kesempatan kali ini, aku sharing tentang cara membuat Related Post atau Artikel yang Terkait dengan cara menampilkan image atau thumbnail dari artikel yang terkait atau berhubungan dengan artikel yang sedang kita baca.

Tampilannya nanti akan menjadi seperti gambar dibawah ini yang persis berada dibawah postingan artikel blog kita.


Langsung ke TKP saja yach dan amati langkah-langkahnya :

Pertama, masuk / login ke akun blogger Sobat terlebih dahulu, kemudian klik menu LayOut, kemudian klik submenu Edit HTML, beri centang (tag) tulisan Expand Widget Template . Kemudian cari kode ]]></b:skin> dan masukkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut. Ini kode CSS yang harus ditambahkan :

#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}

Kedua, bila sudah selesai, tetap pada kode ]]></b:skin>, kemudian copy script dibawah ini kemudian paste tepat dibawah kode ]]></b:skin>.

Ini script-nya :

<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>

Ketiga, kemudian cari kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'> ini, kode tersebut tergantung dari template yang kita pakai. Cari salah satu yang pasti dimiliki oleh template blogger.

Nah, kalau sudah ketemu kodenya, kemudian copy script dibawah ini dan paste dibawah kode diatas.

Ini script-nya :

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://ndyteens.blogspot.com/2009/09/related-posts-with-thumbnails-for.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.ndyteens.blogspot.com/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan beberapa script diatas :
var maxresults=5; maksudnya, Sobat bisa mengganti angka tersebut sesuai keinginan jumlah thumbnails yang akan muncul.
var relatedpoststitle="Related Posts"; maksudnya, Sobat bisa mengganti tulisan related posts tersebut dengan kalimat lain yang Sobat ingini, misal : "mungkin anda juga suka" atau kalimat yang lainnya.

Setelah itu jangan lupa simpan setting template Sobat dan preview hasilnya.
Semoga berhasil !!

Membuat Menu Horizontal versi II

Aku sharing lagi yach, tetap topiknya pada kreasi menu horizontal, namun ada sedikit perbedaan dengan tutorial yang pertama. Sebenarnya topik ini adalah request dari Mbak Sifa, yang berkeinginan untuk memasang menu pada blognya.

Langsung saja pada intinya ....

Pertama-tama login ke akun blogger Sobat, kemudian klik menu Layout, terus klik submenu Edit HTML, kemudian jangan lupa beri tanda centang pada tulisan Expand Widget Templates. Tapi jangan lupa simpan / back-up dulu template Sobat, untuk antisipasi nantinya terjadi kesalahan.

2. Setelah itu cari script seperti ini :

<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

3. langkah selanjutnya, Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode diatas :

<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 1'>Berita</a></li>
<li><a href='URL 3'>Bisnis</a></li>
</ul>

4. Ganti tulisan yang berwarna merah pada kode script diatas sesuai dengan nama menu yang diinginkan.
Kemudian jangan lupa simpan template-nya lalu preview hasilnya.

Kemudian Sobat akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjajar secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.

5. Buka kembali bagian Edit HTML pada akun blogspot Sobat, kemudian cari kode ]]></b:skin>.

6. Silahkan copy struktur berikut dibawah ini tepat diatas kode ]]></b:skin>.

/*CSS untuk menu horizontal*/

.menuhor ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.menuhor ul li{
list-style: none;
display: inline;
}

.menuhor ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #33FFCC;
border: 2px solid #33FFCC;
}

.menuhor ul li a:hover{
background-color: #33CCFF;
border-style: outset;
}

.menuhor ul merupakan atribut yang berfungsi untuk mengatur tampilan parent dari list menu horizontal tersebut.
.menuhor ul li berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
.menuhor ul li a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
.menuhor ul li a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.

7. Kemudian ubah struktur yang Anda copy pada langkah 3 diatas sehingga menjadi seperti berikut:

<div class="menuhor">
<ul>
<li><a href='URL 1'>Home</a></li>
<li><a href='URL 2'>Berita</a></li>
<li><a href='URL 3'>Bisnis</a></li>
</ul>
</div>

8. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Berita" diklik, dan seterusnya, dan seterusnya.

9. Klik tombol Simpan Template dan lihat Preview-nya.

Sementara disini dulu tutorial yang bisa aku berikan, mungkin lain kali ada tambahan dari aku dan aku men-sharing tutorial tersebut diatas adalah mempelajari toturial dari blog Tutorial-website.

Membuat Menu Horizontal pada Blogspot

Sekedar bagi-bagi ilmu sedikit nich sobat semua !

Sharing ini sebenarnya menjawab pertanyaan yang sempat dilontarkan oleh Mbak Sifa, si pemilik LanGiT mALaM. Dia lagi tanya tentang bagaimana membuat Menu Horizontal seperti pada blog milikku. Ini nich jawabannya yang kurang lebih, konon, aku juga dapat ilmu dari sini.

Langsung aja nich :

Pertama-tama login ke akun blogger Sobat, kemudian klik menu Layout, terus klik submenu Edit HTML, kemudian jangan lupa beri tanda centang pada tulisan Expand Widget Templates. Tapi jangan lupa simpan / back-up dulu template Sobat, untuk antisipasi nantinya terjadi kesalahan.

Setelah itu cari script seperti ]]></b:skin>, jika sulit untuk menemukan secaa manual, coba cari dengan fasilitas find dengan tekan tombol Ctrl dan F secara bersamaan pada keyboard komputer sobat. Jika ketemu dengan yang persis seperti itu, yaa syukurlah, soalnya script seperti itu umumnya terpakai pada classic template atau pun template yang telah dimodifikasi. Kemudian kalo ketemu script tersebut, copy paste kode dibawah ini untuk ditaruh diatas script ]]></b:skin> tersebut.

Ini kodenya :

/*credits : http://hakiembunitas.blogspot.com */

#tabshori {

float:left;

width:100%;

font-size:13px;

border-bottom:1px solid #2763A5;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;

padding:5px 14px 4px 4px;

color:#fff;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}

Kemudian, tulisan yang tercetak tebal diatas bisa diganti dengan tulisan-tulisan dibawah ini berikut pasangannya yang notabene, warna background menu akan berubah.

blackleft.gif dengan blackright.gif
greenleft.gif dengan greenright.gif
redleft.gif dengan redright.gif
unguleft.gif dengan unguright.gif
yellowleft.gif dengan yellowright.gif
blueleft.gif dengan blueright.gif
whiteleft.gif dengan whiteright.gif

Langkah selanjutnya, Sobat copy / salin dulu script dibawah ini :

<div id='tabshori'>
<ul>
<li><a href='http://hakiembunitas.blogspot.com'><span>HOME</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Berita'><span>BERITA</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Bisnis'><span>BISNIS</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Blog%20Tutorial'><span>BLOG TUTORIAL</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Coretanku'><span>CORETANKU</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Ebook%20Gratis'><span>EBOOK GRATIS</span></a></li>
<li><a href='http://hakiembunitas.blogspot.com/search/Label/Games%20Gratis'><span>GAMES GRATIS</span></a></li>
</ul>

</div >

Ganti http://hakiembunitas.blogspot.com dengan URL blog sobat atau link URL yang ingin sobat tuju, kemudian ganti kata HOME dengan judul menu yang Sobat ingini. nanti kata tersebut yang akan muncul sebagai judul menu pada blog sobat.

Cara memasang script diatas bermacam-macam, tergantung pada script template-nya. Namun yang aku ketahui, coba cari script / kode <div id="content-wrapper"> ini, sama saja, gunakan fasilitas find agar lebih cepat ketemu kodenya.

Setelah kode <div id="content-wrapper"> sudah ketemu, paste / tempel script tadi (warna biru) persis diatas kode <div id="content-wrapper">.

Setelah itu jangan lupa untuk menyimpan hasil pengeditan dan lihat hasilnya dengan preview.

Apabila hasilnya masih kocar-kacir tidak karuan, coba script yang berwarna biru tadi dipindahkan tempatnya ke atas atau kebawah kode </div>. Sobat coba aja satu persatu, dibawah atau diatasnya kode </div> tersebut, sehingga nanti menghasilkan tampilan yang Sobat kehendaki.

Jika masih belum berhasil juga silahkan Sobat bisa mencoba cara seperti dibawah ini :
Cari kode dibawah ini :

<b:section class='header' id='header'

maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true'

title='your blog title (Header)' type='Header'/>

</b:section>

kemudian ganti text yang berwarna merah dengan yang seperti ini :

<b:section class='header' id='header'

maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false'

title='your blog title (Header)' type='Header'/>

</b:section>

Kemudian klik simpan / save.

kemudian klik tab Page Elements, kemudian pada daerah header klik Add a page element atau Add a Gadget lalu pilih HTML/JavaScript, kemudian paste script link tadi diatas di dalam kotak content, akhirnya kemudian simpan dan lihat hasilnya.

Nah, sampai disini dulu sharing ilmu dari aku, semoga bermanfaat bagi Sobat semua. terima kasih.

Senangnya Pagerank Google Berubah Angka

Sekedar berbagi kebahagiaan nich para sobat semua.
Sebenarnya kebahagiaan yang aku terima ini, (mungkin) sepele, namun menurutku salah satu kebahagiaan ini adalah kebahagiaan batin yang juga tiada duanya, selain kebahagiaan-kebahagiaan lain yang aku dapatkan selama hidup ini.

Alhamdulillah aku ucapkan syukur kehadirat-Nya, bahwa ternyata kerja kerasku membuahkan hasil. Semenjak melaunching blogku pada 30 Mei 2009 yang lalu, terhitung mulai tanggal 31 Oktober 2009 pagerank Blogku naik menjadi 2. Tepat dalam kurun waktu lima bulan perubahan itu menjadi kenyataan, yang menurutku nich adalah peningkatan ranking pada Google yang signifikan.

Kenaikan Pagerank blogku memang lama telah aku dambakan, ingin sekali setiap online, angka 1 pada image Google Pagerank itu berubah menjadi 2. Ternyata akhirnya menjadi kenyataan.

Dan tak lupa, aku berikan apresiasi yang setinggi-tingginya kepada semua netter yang telah mengunjungi blogku pada umumnya, dan khususnya, kepada para sobat blogger yang selalu menjenguk blogku dengan tidak ada bosan-bosannya, ditambah lagi yang tebar komentar di setiap artikel yang aku tulis serta yang telah menukar link URL-nya dengan blogku, sehingga membantu blogku terangkat menuju tahta yang lebih baik (ciiieeeh, sok jagoan nech ...^_^). Karena kemajuan blog-traffic juga tergantung dari woro-woro secara tak langsung daripada para sobat blogger semua.

Nah, pada artikel ini aku tambahkan sedikit tips untuk meramaikan blog, terutama blogspot, agar para sobat netter or blogger semua pada tahu dan paham bagaimana pentingnya harwat (pemeliharaan dan perawatan) blog kita agar cepat meningkat rankingnya pada Google Pagerank khususnya, ataupun juga pada Technorati Blog Rank, Alexa Traffic Rank dan Yahoo! Search Inlinks pada umumnya. Namun, aku yakin, para sobat blogger sudah menguasai tips-tips ini.
Inilah beberapa tipsnya :

1. Blogwalking
Blogwalking adalah mengunjungi blog orang lain, memberi komentar di blog orang lain, jadi kita bisa mempromosikan blog milik sendiri pada blog-blog orang lain dan jangan lupa minta tukaran link atau backlink blog kita kepada para pemilik blog tersebut.

2. Berpromosi blog lewat software tertentu.
Yang pernah aku lakukan adalah berpromosi blog lewat software pemasang iklan yang bisa didapatkan pada situs pemasangiklan.com. Cara ini juga direkomendasikan oleh para internet marketter lokal karena software ini terbilang jitu dan mampu menaikkan traffic ke blog kita. Software pemasangiklan ini mampu menyebarkan promosi kita ke 268 buah situs iklan ternama. Coba aja dech kalo penasaran dengan klik DISINI.

3. Menentukan keyword tertentu untuk artikel blog.
Cara ini yang menurutku agak susah, karena kita perlu survey dulu ke blog atau situs yang memiliki judul atau artikel yang sama atau mirip dengan artikel yang kita miliki pada blog kita. Setelah survey dilakukan dan kita telah menemukan keyword yang sering digunakan oleh blog / situs lain, akhirnya kita tentukan keyword yang unik untuk judul artikel blog kita agar dengan keyword unik tersebut maka apabila orang melakukan searching pada mesin pencari kepunyaan Mbah Google, maka blog kita akan nongol pada halaman pertama.

4. Mendaftarkan blog pada Situs Social Bookmark.
Cara ini pernah aku lakukan. Daftarlah blog atau situs kamu pada situs Social Bookmark, karena manfaat situs ini adalah mampu memberikan inbound link sekaligus traffic buat blog kita. Untuk situs social bookmark, aku berikan yang lokal saja karena blogku sendiri juga blog indonesia. Berikut adalah situs social bookmark yang aku copy paste dari blog http://makelarz.blogspot.com/2009/09/daftar-social-bookmark-indonesia-ber.html, yang disertai dengan pagerank-nya, yaitu :

a. http://definisi.net (pagerank 1)
b. http://www.tentang.net (pagerank 1)
c. http://lintasberita.com (pagerank 4)
d. http://infogue.com (pagerank 4)
e. http://www.antarblog.com (pagerank 1)
f. http://kafeinfo.com (pagerank 2)
g. http://plazzavideo.com (pagerank 3)
h. http://yehiapress.com (pagerank 3)
i. http://memburu.info (pagerank 4)
j. http://www.indofeed.com (pagerank 3)
k. http://yournews.astaga.com (pagerank 4)
l. http://bookmarking.kombes.com (pagerank 3)
m. http://bookmarkindo.com/id (pagerank 3)
n. http://www.indokami.com (pagerank 0)
o. http://kilasan.com (pagerank 4)
p. http://kliksite.com (pagerank 1)
q. http://www.liputankhusus.com (pagerank 0)
r. http://dagdigdug.com (pagerank 4)

Mungkin sementara itu saja dulu sharing kebahagiaan dan tips mengoptimasi blog dari aku, semoga bisa memberi support dan bermanfaat ......

Cara Membuat Read More atau Baca Selanjutnya

Postingan yang terlalu panjang bisa memenuhi halaman pertama blog kita, karena kita terkadang ingin halaman pertama blog kita terisi dengan berbagai macam postingan dari 4 sampai dengan 7 postingan artikel kita.
Untuk mempersingkat postingan artikel blog kita, kita memerlukan script lanjutan pembacaan artikel pada blog kita yang disebut script read more atau bisa kita ubah menjadi kata "baca selanjutnya".
Script ini biasa tidak kita dapati pada template blog bawaan dari blogger.com dan oleh karena itu kita perlu memodifikasikannya.

Pertama-tama kita login pada akun blogger kita.


Kemudian klik Settings / Pengaturan, kemudian klik Formatting / Format, gulirkan halaman sampai bagian paling bawah, di bagian kosong tersebut kita isi dengan script

<span class="fullpost">


</span>

Setelah itu Klik Menu Layout/Tata Letak, kemudian klik edit HTML dan jangan lupa centang pada bagian kata Expand Widget Templates.

Kemudian cari kode / script berikut :

<data:post.body/> atau <p><data:post.body/></p>

Hapus Kode diatas dan ganti dengan kode berikut :

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

Kata Read More diatas bisa diganti dengan kata-kata sesuai kemauan kita.

Setelah itu Save Template / Simpan Template

Kemudian, mulailah membuat artikel dengan klik menu Posting dan New Post dan secara otomatis kita akan temukan script <span class="fullpost"> dan </span>.
ketiklah postingan / artikel kita kemudian pisah kalimat yang akan dipotong dengan script <span class="fullpost"> kemudian lanjutkan sisa postingan / artikel kita sampai selesai kemudian kita tutup dengan </span>.

Kemudian Simpan artikel dan siapkan untuk dipublikasikan serta lihat hasilnya.

Menambah Menu Widget diatas Header Blog

Sharing lagi nich tentang tutorial blog, tapi yang simple aja, soalnya tutornya masih newbie juga nich.

Banyak blog yang notabene memakai template klasik atau template bawaan dari blogger.com tidak menyertakan atau tidak dilengkapi dengan menu tambahan untuk pembuatan HTML / Javascript atau widget diatas header blog. Jadi ada tips ringan yang sangat gampang untuk diikuti kalau Sobat ingin blognya ada menu penambahan widget diatas header blog.

Pertama-tama login dulu ke akun blogger Sobat.

Kemudian pilih Layout / Tata Letak dan kemudian edit HTML, jangan lupa kasih tanda centang pada kata Expand Widget Templates.


Kemudian cari script

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Jika kesulitan, ketik Ctrl+F pada keyboard komputer Sobat, pasti dech ketemu script tersebut.

Kalau script tersebut diatas ketemu, ganti langsung dengan script

<b:section class="header" id="header" preferred="yes">

Kemudian klik save template / simpan template.

Kemudian klik tombol Page Elements atau Elemen Halaman dan lihat hasilnya pasti tampilan blog Sobat bagian atas sudah berubah mirip dengan contoh tampilan dibawah ini.

Sidebar Melorot dan Cara Mengatasinya

Kadang-kadang kasus sidebar blog bisa melorot terjadi. Permasalahan ini terjadi pada blogku sendiri. Agak panik juga sich pada saat itu, yang akhirnya tanya sana-sini, termasuk juga tanya ke Mbah Google, yang akhirnya dapat beberapa solusi yang bisa dicoba-coba. Kenapa ada beberapa solusi? Karena sidebar blog bisa melorot tersebut disebabkan oleh beberapa hal yang bisa diatasi.
Adapun beberapa permasalahan sidebar bisa melorot dan cara mengatasinya, seperti :

1. Ukuran image yang dipasang tidak sesuai dengan luas / lebar sidebar.
Sesuaikan ukuran image dengan lebar sidebar blog kita, seperti yang sudah aku tuliskan dipostingan terdahulu, mengenai pemberian kode pada script HTML widget pada sidebar blog.

2. Postingan / artikel / isi berita blog terlalu pendek.
Memang, permasalahan diatas, sangat jarang terjadi, namun bisa juga terjadi apabila template blog kita "tidak menerima" postingan yang terlalu pendek. Kok bisa yach? yach bisa saja, karena ada beberapa template yang memang tidak menerima postingan yang terlalu pendek sehingga akhirnya sidebar blog bisa melorot.
Buatlah artikel sepanjang mungkin, kan kita para blogger gemar menulis, pastinya donk para sobat banyak ide yang bisa ditumpahkan ke dalam postingan kita.

3. Link URL yang panjang dalam postingan blog.
Link URL yang diselipkan / ditautkan dalam sebuah kata atau kalimat yang terlalu panjang bisa juga mengakibatkan sidebar blog melorot. Pendekkanlah tautan tersebut dengan tinyurl.com sehingga link URL akan otomatis diatur bisa menjadi pendek sekali.

4. Image postingan yang bertautan link URL terlalu besar.
Image yang kita tambah dalam sebuah artikel postingan blog yang terlalu besar bisa juga menyebabkan sidebar blog melorot, apabila image tersebut diberi tautan ke suatu Link URL, sehingga kita harus mengedit image-nya dengan memperkecil ukurannya.

5. Apabila beberapa cara diatas sudah dilakukan dan sidebar blog tetap melorot, berarti template blog harus diganti saja dengan template yang memiliki sidebar yang lebih lebar.
Jangan khawatir, dengan mengganti template blog, artikel-artikel kita tidak mungkin hilang. Yang perlu disimpan adalah hanya widget-widget yang sudah tertempel pada template blog yang akan kita ganti. Simpanlah atau copy paste semua image atau link URL atau widget ke sebuah file atau Ms.Word atau notepad dan kemudian kita bisa memilih template yang lebih lebar dan lebih bagus dari template blog sebelumnya, baru modifikasi lagi tata letak / layout template blog baru kita.

Mungkin itu saja yang bisa aku sharing kepada para sobat dan semoga bermanfaat.

Cara Merapikan Banner dan Link

Sebelumnya terima kasih banyak atas atensi untuk para sobat blogger yang telah ikut saling meramaikan blog / situs masing-masing sehingga kita berlomba-lomba mengejar Google Pagerank dan Alexa Rank blog kita.
Wah, to the point aja nich ...
Tulisan ini khusus request dari Mbak Sifa, Si pemilik Siluet Malam.
Banyak cara merapikan banner dan link dengan script yang berbeda-beda, namun sebenarnya aku adalah blogger newbie sehingga sebenarnya ilmu ini berasal dari yang lebih senior dan ahli nye-cript yang juga sobat dari Hakiembunitas, yaitu Mas Kriep2, jadi mohon ijin Mas Kriep2 yach atas sharing ilmunya yang sangat berharga ini, sehingga ilmu ini aku sharing juga ke Mbak Sifa.

1. Untuk merapikan banner adalah dengan cara seperti ini :
- Model Marquee
Model Marquee ini scriptnya seperti :

<marquee direction="up" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()">

[Letakkan kode banner atau link disini]

</marquee>

Script tersebut diatas ditambahkan sebelum kode/script banner atau link.
Keterangannya : marquee direction="up" adalah arah dari scrolling, scrollamount="2" adalah kecepatan scrolling-nya dan bisa diubah sesuai selera.

- Model Scrollbar, model ini yang aku terapkan untuk merapikan banner dan link di blogku.
Penerapannya sama kok, jadi script-nya ditaruh sebelum kode/script banner.

<div style="border: 1px solid rgb(204, 204, 204); padding: 2px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; overflow: auto; margin-left: 2px; height: 200px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

[Letakkan kode banner atau link disini]

</div>

Yang tercetak warna biru adalah tinggi scrollbar.
Contoh kode banner seperti ini :

<a href="URL blog kamu" target="_blank"><img border="0" alt="title blog kamu" src="URL image blog kamu"/></a>

Keterangan : yang tercetak merah adalah url banner sobat blogger kita dan url image atau gambar dari banner sobat kita. Untuk tulisan yang berwarna biru (width :125px; height: 55px;) adalah berguna untuk merapikan ukuran / postur banner sesuai dengan ukuran sidebar kita. Pasti setiap banner memiliki ukuran yang berbeda-beda, namun dengan adanya kode yang tercetak biru tersebut akhirnya banner dengan ukuran apapun secara otomatis menyesuaikan dengan kode yang telah kita terapkan dan sesuai dengan ukuran sidebar blog kita masing-masing dan kode tersebut bisa kita ubah sesuai selera. Paham 'kan? Pasti paham dunk, expert blogger lah !!

2. Untuk merapikan link dengan cara seperti yang sama seperti diatas. Pilih sesuai selera, yang marquee atau yang scrollbar.
Contoh kode link biasanya seperti ini :

<p><a href="URL Blog Kamu">Title Blog Kamu</a></p>

Mungkin sudah jelas kode/script diatas dan tidak perlu dijelaskan.

Sementara, itu saja yang bisa aku sharing, terima kasih mau bersharing ilmu dengan aku dan semoga bermanfaat.

Membuat Banner Link di Blogspot

Mungkin coretanku ini berguna bagi para blogger yang notabene masih newbie (seperti aku juga sich), karena kadang-kadang pada saat blogwalking, kita pengen tukeran banner or link blog kita. Hampir semua blog para sobat blogger sudah tertancap script banner link-nya dan kita tinggal copy paste.
Sebenarnya mudah kok buat banner link itu. Nih aku kasih beberapa caranya yach ?!, yang simpel-simpel aja ...

a. Pertama kita buka situs cooltext.com, klik disini.
Misal, aku mau buat banner untuk blogku dengan tulisan Hakiem Blog. Disitu terdapat kata Choose A Logo Style, pilih sesuai pilihan kamu serta acak-acaklah font dan ukuran hurufnya sesuai selera. Kemudian kalo sudah jadi atau sesuai yang diinginkan, pilih format gambar (file format) yang diinginkan, kemudian klik kata Render Logo.

Kemudian akan muncul gambar / text yang kita inginkan, klik Download Image.
Setelah selesai di Download, save di file / folder harddisk komputer atau flashdisk kamu, kemudian ....
b. Upload gambar teks, misal di photobucket, klik disini. Klik kata Join Now. Tulis Username dan Password kamu, setelah itu registrasi selesai dan kamu bisa langsung login dengan menuliskan username atau email kamu dan passwordnya.
Setelah itu, klik kata Choose File dan pilihlah file yang telah kamu download yang tersimpan pada harddisk / flashdisk kamu, untuk diupload. Nanti akan muncul gambar yang telah ter-upload.
Kemudian akan muncul hasil gambar teks yang telah diupload, kemudian pilihlah gambar / logo Blogspot (berwarna merah) dan lalu, pilihlah kata Get Link Code serta langsung saja kamu copy kode script yang berada dibawah tulisan HTML for websites & blogs.
c. Memposting banner link di sidebar blog.
Setelah kamu mendapatkan / mengcopy scriptnya tadi, tugas kamu adalah memposting script itu di sidebar blog kamu yang bisa difungsikan langsung untuk bertukar banner link. Caranya buka blog kamu, pilih Costumize / Kostumisasi, klik Tambah Gadget / Add a Gadget, pilih HTML/javascript kemudian paste script yang telah kamu dapatkan dari photobucket tadi.
Untuk pemasangan banner link, aku punya kata-kata persuasif (ajakan) seperti ini :

tukeran link yuk?! Copy/paste code HTML berikut ke blog anda, pasti saya akan berkunjung ke blog / situs Anda, terima kasih

<div style="text-align: center;"><textarea rows="4" cols="23"><center><a href="http://hakiembunitas.blogspot.com/" target="_blank"><img alt="cooltext424243058.png" src="http://i632.photobucket.com/albums/uu41/hakiem79/cooltext424243058.png" border="0" /></a></center> </textarea>
</div>

Ganti teks yang warna merah dengan URL Blog kamu, teks warna biru ganti dengan nama file yang kamu upload di photobucket dan yang terakhir ganti teks yang warna hijau dengan URL file kamu di photobucket.
Setelah langkah diatas sudah kamu lakukan maka di sidebar blog nanti akan terbentuk gambar dan teks seperti dibawah ini.

tukeran link yuk?! Copy/paste code HTML berikut ke blog anda, pasti saya akan berkunjung ke blog / situs Anda, terima kasih

<center><a href="http://hakiembunitas.blogspot.com/" target="_blank"><img alt="cooltext424243058.png" src="http://i632.photobucket.com/albums/uu41/hakiem79/cooltext424243058.png" border="0" /></a></center>

Semoga tips diatas bermanfaat bagi para rekan blogger. Terima kasih.