Cara Buat Kotak Pencarian Jejaring Sosial Pinterest

Beberapa waktu yang lalu, saya sempat tertarik dengan salah satu Search Box atau Kotak Pencarian dari salah satu blog yang dia letakkan di Sidebar blog-nya. Kotak pencarian itu merupakan kotak pencarian Pinterest (Pinterest adalah salah satu situs web yang memungkinkan penggunanya untuk membuat dan mengelola koleksi gambar untuk acara, minat, hobi dan banyak lagi).

Sebenarnya, Search Box yang saya lihat itu, tidak memiliki tampilan yang indah atau keren seperti Search Box yang menggunakan CSS3 yang saya kasih sebelumnya. Tetapi, kenapa saya sampai tertarik untuk memiliki Search Box itu? Karena itu adalah pertama kalinya saya melihat sebuah blog yang memasang Search Box Pinterest di blognya.

---

Cara Memasang Search Box Pinterest di Blogger

---

1. Login di blogger.com menggunakan email sobat
2. Lalu klik tombol di bawah ini kemudian klik "Tambahkan Widget"

Demo Pinterest 2

Pins, Pins and more Pins:

Ini Dia Kelebihan Alexa Pro...!!!

Alexa Pro adalah Toolkit analisis situs web atau blog untuk Webmaster, yang mana didalamnya terdapat Metrik akurat tentang lalu lintas yang mengarah ke blog kita, Situs atau blog yang otomatis di scan, rekomendasi SEO dan banyak lagi. Alexa Pro memberi kita alat-alat atau tool yang kita butuhkan untuk meningkatkan traffic web atau blog dan sukses online.

Untuk Berlangganan atau Subscription Alexa Pro, ada tiga kategori yang ditawarkan. Berikut ini kategori dan fitur dari masing-masing kategori :

1. Basic : Certified Site Metrics danEnhanced Site Listing
2. Insight : Certified Site Metrics, Enhanced Site Listing dan Monthly SEO Audits
3. Advanced : Certified Site Metrics, Enhanced Site Listing, Twice Monthly SEO Audits dan Twice Monthly Site Audits

Berikut ini harga dari masing-masing kategori Alexa Pro:

1. Basic : $9,99 Per Month
2. Insight : $49 Per month
3. Advanced : $149 Per Month

Harga tersebut bisa saja berubah, jadi untuk informasi yang lebih lengkap, langsung saja kunjungi situs Alexa.

Cara Membuat Label Untuk Posting Atau Artikel Blog

Membuat Label untuk posting sangat penting untuk dilakukan karena dengan adanya Label, sobat blogger dapat mengelompokkan atau membuat kategori untuk setiap posting. Memasang Label untuk setiap posting dapat mempermudah pengunjung dalam menavigasi postingan sobatblogger. Di mata Google, apakah label itu penting? Ya jelas dong... Tidak mungkin Google melalui blogger.com menambahkan fitur label di post settings kalau Label tidak penting untuk postingan.

Untuk melebelkan postingan, kita tidak perlu teknik khusus. Kita cukup memasukkan nama di bagian Post Settings di kolom Label. Perhatikan Gambar di bawah ini!

Di dalam sebuah Forum, ada salah satu blogger yang bertanya, Apakah ada batasan untuk memasukkan Label di setiap Posting? Ya... Google memberikan batasan untuk tiap posting. Satu posting tidak boleh memiliki Label lebih dari 20 dan dalam satu blog, maksimal jumlah Label adalah 2000 unik Label.

Temukan pedoman yang lebih lengkap tentang Bagaimana Cara Membuat Label untuk Posting di Google Support

Cara Membuat Dan Memasang Widget SMS Gratis di Blog

Widget SMS Gratis adalah sebuah Widget yang dapat digunakan untuk mengirim pesan singkat atau SMS secara gratis ke semua Operator seluler seperti Telkomsel, IM3, Three, Exist dan XL. Layanan free SMS atau SMS Gratis dapat dipergunakan oleh pengunjung sampai puas.

