Membuat Blockquote Menjadi Lebih Menarik

Tutorial Blogspot - Setelah pada postingan terdahulu telah dibahas mengenai Membuat blockquote tampil cantik yang berisi cara membuat blockquote dengan berbagai macam bentuk, maka pada kesempatan kali ini saya ingin berbagi sedikit tips yang masih berhubungan dengan blockquote. Yang pasti menurut saya model blockquote/kotak kutipan yang akan dibahas tentu lebih keren dan minimalis dari versi sebelumnya.

Design blockquote ini terinspirasi dari model blockquote milik Google yang ada di Webmasters Tools. Saya melihat blockquote Google ini sangat menarik dan saya mencoba untuk memasangnya diblog ini.

Adapun tampilan blockquote yang sudah jadi akan berbentuk seperti berikut :

Blockquote oleh http//kangamphi.blogspot.com - Terinspirasi dari Google Webmasters Tools

Bagaimana, lumayan bagus kan? Ok jika teman-teman blogger berminat, langsung saja kita simak cara membuatnya.

Membuat Blockquote Menjadi Lebih Menarik

1. Login ke blogger
2. Klik Design > Edit HTML
3. Cari Kode
   
   .post blockquote {
   ---------------------
   ---------------------
   ---------------------
   }
   
   
4. Hapus kode diatas dan ganti dengan kode dibawah ini :
   
   .post blockquote {
   -moz-background-clip: border;
   -moz-background-origin: padding;
   -moz-background-size: auto auto;
   background-attachment: scroll;
   background-color: #FFFFD9;
   background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOq6qU3V5SG2_IbyylbY-R9zawWvPPYAVnx1DxuYUkf1wZ7Yu47Sbj2hOgQ54g2OyktJHN_yqUwLe0lQ1a_UzfI98NcTjpxaaHImFQ4SASG6lZgFc8Ts5RrCG7XLgnyfoVo3O2-JJjDRcU/s1600/blockquote_icon.png");
   background-position: 0.5em 0.5em;
   background-repeat: no-repeat;
   border-bottom-color: #B3B3B3;
   border-bottom-style: solid;
   border-bottom-width: 1px;
   border-left-color-ltr-source: physical;border-left-color-rtl-source: physical;
   border-left-color-value: #B3B3B3;
   border-left-style-ltr-source: physical;
   border-left-style-rtl-source: physical;
   border-left-style-value: solid;
   border-left-width-ltr-source: physical;
   border-left-width-rtl-source: physical;
   border-left-width-value: 1px;
   border-right-color-ltr-source: physical;
   border-right-color-rtl-source: physical;
   border-right-color-value: #B3B3B3;
   border-right-style-ltr-source: physical;
   border-right-style-rtl-source: physical;
   border-right-style-value: solid;
   border-right-width-ltr-source: physical;
   border-right-width-rtl-source: physical;
   border-right-width-value: 1px;
   border-top-color: #B3B3B3;
   border-top-style: solid;
   border-top-width: 1px;
   color: #353535;
   padding-bottom: 0.5em;
   padding-left: 2.5em;
   padding-right: 0.5em;
   padding-top: 0.5em;
   }
   
   
5. Simpan template

Tampilan Baru Blogger In Draft

Tampilan Baru Blogger In Draft - Kabar terbaru bagi pengguna Blogspot.Tepat pada tanggal 07 Juni 2011 waktu setempat, Google In Draft kembali memperbaharui tampilan antar muka yang baru bagi seluruh pengguna Blogger In Draft.

Selama beberapa bulan terakhir, pihak Blogger in Draft telah membuat perbaikan yang signifikan. Pertama dan terpenting, Blogger In Draft telah memasukkan umpan balik (feedback) dan membuat banyak perbaikan berdasarkan umpan balik itu. Seperti yang di kutip dari official Blogger in Draft, design baru ini terinspirasi dari Google’s newest design evolutions.

Tampilan Baru Blogger In Draft

Anda juga diperkenankan untuk memberikan pendapat seputar fitur-fitur Blogger in Draft dengan mengkilik tombol Send Feedback yang ada di dashboard.

Tertarik mencoba tampilan baru Blogger in Draft? Klik Blogger in Draft via browser kesayanganmu dan checklist pilihan "Make Blogger in Draft my default” yang ada di dasboard.

Cara Membuat Link Terbuka di Tab Baru / Halaman Baru

Cara Membuat Link Terbuka di Tab Baru / Halaman Baru - Sebelum membahas cara membuka link terbuka di tab baru / halaman baru, tidak ada salahnya jika kita simak dahulu pengertian dari link. "Link atau biasa disebut hyperlink adalah suatu kata, kalimat atau gambar yang dapat diklik untuk berpindah ke halaman lain." Bila Anda menggerakkan kursor ke kata atau kalimat yang mengandung link, maka tanda panah akan berubah menjadi "tangan kecil".

