Cara buat Blog Di Blogger

Bagi yang baru belajar membuat Blog, Blogger mungkin menjadi pilihan yang masuk akal buat belajar. Dengan fiturnya yang mudah di pahami, pastinya akan mudah di ikuti. Untuk pemula cobalah untuk memulai dengan membuat blog yang gratisan. Setelah blog selesai di set up cobalah juga isi dengan widget - widget untuk memperindah blog. Ok silahkan mencoba.

Lihat panduan saya yang lain di Navigasi Halaman Pada Blogger. Read More..

Navigasi halaman pada Blogger

Navigasi halaman pada blogger adalah suatu hal yang sangat di tunggu - tunggu. Hal ini karena bisanya navigasi halaman hanya ada pada wordpress. Navigasi halaman membuat tampilan blog menjadi lebih menarik. Sebelumnya tidak ada yang berfikir kalau hal ini akan bisa di terapkan di blogger.

Untuk meletakkannya di blog anda berikut langkah - langkahnya :

1. Masuk ke Dashboard > Lay out > Edit HTML
2. Jangan tick kotak "Expand Widget Tempalate"
3. Lalu temukan

]]></b:skin>

4. Dan gantikan dengan

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

5. Sekarang bagian Java Script nya. Temukan

</body>

6. Gantikan dengan

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-�>
</body>

Ada beberapa hal yang bisa anda rubah menurut kebutuhan anda.

var pageCount=5; 

Kode ini menerangkan jumlah postingan per halaman, anda bisa merubahnya.

var displayPageNum=5; 

Kode ini menerangkan tambahan jumlah navigasi halaman yang akan di tampilkan pada halaman blog.

Nah secara default blogger akan menampilkan 20 posting per halaman, kita harus merubahnya agar sesuai. Dan untuk melakukannya kita harus edit template blog kita. Bagaimana caranya?
Silahkan masuk ke 'Edit HTML' dan tick kotak "Expand Widget Template"

Lalu temukan setiap kode berikut :

'data:label.url'

Dan gantikan setiap kode tersebut dengan :

'data:label.url + &quot;?&amp;max-results=5&quot;'

Angka "5" di atas menunjukkan jumlah postingan per halaman.

Jika anda menggunakan widget label cloud dari phydeaux3 lalu temukan :


a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

Dan gantikan dengan :

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;; 

Jangan lupa save setelah itu. Dan sekarang anda akan mendapatkan navigasi halaman yang cantik seperti gambar ini :

 

Tutorial ini saya dapatkan dari Bloggerplugins dan Kode berdasarkan kode dari Abu Farhan dan Muhammad Rias.

Silahkan mencoba....

 
Read More..

Cara Mudah Posting Kode HTML

Ketika pertama kali saya mencoba posting Kode HTML di blog, saya selalu kesulitan. Karena kode HTML selalu tumpang tindih dengan default posting.

Nah sekarang ada cara yang mudah dalam membuat posting Kode HTML. Di jamin postingan tidak akan sulit karena di tolak akibat ada Kode HTML yang salah, yaitu dengan meng - encode kode HTML yang akan di posting.

Ada situs online yang melayani fasilitas ini, anda bisa langsung mencobanya. Yang ada harus lakukan adalah silahkan buka alamat situs ini :

http://centricle.com/tools/html-entities/

Nah sekarang yang anda harus lakukan cuma hapus kode yang ada dalam halaman seperti :

Ampersands & angle brackets need to be encoded.

Seperti contoh gambar berikut :

Lalu anda masukkan kode HTML yang akan anda buat dalam postingan. Setelah itu tekan encode, lalu anda tunggu sebentar sampai proses selesai.

Setelah selesai anda copy kode tersebut dan Paste kan ke dalam postingan yang anda buat.

Mudahkan, silahkan coba

Read More..

Cara membuat Follow me Twitter

Tidak di sangsikan lagi saat ini Twitter menjadi ikon baru dalam jaring sosial di internet. Dan di prediksi ke populeran twitter akan dapat mengalahkan Facebook yang saat ini sedang booming.

Nah jika anda mempuyai sebuah blog dan anda ingin meletakkan ikon follow me Twitter berikut saya terangkan di bawah. Tidak perlu pusing membuat ikon twitter yang unik - unik karena sudah tersedia banyak dan lucu - lucu.

Nah begini caranya :

1. Anda harus mempunyai account di twitter dulu, kalau belum silahkan daftar disini.
2. Lalu anda buka website Twitter Icon ini.
3. Lalu anda tinggal pilih mana icon twitter yang cocok dengan anda. Ada banyak pilihan disini.

4. Masukkan id anda dan tekan Go seperti gambar berikut.

5. Setelah itu copy kode HTML di bawah icon twitter

6. Lalu anda masuk ke Dashboard account blogger anda>>Lay Out>>Page Element>>Add Gadget>>HTML/Java Scrip dan jangan lupa Save.

7. Coba lihat blog anda, maka icon twitter follow me sudah berada disana.

Cara mudah dapat ranking klik disini.

Read More..