Untuk memasang Widget SMS Gratis di blog, sobat blogger tidak perlu Daftar dan Edit template. Widget SMS Online ini tidak hanya dapat di pasang di Sidebar (Di area Widget) akan tetapi dapat juga dipasang di area postingan.

---

Cara Membuat Widget SMS Gratis di Blogger

---

• Sign In di blogger.com
• Pada menu Drop Down, pilih Layout
• Klik Add a Gadget dan Pilih HTML/JavaScript
• Copy Paste kode Berikut pada kolom yang tersedia

<iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="270" height="350" frameborder="0"></iframe>

• Terakhir, Simpan Widget Blogger sobat

Tambahan :
Untuk menyesuaikan ukuran dari widget SMS Gratis, silahkan rubah angka di bawah ini!

1. width="270" adalah ukuram Lebar
2. height="350" adalah ukuran Lebar

Cara Menambahkan Elemen Baru Di Atas Header Blog

Bagaimana cara menambah elemen baru di atas Header? Menggunakan template bawaan blogger.com, maka Elemen yang terdapat di atas header adalah Elemen Favicon dan Elemen Navbar. Tidakada Elemen kosong di atas Header yang yang kita bisa mamfaatkan untuk menambah widget atau Iklan. Bagi sobat blogger yang ingin menambah Elemen di atas Header, sobat blogger sudah berada pada blog yang tepat karena saat ini saya akan memberikan panduan tentang cara menambahkan Elemen baru di atas header.

Sebelum ditambahkan Elemen

Setelah ditambahkan Elemen

Sebelum sobat blogger mengikuti langkah-langkah yang terdapat pada tutorial blogger ini, pastikan terlebih dahulu bahwa template sobat adalah template HTML5 (Template Blogger) karena teknik ini belum pernah saya coba pada template-template di bawah HTML5.  Tapi, tidak ada salahnya kalau sobat blogger mencoba teknik ini, siapa tahu tidak ada beda antara template HTML5 dan Template-template sebelumnya di dalam menambahkan elemen baru di atas Header.

---

Cara Menambahkan Elemen Baru Di Atas Header Blog

---

• Sign In di blogger.com
• Pada menu drop down, pilih template
• Backup template terlebih dahulu
• Selanjutnya, klik tombol Edit Template dan klik Proceed
• Kasih tanda centang pada Expand Widget Template
• Cari kode

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

• Kalau sudah ketemu, ganti kode tersebut dengan kode di bawah ini!

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

• Terakhir, Klik tombol Save.

Buka Tab Layout untuk memastikan apakah tips di atas telah berhasil menambahkan elemen baru di atas header.

Cara Menghilangkan Link Posting Lama, Posting Baru Dan Beranda Pada Blog

Di bagian bawah posting, lebih tepatnya di bagian bawah kolom komentar terdapat tiga menu navigasi yaitu  Newer Post (Posting Lebih Baru), Older Post (Posting Lama) dan Home (Beranda). Menu navigasi ini sangatlah bermamfaat buat pengunjung blog karena dengan menu ini mereka akan mengetahui urutan-urutan posting yang sudah dipublikasikan sehingga mereka lebih mudah dalam melakukan navigasi setiap laman.

Bagi sebagian blogger yang lebih mengutamakan Layout (Tata letak) yang rapi dan bersih, menu navigasi Newer Post, Older Post dan Home akan terlihat menggangu kalau tidak dihilangkan dari tampilan home page atau tampilan posting. Sehingga mereka lebih memilih untuk menghilangkan Posting Lebih Baru, Posting Lama dan Beranda dari blog mereka. Teknik yang akan saya berikan buat sobat blogger untuk Menghapus link Posting Lama, Posting Baru dan Beranda ini, tanpa Edit Template.

---

Cara Menghilangkan Newer Post, Home Dan Older Post Dari Blog

---

• Sign In di blogger.com
• Pada menu drop down, pilih template
• Klik tombol Costumize untuk menuju laman Blogger Template Designer
• Selanjutnya, klik Advance dan klik Add CSS

• Masukkan Kode di bawah ini pada kolom yang tersedia

