Cara Membuat Scroll Pada Komentar Versi 2

Sambil menunggu waktu buka puasa saya ingin share lagi kepada teman-teman semua tentang bagaimana Cara Membuat Scroll Pada Komentar Versi 2. Jika sebelumnya saya juga sudah membuat artikel tentang scroll komentar versi 1 maka ini adalah versi 2 nya.

Beda versi tentu saja akan beda tampilan, jika yang pertama form untuk mengisi komentarnya ikut masuk ke dalam scrollnya, sedangkan yang versi 2 ini form untuk mengisi komentarnya terpisah dengan daftar komentarnya.

lihat pict

Ok, buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Cari kode (harap disesuaikan saja kodenya, karena tiap templates terkadang berbeda):

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;

4. Lalu tambahkan kode ini persis di bawah kode tadi:

/* ========================= Start of new code */
height:400px;
overflow:auto;
border:1px solid grey;
/* ========================= End of new code */

5. Jika sudah, klik Save Templates.

Ket: Untuk merubah tinggi kolom scrollnya silahkan ubah height:400px;

Seperti itulah Cara Membuat Scroll Pada Komentar Versi 2, semoga bisa bermanfaat dan selamat mencoba. Salam...

Menu Stats (Statistic Overview), Saat Ini Sudah Ada di Dashboard Default Blogger

Beberapa perubahan telah banyak dilakukan oleh pihak Blogger (Blogspot) untuk memanjakan para penggunanya, kabar baiknya saat ini Menu Stats sudah bisa kita akses tanpa melalui blogger in draft (http://draft.blogger.com/) lagi :)

lihat pict

Ulasan lengkap tentang Menu Stats ini sudah saya ulas di artikel saya kemarin yaitu Manfaatkan Menu Stats Blogger in Draft Untuk Melihat Perkembangan Statistik Blog, jika teman-teman belum ada yang membacanya, saya sarankan untuk membacanya lagi.

Sedikit ulasan dari saya tentang Menu Stats:

1. Ini adalah menu bawaan dari blogger, sehingga hasil yang ditampilkan lebih akurat,
2. Overview statistik bisa dilihat berdasarkan Overview blog itu sendiri, berdasarkan Post, Traffic Sources (sumber traffic) dan Audience (asal pengunjung),
3. Lalu, statistik blog juga bisa dilihat menurut Now (hari ini/sekarang), Last Day (kemarin), Last Week (minggu kemarin), Last Month (bulan kemarin) dan All Time (setiap waktu).

Selain menu Stats ada juga menu Monetize yang juga telah bisa diakses tanpa harus melalui blogger in draft.

Semoga kedepannya blogger (Blogspot) bisa lebih baik lagi dalam memanjakan penggunanya dengan beragam fasilitasnya, agar kita (blogger pengguna flatform blogspot) bisa nge-Blog dengan maksimal. :) Salam...

Cara Membuat Navigasi Nomor Halaman [Page Number Navigation] - Alternatif

Sebenarnya tutorial seperti ini sudah bejibun bisa teman-teman temukan di Google, termasuk saya sendiri sudah mencobanya dengan keyword: page number atau membuat nomor halaman, hasilnya wow sampai ratusan ribu blog (termasuk punya saya ini, apabila nanti terindeks Google, ngarep.com, hahaha).

