Cara Membuat Blog Gratis di Blogger

Cara Membuat Blog Gratis di Blogger - Blog yang dulunya berfungsi sebagai tempat berbagi atau  atau diari yang berada di dalam dunia maya (online) kini telah banyak mengalami perubahan fungsi. Di jaman sekarang ini blog juga bisa digunakan untuk mencari uang secara online. 
Banyak sekali layanan blog yang ada saat ini dari yang lokal maupun yang berasal dari luar. Kita sebut saja seperti Blogger, Wordpress, Bravejournal, dan Blog detik. Tapi dari kesemua nama itu, menurut saya hanya Blogger dan Wordpress yang cukup populer di Indonesia. Dari kedua nama tersebut saya rasa blogger yang paling cocok digunakan. Karena selain mudah dalam bahasa pemrogramannya, blogger juga merupakan layanan yang masih berada di dalam kemitraan Google. 
Oke, daripada saya terlalu panjang lebar menjelaskan, sekarang kita lihat saja bagaimana cara membuat blog di blogger. Perhatikan langkah-langkah di bawah ini dengan seksama !
Cara Membuat Blog Gratis di Blogger
Cara Membuat Blog Gratis di Blogger
  • Apabila anda baru saja membuat akun Google/Gmail anda, maka anda akan diminta untuk mengkonfigurasikan profil anda. Cukup klik tombol LANJUTKAN KE BLOGGER. (Kalau anda sudah memiliki akun Google sebelumnya, maka abaikan langkah ini ! )
  • Setelah itu anda akan berada di halaman utama blogger.com. Untuk membuat sebuah blog baru klik tombol bertuliskan BLOG BARU . 
Cara Membuat Blog Gratis di Blogger
  • Nantinya akan muncul sebuah pop up baru, silahkan isikan NAMA BLOG & JUDUL BLOG anda di sana. Bila sudah, klik tombol BUAT BLOG.
Setelah anda menekan tombol BUAT BLOG maka dengan demikian blog anda sudah berhasil dibuat. Langkah selanjutnya adalah membuat artikel untuk blog baru anda tersebut, coba baca disini Cara Membuat Artikel di Blogspot. Anda juga bisa membaca juga lainnya mengenai tutorial untuk blog di bagian atas blog ini, cukup klik label BLOGGING. 
Baiklah, saya rasa demikian artikel mengenai Cara Membuat Blog Gratis di Blogger. Semoga bermanfaat untuk anda ^_^
READ MORE

memuat efek yang lebih untuk Blogger part 3

Ini adalah masa terakhir dari seri bergulir Tak Terbatas untuk Blogger. Aku akan menunjukkan kepada Anda bagaimana untuk menggabungkan Gulir Tak Terbatas Ajax dengan Plugin Jquery lain atau script di halaman Anda.Karena terlalu lama, jadi saya membagi posting ini menjadi 3 bagian dengan rincian sebagai bawah:- Bagian 1: Penggunaan Dasar Scrolling Ajax Jquery dan menerapkannya ke default template Blogger- Bagian 2: Bagaimana menerapkan teknik Scrolling tak terbatas untuk semua template Blogger.- Bagian 3: Kombinasikan plugin ini Jquery dengan plugin lainnya (tata letak plugin seperti Masonry, Isotape, atau sistem komentar Disqus, Google Analytics)

Live DemoBagian 3: Bagaimana untuk menggabungkan plugin yang Tak Terbatas Ajax Gulir dengan plugin Jquer lain atau script.Untuk memahami apa yang disebutkan dalam posting ini, saya sarankan Anda semua untuk membaca bagian 1 dan bagian 2 dari seri ini dulu. Jika Anda sudah familiar dengan plugin bergulir Ajax, Anda dapat melompat ke bagian ini.
Saat ini script bekerja, gulir ke bawah halaman pengguna 1, akan memuat halaman 2. Dalam proses ini, kita memiliki negara sebagai bawah:- Pengguna gulir ke bawah halaman 1;- Pengguna gulir ke bawah ke akhir halaman 1, mulai loading halaman 2;- Memuat halaman 2;- Tampilan halaman 2.
Menurut negara-negara, kita memiliki fungsi untuk menangani setiap langkah sebagai di bawah ini:
 