Kode untuk menghilangkan Link Beranda (Home)

#blog-pager {
display: none;
}

Kode untuk menghilangkan Link Posting Lebih Baru (Newer Post )

#blog-pager-newer-link {
display: none;
}

Kode untuk menghilangkan Link Posting Lebih Lama (Older Post )

#blog-pager-older-link {
display: none;
}

• Terakhir, Klik tombol Apply to blog

Kalau sobat blogger ingin menghilangkan ketiga link Posting Lama, Posting Baru dan Beranda Pada Blog secara bersamaan,sobat blogger tinggal gabung kode tersebut sehingga berbentuk seperti di bawah ini!

#blog-pager-newer-link {
display: none;
}
#blog-pager-older-link {
display: none;
}
#blog-pager {
display: none;
}

Cara Memasang Syntax Highlighter Di Blog

Memasang Syntax Highlighter di blog yang bernaung di bawah platform Wordpress sangat mudah, kita hanya perlu menambahkan sebuah plugin khusus yang di buat untuk menampilkan Syntax Highlighter. Bagimana dengan blog yang bernaung di bawah platform Blogger, apakah sulit memasang Syntax Highlighter? Tidak, Untuk blog yang bernaung di bawah platform blogger, kita cukup memasukkan satu kode CSS dan dua kode JavaScript. Proses membuat Syntax Highlighter ini agak sedikit ribet ketimbang memasang fitur-fitur blogger yang lainnya. Yang membuat ribet adalah banyak dan panjangnya kode yang dimasukkan. Walaupun seperti itu, sobat blogger tidak usah khawatir, karena saya disini akan memandu sobat blogger untuk menambahkan Syntax Highlighter di blog sobat.

Syntax Highligter yang akan kita buat ini adalah SyntaxHighlighter version 2.1.364 yang di buat pada tanggal 15 Oktober 2009 Alex Gorbatchev. Pada bagian kanan atas Syntax Highligter 2.1.364 ini, menampilkan View source untuk memanggil NotePad dan Print untuk memudahkan pengunjung untuk mencetak kode yang kita sediakan.

---

Cara Memasang Syntax Highlighter Di Blog

---

• Sign In di akun blogger sobat
• Pada Menu Drop Down, Pilih template
• Backup template sobat
• Klik tombol Edit Template
• Klik Proceed
• Kasih tanda centang pada Expand Widget Template
• Cari kode ]]></b:skin>
• Kalau sudah ketemu kode tersebut, letakkan kode berikut di atasnya :

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}
/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

• Selanjutnya, cari kode </head> dan letakkan kode berikut di atasnya :

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

• Proses memasang Syntax Highlighter belum selesai, Cari kode </body> dan letakkan kode berikut di atasnya :

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

• Akhirnya selesai juga memasang Syntax Highlighter. Sobat blogger tinggal klik Save

Kalau sobat blogger menemui masalah saat memasang fitur Syntax Highlighter di blog sobat, silahkan mamfaatkan kolom komentar yang tersedia untuk bertanya.

Membuat Blog Lebih Unik Dengan Memasang Semut Mondar Mandir

Semut merupakan serangga eusosial yang berasal dari keluarga Formisidae. Jumlah semut yang tak terhingga, membuat semut hampir menguasai seluruh bagian tanah yang terdapat di bumi, kecuali Hawaii, Islandia dan Greenland. Saat ini, semut tidak hanya menguasai tanah bumi, tetapi juga menguasai dunia blog. Lho kok bisa? Mana mungkin semut bisa menguasai dunia blog. Tidak mungkin juga semut bisa masuk ke dalam blog. Itu adalah pemikiran dan statement yang salah tentang semut. Semut terbukti telah Mondar-mandir, Berkeliaran, Muter-muter dan Bermain di dalam Blog.

---

Cara Membuat Semut Mondar-Mandir Di Dalam Blog

---

1. Login di blogger
2. Lalu klik tombol di bawah ini dan klik "Add Widget"

Tambahan :
Untuk menyesuaikan posisi pergerakan semut, rubah angka yang terdapat pada kode di atas

