Showing posts with label Tutorial Blogspot. Show all posts
Showing posts with label Tutorial Blogspot. Show all posts

Monday, March 14, 2011

Cara Memasang Related Post di Blogspot


Sempat vakum dari dunia blogging dalam beberapa hari , akhirnya bisa juga share kembali ilmu yang saya dapatkan dari search engine.

Begini,gan ,,, sekitar seminggu yang lalu sempat ada yang request artikel tentang bagaimana cara memasang related post di blogspot , dan inilah yang dia minta.

Selamat untuk perequst, namun mohon maaf,saya lupa siapa namanya.

Sebelumnya kita harus awali dengan pengenalan. Apa itu " Related Post " ? Related Post adalah beberapa artikel yang ditampilkan yang pada dasarnya memang terkait dengan artikel yang sedang dibaca oleh pembaca blog atau website.

Sebagai contoh , artikel yang anda baca adalah " Cara Memasang Related Post di Blogspot " , maka pada related post akan terdaftar beberapa artikel yang terkait dengan artikel tersebut pada related post yang sedang kita bahas ini, contoh artikel yang berkaitan yaitu " Cara Memasang Headline News Pada Blogspot " ... terus pertanyaannya kenapa dikatakan Terkait dengan postingan yang saya baca ? karena artikel yang saya baca dengan artikel yang terlihat pada related post biasanya memiliki isi yang hampir sama atau judul, tema, ataupun tag sangat berkaitan.

Next, kita lanjutkan ke point pembahasan , ikuti langkah-langkah berikut ini :

  1. Login dahulu dengan Akun asli anda.
  2. Pada dasbor, Pilih Rancangan - Edit HTML.
  3. Jangan lupa backup template anda (Download Template Lengkap).
  4. Lalu centang pada check box Expand Template Widget
  5. Kemudian cari kode berikut :
  6. <data:post.body/>
  7. Kemudian paste kode berikut di bawah kode yang berwarna merah di atas :

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H2>Related Post</H2>
    <div class='rbbox'>
    <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
    <div id='blogipank'/>
    <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;blogipank&#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>
    <script type="text/javascript">RelPost();</script>
    </div>
    </b:if>

  8. Jika sudah , Tekan SIMPAN TEMPLATE atau SAVE

Semoga berhasil , dan berikan komentar untuk artikel ini :)

Cara Memasang Related Post di Blogspot


Sempat vakum dari dunia blogging dalam beberapa hari , akhirnya bisa juga share kembali ilmu yang saya dapatkan dari search engine.

Begini,gan ,,, sekitar seminggu yang lalu sempat ada yang request artikel tentang bagaimana cara memasang related post di blogspot , dan inilah yang dia minta.

Selamat untuk perequst, namun mohon maaf,saya lupa siapa namanya.

Sebelumnya kita harus awali dengan pengenalan. Apa itu " Related Post " ? Related Post adalah beberapa artikel yang ditampilkan yang pada dasarnya memang terkait dengan artikel yang sedang dibaca oleh pembaca blog atau website.

Sebagai contoh , artikel yang anda baca adalah " Cara Memasang Related Post di Blogspot " , maka pada related post akan terdaftar beberapa artikel yang terkait dengan artikel tersebut pada related post yang sedang kita bahas ini, contoh artikel yang berkaitan yaitu " Cara Memasang Headline News Pada Blogspot " ... terus pertanyaannya kenapa dikatakan Terkait dengan postingan yang saya baca ? karena artikel yang saya baca dengan artikel yang terlihat pada related post biasanya memiliki isi yang hampir sama atau judul, tema, ataupun tag sangat berkaitan.

Next, kita lanjutkan ke point pembahasan , ikuti langkah-langkah berikut ini :

  1. Login dahulu dengan Akun asli anda.
  2. Pada dasbor, Pilih Rancangan - Edit HTML.
  3. Jangan lupa backup template anda (Download Template Lengkap).
  4. Lalu centang pada check box Expand Template Widget
  5. Kemudian cari kode berikut :
  6. <data:post.body/>
  7. Kemudian paste kode berikut di bawah kode yang berwarna merah di atas :

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <H2>Related Post</H2>
    <div class='rbbox'>
    <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
    <div id='blogipank'/>
    <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;blogipank&#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>
    <script type="text/javascript">RelPost();</script>
    </div>
    </b:if>

  8. Jika sudah , Tekan SIMPAN TEMPLATE atau SAVE

