Tampilkan postingan dengan label Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Cara Membuat Related Post Widget di Blogspot

|0 komentar

Pada Sharing Blog's kali ini saya akan membuat tutorial tentang cara membuat related post widget . Membuat related post bukan hanya monopoli pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blog mereka.  Tidak Seperti WordPress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot prinsip ini menggunakan pemanfaatan dari Label saat kita posting. Related Post akan menunjukkan posting mana saja yang mempunyai label sama.

 

Yuk kita langsung aja bahas Cara Membuat Related PostWidget di Blogspot
  • Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML
  • Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
  • Masukkan kode script berikut sesudah tag <head> dan sebelum tag </head> seperti dibawah ini:
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
  • Kemudian cari kode widget seperti dibawah ini
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
  • Pada Script diatas, tambahkan script yang dicetak tebal seperti dibawah ini
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;
max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
  • Save template

  • kemudian buka Layout -> Page Elements dan add a new HTML/Javascript widget. beri judul atau title Title Related Post. kemudian copy paste script di bawah ini pada kotak yg disediakan :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
  • Sekarang kembali lagi ke Layout -> Edit HTML, centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan, kemudian  cari HTML/Javascript widget Related Post yang kita add. Tambahkan baris yang berwarna merah seperti dibawah ini :

<b:widget id='HTML13' locked='false' title='Related Post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
  • Klik Save dan lihat hasilnya.

Cara Setting Custom Domain di Blogspot

|0 komentar

Pembahasan Cara Setting Custom Domain di blogspot ini akan memulai lagi. setelah Sekian lama blog ini membahas tentang tutorial atau tips dan trik wordpress. Pada  kali ini saya akan membahas tahap demi tahap tentang  bagaimana cara setting custom domain di blogspot.
Custom domain adalah nama domain dengan TLD yang kita pilih untuk mempersingkat url pada blogspot kita.  kita bisa memilih salah satu dari sekian banyak TLD berbayar  (Top Level Domain) semisal .com, .net, info, .org dan lain2. selain itu ada pula beberapa yang menyediakan domain ini secara gratis, misalnya .co.cc dan co.nr.  yuk kita mulai ….


Cara Setting Custom Domain di Blogspot

Ada 4 langkah dalam tutorial blogspot ini yang perlu dilakukan untuk melakukan setting custom domain di blogspot
1.  Registrasi Domain.
Pertama kali adalah memilih dan registrasi nama domain yang sesuai. Sebaiknya memilih nama domain yang sesuai dengan konten blog anda. Banyak tempat yang bisa anda pilih untuk melakukan pembelian domain name ini (registrar). Tentang tatacara atau prosedur registrasi domain,  anda bisa meminta bantuan dari support masing2 registrar.
2. DNS Management
Jika anda tidak memiliki hosting sendiri, ada beberapa layanan dns management gratisan yang bisa anda pilih. Saya sendiri merekomendasikan DNSpark.
  • Registrasi ke dnspark disini
  • isi semua formulir dengan data2 anda
  • setelah semua proses registrasi, login ke kesini.
  • Kemudian pada Configuration Menu -> pilih DNS Hosting -> Add Domains
  • Pilih yang no 2 yaitu Enter a domain:
  • Kemudian pada Enter new domain: masukan nama domain kita tanpa www, misal belajarngeblog.com, seperti gambar dibawah. (klik gambar untuk zoom)

  • Lalu klik add now untuk menyimpan perubahan
  • Selanjutnya klik DNS Hosting -> Edit Domains lalu klik nama domain anda

  • Setelah itu dibagian Add Records, pada kolom Type, ganti dengan CNAME, pada kolom Alias Name isi dengan www, lalu pada kolom Destination Name diisi dengan ghs.google.com. untuk lebih jelasnya, lihat gambar dibawah :

  • Lalu jangan lupa klik update all untuk menyimpan perubahan
  • Sampe disini, langkah2 di dnspark.net sudah selesai.
3. Manage Name Server
Langkah selanjutnya dalam tutorial blogspot ini adalah mengarahkan nameserver domain baru anda tadi ke nameserver dnspark.net. Setiap domain registrar kadang mempunyai cara yang berbeda untuk melakukan setting name server ini. Saya akan memberikan contoh setting pada domain registrar saya, mudah2an settingnya sama dengan anda

- Login ke domain registrar anda, kemudian cari link yng menuju ke domain management, akan tampak seperti gambar dibawah ini
 

- Jika setting anda berbeda dari gambar diatas, mudah saja, yang penting anda memasukkan setting name server sebagai berikut
Primary nameserver       :   ns1.dnspark.net
Secondary nameserver  :   ns2.dnspark.net

- Jika masih mengalami kesulitan, anda bisa minta tolong support registrar untuk merubah name server tersebut