Cara Membuat Teks Area Cantik

Fungsi dari teks area tidak jauh beda dengan fungsi Spoiler (Buka postingan saya tentang spoiler). Keduanya adalah fitur Blogspot yang digunakan untuk menghemat tempat atau Space di postingan. Akan tetapi, teks area lebih sering digunakan untuk area atau tempat kode. Untuk memasang teks area di blog, kita tidak perlu mengedit Template. Kita hanya meletakkan sedikit kode saat menulis postingan.

Teks area sederhana

<textarea rows="6" cols="35">
Letakkan kode atau tulisan sobat disini
</textarea>

Hasilnya :
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerned with, abound in the literature. A representative sample of the more significant viewpoints has been included in the form of a continuum of curriculum models.

Teks Area plus tombol Copy All

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="15" name="txt" rows="50" style="height: 100px; width: 350px;" wrap="VIRTUAL">
Letakkan kode atau tulisan sobat disini
</textarea>
</div>
</form>
</div>

Hasilnya :

Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerned with, abound in the literature. A representative sample of the more significant viewpoints has been included in the form of a continuum of curriculum models.

Untuk memodifikasi tampilan teks area sobat, sobat blogger bisa menggunakan salah satu dari teks area berikut :

Teks area Bagian 1
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks area Bagian 2
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 3
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 4
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area bagian 5
<br />Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 6
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 7
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 8
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 9
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Teks Area Bagian 10
Consensus about the relationship between curriculum elements, their order and their exact nature has largely evaded those writing in the field of curriculum. Views of what are the curriculum process is about or, more accurately, what it should be concerne

Berikut ini kode dari kesepuluh teks area di atas :

Teks area Bagian 1

<textarea name="code" rows="3" cols="20" style="background:#BFFAFF; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks area Bagian 2

<textarea cols="20" name="code" rows="3" style="background: none repeat scroll 0% 0% rgb(218, 255, 191); border: 2px dashed rgb(41, 95, 0); color: #295f00; line-height: 1.5em; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 3

<textarea cols="30" name="code" rows="6" style="background: none repeat scroll 0% 0% rgb(239, 0, 144); border: 3px dotted rgb(255, 239, 249); color: #ffeff9; line-height: 1.5em; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 4

<textarea cols="30" name="code" rows="6" style="-moz-border-radius: 7px 7px 7px 7px; background: none repeat scroll 0% 0% rgb(251, 239, 255); border-color: rgb(202, 61, 217); border-style: solid; border-width: 1px 1px 1px 20px; color: #ca3dd9; line-height: 1.5em; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area bagian 5

<textarea cols="30" name="code" rows="6" style="background: none repeat scroll 0% 0% rgb(255, 0, 10); color: white; line-height: 1.5em; padding: 5px;"><br />ISI TEKS AREA SOBA DISINI</textarea>

Teks Area Bagian 6

<textarea cols="30" name="code" rows="6" style="-moz-border-radius-bottomright: 15px; -moz-border-radius-topleft: 15px; background: none repeat scroll 0% 0% rgb(255, 218, 175); border: 2px ridge rgb(127, 69, 0); color: #7f4500; line-height: 1.5em; padding: 5px;"> ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 7

<textarea cols="30" name="code" rows="6" style="-moz-border-radius: 5px 5px 5px 5px; background: none repeat scroll 0% 0% rgb(0, 0, 0); border: 2px inset rgb(204, 204, 204); color: white; line-height: 1.5em; padding: 0pt 7px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 8

<textarea cols="30" name="Bptxt" rows="6" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% white; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 9

<textarea cols="30" name="Bptxt" rows="6" style="-moz-border-radius-bottomright: 15px; background: none repeat scroll 0% 0% yellow; border-left: 20px solid red; color: black; line-height: 1.5em; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Teks Area Bagian 10