Adapun manfaat dari penggunaan teknik ini adalah : halaman awal tidak akan tertimpa oleh halaman baru. Sebagai contoh silahkan klik link dibawah ini :

Link : Menyamarkan Tag Strong

Nah, cara membuat link terbuka di tab baru / halaman baru seperti link diatas sangat mudah. Anda hanya perlu menyisipkan attribut target="_blank" saja. Contohnya :

<a href="http://kangamphi.blogspot.com/2011/05/menyamarkan-tag-strong.html" target="_blank">Menyamarkan Tag Strong</a>

Selamat Mencoba :)

Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting

Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting -  Dari judul diatas, tentu sahabat blogger sudah mengerti maksudnya. Related post atau posting terkait yang akan dibahas disini terletak dibawah posting plus menggunakan scroll supaya tidak banyak memakan banyak ruang di template blog kamu. Langsung saja lihat demonya dibawah ini :

Cara Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting :

1. Login ke Blogger
2. Klik Design > Edit HTML 
   (sebelumnya backup template terlebih dahulu)
3. Klik Expand Widget Template
4. Letakkan kode dibawah ini diatas kode ]]></b:skin>
   
   #artikel-terkait{background-color:#F0F0F0; border:solid 1px #DEDEDE; padding:10px}
   
   Catatan : Jika perlu ganti kode berwarna merah dengan warna background serta border yang sesuai dengan template kamu