Semoga berhasil , dan berikan komentar untuk artikel ini :)

Saturday, February 12, 2011

Cara Membuat Iklan Melayang dengan Tombol Close

Mungkin rekan blogger sudah pernah melihat tutorial ini sebelumnya di blog lain, setahu saya ada yang lebih rumit menggunakan banyak script kode html, tapi sekarang sobat blogger semua bisa dengan mudah membuatnya. Di sini saya akan mencoba untuk memberikan tips yang lebih mudah dan sangat sederhaba bahkan bagi anda blogger yang baru mengenal pengkodean berupa html,javascript,dll pasti bisa melakukannya.
Oke gan,lanjut ke langkah-langkah berikut :

 
  1. Login Ke Blogger.com dengan Akun dan Password anda tentunya
  2. Masuk ke Tab Rancangan
  3. Pilih Elemen Laman
  4. Kemudian Tambah Gadget Pilih dengan memilih HTML / JAVASCRIPT
  5. Dan Copy dan Paste kode di bawah ini kedalamnyaWindow yang terbuka

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWq7Q186Puq3BxzCQeZIS_W38LdubVqRH2XSaWorqmIsGOYJEGTet_E81a-niZ4BFJd8QX0-dpycBXoesYcNWzR7xehOB_sC_kJuchXwJjeP34AB3VXSaN_cZD36nt4CgvUjgSSS7ZjdQ/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWq7Q186Puq3BxzCQeZIS_W38LdubVqRH2XSaWorqmIsGOYJEGTet_E81a-niZ4BFJd8QX0-dpycBXoesYcNWzR7xehOB_sC_kJuchXwJjeP34AB3VXSaN_cZD36nt4CgvUjgSSS7ZjdQ/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>


<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukkan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>


    6. Simpan

Mudah bukan ?
Good Luck !!! Pasti berhasil :)

Monday, January 17, 2011

Membuat Rating pada Setiap Postingan


Beberapa hari yang lalu ,Sahabat Blogger saya menanyakan bagaimana cara menambahkan Rating pada setiap Postingan,sebenarnya sih mudah,tapi lebih baik saya posting saja cara membuatnya.

Blogger memiliki beberapa kelemahan dalam hal fitur yang ada di Postingan, agar

pengujung Blog dapat memberikan rating atau penilaian terhadap isi postingan ,maka kita bisa menambahkan fitur rating muncul pada setiap postingan.

Berikut langkah-langkahnya

1.SIGN IN ke situs Blogger.com

2.Jika telah masuk ke halaman Dashboard, klik link Rancangan,lalu pilih Edit HTML.

3.Berikan tanda ceklist pada opsi Expand Widget templates, lalu pada kolom HTML
temukan kode berikut:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</div>

4.Jika sudah menemukannya,ketikan Script berikut ini di bawahnya

<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS =&#39;http://widgets.outbrain.com/lang_en.js&#39;;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Maka susunanya akan menjadi seperti ini:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS =&#39;http://widgets.outbrain.com/lang_en.js&#39;;</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Lalu klik Save Template

Lalu lihatlah Blog anda,maka bisa dilihat pada setiap postingan sudah ditampilkan rating, anda bisa memilih tipe rating yang dikehendaki.

semoga bermanfaat bagi anda.
Terima kasih :)

Cara Membuat Search Box Pada Blog

Sebelumnya saya sudah pernah share beberapa tutorial blog khususnya blogspot, namun pada kali ini saya akan berbagi lagi tentang cara membuat search box pada blog.

Tahukah anda apa fungsi Search Box ? search box berfungsi sebagai fitur dalam website atau blog yang memudahkan pengunjung atau pembaca untuk menemukan artikel yang diinginkan.
Hampir mirip dengan Search Engine,tapi search box ini dikhususkan untuk mencari artikel hanya pada blog atau website kita sendiri.