Saya juga sudah mencoba beberapa script yang ada di sana (karena saya juga ingin memasangnya di blog ini), tetapi hasilnya Trial n No Respon artinya GA BISA, wkwkw, karena faktor Templates, padahal sudah beberapa templates sudah saya gunakan :(

Makanya sering saya sampaikan di beberapa artikel terdahulu bahwa: Harap disesuaikan saja kodenya, karena tidak semua templates sama, malah terkadang kode yang dimaksud ga ketemu alias ga ada. :D

Ok, buat teman-teman yang mau Membuat Navigasi Nomor Halaman [Page Number Navigation], ini saya ada Alternatif lainnya (insyallah bisa digunakan di templates teman-teman):

Ket: Untuk hasilnya ada perbedaan dengan Page Number yang lain, tentu saja, kan ini alternatif :P Demonya bisa langsung dilihat di dalam blog ini, atau...

lihat pict

1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Lalu cari kode berikut (Ctrl F): <b:include name='nextprev'/>

[Harap disesuaikan saja kodenya, karena tidak semua templates sama],

4. Gantikan kode tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>
<script type="text/javascript">

var blogID = "12345678910";
var home_page = "http://cantik-2013.blogspot.com/";
var pager_max_main = 1;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_prev_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="https://sites.google.com/site/anggasonaanotherbestblog/javascript/page_numbering_v2.js"
type="text/javascript"></script>
</b:if>

Note:

a. Harap di ubah var blog ID nya dengan ID blog teman-teman,
b. Ganti var home_page dengan alamat URL blog teman-teman,
c. var pager_max_main = 1 ini adalah kode untuk menampilkan seberapa banyak artikel dalam 1 halaman, bisa diganti dengan 2, 3, 5 terserah teman-teman.

5. Jika sudah dikerjakan dengan teliti, maka sekarang klik Save Templates.

Seperti itulah Cara Membuat Navigasi Nomor Halaman [Page Number Navigation] - Alternatif, semoga bisa terpasang dengan baik di blog teman-teman semua, selamat mencoba. Salam.

Cara Membuat Form Komentar Klasik di Blogspot

Bagian kotak komentar merupakan salah satu bagian penting dalam sebuah blog yang harus diperhatikan, karena di kotak komentar inilah akan terjadi sebuah dialog antara admin dengan para pengunjung (komentator), bisa tanya jawab, bisa juga berdebat di sana dan lain sebagainya.

Menurut perhatian saya, bagian form komentar di blogspot inilah yang sering di edit (ditambah ini dan itu, di edit sana dan sini), karena memang jika dibandingkan dengan blog flatform wordpress akan terlihat jauh sekali perbedaannya, makanya harus di edit dulu agar hasilnya bisa maksimal.

Beberapa hal yang biasa di edit pada form komentar:

1. Verifikasi kata yang tidak muncul,
2. Membuat scroll di kotak komentar,
3. Menambah fungsi Reply,
4. Membedakan komentar admin dengan pengunjung dengan warna,
5. Memberi nomor urut di setiap komentar,
6. Menampilkan form komentar di bawah postingan blog,
7. Menampilkan Avatar Komentator (Blank/Default)

Nah kali ini saya ingin share lagi kepada teman-teman yang masih seputar from komentar yaitu menambahkan link untuk Form Komentar Klasik, ini adalah sebagai pilihan ketika teman-teman ingin berkomentar, jadi bisa komentar di form komentar yang baru ataupun di form klasik sama saja :)

lihat pict

hasil dari form komentar klasik

Ok, bagi teman-teman yang mau membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Expand Templates Widget,
3. Lalu cari kode berikut (harap disesuaikan saja karena terkadang tiap templates berbeda):

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>

4. Selanjutnya tambahkan kode di bawah ini persis ada di bawah kode di atas:

[ <a expr:href='&quot; http://www.blogger.com/comment.g?blogID=12345678910&amp;amp;postID=&quot; +data:post.id+ &quot;&amp;isPopup=true&quot;' onclick='javascript:window.open(this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' rel='nofollow'><b>Form Komentar Klasik</b></a> ]

5. Jika sudah sekarang klik Save Templates dan lihat hasilnya.

Note: Untuk Id blog harap diganti dengan ID blog teman-teman masing-masing (ganti tulisan yang berwarna merah).

Seperti itulah Cara Membuat Form Komentar Klasik di Blogspot, semoga bisa bermanfaat dan selamat mencoba, salam.

Membuat Back To Top Dengan Smoothscroll jQuery

Back To Top merupakan sebuah aplikasi tambahan (widget/plugin) untuk ditempatkan di dalam sebuah blog dan sepertinya saat ini memang sudah tidak asing lagi di telinga kita dan mungkin saja kita sendiri sudah sering menjumpai widget Back To Top ini.