- BeforePageChange: Apakah dipanggil ketika gulungan pengguna ke halaman berikutnya, tapi sebelum halaman baru dimuat. Kembali palsu dan membatalkan beban jika bukan akhir dari halaman 1, setiap nilai kembali selain palsu akan memungkinkan pagination untuk melanjutkan seperti biasa.- OnPageChange: Apakah yang disebut setiap kali pengguna gulungan ke halaman lain.- OnLoadItems: Apakah yang disebut setiap halaman waktu yang baru dimuat.- OnRenderComplete: Apakah disebut setiap waktu loading halaman baru lengkap dan menunjukkan hasilnya dalam browser.
Script dimasukkan ke dalam setiap halaman (halaman 1, halaman 2 ...) harus dimasukkan ke dalam fungsi-fungsi ini. Kenapa? Karena script yang dimasukkan ke dalam halaman Anda dirancang untuk mengeksekusi ketika beban halaman di browser. Tetapi menggunakan Gulir Tak Terbatas Ajax, Anda jangan me-refresh atau klik tombol apapun di browser untuk menavigasi ke halaman berikutnya. Script pada halaman Anda tidak dipicu. Jadi alasan kita perlu menempatkan script Anda di dalam fungsi-fungsi untuk membuat mereka mengeksekusi pada halaman saat baru dimuat.

    
Jika Anda ingin naskah awal Anda pada waktu pengguna gulir ke bawah ke akhir halaman, memasukkannya ke dalam beforePageChange
    
Jika Anda ingin naskah awal Anda pada saat menggulir ke akhir halaman dan mulai loading halaman 2, masukkan naskah Anda dalam onPageChange
    
Jika Anda ingin naskah Anda mulai dari saat halaman dimuat, memasukkannya ke dalam onLoadItems
    
Jika Anda ingin naskah Anda mulai dari saat halaman penuh memuat dan menunjukkan hasilnya, memasukkannya ke dalam onRenderComplete
Cara menempatkan script di dalam FUNGSI atasAnda dapat lihat ini:

    
jQuery.ias ({
        
container: '# entry-daftar',
        
item: '. entri',
        
pagination: '# blog-pager',
        
berikutnya: '# blog-pager-older-link',
        
loader: 'gambar / loader.gif',
        
onLoadItems: function (item) {
           
Copy dan paste naskah Anda di sini
        
}
      
    
});
- Script Disqus yang menunjukkan jumlah komentar.

    
jQuery.ias ({
        
container: '# entry-daftar',
        
item: '. entri',
        
pagination: '# blog-pager',
        
berikutnya: '# blog-pager-older-link',
        
loader: 'gambar / loader.gif',
        
onLoadItems: function (item) {
            
var disqus_shortname = 'xxxxx';
            
(Function () {
                 
var s = document.createElement ('script'); s.async = true;
                 
s.type = 'text / javascript';
                 
s.src = 'http://' + + disqus_shortname '.disqus.com / count.js';
                 
(Document.getElementsByTagName ('KEPALA') [0] | | document.getElementsByTagName ('BODY') [0]) appendChild (s).;
            
} ());

           
}
      
    
});
Script yang ditandai dengan warna merah adalah script Disqus.
- Masonry skrip

    
jQuery.ias ({
        
container: '# entry-daftar',
        
item: '. entri',
        
pagination: '# blog-pager',
        
berikutnya: '# blog-pager-older-link',
        
loader: 'gambar / loader.gif',
        
onLoadItems: function (item) {
            
var $ newElems = jQuery (item) menunjukkan () css ({opacity: 0})..;
            
$ NewElems.imagesLoaded (function () {
                 
$ NewElems.animate ({opacity: 1});
                 
jQuery ('# entry-daftar') batu ('ditambahkan', $ newElems, true).;
            
});
            
kembali benar
        
}
      
    
});
- Google Analytics adalah sedikit lebih sulit untuk mengintegrasikan:

    
jQuery.ias ({
        
container: '# entry-daftar',
        
item: '. entri',
        
pagination: '# blog-pager',
        
berikutnya: '# blog-pager-older-link',
        
loader: 'gambar / loader.gif',
        
onPageChange: function (pageNum, PAGEURL, scrollOffset) {
            
/ / Ini akan melacak tampilan halaman setiap kali pengguna
            
/ / Gulungan atas atau bawah layar ke halaman yang berbeda.
            
path = jQuery ('<a/>') attr ('href', PAGEURL) [0] pathname.replace (/ ^ [^ /] /, '/')..;
            
_gaq.push (['_trackPageview', path]);
        
}
      
    
});
KesimpulanPosting ini adalah instruksi umum dengan tidak pergi ke detail. Karena ada banyak script yang dapat Anda gunakan untuk blog, saya tidak bisa daftar mereka semua. Saya harap dengan posting ini, Anda dapat memiliki petunjuk di mana untuk memulai. Hal ini tidak begitu sulit untuk mengintegrasikan script dengan Geser Ajax Infinite, tapi Anda harus memahami naskah Anda terlebih dahulu, dasar ini, Anda dapat menempatkan mereka di dalam fungsi Tak Terbatas Ajax Plugin Gulir di atas.
READ MORE

Cara Membuat Blog Lebih Menarik