<textarea cols="30" name=Btxt" rows="6" style="-moz-background-inline-policy: continuous; -moz-border-radius: 15px 15px 15px 15px; -moz-box-shadow: 5px 0px 8px rgb(129, 129, 129); background: none repeat scroll 0% 0% Pink; border-left: 20px solid red; color: black; line-height: 150%; padding: 5px;">ISI TEKS AREA SOBAT DISINI</textarea>

Semoga artikel tentang cara membuat teks area yang cantik ini bermamfaat buat sobat blogger semua.

Membuat Efek Bayangan Pada Teks

Salah satu cara yang bisa sobat blogger lakukan untuk memodifikasi atau menghias tampilan dari teks atau postingan sobat blogger adalah dengan cara menambahkan warna dan efek bayang pada teks sobat blogger. Efek bayang atau Shadow Effect akan membuat tulisan sobat blogger terlihat lebih Cool dan menakjubkan. Coba perhatikan contoh di bawah ini!

Search the world's information, including webpages, images, videos and more
Share your videos with friends, family, and the world
Monetize. Make money with Adsense. Blogger logo. Explore Blogs of Note. Want to learn more? Take a quick tour, watch a video tutorial or read Blogger Buzz

Apakah sobat blogger penasaran bagaimana cara membuat teks berbayang pada postingan? Baiklah, coba sobat blogger ikuti langkah berikut :

---

Cara Menambahkan Efek Bayang Pada Tulisan Atau Teks

---

• Ketika sobat blogger menulis postingan di blogger.com, sobat blogger harus menulis postingan dalam mode HTML.

• Kemudian tambahkan kode berikut sebelum dan setelah teks.

<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px yellow }</style><font color="green"><b class="drop-shadow"><b>Letakkan Teks Sobat blogger disini</b></font></b>

Contoh :

<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 2px yellow }</style><font color="green"><b class="drop-shadow"><b>Tutorial Blogspot</b></font></b>

Hasilnya terlihat seperti ini :
Tutorial Blogspot

Untuk kostumisasi :
Tulisan yang berwarna merah adalah warna bayang dan yang warna biru adalah warna font, silahkan sobat blogger sesuaikan.

Terima kasih banyak atas kunjungannya...

Cara Buat Spoiler Di Blogspot

Spoiler adalah sebuah fitur blog yang memungkinkan pemilik blog untuk menyembunyikan teks, gambar link atau kode. Spoiler di dunia blogging sering juga disebut dengan nama Hide and Show Button (Tombol Buka Tutup). Buat sobat blogger yang sering bergelut di dunia otomotive, jangan heran dengan nama "Spoiler". Spoiler disini bukan Spare part mobil seperti yang sobat blogger kenal, tapi hanya sebatas fitur yang di buat untuk blog. Fitur Spoiler ini tidak hanya bisa di pasang di tempat postingan, tetapi dapat juga dapat di pasang di Sidebar blog.

---

Cara Buat Spoiler di Blogspot atau Blogger

---

• Sign In di blogger.com
• Pada saat sobat blogger menulis postingan, letakkan kode berikut (Ingat... Harus dalam mode HTML bukan Compose).

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks,kode, gambar atau video disini
 <br>
</div>
</div>
</div>

Hasilnya seperti ini

Klik tombol ini untuk melihat hasilnya::

Letakkan teks,kode, gambar atau video disini

Untuk kostumisasi, silahkan sobat blogger ganti kata yang berwarna merah.

Apa itu SyntaxHighlighter?

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan istlah kategori. Fitur Syntax Highlighter mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup. Ide dibalik pembuatan Syntax Highlighter adalah untuk memungkinkan penyisipan potongan kode berwarna pada halaman web tanpa bergantung pada sisi script server. Syntax Highlighter menggunakan bahasa reguler untuk melakukan parse terhadap text.

Untuk menambah referensi sobat blogger tentang Syntax Highlighter, saya pun memetik beberapa kalimat dari Code Google tentang Syntax Highlighter. Berikut petikannya : SyntaxHighlighter will help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server. Artinya, Syntax Highlighter akan membantu pengembang / programmer untuk mengirim potongan kode secara online dengan mudah dan tampilan cantik. Syntax Highlighter 100% menggunakan JavaScript dan tidak peduli apa yang Anda miliki pada server Anda.