Dari banyak tutorial yang saya dapatkan di Search Engine,rata-rata saya menemukan langkah-langkah yang agak rumit,namun pada kali ini saya akan berbagi ilmu dengan langkah yang mudah.
cukup ikuti langkah-langkah berikut ini :

  • Login ke Blogger dengan Email dan Password anda
  • Pilih menu Layout atau Rancangan
  • Klik Tab Page Element atau Elemen Laman
  • Klik Pada Add a Gadget atau Tambah Gadget
  • Pilih HTML/Javascript
  • Masukkan Kode berikut kedalam kotak yang disediakan
    <form action="http://nama-blogmu.blogspot.com/search"
    method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

    Keterangan:
    Ganti nama-blogmu dengan nama blog kamu.angka 40 menunjukkan panjang kotak (search box) semakin banyak angkanya maka semakin panjang textbox-nya
  • Save,Lalu Lihat blog Anda. 

Jika sudah selesai,coba Search Box anda dengan mengetikkan sebuah kata kunci yang berhubungan dengan title postingan blog anda. Misalnya "Serial Number" , jika berhasil maka search box atau kotak pencarian anda 100% berhasil.

Okey,semoga bermanfaat :)

Wednesday, January 12, 2011

Menimbang Berat Blog / Website Anda


Dalam membuat blog tentunya kita ingin supaya blog kita tampil semenarik, sekreatif dan selengkap mungkin. Tapi mungkin kebanyakan dari kita terlalu bersemangat dalam mempercantik blog, kadang-kadang kita sampai melupakan sesuatu yang penting, yaitu masalah berat (size) dan kecepatan (speed) berapa lama waktu yang dibutuhkan untuk membuka blog kita apalagi kalau yang membuka blog / website kita menggunakan internet dengan kecepatan yang terbatas.

Walaupun blog kita bagus tapi kalo blog kita lola (loading lama) saat dibukanya maka pengunjungpun jadi enggan untuk singgah di blog kita. Kita tentu pernah kan membuka suatu web/blog yang lama, karena terlalu lamanya kita akhirnya tidak jadi membuka web/blog tersebut. Nah tentu kita tidak ingin seperti itu bukan?, blog kita nantinya jadi miskin pengunjung gara-gara lama saat loading.

Nah dibawah ini ada alat untuk mengukur berapa besar ukuran (size) blog dan seberapa cepat loadingnya... Untuk menggunakan alat dibawah ini kita tinggal memasukkan alamat blog yang ingin di cek. Kemudian hasilnya akan langsung keluar. Hasil yang ditampilkan yaitu : Size, Load Time dan Avarege Speed per KB. Yang perlu diperhatikan adalah "Size", karena "Load Time" dan "Avarege Speed per KB" hasilnya akan selalu berubah-ubah. Jika hasil tes menunjukkan blogmu size-nya lebih dari 100 KB, usahakan untuk menguranginya dengan cara mengurangi pernak-pernik yang kurang begitu berguna seperti jam, kalender, dll. Dengan alat ini km juga bisa membandingkan dengan web/blog kepunyaan orang lain.


Untuk menggunakan alat dibawah ini kita hanya memasukkan alamat web/blog yang ingin di ukur.
Kemudian hasilnya akan langsung keluar.
Dengan alat ini km juga bisa membandingkan dengan web/blog kepunyaan orang lain.

Selamat mencoba.

Sumber : http://adesyams.blogspot.com/

Friday, December 31, 2010

Cara Membuat Headline News Di Blogspot


Setelah sekian lama tidak terbitkan postingan dikarenakan kesibukan di hari natal dan tahun baru,kali ini saya sudah punya satu artikel tentang bagaimana cara membuat headline news di blogspot.

Artikel ini saya terbitkan karena ada salah seorang teman blogger,katanya "Bagaimana cara pasang headline news seperti yang ada di hex-v?".