4. Setting Pengalihan Domain pada Blogger
Langkah selanjutnya dari Setting Custom Domain ini adalah melakukan pengalihan domain blogspot pada account blogger anda ke custom domain
- Login ke Blogger disini http://draft.blogger.com
- Pada Dashboard Klik Settings >> Publishing.
- lalu pada halamnan publishing tersebut, klik Switch to Custom Domain, lalu klik advanced settings
- kemudian masukkan domain baru anda, lengkap dengan www
- Klik Save Settings untuk menyimpan perubahan
Anda mungkin tidak langsung bisa seketika menggunakan nama domain anda tadi, proses propagasi DNS ( pengalihan nameserver ) dari registrar anda ke dnspark.net  membutuhkan waktu beberapa jam, maksimal 48 jam
Nah, semua tahapan tentang Cara Setting Custom Domain di Blogspot telah selesai anda lakukan, anda kini memiliki blog dengan nama domain anda sendiri.
Semoga bermanfaat..

Cara Membuat Recent Comments Menggunakan JavaScript

|0 komentar

- Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link  Layout kemudian masuk ke Page  Element 

- Klik Add a Gadget dimana anda akan menaruh Recent Comments ini pada blog anda 

- Beri Judul/Tittle Recent Comments atau Komentar terakhir kemudian Copy dan Paste kode JavaScript dibawah ini pada kotak yang disediakan



<script style="text/javascript" src="http://www.belajarngeblog.com/script/showrecentcomments.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http://namabloganda.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

       - Ganti namabloganda dengan nama blog anda sendiri
       - Klik Save dan lihat hasilnya

Semoga tutorial blogspot tentang cara membuat buat recent comments dengan menggunakan Javascript bisa bermanfaat buat anda

Cara Membuat Read More di Blogspot

|0 komentar

Membuat Read More di Blogspot  
- Login ke akun blogger anda, pilih blog yang ingin anda edit, klik link Layout kemudian masuk ke Edit HTML  
- Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.  
- Masukkan kode berikut sebelum tag </head> atau tepat sesudah kode } ]]></b:skin>seperti dibawah ini :
    <style>
    <b:if cond='data:blog.pageType == "item"'>
    span.fullpost {display:inline;}
    <b:else/>
    span.fullpost {display:none;}
    </b:if>
    </style> 

    - Selanjutnya mengatur supaya postingan terpotong, cari kode <p><data:post.body/></p> dalam template anda dan tambahkan kode berikut tepat dibawahnya:
      <b:if cond='data:blog.pageType != "item"'>
      <a expr:href='data:post.url'> Read More..</a>
      </b:if>

       - Nah supaya terpotong, setiap kali anda menulis artikel posting, klik pada bagian artikel dimana anda  pengen tulisan Read More.. muncul, lalu  ketik <span class=”fullpost”> kemudian lanjutkan sisa artikel  sampai selesai, akhiri dengan mengetik  </span>.  Untuk menmbahkan kode ini, ketika menulis artikel, anda harus dalam mode Edit HTML bukan Compose  

      - Tulisan Read More.. seperti yang berwarna merah pada kode diatas, bisa anda ganti dengan tulisan lain seperti Baca Selengkapnya.. atau Lanjut Baca..
        Contoh Penulisan Posting
        Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. <span class=”fullpost”> Dan ini adalah sisa postingan saya yang akan saya sembunyikan dan hanya muncul pada saat post page atau link read more.. diklik </span>
        Hasil akhir posting akan tampak seperti ini :
        Ini adalah awal berita yang ingin saya potong karena terlalu panjang kalo postingan muncul semua, oleh karena itu saya perlu memotong berita sampai disini saja. Read more..

        Cara Memasang Search Engine

        |0 komentar

        Bagi teman blogger yang sudah bergabung dengan adsense tentu bisa memasang widget Adsense for Search, sekaligus bisa digunakan untuk menambah revenue dari google adsense. Tetapi bagi yang belum bergabung atau enggan bergabung dengan Google adsense, ada cara yang bisa dipakai untuk membuat/memunculkan widget search engine ke dalam blogspot kita,mari kita bahas


        Untuk membuat sebuah Search Engine pada sebuah blog, sebenarnya mudah karena anda hanya harus menambahkan/membuatkan sedikit kode HTML, scriptnya seperti ini

        <form id="searchform" action="http://BlogAnda.blogspot.com/search" name="searchform" method="get">
        <input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>



        Tulisan BlogAnda pada kode diatas harus anda ganti tentunya dengan alamat blog anda sendiri yang ingin di pasangi seacrh engine.  Selain itu, ada juga yang bisa anda ubah yaitu di bagian kode –> value=”Search”. Tulisan Search ini adalah tulisan yang akan muncul pada tombol search engine, apabila sobat ingin mengubahnya, silahkan ubah dengan keinginan, contoh : tulisan tersebut ingin di ubah menjadi Cari atau Go.

        Untuk cara pemasangan sama seperti kode HTML lainnya, anda bisa memasukannya melalui add a Gadget pada Page Element di tempat yang anda sukai, kemudian pilih HTML/Javascript. Jangan lupa klik Save