5. Selanjutnya cari kode <p><data:post.body/></p> dan letakkan kode berikut dibawahnya
   
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <br/>
   <div class='similiar'>
   <div class='widget-content' id='artikel-terkait'>
   <div style='width:100%; height:190px; overflow: auto;'>
   <div id='data2007'/>
   <script type='text/javascript'>
   var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
   var maxNumberOfPostsPerLabel = 4;
   var maxNumberOfLabels = 10;
   
   maxNumberOfPostsPerLabel = 100;
   maxNumberOfLabels = 3;
   
   function listEntries10(json) {
   var ul = document.createElement(&#39;ul&#39;);
   var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
   json.feed.entry.length : maxNumberOfPostsPerLabel;
   for (var i = 0; i &lt; maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;
   
   for (var k = 0; k &lt; entry.link.length; k++) {
   if (entry.link[k].rel == &#39;alternate&#39;) {
   alturl = entry.link[k].href;
   break;
   }
   }
   var li = document.createElement(&#39;li&#39;);
   var a = document.createElement(&#39;a&#39;);
   a.href = alturl;
   
   if(a.href!=location.href) {
   var txt = document.createTextNode(entry.title.$t);
   a.appendChild(txt);
   li.appendChild(a);
   ul.appendChild(li);
   }
   }
   for (var l = 0; l &lt; json.feed.link.length; l++) {
   if (json.feed.link[l].rel == &#39;alternate&#39;) {
   var raw = json.feed.link[l].href;
   var label = raw.substr(homeUrl3.length+13);
   var k;
   for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
   var txt = document.createTextNode(label);
   var h = document.createElement(&#39;b&#39;);
   h.appendChild(txt);
   var div1 = document.createElement(&#39;div&#39;);
   div1.appendChild(h);
   div1.appendChild(ul);
   document.getElementById(&#39;data2007&#39;).appendChild(div1);
   }
   }
   }
   function search10(query, label) {
   
   var script = document.createElement(&#39;script&#39;);
   script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
   + label +
   &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
   script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
   document.documentElement.firstChild.appendChild(script);
   }
   
   var labelArray = new Array();
   var numLabel = 0;
   
   <b:loop values='data:posts' var='post'>
   <b:loop values='data:post.labels' var='label'>
   textLabel = &quot;<data:label.name/>&quot;;
   
   var test = 0;
   for (var i = 0; i &lt; labelArray.length; i++)
   if (labelArray[i] == textLabel) test = 1;
   if (test == 0) {
   labelArray.push(textLabel);
   var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
   labelArray.length : maxNumberOfLabels;
   if (numLabel &lt; maxLabels) {
   search10(homeUrl3, textLabel);
   numLabel++;
   }
   }
   </b:loop>
   </b:loop>
   </script>
   </div>
   </div>
   </div>
   </b:if>
   
   Catatan : Kode yang berwarna merah merupakan kode panjang dan lebar space dari widget related post ini, silahkan sesuaikan dengan template kamu


6. Simpan Template

Semoga tutorial Cara Membuat Related Post / Artikel Terkait With Scroll Dibawah Posting ini bermanfaat.

Mengenal Aturan Penulisan XHTML Template Blogspot

Mengenal Aturan Penulisan XHTML Template Blogspot -  Saat menyisipkan kode atau mengedit template blogspot mungkin sobat blogger pernah mengalami pesan error. Pesan error itu biasanya could not be parsed atau element were not closed properly.

Perlu diketahui bahwa Template blogspot biasanya menggunakan tipe dokumen XHTML 1.0 Strict. Untuk itu, pada artikel ini akan dijelaskan  beberapa aturan penulisan XHTML, sehingga Anda dapat memperbaiki pesan error sendiri.

Pengenalan singkat mengenai HTML, XML dan XHTML

HTML (HyperText Markup Language) adalah sebuah bahasa yang digunakan untuk membuat sebuah halaman web. XML (Extensible Markup Language) adalah bahasa markup yang disarankan oleh W3C. XML merupakan kelanjutan dari HTML. XHTML (eXtensible HyperText Markup Language) adalah bentuk reformulasi dari HTML menggunakan aturan  XML. XHTML mirip dengan HTML tetapi mempunyai aturan sintaks yang lebih ketat.

Aturan Dasar Penulisan XHTML

Aturan dasar penulisan XHTML dibawah ini dimaksudkan supaya sobat blogger mengetahui tata cara penulisan XHTML agar nantinya tidak melihat pesan error saat mengedit template blogspot.

Penulisan Tag XHTML harus menggunakan lowercase

Karena XML adalah bahasa markup yang sensitif dan menggunakan lowercase, maka penulisan kode XHTML harus menggunakan huruf kecil. Sebagai contoh :

<TITLE>Mengenal Aturan Penulisan XHTML Template Blogspot</TITLE>

Seharusnya :

<title>Mengenal Aturan Penulisan XHTML Template Blogspot</title>

Nilai Attribut harus dalam tanda kutip

Semua nilai attribut harus diapit oleh tanda petik satu atau petik dua. Contoh nilai attribut yang tidak diterima oleh XHTML dan menyebabkan pesan error : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly

<a href = http://kangamphi.blogspot.com>Kang Amphi</ a>
<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggV6xanmvAuTzdaiVcJV7JDaq6Oqw8Y4KKVrMtYM4pu7U3t6H5ezoZFqU7vgQ2tD5Mc1wW1EpVwa5mq_TXzDZbKb5SY5SYYESi0SmEiG9ULVeXhs5oQ5JDrs_lUYZRLC7bDpDvX_DFibJc/s1600/fav_amphi.png/>

Sebaiknya ditulis :

<a href ='http://kangamphi.blogspot.com' title='Kang Amphi'>Kang Amphi</ a>
<img alt='Kang Amphi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggV6xanmvAuTzdaiVcJV7JDaq6Oqw8Y4KKVrMtYM4pu7U3t6H5ezoZFqU7vgQ2tD5Mc1wW1EpVwa5mq_TXzDZbKb5SY5SYYESi0SmEiG9ULVeXhs5oQ5JDrs_lUYZRLC7bDpDvX_DFibJc/s1600/fav_amphi.png'/>

Penting : 

1. Semua nilai attribut pada kode XHTML template blogspot (edit html) selalu diapit oleh tanda kutip satu ('), kecuali pada bagian deklarasi DocType (tipe dokumen) dan beberapa kode javascript lainnya.
2. Nilai attribut pada kode HTML widget element selalu diapit oleh tanda kutip dua (")
3. Jika Anda membuat postingan dengan menggunakan HTML Editor, pastikan nilai attribut diapit oleh tanda kutip dua (")

Element container harus memiliki tag penutup

Semua element harus memiliki tag penutup dan jika tidak biasanya akan muncul  pesan error : Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly

Untuk itu sebaiknya semua element harus memiliki tag penutup

<title>......</title>
<h2>.........</h2>
<a href>.... .</a>
<div>........</div>

Beberapa element kosong atau tunggal juga harus ditutup dengan benar

Contoh umum

<br>
<frame>
<div id='spacer'>

sebaiknya :

<br/>
<frame/>
<div id='spacer'/>

Element harus ditutup dengan urutan yang benar

Maksudnya unsur-unsur harus ditutup dalan urutan terbalik. Jika tidak, maka akan mencul pesan error atau element tidak akan tampil

Contoh kode dibawah yang tidak diterima oleh XHTML:

<form><table> ... </form></table>

Seharusnya :

<form><table> ... </table></form>

Struktur template blogspot hanya memliki satu elemen root

Dalam dokumen XHTML semua kode bersarang antara <html> dan </html>. Strukur dokumen akan terlihat seperti berikut :

<html>
<head> ... </head>
<body> ... </body>
</html>

Karakter Khusus

Jika Anda lebih suka membuat postingan menggunakan HTML Editor, gunakan tanda disebelah kanan jika ingin menampilkan karakter khusus seperti yang ada disebelah kiri, agar supaya karakter khusus tersebut tidak dieksekusi oleh browser.

"	"
&	&
<	&lt;
>	&gt;

Sampai disini dulu, jika ada penambahan akan saya update lagi. Atau, sobat blogger ingin menambahkan? Silahkan mengisi kotak komentar.

Tips Meningkatkan Alexa Rank

Tips Meningkatkan Alexa Rank - Setelah melakukan beberapa kali penelusuran tentang cara meningkatkan alexa rank di berbagai blog sahabat, akhirnya dapat diambil beberapa kesimpulan tentang cara meningkatkan Alexa Rank yang terbukti ampuh dapat meningkatkan Alexa Rank.

Adapun tips meningkatkan ranking Alexa adalah :

1. Install Alexa Toolbar
   Cara menginstall Alexa Toolbar sangat mudah, Anda tinggal mengakses http://www.alexa.com/toolbar (Klik untuk membuka tab baru dan mulai menginstall Alexa Toolbar)
   
   
2. Install Alexa Widgets
   Cara menginstall Alexa Widgets juga sangat mudah. Kode HTML Alexa Widget dapat Anda temukan di http://www.alexa.com/siteowners/widgets (Klik untuk membuka tab baru dan dapatkan kode HTML Alexa Widgets)
   
   
3. Memasang Alexa Review Widgets
   Kode HTML Alexa review widgets dapat ditemukan di http://www.alexa.com/siteowners/reviews (Klik untuk membuka tab baru dan dapatkan kode HTML Alexa Review Widgets), kemudian mintalah teman maupun rekan kerja untuk mereview blog Anda melalui review widgets
   
   
4. Atur URL blog Anda menjadi homepage
   Atur Url blog Anda menjadi homepage dibrowser yang sudah terinstall di komputer, sehingga setiap membuka browser, yang terbuka pertama adalah blog Anda. > "Alexa tidak membedakan unique ip adress yang mengakses blog Anda, semua dianggap sama"
   
   
5. Tulis Artikel tentang Alexa
   Tulis artikel tentang alexa, seperti postingan yang sedang Anda baca ini. Buatlah katergori/label nya juga masih berhubungan dengan Alexa. Contoh label : Alexa Rank
   
   
6. Rekomendasikan Alexa Toolbar
   Jadikan blog Anda sebagai referring url untuk mengajak orang lain menginstall Alexa Toolbar dan Alexa Widgets
   
   
7. Backlinks dan Blogwalking
   Sering berkunjung ke blog teman dan berkomentarlah yang baik maka mereka juga akan berkunjung balik ke blog Anda
   

Mungkin sampai disini dulu, semoga bermanfaat. Jika Anda tambahan lain silahkan mengisi komentar.

Mengganti Favicon Melalui Blogger in Draft

Mengganti Favicon Melalui Blogger in Draft - Favicon adalah gambar atau logo blog yang tampil disebelah kiri address bar pada browser. Bagi sebagian blogger, favicon mencerminkan identitas blog. Kalau dulu mengganti favicon blogspot dilakukan dengan cara menambahkan kode HTML,  maka sekarang Anda dapat melakukannya dengan lebih mudah tanpa hacking kode HTML template Anda.

Pada tanggal 8 Juni 2011, Blogger in Draft resmi meluncurkan fitur baru yaitu Elemen Favicon (lihat gambar dibawah). Dengan fitur baru ini, Anda dapat merubah favicon blog Anda dengan mudah tanpa mengedit HTML template.

Cara menambahkan / merubah favicon :
1. Login ke Akun blogger melalui http://draft.blogger.com
2. Klik Design > Page Elements
3. Klik Edit pada bagian Favicon
4. Klik Browse > Pilih gambar berekstensi .ico dari komputer Anda
5. Klik Save

6. Klik Save

NB : Fitur Favicon ini sementara hanya mendukung file gambar dengan ektensi .ico dengan ukuran gambar tidak lebih dari 10kb.

Membuat Blockquote Tampil Cantik

Membuat Blockquote Tampil Cantik - Berikut ini adalah cara membuat blockquote supaya blockquote blog Anda terlihat lebih menarik dari pada blockquote bawaan blogspot. Anda hanya perlu meletakan kode css dibawah ini yang dianggap sesuai dengan warna template blog Anda. Berikut kode css dan contoh hasilnya :

Kode CSS Blockquote 1 :

.post blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px double #AEB404;
background-color: #F2F5A9;
}

Hasilnya :

Ini adalah contoh blockquote - http://kangamphi.blogspot.com


Kode CSS Blockquote 2 :

.post blockquote {
background:#F9F9F9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBX7hbSJkf1MG8k0-5GlU9bq50EJUTArdfQrI6ZFsR2dHpqPg3Kur3AwewMlPskoAdMZvDN37hVwqKpLGA-g2NgJqNmlTXDBR3InV8suUuY5Hn06rj6rmeezz9aV3iSnsqodCNLxjZKA/s400/quotes_icon.gif) no-repeat scroll 5px 5px;
color:#3B0B0B;
border:2px outset #E6E6E6;
margin:10px;
padding:10px 10px 10px 40px;
}

Hasilnya :

Ini adalah contoh blockquote - http://kangamphi.blogspot.com


Cara Pemasangan :

1. Login ke Akun blogger
2. Klik Design > Edit HTML
3. Cari kode
   .post blockquote{
   ..........................................
   ..........................................
   ..........................................
   }
4. Hapus semua kode tersebut dan ganti dengan kode css diatas
5. Simpan Template

Kalau mau, Anda juga dapat mengkreasikan blockquote Anda sendiri supaya serasi dengan template blog Anda. Lihat gambar bagian blockquote dibawah ini:

Gunakan juga salah satu logo blockquote dibawah ini. Caranya : copy url logo blockquote yang telah disediakan:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizOs7ykLeUcboBWiKqlcVT5w_GokuY5wZ7tHHY8ZAt6GzMs76dEdMtl4jWt3DxW4SVaDLQfV7904CswUDvhCwFecpN0nfuM8q35ErGuPqbDKMCxUtgJRdA2AJsoG0DqdSDPGK7zM2py7us/s1600/blockquote1.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-NJhya84A6fPlwyueVNCB6F0cgbSb6xrE2f__kXxT17ra_0GLkubepBi6mr67rykWcRJjoXlg6AZCMlsGsyT0oz34xMO5zBLMrErKaKsrOyXoOnv3NgF7KUn2c7BTYMY3DPGPntvAxeD/s1600/blockquote2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwkMFJ12Al85jCAP0i61v3efaGFGHxssT3PC9Gtn7okPxMCtpjC0vfIZGhhgRM4qb-ANTtz7Ba5wFk0xYY6MlmKi9X2fcbLu1TLtZpDpQFRzpOr3ESRfobYxf30aLpO6fc3mzQNXGMfyLv/s1600/blockquote3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCkyYNLE9FAjva6M23wwyqzdzYBPubOmhPpUcH4co3ne0TALWmJUugHpEdWqn4omUbSTC3WNUXQmVKNo10X5PGMRgrV4fW7ELsvrIXhwz0zfbgyzACYWyQybksjR0NSRhFcQFoD8vcSD/s1600/blockquote4.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvsY7CDmjB0Ve3pkjnsvAwpr15ShH00a7GrtTdrcy1m5go0V0DMb7YFj1QVDDm6bwEL5I0Q8DlIpLRalJ4Q0KdtnRYmgrOjm2wwiMe1nOrecLHoh8HOPb8LXS6F7FR9AYWyYVpeHzFF1tM/s1600/blockquote5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHjIMou2n2dueD1ZbwwhWZngvMwi7VPfP6NCa7O1L0qJDOcHYhfjjRK7ORikmBRDC2zcIKlql3KZRufhyDd4ImtpVr3O0oiRlVOXh9aXS2CV-Zy0ndewsv9-SAb5N3rbIBqu7s6UAohTia/s1600/blockquote6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBvIDneW-tiq-h2UXvIx1jaM3rIsIiCrcNWLeXGrW-wkqI7VpfYBg09W-MnBZ_dfg6nplZwiLQhJdW6BkhkJU2B4BrkiN3AepKZ06-IdMKjMfaJlvAk6Z5ozO-CfsiGXZ2Lv7Mz48D_oCx/s1600/blockquote12.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia4Tva1SdAkC6dw8BHHBw0564_RnqVpPBDNBaTBi72dAE_NNN-RmGdiRuXSTjzV1mv0Qh-7VR5lCymubM7VcFJD-hX7bS5dtj2vS-tACkKovwFTJUi8TSlHAFkpwS62sVuCqDgbhScDxQ1/s1600/blockquote11.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyBKUzkV33h6oFtTa_UVxgnIejeIOMMEpsvVGTDkO9Mzt0PhyphenhyphenMl5iAb6dzWbBGKnyaaCBt3SdyKOe98CAdRwt9mnzS8qCjuHdBauek_q3kp9SD1VJzFGhewnuXfvNKzWupWGzH09rjUx2/s1600/blockquote8.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcfpSDzUenHx3aQijqfgbGb3eJ31eBbA-gMuJ2JwqvU0ZRCQEDOnsJt4lkXNAm2EaIMUj6ufnRamaD7qN78rkFHfcwhacLgghNOjfeId8DO-rtoN15rHjjpUilZebNFSrujQ1BkSddF3G7/s1600/blockquote9.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMuMBqyKoNQHljKEOQ6g95k4XRRyjymrOa-jyLECNm9Iu-4KL2ByBs77wYurBPa-X13AyFSme-aX6_tCn5mu0xv33lo5iltOVfxOfGm4L5mKGvh-6UvsAjn6p-W-V7j4Ym8BKRZRneIQP/s1600/blockquote7.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Fv1Cmpa_V13ISN_GtoqD_0VjG2ih4z1UIJe7fCVPmukDinQa0Acyiz0LjYOd-oM5g5GCtN-YPa3if9gWNW9S2vVYxVoO0GZDTJWZ8HQR7qJKAng0sA0_r9uQ1tnBgUmKG0ICvzWn7tP8/s1600/blockquote10.png

Mengaktifkan Blogspot Versi Mobile

Mengaktifkan Blogspot Versi Mobile - Fitur Blogspot Mobile Version yang dapat diaktifkan melalui Settings > Email & Mobile ini berfungsi untuk menampilkan blog via ponsel. Karena desain templatenya yang ringan, tampilan blog versi mobile ini memudahkan pengunjung untuk mengakses blog Anda dengan cepat, Mereka dapat mengunjungi blog Anda, melihat dan membaca artikel blog Anda tanpa menunggu waktu loading yang terlalu lama.

Cara mengaktifkan Blogspot Versi Mobile :

1. Login ke draft.blogger.com
2. Klik Settings > Email & Mobile
3. Pada bagian Show Mobile Template pilih Yes. On mobile devices, show the mobile version of my template
4. Save Settings

Beberapa kelebihan blogspot versi mobile :

1. Template Ringan
2. Waktu loading cepat
3. Dapat menampilkan logo blog, judul blog, deskripsi, posting, komentar dan feed
4. Tombol pilihan Lihat Versi Web

Beberapa kekurangan blogspot versi mobile :

1. Widget tidak ditampilkan
2. Iklan Google Adsense tidak ditampilkan

Troubleshooting

Jika Anda sudah mengakses menu settings > email & mobile kemudian tidak menemukan pilihan Show Mobile Template coba buka blog anda dengan menambahkan kode /?m=1 dibelakang alamat blog Anda (Contoh : http://kangamphi.blogspot.com/?m=1), setelah itu buka kembali menu settings > email & mobile dan lihat hasilnya.

Tips Mengedit Template Blogspot Secara Live

Tips Mengedit Template Blogspot Secara Live - Bagi seorang blogger pemula seperti saya, mengedit template blogspot seperti yang saya inginkan bukanlah hal yang mudah. Perlu menguasai serta mempunyai keahlian khusus dalam ilmu coding bahasa xhtml dan css. Tapi syukur Alhamdulillah dengan kemampuan bahasa xml dan css yang tidak seberapa, saya bisa belajar mengotak-atik template blogspot agar sesuai dengan keinginan tanpa harus bolak balik ngesave template dan mereview hasil editan.

Cukup menginstall Add Ons Firebug, kita sudah bisa melihat source code template blog Anda dan mengeditnya secara live, previewnya juga akan tampil secara live pula. Jika editan sudah sesuai keinginan baru disimpan secara real.

Cara penggunaannya :

• Buka blog menggunakan browser Mozilla Firefox
• Klik kanan bagian yang ingin diedit, pilih Inspect Element
• Untuk mengedit kode HTML template, klik tag yang ingin di edit lalu pilih Edit HTML
• Untuk mengedit kode CSS klik value pada bagian property yang ingin diubah. Tekan tombol arrow key di Keyboard Anda keatas atau kebawah, maka value yang dipilih akan berubah secara otomatis

Tambahkan kode HTML yang telah dirancang ke Design blog Anda, Jangan lupa mengganti tanda (") dengan tanda (')

Silahkan dicoba dulu..

Menambahkan Scroll di Blogroll

Cara menambahkan scroll di blogroll yang dibahas disini bertujuan agar blogroll yang terpasang diblog Anda tidak memakan banyak tempat dan tetap rapi walaupun link yang terpasang diblog anda banyak, seperti yang terlihat di footer blog ini.
 
Sebelum Anda menambahkan scroll, terlebih dahulu pasang Widget Blogroll dengan cara :

1. Login ke draft.blogger.com
2. Klik Design
3. Add a Gadget
4. Pilih Link List

Sedangkan cara menambahkan scroll di blogroll :

1. Login ke draft.blogger.com
2. Klik Design
3. Klik Edit HTML
4. Centang Expand Widget Templates
5. Cari kode yang mirip dengan kode berikut :
   <b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>  

<b:widget id='LinkList2' locked='false' title='Blogroll' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

Tambahkan kode <div style='width:100%; height:100px; overflow: auto;'> diatas kode <ul> dan kode </div> dibawah kode </ul>, sehingga menjadi seperti dibawah ini

<b:widget id='LinkList2' locked='false' title='Blogroll' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>

<div class='widget-content'>

<div style='width:100%; height:100px; overflow: auto;'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

</div>

</div>

</b:includable>

</b:widget> 

width:100% dan height:100px dapat dirubah sesuai kebutuhan agar sesuai dengan template blog Anda

Menampilkan Feeds Posting dan Komentar Terakhir

Menampilkan Feeds Posting dan Komentar Terakhir - Banyak sekali cara untuk memanjakan readers blog Anda agar mereka mengetahui posting-posting yang Anda miliki. Navigation menu, popular post, recent posts, recent comments, label, archive, latest posts dan latest comments adalah sebagian dari seluruh element-element yang bisa Anda gunakan untuk menampilkan posting-posting yang Anda miliki.

Elemen-elemen itu bisa Anda tempatkan di bawah posting, sidebar bahkan di footer sekalipun. Yang pasti, dimana pun Anda meletakan elemen-elemen itu tentu tujuannya tetap satu yaitu supaya terlihat oleh pengunjung blog Anda.

Dari berbagai elemen yang disebutkan diatas, kita akan membahas salah satu diataranya, yaitu menampilkan posting terakhir dan komentar terakhir menggunakan elemen feed, dan untuk memasang elemen feed tersebut, silahkan ikuti langkah-langkah berikut :

Login ke draft.blogger.com > Klik Design > Page Element > Add a Gadget > Pilih Feed > Masukkan url feed blog Anda.

Contoh :

Menampilkan posting terakhir

http://domainkamu.blogspot.com/feeds/posts/default

Menampilkan komentar terakhir

http://domainkamu.blogspot.com/feeds/comments/default

Menampilkan posting terakhir berdasarkan label 

http://domainkamu.blogspot.com/feeds/posts/default/-/Belajar%20Ngeblog

Jangan lupa ganti tulisan yang berwarna merah dengan alamat blog Anda. Dan jangan lupa pula ganti tulisan yang berwarna biru dengan nama label yang ada di blog Anda. Jika label Anda terdiri dari 2 suku kata (contohnya : Belajar Ngeblog) maka spasi harus ditulis dengan kode %20

Cara Membuat Related Posts ( Artikel Terkait )

Cara Membuat Related Posts ( Artikel Terkait ) :
1. Login ke blogger.com atau draft.blogger.com
2. Klik Design, klik Edit HTML
3. Klik Expand Template Widget
4. Copy kode dibawah ini dan paste tepat dibawah kode   
    <p>data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h1>Related Posts</h1><br/>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

 5. Simpan Template

Kamu bisa mengganti mengganti tulisan Related Posts pada kode diatas dengan kata-kata yang kamu inginkan. Contoh : "Artikel yang berkaitan"

Cara mengganti Email Blogger

Sengaja Cari Ilmu membuat posting Cara Mengganti Email Blogger ini untuk rekan blogger semua, karena mungkin diantara rekan blogger ada yang ingin mengganti email blogspot-nya (ya mungkin karena udah bosan dengan email yang lama kali) tetapi bingung mencari menu untuk menggantinya.
Sebenarnya fitur yang dikhususkan untuk mengganti email blogger belum/tidak disediakan oleh blogger sendiri. Tetapi kita dapat menggantinya dengan cara mengundang email baru untuk menggantikan email yang lama sebagai penulis blog. Tapi dengan satu syarat : email baru juga sudah terdaftar di blogger. Artinya email yang baru sudah punya blog sendiri.

Cara mengganti email blogger sebenarnya cukup mudah, disarankan untuk menggunakan 2 browser sekaligus ( Mozilla Firefox, Google Chrome, Internet Explore, dll ) supaya lebih gampang. Untuk itu langsung aja kita simak Cara mengganti email blogger berikut ini :
1. Login ke Blogger ( gunakan browser Mozilla Firefox )
2. Klik Settings > Klik Permissions
3. Klik Add Authors > Ketik Email Baru > Klik Invite
4. Buka Email baru yang di undang tadi ( gunakan browser Google Chrome membuka email).
    Kemudian buka email dan klik tautan yang telah tersedia
5. Refresh halaman Permissions ( pada browser yang pertama )
6. Klik  Grant admin Privileger
7. Klik Remove untuk menghapus email yang lama. Selesai

Apakah teman-teman ada cara lain yang lebih mudah??

Mengganti Logo Blogger

Jika kita membuat sebuah blog di blogger, secara default maka blog tersebut mempunyai favicon atau logo yang berada di adress bar seperti ini  B . Tapi jika teman-teman ingin tampil beda dan ingin mengganti favicon blogger dengan favicon milik sendiri, caranya cukup mudah kok, teman-teman tinggal mengikuti langkah-langkah yang diberikan oleh Cari Ilmu berikut ini :

1. Buatlah logo berukuran 24x24 pixel, 32x32 pixel atau sesuai selera masing-masing.
Simpan dengan ekstensi(gif, ico, png, dll)
2. Upload logo tersebut di www.imageshack.us, www.photobucket.com, dll
3. Login ke blogger, pilih tab Design > Edit HTML
4. Kemudian letakkan script dibawah ini tepat sebelum tag </head>

<link href='http://img847.imageshack.us/img847/3955/cariilmu.gif' rel='SHORTCUT ICON'/>

5. Ganti link yang bercetak tebal dengan lokasi logo yang telah kamu upload tadi
6. Simpan Template

Info Tukar Link

Bagi Anda yang berkenan bertukar link, silahkan copy kode HTML  ini di web atau blog Anda

<a href="http://kangamphi.blogspot.com" title="Kang Amphi" target="_blank"><strong>Kang Amphi</strong></a>

Bagi yang sudah memasang link blog saya di blog anda, silahkan tinggalkan komentar Anda. Saya pasti akan melakukan kunjungan balik dan tentu saja akan segera memasang link blog Anda.

Terima Kasih
Admin kangamphi.blogspot.com

Mempercepat Loading Blog

Salah satu alasan pengunjung batal untuk melihat blog adalah karena loadingnya yang terlalu lama, terlebih lagi jika pengunjung tersebut menggunakan koneksi internet yang lambat. Tentu hal ini sangat disayangkan, bukan? Selain kualitas postingan atau isi blog, faktor loading ini juga sangat menentukan banyaknya pengunjung. Berikut ini adalah cara mempercepat loading sebuah blog yang disarankan  :

1. Jumlah Posting

Jumlah posting yang ada di halaman depan sebaiknya jangan terlalu banyak, hal ini sangat mempengaruhi loading blog. Untuk itu aturlah jumlah posting sesuai kebutuhan. Jumlah maksimal yang disarankan adalah 10 posting, semakin sedikit jumlah posting, maka semakin cepat loadingnya.

2. Pengelolaan Widget

Jika menggunakan widget, gunakanlah widget milik Google yang telah disediakan. Kalau pun terpaksa menggunakan widget pihak ketiga, tempatkan lah widget tersebut dibagian bawah blog atau bagian bawah sidebar.

3. Gambar, Video atau Mulitmedia lainnya

Perkecil ukuran gambar dan pilihlah ekstensi gambar tepat, seperti .png, .bmp, dan sebagainya. Gunakan link, jika ada video atau audio yang ingin diperlihatkan kepada pengunjung

Periksa kecepatan loading blog di http://www.numion.com/Stopwatch

>> Jika Sobat Blogger mempunyai masukan untuk mempercepat loading blog,
     Silahkan tambahkan dikolom komentar.

Widget Untuk Mengetahui Jumlah Pengunjung Online

Widget mengetahui jumlah pengunjung online ini berfungsi untuk mengetahui jumlah pengunjung yang sedang online. Bagi sobat blogger yang ingin menambahkan widget ini, caranya cukup mudah :

1. Klik whos.amung.us
2. Pilih tata letak sesuai dengan selera
3. Copy kode JavaScript yang tertera di layar 
4. Login ke Blogger.com
5. Klik Design
6. Klik Tambah Gadget
7. Pilih HTML/JavaScript
8. Paste kode JavaScript
9. Klik Simpan

Add Related Post Wigdet on Blogspot

Add related post widget on Blogspot
1. Login to blogger.com
2. Click Design, Click Edit HTML
3. Click Expand Template Widget
4. Copy Paste the code below right in tag <data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h1>Related Post</h1><br/>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

 5. Save Template

Menambahkan Google Translate Pada Blog

Berikut ini saya akan menjelaskan bagaimana cara menambahkan Google Translate di blog atau menambahkan pilihan bahasa pada blog. Menurut saya Widgate Google Translate milik Google lebih ringan dan lebih manjur dibandingkan dengan Translator yang berbentuk bendera yang cantik tapi kurang dukungan bahasa sehingga terkesan memperlambat load blog.

Kali ini ada 2 cara dan 2 bentuk tampilan yang akan saya paparkan kepada rekan-rekan semua (bukan bermaksud untuk mengajari, tapi mungkin ada yang belum tau).

Cara 1 :
1. Klik http://translate.google.com/translate_tools
2. Klik Add to Blogger
3. Klik tombol Menambahkan Widget

Cara 2 :

1. Login ke Blogger.com
2. Klik Rancangan
3. Klik Tambah Gadget
4. Pilih "HTML/JavaScript"
5. Beri nama gadget tersebut, misalnya Select Language
6. Copy kan code berikut :

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js">
</script>

7. Lalu Simpan