Cara membuat button Donasi PayPal di Blogger

Membuat button donasi PayPal di blog anda akan membuat para pembaca anda akan dapat mudah mensupport atau menyemangati anda dengan mendonasikan beberapa rupiah untuk anda.

Sehingga di harapkan akan membuat anda akan lebih fokus dalam membangun blog anda yang nantinya akan membantu para pembaca anda untuk mencari informasi yang mereka cari.

Untuk membuatnya anda harus mempunyai rekening PayPal terlebih dahulu. Jika anda belum mempunyainya silahkan daftar disini.

Jadi bagaimana cara menempatkannya di blog anda, mari kita coba :

1. Pertama Log in ke Account PayPal anda

 

2. Lalu klik tab "Merchant Service" di atas halaman.

3. Lalu ke arah bawah, anda akan lihat opsi "Donation". Klik opsi tersebut.

 

4. Lalu anda akan masuk ke halaman Create a PayPal button, untuk opsi 1 sampai 4 adalah opsional.

    Anda boleh mengisinya atau tidak. Selanjutnya anda tinggal klik tombol "Create button"

 

5. Lalu setelah itu anda akan melihat kode HTML, copy lah kode tersebut.

6. Lalu masuk ke Dashboard blogger anda>>Layout>>Add apage element>>html/java script

    lalu paste lah kode tersebut dan save.

7. Anda akan lihat seperti ini :

Read More..

Membuat posting terkait (Related Post)

Baik sekarang kita coba meniru detik.com lagi. Sebagai pemilik blog kita pasti tidak mau begitu saja kehilangan pembaca kita. Nah salah satu yang dapat membuat pembaca betah melihat blog kita karena mudahnya mendapatkan informasi yang dia butuhkan, salah satunya dengan membuat posting berkaitan.

Posting berkaitan disamping mempermudah pembaca blog kita dalam mencari artikel yang mereka butuhkan juga akan menambah page views dari blog kita.

Nah punya 2 keuntungan kan. Widget ini merupakan daftar artikel terkait berdasarkan Label yang sama, bukan isi yang sama. Tapi kurang lebih sama. Untuk membuatnya anda dapat mencoba langkah - langkah di bawah ini.

Berikut langkah - langkahnya :

• Pertama - tama masuk ke Layout > Edit HTML
• Jangan lupa untuk back up dulu dengan Download Full Template untuk menghindari hal - hal yang tidak di inginkan.
• Tick Expand Widget Template
• Lalu cari kode berikut :

<data:post.body/>

• Paste kan kode berikut tepat di bawahnya :

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

<div  class='similiar'>

<span class='box'>

<div class='widget-content'>

<h3>Related  Posts</h3>

<div  id='data2007'/><br/><br/>

<script  type='text/javascript'>
var homeUrl3 =  &quot;<data:blog.homepageUrl/>&quot;;

var  maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels =  10;

maxNumberOfPostsPerLabel  = 6;

maxNumberOfLabels = 100;

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>

</span></div>

</b:if>

• Simpan layout

Jumlah Label dan artikel yang akan muncul anda bisa atur.Caranya yaitu  ubah maxNumberOfLabels untuk mengganti jumlah label yang muncul.

Ubah maxNumberOfPostsPerLabel untuk mengganti jumlah label yang muncul. Yang perlu anda perhatikan adalah anda harus menambahkan satu pada jumlah artikel yang ingin ditampilkan. Jadi, kalau ingin memunculkan enam artikel, maka angka yang harus dimasukin di maxNumberOfPostsPerLabel adalah tujuh.


Selamat mencoba!!!

Read More..

Menyingkat Posting dengan "Read More"

Nah sekarang mari kita coba untuk meniru detik.com dengan "Read More". Postingan di detik.com terlihat professional karena suatu postingan tidak terlihat memanjang karena di potong oleh "Read More".

Jadi kalau kita ingin melihat isi dari postingan kita dapat klik judul postingan untuk mendapatkan artikel yang lengkap. Nah sudah mengerti kan apa itu "Read More". Sekarang mari kita coba membuat "Read More" pada blog kita, agar blog kita tidak panjang karena banyaknya artikel yang di tulis.

Berikut langkah - langkahnya :

• Temukan kode berikut :

<div  class='post-header-line-1'/>

  <div  class='post-body'>

• Lalu anda ubah menjadi seperti ini :

<div  class='post-header-line-1'/>

  <div class='post-body'>

 

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

 

  <a  expr:href='data:post.url'>Read More......</a>

  </b:if>

 

  <div style='clear: both;'/> <!-- clear for  photos floats -->

  </div>


Kode yang bercetak tebal adalah Kode yang anda tambahkan, untuk bacaan "Read More" bisa anda ganti dengan yang anda suka.

Nah sekarang menerapkannya pada postingan..

Lakukan seperti ini :

• Pilih bagian mana yang anda ingin potong
• Lalu setelah pada bagian yang ingin anda potong, tambahkan

 <span class="fullpost">

• Setelah itu pada bagian akhir tambahkan :

</span>

• Selesai....silahkan coba...
  

Read More..