SyntaxHighlighter Fitur :

1. Mendukung beberapa format bahasa
2. Support terhadap semua media browser seperti : Google Chrome, Mozilla FireFox, Internet Explorer, Opera dan lainnya.
3. Mudah untuk digunakan dan dikembangkan.
4. 100% untuk pengguna tanpa adanya campur tangan server
5. Sangat ringan

Support Bahasa SyntaxHighlighter :

Language	Aliases
C++	cpp, c, c++
C#	c#, c-sharp, csharp
CSS	Css
Delphi	delphi, pascal
Java	Java
Java Script	js, jscript, javascript
PHP	Php
Python	py, python
Ruby	rb, ruby, rails, ror
Sql	Sql
VB	vb, vb.net
XML/HTML	xml, html, xhtml, xslt

Apakah sobat blogger sudah tau yang mana yang di sebut dengan syntax Highlighter? Kalau tidak, perhatikan gambar di bawah ini. Berikut ini adalah contoh kode yang ditempatkan di dalam Syntax Highlighter dan yang tidak ditempatkan di dalam Syntax Highlighter :

Tanpa Syntax Highlighter

Menggunakan Syntax Highlighter

Saya yakin, dengan adanya gambar di atas, sobat blogger sudah tau yang mana yang disebut dengan Syntax Highlighter. Insyaallah untuk kedepannya, saya akan memberikan tutorial blog tentang cara memasang Syntax Highlighter di blogger.com

Rubah Jumlah Posting di Home Page

Untuk merubah jumlah postingan yang tampil di Home Page atau Laman beranda, Blogger.com telah menyiapkan dua cara yaitu melalui Layout dan Settings. Tapi Sebelum sobat blogger mengganti jumlah posting yang akan tampil, alangkah baiknya kalau sobat blogger baca dulu pesan Google berikut ini : "Overall page size is limited to 1 MB, so if you try to list hundreds of large posts all on your front page, you may get a publishing error. Lowering the number of posts displayed should fix this." Artinya "Secara keseluruhan, berat laman dibatasi hingga 1MB, jadi jika anda menampilkan ratusan posting di home Page anda bisa saja mendapatkan pesan publishing error. Mengurangi jumlah posting yang ditampilkan akan mengatasi masalah itu (publishing error)."

---

Cara Merubah Jumlah Posting Di Laman Beranda

---

Cara Pertama

1. Sign In di blogger.com
2. Pada Menu Drop Down, Klik Layout.

3. Lihat Blog post, kemudian Klik Edit
4. Jendela baru muncul, kemudian ganti angka yang terdapat pada kolom Number of posts on main page. Angka tersebut merupakan jumlah postingan yang akan ditampilkan.

5. Kalau sudah diganti klik Save

Cara Kedua

1. Sign In di blogger.com
2. Pada menu drop down klik Settings dan klik Posts and comments

3. Ganti angka pada kolom Show at most dan klik Save Settings

Blogger Dan Kompatibilitas Browser

Berikut ini adalah daftar dari browser dan sistem operasi yang dapat menjalankan fitur Blogger.com. Tapi sebelumnya, baca terlebih dahulu pesan yang disampaikan oleh Brett Wiltshire (Salah satu TIM Google) tentang browser support "Our team has been thinking a lot recently about browser support, and wanted to make you aware of our new plan moving forward. For web applications like Blogger to continue to evolve at a rapid pace, our engineering team needs to make use of new capabilities available in modern browsers. For example, Dynamic Views, which we previewed in March, and Web Fonts both require advanced browsers that support HTML5. Older browsers just aren’t able to provide you with the same high-quality experience."
 

	Windows XP/7	Linux (Ubuntu)	MAC OSX 10.4 +	Mac OSX 10.3.9 and below
Google Chrome	X	X	X	X
Safari 4 +			X	X
Internet Explorer 8*	X
Internet Explorer 9*	X
Firefox 3.6 +	X	X	X