[image src: deconstructioncode.blogspot.com]

Kali ini saya ingin share kepada teman-teman semua tentang bagaimana Membuat Back To Top Dengan Smoothscroll jQuery, sedikit berbeda memang dengan cara memuat Back To Top yang biasanya kita jumpai (tanpa edit HTML).

Tapi ini kita harus sedikit mengutak atik templates namun hasilnya bisa saya katakan sedikit lebih baik, karena ini adalah Smoothscroll jQuery, ketika kita klik tulisan Back To Top (silahkan di coba di dalam blog ini) maka dia akan perlahan-lahan naik ke atas dengan smooth (lembut dan santai).

Fungsi:

Memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tulisan "Back To Top".

Buat teman-teman yang ingin membuatnya silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Cari kode berikut: </head> lalu copy kan script jQuery di bawah ini persis berada di atas kode tadi:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

4. Lalu lanjutkan dengan menaruh kode javascript di bawah ini persis di bawah script jQuery tadi:

<!-- Back To Top -->
<script src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/back-to-top.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
var el = $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function() {
$('#top-link').topLink({
min: 300,
fadeSpeed: 500
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>
<!-- End Back To Top -->

5. Terus cari kode <body> dan gantikan dengan <body id='top'>

6. Lanjutkan dengan mencari kode ]]></b:skin> dan masukkan kode CSS di bawah ini di atas kode ]]></b:skin>

#top-link {display:none;font-weight:bold;font-family:tahoma;font-size:10px;width:70px;background:#000;color:#fff;text-shadow:1px 1px 1px #666;font-size:11px;position:fixed;right:-20px;bottom:150px;padding:5px;-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-webkit-border-radius: 4px;-moz-border-radius: 4px; border-radius: 4px;}

7. Terus cari kode </body> dan masukkan kode HTML di bawah ini persis ada di atas kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

8. Jika sudah dikerjakan dengan benar, maka klik Save Templates.

Note:

1. Apabila sudah ada Script jquery di dalam blog maka script jQuery di atas tidak usah di masukkan (biar tidak double), lanjutkan saja dengan langkah selanjutnya,
2. Untuk merubah warna, posisi dan tulisan cek di di bagian tulisan yang saya beri warna HIJAU.

Referensi:

- Deconstructioncode [http://deconstructioncode.blogspot.com/2009/04/back-to-top-dengan-smoothscroll-jquery.html]
- David Walsh Blog [http://davidwalsh.name/jquery-top-link]
- Riky Rizkiyana [http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html]

Seperti itulah Cara Membuat Back To Top Dengan Smoothscroll jQuery, semoga bisa teman-teman coba di blognya dan bisa bermanfaat. Salam.

Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog

Menampilkan Artikel Terkait atau Related Post sekarang sudah menjadi hal yang umum ada di setiap Blog, sepertinya keberadaan Artikel Terkait ini sudah tidak bisa dipisahkan lagi dengan Blog.

Karena dengan salah satu cara inilah Page View blog akan meningkat (dampaknya akan kepada Alexa Ranking) lalu dengan cara ini pula (read: Artikel Terkait) para pengunjung Blog akan bisa menemukan artikel lainya yang masih dalam 1 kategori atau label.

Jika sebelumnya saya juga telah membuat artikel tentang Artikel Terkait (baca lagi, Artikel Terkait versi 1 dan Versi 2), maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog.

Sidebar blog merupakan salah satu tempat yang saya pikir sangat strategis apabila dipasang dengan Artikel Terkait ini karena akan terlihat terlebih dahulu ketimbang ditaruh di bawah postingan (tetapi dua cara itu sama baiknya, selera).

lihat pict

Ok, bagi teman-teman yang mau membuat Artikel Terkait di Sidebar Blog, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode </head> dan copy kode di bawah ini lalu pastekan persis di atas kode tadi:

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

4. Lanjutkan dengan mencari kode berikut:

<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 != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

5. Ganti kode tersebut dengan kode di bawah 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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Ket: Sebelum di save kode max-results=10 (ini adalah kode untuk menampilkan berapa banyak artikel yang akan ditampilkan perlabel), bisa teman-teman ubah semisal hanya 5 atau 8.

6. Save Templates (belum selesai...)

7. Selanjutnya, masuk ke Page Element >> Add a Gadget >> HTML/JavaScript >> copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript:

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

8. Jika sudah klik Save dan lihat semua perubahannya.

Seperti itulah Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, semoga ini bisa bermanfaat dan selamat mencoba. Salam

Sembunyikan Widget [Sidebar/Footer] Solusi Mempercepat Loading di Halaman Tertentu

Tentunya kita semua tahu bahwa salah satu faktor penting dalam Nge-blog adalah Loading Page. Makanya pada hari ini saya ingin share tentang Sembunyikan Widget [Sidebar/Footer] Solusi Mempercepat Loading di Halaman Tertentu.

Sebelum melangkah ke bahasan selanjutnya, di sini saya akan bagi ke dalam 2 kategori Loading Page, yang pertama Loading Halaman Home Page dan Loading Halaman Posting (Post Page).

1. Home Page:
Pada halaman Home Page biasanya akan terisi oleh beberapa postingan dengan beberapa widget di sidebar ataupun footer dan umumnya di halaman Home Page ini semuanya akan ditampilkan.

2. Post Page:
Pada halaman ini akan terdapat 1 artikel (read full) dan tetap akan dilengkapi oleh beberapa widget di sidebar/footer.

Masalahnya tidak jarang saya menemukan pada halaman Post Page ini tampilannya akan sama dengan Home Page, artinya semua widget tetap ditampilkan baik itu widget buku tamu, facebook, follower dan lain sebagainya dengan posisi baik di sidebar ataupun footer.

Fakta:

1. Beberapa widget (contohnya seperti di atas) dibutuhkan waktu yang cukup lama untuk loading, apalagi widget tersebut telah digunakan oleh banyak pengguna,
2. Search engine misal Google hanya memiliki waktu 0, 0003 sekian detik untuk mengindeks semua halaman posting ketika ada pengunjung yang mengetikkan keyword untuk mencari artikel,
3. Halaman posting adalah halaman penting (artikel yang berisi ilmu).

Ilustrasi:

Ketika para pengunjung datang dari search engine (Google / Yahoo)dan mengetikkan suatu keyword lalu menemukan artikelnya maka dia akan di bawa ke Halaman Postingan 'BUKAN' halaman Home Page.

Nah, bisa kita tarik kesimpulan dari ilustrasi tersebut, ketika ada pengunjung dari search engine lalu menuju ke halaman posting blog kita di mana dia harus menunggu lama hanya untuk membuka 1 halaman posting yang ingin dia baca tetapi lamanya setengah mati (karena blog harus nge-Load semua tampilan baik itu widget dan lain sebagainya).

Satu kalimat yang bisa saya sampaikan: Close that page and change the one with another page !!! :)

Nah, sungguh disayangkan bukan apabila mereka tidak jadi membaca artikel lalu langsung CLOSE PAGE hanya karena harus menunggu lama loading page nya?

Ok, saran saya di sini khusus pada Halaman Post Page tampilkanlah beberapa widget saja yang dianggap penting (apabila tidak mau menghapusnya), caranya dengan Sembunyikan Widget:

1. Pilih dulu widget-widget mana saja yang akan di tampilkan di halaman yang dirasa penting ditampilkan di Halaman Post Page, misal cukup Link Sahabat, Follower dan Buku Tamu saja.
2. Sembunyikan widget tersebut agar blog tidak perlu nge-load widget yang lainnya dengan menambahkan kode seperti di bawah ini:

Login Blogspot >> Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget >> lalu cari kata yang sesuai dengan judul widget yang ada di sidebar atau footer, misal Buku Tamu:

Tambahkan kode yang berwarna merah saja >>

- Hanya tampil di halaman Home Page:

<b:widget id='HTML1' locked='false' title='Buku Tamu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>

<b:include name='quickedit'/>
</b:includable>

- Hanya tampil di halaman Post Page:

<b:widget id='HTML1' locked='false' title='Buku Tamu' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>

<b:include name='quickedit'/>
</b:includable>

Untuk tampil di halaman keduanya cukup defaut saja, tidak usah ditambahkan kode.

3. Silahkan disesuaikan saja dengan masing-masing widget yang ada diblog teman-teman, jika sudah klik save templates dan lihat perubahannya ketika teman-teman membuka halaman Home Page dengan halaman Post Page.

Blog memang milik kita masing-masing (idealismenya adalah terserah kita mau diapakan), tapi saya fikir yang menikmati bukan kita saja sebagai owner tetapi banyak orang lain dari berbagai belahan dunia, mereka butuh kenyamanan ketika berkunjung, salah satunya adalah Loading Page yang sampai sekarang ini masih disepelekan oleh sebagian banyak blogger.

Semoga informasi ini bisa bermanfaat untuk teman-teman semuanya, salam.

5 Situs Pilihan Free Templates For Blogger

Met malam teman-teman, hari ini saya ingin share kepada teman-teman semua seputar Free Templates untuk Blogger (Blogspot). 5 situs pilihan yang saya maksud ini adalah berdasarkan hasil pencarian yang di ambil dari halaman pertama search engine Google dan yang umum dihampiri oleh pengguna Blogspot.

Koleksi templates dari situs-situs ini bisa saya katakan bagus semua dan dengan berbagai macam kategori, mulai dari 1 kolom, 2 kolom dan sebagainya yang nantinya bisa teman-teman pilih sendiri.

Ok, inilah 5 Situs Pilihan Free Templates For Blogger:

1. ZOOM Templates
[http://www.zoomtemplate.com/]

2. BTemplates
[http://btemplates.com/]

3. Blog Templates 4U
[http://blogtemplate4u.com/]

4. Blog Templates Free
[http://www.bloggertemplatesfree.com/]

5. Free Blogger Templates [http://www.forfreebloggertemplates.com/]

Itulah 5 Situs Pilihan Free Templates For Blogger, sebenarnya masih banyak yang lainnya dan teman-teman bisa mencarinya sendiri. Ok, semoga informasi ini dapat membantu teman-teman mencari templates untuk blognya, salam.

Transfer Account Blogger Berbeda Menjadi 1 Account [Manajemen Transfer Blogger]

Transfer Account Blogger Berbeda Menjadi 1 Account - Memiliki banyak account blogger sudah menjadi hal yang biasa saat ini, terkadang sebelum kita punya account yang dianggap itu account utama sebelumnya kita telah membuat account blog yang lainnya [tentunya dengan alamat email yang berbeda] entah itu dengan topik yang sama ataupun berbeda pula.

Tentu saja ketika kita memiliki banyak account berbeda hal itu saya rasa akan sedikit merepotkan karena kita harus berganti account >> logout terlebih dahulu lalu log in lagi dengan alamat email dan password yang beda, atau bisa juga dengan membuka sebuah browser yang berbeda. Bagaimana, repot juga bukan? :)

Nah, ini ada cara untuk mengatasi masalah tersebut yaitu dengan Fasilitas Transfer Blogger:

Ilustrasi:

Misal, kita ada 2 account berbeda anggap saja itu account Blog 1 dan 2, dan rencananya kita ingin mentransfer Blog 1 [blog yang akan ditransfer] tadi ke Blog 2 [blog yang akan menjadi admin utama].

Harap PERHATIKAN di sini bahwa Blog 1 ini yang akan kita transfer dan yang akan memberi kuasa penuh kepada Blog 2 untuk menjadi admin selanjutnya, lalu secara otomatis Blog 2 nantinya akan memiliki kuasa penuh untuk memanajemen Blog 1.

1. Login ke account Blog yang akan kita transfer (misal sesuai ilustrasi login dengan Blog 1),

2. Pada menu Dashboard klik Pengaturan >> Izin >> Menambah Penulis,

lihat pict

3. Setelah kita klik "Menambah Penulis" maka akan ada menu baru yang mengharuskan kita mengundang Penulis baru (misal Blog 2) dengan cara Invite/undang via Email >> masukkan alamat email pengguna Blog 2 lalu klik "Undang",

lihat pict

4. Pada langkah yang keempat ini, silahkan di cek pada Inbox Email Blog 2, akan ada email Undangan dari Blog 1 >> Klik link yang ada di email tadi untuk masuk ke bagian selanjutnya (ini tanda bahwa kita setuju untuk berkontribusi di Blog 1),

lihat pict

5. Setelah link tersebut diklik maka akan kita akan dibawah ke jendela baru yaitu untuk memasukkan password (misal agar mudah mengingatnya gunakan Password yang sama "password Blog 2"), lalu klik "Accept Invitation", (tunggu sebentar untuk loading Redirecting),

lihat pict

6. Lalu coba lihat di Dashboard maka account blog 1 tadi sudah masuk :D

lihat pict (yang dilingkari warna hijau)

7. Langkah selanjutnya silahkan masuk kembali ke account blogger Blog 1 untuk mengatur Privasi Admin (refresh dulu untuk melihat perubahan), lalu silahkan klik pada "Privilese Admin" pada account baru tadi (Blog 2) lalu lanjutkan dengan klik "BERIKAN HAK ISTIMEWA SETINGKAT ADMIN"

lihat pict

8. Setelah diklik maka account baru tadi (Blog 2) sekarang sudah bisa menjadi admin dengan kuasa penuh untuk memanajemen account Blog 1, lalu teman-teman bisa menghapus dengan cara klik "Hapus" pada account yang lama (Blog 1) agar Blog 1 itu hanya memiliki 1 admin saja (Blog 2).

9. Selesai.

Bagaimana teman-teman, mudah bukan? Ok, seperti itulah Cara Transfer Account Blogger Berbeda Menjadi 1 Account [Manajemen Transfer Blogger]. Semoga informasi ini bisa bermanfaat dan selamat mencoba, salam.

Pasang Tool Encode - Decode (Converter HTML) di Blog

Ngeblog tentu saja tidak akan jauh-jauh dengan yang namanya kode kode dan kode, baik itu HTML, css ataupun Javascript. Nah, kali ini saya akan share kepada teman-teman semua sebuah TOOL gadget yang saya rasa Penting ada di dalam blog (ini buat yang senang otak atik blog) yaitu Encode Decode (Converter HTML).

Seperti yang kita tahu dan yang selama ini kita lakukan, ketika kita akan memposting suatu kode HTML/Javascript ataupun mengedit kode CSS templates tentu saja ada beberapa kode yang HARUS di phrase atau di convert terlebih dahulu agar kode tersebut bisa terlihat atau berjalan dengan baik, misal kode script Iklan PPC (apabila ingin dipasang di dalam postingan).

Nah daripada kita bolak balik membuka situs yang menyediakan jasa Encode Decode (Convert) ini alangkah lebih baiknya kita pasang sendiri Tool ini di dalam blog kita pribadi.

Ok, tool gadget ini adalah buatan Google dan setelah saya pasang di blog saya sendiri ternyata tidak membuat load blog menjadi lama, jadi jangan khawatir apabila teman-teman ingin memasang tool ini di dalam blognya.

1. Silahkan teman-teman menuju ke link berikut ini: [gmodules.com]

2. Lalu editlah beberapa option untuk merubah tampilan gadgetnya sesuai dengan selera teman-teman,

lihat pict

3. Ambil kode tool nya dengan klik "Dapatkan Kode",

4. Jika sudah, maka tool ini bisa teman-teman taruh di dalam postingan (buat postingan baru/halaman baru) atau bisa taruh di sidebar widget seperti milik saya ini.

Seperti itulah teman-teman bagaimana cara Pasang Tool Encode - Decode (Convert HTML) di Blog, semoga saja informasi ini bisa membuat blog teman-teman lebih lengkap dan tentunya tidak capek lagi harus bolak balik ke situs penyedia Convert HTML. Salam.

Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon

Pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang bagaimana Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon di Blog, dan ini juga menjadi salah satu tutorial by request dari salah satu sahabat blogger yaitu Endiglobs.

Ok, sebenarnya ini bukanlah suatu keharusan untuk di ganti, tetapi kadang-kadang sebagian blogger lebih menyukai icon ketimbang sebuah teks karena tentu saja blog akan terlihat lebih menarik karena ada navigasi berupa icon, khususnya pada Posting Baru, Posting Lama dan Home.

Langkah-langkah menggantinya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Ganti beberapa kode seperti di bawah ini:

* Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut: <data:newerPageTitle/>

lalu ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Previous.png'/>

* Untuk mengganti tulisan Posting Lama (Older Post) cari kode berikut: <data:olderPageTitle/>

lalu ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Next.png'/>

* Untuk mengganti tulisan Home (Home Page) cari kode berikut: <data:homeMsg/>

lalu ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/sphericalcons/48/home.png'/>

4. Untuk icon silahkan di ganti dengan selera masing-masing dan bisa dicari di sini.

5. Jika sudah tinggal klik Save Templates.

Seperti itulah Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon, semoga bisa bermanfaat untuk membuat lebih menarik blognya dan selamat mencoba, salam.

Cara Membuat Tab View Menu 3 Kolom di Blog

Akhirnya setelah saya berganti rumah (templates) dan menemukan sidebar widget blog agak lebar barulah saya bisa memasang Tab View Menu 3 Kolom ini, dan hasilnya ya seperti yang bisa kita lihat sama-sama disamping kanan blog ini.

Oleh karena itu setelah saya tidak update 3 hari ini, maka pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang bagaimana Cara Membuat Tab View Menu 3 Kolom di Blog.

lihat pict

Sesuai judulnya Tab View Menu 3 Kolom, berarti dalam satu tampilan sidebar widget akan ada 3 buah widget (bisa apa saja, contoh: Buku Tamu, script Top Post atau Komentar, Kumpulan Banner dan sebagainya), cara ini juga akan membuat blog sedikit lebih rapi dan tidak banyak menguras tempat.

Ok, buat teman-teman yang ingin membuat Tab View Menu 3 Kolom ini, silahkan ikuti langkah-langkah di bawah ini:

1. Login ke akun Blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Cari kode berikut: ]]></b:skin>
4. Lalu copy kode di bawah ini dan taruh persis berada di atas kode tadi:

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5. Jika sudah maka lanjutkan dengan mencari kode ini: </head>
6. Lalu copy kode di bawah ini dan pastekan di atas kode tadi:

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

7. Save templates dan lanjutkan ke langkah selanjutnya,

8. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,

9. Copy kode di bawah ini dan masukkan ke dalam konten HTML/Javascript lalu atur (edit) sesuai dengan keterangan masing-masing:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

10. Jika dirasa sudah benar, lalu Save. (Jika dilakukan dengan benar maka hasilnya akan seperti milik saya).

Seperti itulah Cara Membuat Tab View Menu 3 Kolom di Blog, semoga bisa bermanfaat dan selamat mencoba, salam.

Pasang Widget 4 in 1 di Blog [Readers Count, Twitter Follower Count, Total Post dan Comments]

Kali ini saya ingin share kepada teman-teman semua tentang Pasang Widget 4 in 1 di Blog: Readers Count, Twitter Follower Count, Total Post dan Comments. Panjang banget ya judulnya? Habisnya saya bingung dikasih judul apa, jadinya saya tulis lengkap deh :P

Ok, dalam widget ini saya akan menampilkan 4 widget dalam 1 tampilan, artinya akan ada 4 widget yang terintegrasi dalam 1 HTML/Javascript yaitu Readers Count, Twitter Follower Count, Total Post dan Total Comments.

lihat pict

lihat demo di sini

Jika sebelumnya saya juga pernah buat postingan tentang Widget Total Artikel dan Total Komentar di Blogspot maka anggap saja widget kali ini adalah updatenya karena ada tambahan Readers Count dan Twitter Followernya + icon dan tentunya hasil dari jumlah post dan komentarnya lebih akurat, pastinya menarik.

1. Readers Count,
Ini untuk menghitung jumlah pembaca (readers) via email yang telah berlangganan artikel blog teman-teman.

2. Twitter Follower Count,
Ini untuk menghitung jumlah Follower akun Twitter teman-teman,

3. Total Post dan Total Comments,
Ini adalah untuk menghitung jumlah keseluruhan total artikel dan total komentar yang telah masuk ke blog teman-teman.

Bagi teman-teman yang mau memasang Widget 4 in 1 ini, ikuti langkah-langkah di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Page Element >> Add a Gadget >> HTML/Javascript,
3. Copy semua kode di bawah ini dan pastekan ke dalam konten HTML/Javascript:

<div style="width: 330px; background: #fff; padding: 0; margin: 0; border: 0;">
<div name="feed" style="float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/aquaticus/48%20X%2048/feed.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://feeds.feedburner.com/blogspot/rcydk" target="_blank"><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=http://feeds.feedburner.com/blogspot/rcydk'></script> Readers</a></div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="twitter" style="float: left; margin-left: 10px; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/aquaticus/48%20X%2048/twitter.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitter.com/Anggasona" target="_blank"><script type='text/javascript' src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=Anggasona"></script> Followers</a></div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="postagens" style="margin-top: 5px; float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://codigosblog.net/servidor/widget_twitter_feed_post_comment/post-icon.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="http://cantik-2013.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script> Post </div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<div name="comentarios" style="margin-top: 5px; margin-left: 10px; float: left; width: 160px; height: 50px; background: #fff;">
<div name="img" style="float: left; margin: 2px 5px 2px 2px; padding: 0; width: 46px; height: 46px; background: url(http://cdn.iconfinder.net/data/icons/free-3d-social-icons/png/48x48/Orange%20forum.png) no-repeat;"></div>
<div name="contador" style="padding: 6px 0 0 0; margin: 0; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="http://cantik-2013.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount"></script> Comments</div>
<p name="texto" style="padding: 0; margin: -1px 0 0 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif;"></p>
</div>
<span style="float: right; padding: 0; margin: 0;"><small><script language='javascript' type='text/javascript' src='https://sites.google.com/site/anggasonaanotherbestblog/javascript/anggasona_readers_twitter_post_comment_widget1.js'></script></small></span>
</div>
</div>

4. Ganti beberapa keterangan seperti di bawah ini:

- Ganti tulisan warna merah dengan id feedburner teman-teman,
- Ganti tulisan warna biru dengan id Twitter teman-teman,
- Ganti tulisan warna hijau dengan URL blog teman-teman,

Penyesuaian lebar widget dengan tampilan sidebar harap ubah bagian berikut:

- Ubah ukuran width: 330px; untuk merubah lebar kolom/border keseluruhan widget,
- Ubah ukuran width: 160px; untuk merubah lebar per satuan widget (1 widget count),
- Ubah ukuran width: 46px; height: 46px; untuk merubah lebar dan tinggi ikon.

5. Jika sudah selesai, maka tinggal klik save dan lihat hasilnya.

Harap untuk tidak meremove link back widget ini, belajarlah untuk menghargai karya milik orang lain dan tentunya untuk membuat mudah orang lain untuk menemukan dan memasang widget ini juga. Terimakasih

Note:
1. Widget ini akan lebih optimal dipasang pada blog yang memilik rentang sidebar agak lebar,
2. Untuk beberapa kejadian, khusus pada Readers Count terkadang jumlah count nya berubah 0 (no readers) tapi itu cukup dibiarkan saja karena Count ini akan menghitung ulang Jumlah Pembaca via Email dari feedburner teman-teman dan selanjutnya akan normal kembali.

Seperti itulah cara Pasang Widget 4 in 1 di Blog: Readers Count, Twitter Follower Count, Total Post dan Comments. Semoga widget ini bisa bermanfaat untuk aktivitas statistik blog teman-teman dan tentunya bisa membuat blog tampil lebih cantik. Selamat mencoba dan salam.