Dari sekian banyak blogger yang ada di seluruh dunia,banyak yang memanfaatkan "headline news" ini untuk memberitahukan berita terkini maupun ucapan dengan tujuan tertentu,dan lain sebagainya.
saya sendiri menggunakan headline news ini dengan tujuan tersebut,agar ada kesan yang berbeda dari pengunjung.

tanpa basa basi,mari ikuti langkah mudah berikut :

  • Pertama,Login ke akun blogspot anda,->Rancangan,->Edit HTML
  • Lalu cari kode ]]></b:skin> , agar lebih mudah gunakan Ctrl+F .
  • Copy scipt dibawah ini, lalu paste diatas code ]]></b:skin> yang tadi :

    #hex_v_sudut {
    position:fixed;_position:relative;top:0px; left:0px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


    Untuk menuntukan posisinya, sobat blogger bisa merubah top:10px; left:10px; .( top=atas, bottom=bawah, right=kanan, left=kiri)


  • Kemudian copy-paste code dibawah ini diatas code </body> :

    <div id="hex_v_sudut">
    &lt;font COLOR="#000000"&gt;
    &lt;B&gt;&lt;MARQUEE onmouseover="this.stop()" onmouseout="this.start()" direction="left" BGCOLOR="#80ff00" width= 100%px scrollamount="3"&gt;
    HEAD LINE NEWS BY HEX-V | SILAHKAN GANTI DENGAN TEXT ANDA
    &lt;/MARQUEE&gt;&lt;/b&gt;&lt;/font&gt;
    </div>


  • Simpan ,dan SELESAI

NOTE :
"Anda dapat mengatur sendiri ukuran headline news anda,anda juga dapat meletakkan gambar dengan asumsi jika gambar anda memiliki ukuran yang besar maka ketebalan headline news anda akan sesuai dengan gambar tsb.Semoga tips blogging ini bermanfaat bagi anda khususnya yang me-request.Trima Kasih :)"

    Monday, December 27, 2010

    Cara Memindahkan Hosting Blogspot Ke Wordpress

    Ada 2 cara yang bisa kita lakukan uintuk memindahkan hosting blog kita dari Blogspot ke Wordpres, sesuai dengan pengalaman Saya ketika di minta untuk memindahkan hosting salah satu blog Partner, dengan domain www.bontobahari-community.co.cc dari Blogspot ke Wordpres, namun Saya tidak akan menceritakan cara Memindahkan Hosting Blogspot Ke Wordpress yang pernah gagal Saya lakukan.

    Langsung saja ke cara yang berhasil Saya lakukan ketika memindahkan hosting www.bontobahari-community.co.cc ke Wordpress.
    Pertama, login ke akun blogger Anda dan klik Pengaturan-klik Ekspor Blog, tujuannya adalah agar semua posting atau artikel dan komentar yang ada pada blogspot bisa pindah ke Wordpress
    Berikutnya, buat dulu blog di Wordpress.com, bukan pada Wordpress.org, setelah blog wordpres Anda sudah jadi, langsung menuju ke menu Tools-Import, lalu pilih Blogger, kemudian Import data Blogger yang tadi Anda Ekspor melalui menu Blogspot.

    Setelah proses Import berhasil, segera eksport kembali hasil Impor tadi, klik Download dan simpan pada komputer Anda.

    Kembali ke akun Wodrpress Anda yang ada di Wordpress.org, langsung menuju ke menu Tools+Import, kemudian Import data Wordpress yang tadi Anda Download dari Wordpress.com, pilih+klik Wordpress (Install the WordPress importer to import posts, pages, comments, custom fields, categories, and tags from a WordPress export file.) tunggu sampai proses upload selesai dengan sempurna.

    Sekarang Hosting Blog Anda yang ada di Blogspot sudah berpindah ke Wordpress, cara di atas juga Saya lakukan ketika memindahkan Hosting blog  www.bontobahari-community.co.cc ke Wordpress.

    Catatan: Pindahkan hosting Blogspot Anda ke Wordpress  dengan Domain yang sama, dengan demikian Anda tidak akan kehilangan pagerank jika sekiranya blog anda pada blogspot sudah mempunyai pagerank.


    Selamat Mencoba dan Semoga berhasil 

    Sumber : Hantu Facebook