Catatan : Browser lain mungkin dapat menjalankan fitur Blogger.com. Namun, Google tidak dapat menjamin bahwa fitur akan bekerja seperti yang diharapkan.

Sumber Posting : Support Google translated by Tutorial Blogspot

Cara Backup Template Blog

Tampilan yang ada di blog dibuat menggunakan kode atau bahasa terstruktur seperti HyperText Markup Language (HTML), Cascading Style Sheets (CSS), atau JavaScript. Setiap kali kita melakukan kostumisasi tampilan blog kita, berarti kita akan melakukan perubahan terhadap kode template kita. Tidak jarang, perubahan yang dilakukan menibulkan masalah di blog kita. Jadi, untuk menghindari kemungkinan-kemungkinan negatif yang akan terjadi, kita perlu melakukan BackUp terhadap Template kita.
Fungsi dari BackUp template adalah untuk membuat salinan kode template yang ada di blogger.com ke Hard Drive komputer.

Kalau suatu hari sobat blogger mengedit template, kemudian sobat blogger melakukan kesalahan, sobat blogger tinggal menggunggah/Upload file template yang sudah di BackUp. Jadi, dengan BackUp template, kita tidak perlu cemas atau khawatir dalam proses editing template.

---

Cara BackUp Template Blog Di Blogger.com

---

• Sign In di blogger.com
• Pada Menu Drop Down, Pilih Template
• Lihat sebelah kanan atas pada laman tersebut, disana terdapat tombol BackUp/Restore, klik tombol itu.