Cara Membuat Blog Lebih Menarik - Membuat blog menarik tentunya menjadi impian setiap blogger. Seperti kebangaan tersendiri bagi kita seorang blogger bila bisa membuat sebuah blog dengan tampilan desain yang menarik. Tapi di samping itu semua, beberapa masalah pun timbul. Terkadang kita terlalu fokus membuat blog agar tampil menarik, di lain sisi malah kita membuat loading blog menjadi berat karena terlalu banyak menambahkan elemen ke dalam blog kita.
Untuk itu saya akan coba memberi beberapa saran kepada anda bagaimana untuk membuat tampilan blog anda menjadi lebih menarik. Selain menarik, kita juga harus membuatnya tetap dalam perfomance yang baik. Artinya yaitu blog anda masih tetap cepat loadingnya dan memberikan kemudahan bagi user untuk menjelajahi blog tersebut.

  • Mengganti Background Blog
Jika anda merasa tampilan blog anda yang sekarang biasa-biasa saja, anda bisa mencoba cara yang satu ini. Mengganti template blog bisa menambahkan nilai estetika untuk blog anda. Apalagi jika anda dapat memilih gambar yang tepat dan terlihat menyatu dengan elemen lainnya dalam blog anda. Untuk itu anda bisa membacanya disini Cara Mengganti Background Blog
Perlu anda ingat ! Untuk menjaga perfomance kecepatan loading blog, anda harus pintar-pintar memilih background blog yang berukuran di kisaran 20-35 KB tetapi masih enak untuk di pandang. Karena jika lebih besar dari ukuran tersebut, bisa saja beresiko membuat loading blog anda menjadi lambat.

  • Memasang Beberapa Widget Pendukung
Selain background, penambahan widget-widget di blog anda juga bisa memperindah tampilan blog. Rasanya blog anda akan terlihat hambar jika tidak disertai dengan widget. Tapi anda juga harus bijak dalam memilih widget yang akan dipasang di blog. Sebab kebanyakan widget juga bisa membuat blog menjadi berat untuk di buka.

Anda bisa menambahkan widget-widget seperti Komentar Facebook, Popular Posts, Recent Comments, Arsip Blog, dan Alexa Widget. Saya rasa itu semua yang paling sering di gunakan oleh para blogger untuk melengkapi blognya..

  • Perhatikan Keselarasan Warna Background dan Warna Font
Saya pernah mengunjungi sebuah blog dengan background gelap namun memiliki warna tulisan yang hampir menyatu dengan warna background. Hal ini sangat saya sayangkan, karena informasi yang ditampilkan di blog tersebut sangat menarik. Tapi saya sebagai pengunjung juga merasa tidak nyaman untuk membacanya. Untuk itu, perhatikanlah keselarasan hal tersebut di dalam blog anda. Pemilihan komposisi yang tepat bisa membuat blog anda tampil dengan menarik.

Selain itu masih banyak lagi cara-cara untuk membuat blog anda menjadi lebih menarik. Tapi tidak akan semua saya bahas disini, karena bisa jadi tidak muat dalam satu artikel. Apa yang saya bahas di atas hanya merupakan dasar-dasarnya saja. Selanjutnya silahkan anda kreasikan sendiri yang menurut anda itu menarik.

Bagi anda yang bingung untuk mengatur tampilan blog agar menjadi menarik, anda bisa coba menggunakan template blogspot yang saya punya. Anda bisa melihatnya di koleksi Template Blogspot Keren milik saya. Baiklah, saya rasa artikel kali ini mengenai Cara Membuat Blog Lebih Menarik cukup sampai disini saja.

READ MORE

Widget Top Komentator Dengan Avatar


                   Sebelumnya saya sudah pernah mengetengahkan tutorial membuat widget top komentator, kali ini masih masih akan mengetengahkan cara menambahkan widget yang sama namun sedikit perbedaan pada style. Widget top komentator sebelumnya hanya menampilkan nama dari komentator sedangkan widget kali ini menampilkan pula avatar dari komentator. Style tentunya bisa anda modifikasi lagi sesuai dengan keinginan anda, menambahkan efek howover pada avatar atau nama, menampilkan jumlah komentar atau pada jenis dan size link komentator.
Adapun kegunaan dari widget ini, bisa anda maknai sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda.
Jika anda tertarik untuk menambahkan widget top komentator menarik dengan avatar ini, silahkan ikuti tutorial berikut:


  • Pada dasbor –> Menu Tata Letak –> Tambah gadget HTML/JavaScript
  • Beri title/judul yang anda inginkan dan Pada kolom konten masukkan kode berikut:  

<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
margin-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "Nama Admin"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author; 

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t; 

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); 

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; 

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>'; 

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
} 

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date(); 

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  } 

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); 

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t; 

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue; 

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  } 

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); 

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  }); 

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
  • Silahkan konfigurasikan widget sesuai keinginan anda.
Tulisan berwarna merah dan bercetak tebal diatas (Nama Admin), silahkan diganti dengan nama anda jika anda tidak menginginkan masuk dalam lists top komentator
  • Simpan dan lihat hasilnya di blog anda.
Demikian tutorial menambahkan widget top komentator di blog. Semoga bermanfaat.
READ MORE

Diberdayakan oleh Blogger.