• Klik Download dan Klik Save File (Kalau sobat blogger menggunakan media browser Mozilla FireFox, Save File akan muncul di bagian paling bawah (Bukan di jendela baru).

Save File pada Google Chrome

Save File pada Mozilla FireFox

Kode dari template yang sudah di BackUp akan tersimpan di Hard Drive Komputer sobat dalam bentuk xml (.xml). Untuk membukanya, sobat blogger bisa menggunakan Notepad yang sudah terinstall di Operating System Windows sobat.

Membuat Link Berkedip Seperti Pelangi

Jika pengunjung blog sobat blogger mengarahkan Cursor ke arah salah satu link yang ada di blog sobat, maka teks dari link tersebut langsung berubah warnanya menjadi teks yang berwarna warni dan teks tersebut berkedip. Efek link yang berubah warna dan berkedip seperti itu di sebut dengan nama Multi-Color Link Hover Effect atau Rainbow link effect (Link efek pelangi). Untuk membuat link kita menampilan efek warna yang berubah-ubah, saya sudah membuatkan sobat blogger sebuah kode JavaScript. Dengan memasang kode ini, semua link yang ada di blog sobat secara otomatis menampilkan efek pelangi. Satu lagi, sobat blogger tidak perlu Edit Template.

---

Cara Membuat Link Pelangi Pada Blog

---

1. Kunjungi dan langsung masuk di blogger.com
2. Klik tombol di bawah ini dan klik "Add Widget"
3. Perhatikan gambar yang ada di atas!

Kotak Berlangganan FeedBurner Keren

Berkeliling dari satu blog ke blog yang lain merupakan aktivitas rutin yang saya lakukan ketika Online. Tadi, aktivitas berkeliling saya pun membuahkan hasil, saya mendapatkan sebuah kode CSS (Cascading Style Sheets) untuk membuat kotak berlangganan FeedBurner. Iseng-iseng saya pasang kode tersebut di Sidebar blog saya. Ternyata pas saya pasang, Widget FeedBurner Subscription Box ini memiliki tampilan yang sangat keren. Apa yang saya dapatkan, kurang seru rasanya kalau saya tidak berbagi dengan sobat blogger. Jadi, saya langsung membuat tutorial yang sedang sobat blogger baca ini.

---

Cara Membuat Form Atau Kotak Berlangganan Email FeedBurner

---

• Sign in di blogger.com
• Pada menu Drop Down, Klik Layout dan klik Add a Gadget

• Copy Paste kode berikut :

<div align="center" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijat17NEmzCz4YZ3tItmSJQZMokrj4_U5swOmS5nTrChCiMfsLOqCz5KJX9V98-IwS6S0nFmGcwV74hWcy1PFkejV8z_BdET5qhcgMkAJXNJGDv-JJ8dxX8BRT4p3gZqBm06wZCUg10YCU/s1600/feed+sidebar.jpg)"><a href="http://feeds.feedburner.com/tutorialblogspot/PbmK" imageanchor="1" style="margin-left: .5em; margin-right: 1em; float: center;" rel="nofollow" target="blank"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkf5FJbZ26HhbrclcsH6ISYoL4OTG796dTYcYku5I6FfDDy32wvi7M0BsMeW1Gaw8K0Gr_oOEY2CzUhuT7MNMPjmU8PltmgMKG5tawZ7L9K-ZONEKYacSFcmDEZ4zMX3otXvcTxpN3F0ON/s400/Untitled-5.png" width="290" /></a>
<style></style><style class="text/css"></style>
<div class="center">
Masukan alamat Email kamu disini untuk mendapatkan artikel terbaru..!</div><div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=tutorialblogspot/pbmk', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" value="Ketik email disini..." type="text" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Ketik email disini...&quot;;}" onfocus="if undefinedthis.value == &quot;Ketik email disini...&quot;) {this.value = &quot;&quot;;}" />
<input type="hidden" value="tutorialblogspot/PbmK" name="uri" /><input type="hidden" name="loc" value="en_US" />
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<style class="text/css"></style>
<div class="table">
<table><tbody><tr align="right"><td align="right"><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/TutorialforBlogspot" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0L2MCE8MlGMKzu09spZ6dl85562GRL2b_RNG87XXJzLhJ3UbQaGyHCCY81pBVsAmSL5esJgPNjF4kLqDZrgnZ018lkRsbpgUVewpbqG6FCulauZAxRwgJ6OL8q2cIshpPyxJtJMAV-wvm/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="https://twitter.com/#!/2torialBlogspot" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWBELzA2ve6NePkVmxbCB0yYCGvhkV4x1EAOBame5J7tE8d_qHPN2xU4NFUgvLXPH7ANA0tlxMZxavLl2BSjZ_nMYxyZPVzAjoce6RjCrqwpl32stjgHVC9DydHftBtmsWPHVSZgHW224m/s1600/twitter-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/tutorialblogspot/PbmK" imageanchor="1" target="_blank" rel="nofollow"><img border="0" width="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilE-5FKBavUjv78c34vigMcWyyOOrEBJmkwX82KyEdWBOW0T7BUfK6op7-XEzXINikzxDDxLBNobSZHYP_25Cz7ucwbA6HgHHUa_yAQWkec2UDETEdUIh-SaIibzU88BU9feVzfiGtg13Q/s1600/rss-48.png" /></a></div></td><td><a class="Fadeout" href="https://plus.google.com/108329354747256877665?rel=publisher" imageanchor="1" target="_blank" rel="nofollow"><img width="30" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVawRD5ZgrZicGl1KXcK8YrbL7lOeilngDEa5cR5dcKoTU7mPLJ5hoUbwAM4sbgrv10Y-Ne0WhBm-cbXgc0DhetwoRAA7fWjWbFIHizhsfiBBJaXSZUEsD2g-YF8tBcZ6NR_C9k__UXMMB/s1600/google-48.png" /></a></td></tr></tbody></table>
</div></div>

• Save widget FeedBurner sobat

Dari kode di atas, yang harus di rubah atau diganti adalah :

1. Ganti tutorialblogspot/PbmK dengan nama Feed blog sobat
2. Ganti http://feeds.feedburner.com/tutorialblogspot/PbmK dengan URL FeedBurner sobat
3. Ganti http://www.facebook.com/TutorialforBlogspot dengan URL Facebook sobat.
4. Ganti https://twitter.com/#!/2torialBlogspot dengan URL Twitter sobat
5. Ganti https://plus.google.com/108329354747256877665 dengan URL akun Google Plus sobat

Semoga kotak berlangganan FeedBurner yang keren ini semakin memperindah tampilan blog sobat.