Cara Membuat kotak Komentar Keren Blog Menjadi Menarik,Pengunjung Tutorial Blog | Tips BLog Kali  ini melanjutkan postingan sebelumnya Cara Membuat Kotak Komentar Blog Keren, merupakan request dari teman blogger aguz. Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
Ini Priview nya

• Login ke akun blogger dan masuk ke Edit HTML

• Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga

• Centang "Expand Widget HTML" ( bila perlu ) Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 

/* CSS Komentar */
#form-wrapper {margin-top:20px;}
#comments{overflow:hidden;}
.comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
#comments h4{display:block;padding:5px;line-height:30px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
#comments h4,.comments .user a{font-size:14px}
#comments h4{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
h4#comment-post-message {display:none}
#comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
.comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
.comments .comments-content .comment:first-child {padding-top: 0px;}
.comments .thread-toggle { display: none;}
.comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
.comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
.comment-thread{color:rgb(230, 230, 230); font-size:13px;}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
.comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
.comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
.comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .comment-thread {margin: 20px 0px;}
.comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
.comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
.comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
.comments .comments-content .loadmore {margin-top:0px;}
.comment .continue{display:none}
#comment-editor{width:103%!important;}
.comment-form{width:100%;max-width:100%;margin-top:20px;}

Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe

Cara Membuat Related Post Dengan Gambar - Untuk Postingan ini merupakan postingan lanjutan dari Cara Membuat Related Post Dengan Gambar Mini Di Blog tidak berbeda jauh tampilan dari tutorial sebelumnya. tutorial ini merupakan jawaban dari  request teman blogger yang sudah menyempatkan berkomentar yang menginginkan related post dengan gambar pada blog saya ini 

Sekilas Tentang Related Post adalah satu Teknik Blog dimana Related Post Akan Menampilkan Article-Article Yang Saling Berhubungan. Berhubungan disini Yang bermaksud adalah Setiap Artikel Yang Memiliki Kesamaan Label, Keyword Maka dengan Otomatis Artikel-artikel yang merupakan tautan yang terhubung atas kesamaan label atau keyword tersebut akan dimunculkan pada halaman di mana anda menempatkan related Post ini.

Tutorial Blog ini cukup simple dan ringan. Jadi tidak perlu takut jika blog kamu loading nya lambat, berikut dibawah ini merupakan tampilan dari related post ( Postingan Terkait) Pada Blog Ini :

Contoh Tampilan Related Post dengan Gambar

Tujuan dari Related Post ini Adalah salah satu teknik yang menguntungkan bagi pembaca atau yang sedang mencari-cari sesuatu artikel, maka setiap artikel yang saling berhubungan akan terlihat oleh sipembaca dan akan kembali membuka tautan yang berada pada Related post tersebut, dengan secara otomatis trafik atau view halaman pada Blog kita akan semakin banyak karena setiap halaman artikel memiliki tautan yang akan selalu dibuka oleh pembaca, pembaca akan berlama-lama di blog kita karena tautan akan menghubungkan artikel yang satu dengan artikel lainya yang dihubungkan oleh label.

 

Berikut ini Cara Membuat Related Post dengan Gambar :

1. Login ke Blogger
2. Buka menu Template > Edit HTML > Centang "Expand Template Widget.
3. Cari kode </head>, lalu masukkan kode berikut diatasnya.

<style type='text/css'>
/*RelatedPost Mas Oktri*/
#related_posts h4 {color: rgb(230, 230, 230);font-size: 11px;font-weight: bold;margin: 0px;padding: 2px 5px 1px 5px;text-shadow: 1px 1px rgb(0, 0, 0);text-transform: uppercase;border-bottom: 1px solid rgb(70, 0, 0);box-shadow: 0px 1px 0px rgb(150, 0, 0);}
#related_posts{font-size:12px;}
#relpost_img_sum {margin: 0;padding: 4px;line-height: 16px;}
#relpost_img_sum:hover {background: none;}
#relpost_img_sum ul {list-style-type: none;margin: 0;padding: 0;}
#relpost_img_sum li {margin: 0px;padding: 5px;height: 35px;list-style: none outside none;border-bottom: 1px solid rgb(20, 20, 20);box-shadow: 0px 1px 0px rgb(51, 51, 51);-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}
#relpost_img_sum li:hover {background-color: rgb(51, 51, 51);}
#relpost_img_sum a, #relpost_img_sum a:visited{color:rgb(230, 230, 230);text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}
#relpost_img_sum a:hover{color:#ff0000;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);}
#relpost_img_sum .news-title {display: block;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;margin-bottom: 2px;}
#relpost_img_sum .news-text {display: block;text-align: justify;font-weight: normal;text-transform: none;font-size:10px;}
#relpost_img_sum img {float: left;margin-right:5px;margin-top:0px;padding:0px!important;width: 30px;height: 30px;}</style>

4. Lalu cari kode <data:post.body/> atau <div class='post-footer-line post-footer-line-3'>
<!-- Untuk kode artikel terkait -->
</div>.

5. Ganti kode <!-- Untuk kode artikel terkait --> dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts - <data:blog.pageName/></h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://tutorialbelajarblogger.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>  

6. Jika kamu menggunakan kode <data:post.body/>, taruh kode no. 5 dibawahnya.

7. Simpan dan lihat hasilnya. (Ingat sebelum mengutak-atik template, backup template untuk menghindari kesalahan)

Sekian dari saya tentang Cara Membuat Related Post Dengan Gambar, semoga dapat bermanfaat. TERIMAKASIH

Cara Membuat Floating Menu Keren Widget Social Media - Melanjutkan Tutorial blog sebelumnya Cara Membuat Social Button Melayang Banyak blogger berlomba-lomba memasang widget yang paling keren pada blog mereka agar tampak menarik.Widget ini berfungsi untuk mempermudah pengunjung menemukan dan mengikuti anda dalam jejaring social atau yang lainnya dan dilengkapi dengan Efek Floating menu yang keren.

Cara Membuat Floating widget Social Media keren

• login ke blogger
• pilih menu template-->expand template widget
• cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

/* social button http://tutorialbelajarblogger.blogspot.com* /
.social-buttons {
    position: fixed; 
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon, 
.social-buttons #facebook-btn .social-icon, 
.social-buttons #google-btn .social-icon, 
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}

.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}

.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {

    background-position: 11px -80px;

}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {

    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;

}
.social-buttons #google-btn:hover .social-icon {

    background-color: #DB4A39;

}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {

    background-color: #C4302B;
} 
.social-buttons a:hover .social-text {
    display: block;
}

.button-left .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}

.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}

.button-right .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}

.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
} 

• letakkan kode dibawah ini diatas kode </head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script> 

• kemudian cari kode </body>  dan letakkan kode dibawah ini diatasnya

  <div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

script diatas juga dapat sobat letakkan pada widget html/javascript pada menu tata letak.Terserah mau diletakkan diatas </body> ataupun pada widget html/javascript.
Kemudian ganti tulisan yang berwarna biru dengan ID jejaring social anda.

Untuk menjadi blogger tentunya anda harus tahu cara membuat blog di blogspot. Oleh karena ini tahun ketiga saya blogging jadi saya tidak akan menuntun anda membuat blog yang biasa-biasa saja. Setidaknya anda harus tahu bagaimana membuat sebuah blog yang terlihat keren. Jadi mari kita mulai.

Pertama-tama anda harus sudah mempunyai sebuah akun email di Google yang biasa kita sebut sebagai GMAIL. Jika anda belum mempunyai akun email yang satu ini, maka anda harus membuatnya dulu. Silahkan baca artikel di bawah ini:

CARA MEMBUAT EMAIL GOOGLE (GMAIL) BARU

Jika anda sudah mempunyai akun email tersebut, maka silahkan ikuti prosedur sederhana di bawah ini.

MEMBUAT SENDIRI AKUN BLOG BARU DI BLOGSPOT

Untuk membuat sebuah akun blog di blogspot sangatlah mudah. Begitu mudahnya sehingga saat ini anak SD pun sudah mempunyai blog sendiri. Jadi pada tahap yang ini belum ada yang perlu anda kuatirkan, cukup ikuti prosedur di bawah ini.

1. Buka alamat www.blogger.com dan masukkan username dan password Gmail anda.
2. Dalam halaman dasbor anda akan melihat gambar anda, dan di bawah gambar itu ada sebuah tombol "Blog Baru". Klik pada tombol itu untuk memulai membuat blog anda.
   
3. Formulir pembuatan blog baru akan terbuka, dan anda akan diminta melakukan 3 hal, yaitu membuat JUDUL BLOG, membuat ALAMAT SUBDOMAIN dari blog baru, dan memilih TEMPLATE awal.
   
4. Panduan untuk anda: Pastikan Judul, dan Alamat Subdomain yang anda pilih mengandung kata kunci yang anda targetkan. Atau sembarang saja jika anda berniat mengganti subdomain blogspot anda dengan domain sendiri nantinya (entah itu .com, .org, .net, dll). Untuk bisnis online sangat disarankan untuk mengganti nama domain agar terlihat lebih profesional dan tentunya menunjang SEO jika nama domain anda bisa tepat sama dengan kata kunci yang anda kejar. (Biayanya cuma Rp.100.000/tahun)
5. Setelah anda selesai di formulir ini silahkan klik tombol BUAT BLOG, dan selesai

Sekarang anda sudah tahu cara membuat blog. Tapi blog baru anda ini masih sangat kosong. Anda harus melakukan beberapa setelan awal terlebih dahulu agar blog baru anda ini lebih SEO friendly. 

Cara Membuat Tampilan Blog Baru Anda Lebih Keren Dan Elegan

Sekarang blog baru anda sudah jadi, tapi tampilannya sangat standar sekali, dan tentu saja tidak menarik. Anda harus mengganti tampilannya biar terlihat lebih menarik dan keren; jadi sebagai langkah awal silahkan buka http://btemplates.com/.

Anda akan melihat bahwa pada btemplates.com ini ada begitu banyak pilihan template. Jika ada yang anda sukai maka klik link DEMO yang ada di kiri bawah dari gambar template tersebut.

Anda akan diperlihatkan tampilan dari template yang sudah diterapkan pada sebuah blog. Jika anda menyukainya, maka silahkan mengklik tombol DOWNLOAD yang ada pada navbar paling atas (lihat gambar di bawah)

Anda akan diarahkan ke halaman detail template dan di sana ada sebuah link download. Silahkan klik pada link tersebut untuk mengunduh template blog yang anda inginkan.

Akan muncul kotak dialog untuk konfirmasi download anda, klik OK

Tunggu sampai pengunduhan file ZIP anda selesai. Jika sudah selesai; ekstraksi file ZIP tadi. Anda akan memperoleh sebuah folder yang di dalamnya ada file XML. File inilah yang akan anda upload pada blog baru yang tadi anda buat di blogspot. Pada contoh di bawah ada 2 file XML, yaitu versi dengan slideshow dan tanpa slideshow.

Sekarang anda bisa mengganti template, dan membuat blog anda terlihat lebih profesional, atau setidaknya lebih modis. Ini yang perlu anda lakukan: Masuklah ke menu TEMPLATE dari blog anda dan cari tombol CADANGKAN DAN PULIHKAN di kanan atas layar anda. 

Akan muncul kotak pop-up. Silahkan klik browse dan buka file XML yang sebelumnya sudah anda ekstraksi dari file ZIP. Setelah anda memilih filenya silahkan klik UNGGAH

Tunggu sampai unggahan selesai, dan anda akan melihat tampilan dari blog anda sudah berubah sesuai dengan tampilan template blog keren yang sebelumnya anda pilih dan unggah.

Catatan: Untuk masalah template ini sangat direkomendasikan untuk menggunakan template yang responsive saat saudara membuat blog. Kenapa? Karena Google semakin memperhatikan pengguna mereka yang menggunakan gadget yang mobile. Jika anda ingin mencoba template blog yang responsive bisa mencoba template yang ada di artikel di bawah ini:
Template Blog SEO Friendly Responsive Design (Mudah Diedit)

Sampai di sini anda sudah tahu cara membuat blog sendiri di blogspot, bahkan anda sudah mengganti templatenya. Apakah sudah selesai? Tentu belum. Anda masih harus melakukan sedikit setelan untuk membuat blog baru anda ini lebih SEO Friendly.

Cara Membuat Blog Anda Lebih SEO Friendly

Setelah anda tahu cara membuat blog dan mengubah tampilannya menjadi lebih menarik sesuka hati anda, maka yang berikutnya perlu anda ketahui adalah bagaimana cara membuat blog anda itu terasa lebih SEO. Mungkin bagi anda yang masih pemula akan sedikit bingung dengan apa yang dimaksud dengan SEO.

SEO itu adalah usaha untuk membuat blog anda bisa muncul di halaman pencarian Google saat seseorang mencari sesuatu yang berkenaan dengan blog anda. SEO ini ada onpage dan juga ada Offpage. Onpage adalah segala sesuatu yang perlu kita lakukan pada blog kita, sedangkan offpage adalah yang perlu kita lakukan di luar mengedit blog kita.

Jadi kita di sini cuma bisa melakukan onpagenya saja.... Perlu diingat bahwa anda tidak perlu melakukan ini pada template-template yang sudah diklaim sebagai SEO friendly.

Cara Membuat Title Tag Blog Anda Menjadi SEO Friendly

Untuk membuat blog anda menjadi lebih SEO Friendly, maka ini adalah sesuatu yang perlu anda lakukan. Tapi sebelum anda melakukannya perhatikan dulu apakah title tag anda sudah benar atau belum benar? Bagaimana cara mengetahuinya? Mudah saja:

• Bukalah homepage dari blog anda dan lihat bagian tab dari blog anda apakah menampilkan judul blog anda?
• Jika sudah, sekarang buka satu artikel anda dan lihat tab browser anda, apakah menampilkan judul artikel anda?

Jika judul blog sudah ditampilkan di halaman homepage, dan judul artikel sudah ditampilkan di halaman artikel maka itu sudah cukup baik.... Lihat gambar di bawah ini

Sebaliknya, jika tampilan judul blog anda belum seperti di atas, maka coba gantikan kode <title>.... </title> yang ada di dalam menu TEMPLATE > EDIT HTML agar terlihat seperti di bawah ini:
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>

Jika sudah selesai, tekan tombol jingga SIMPAN TEMPLATE.

Cara Membuat Meta Description Blog Lebih SEO Friendly

Untuk membuat meta description dari blog anda menjadi lebih SEO Friendly lakukan langkah-langkah di bawah ini:

• Buka menu SETELAN > PREFERENSI PENELUSURAN dan lihat bagian paling atas halaman
• Klik EDIT pada TAG META Deskripsi
• Pilih Ya
• Masukkan 150 karakter yang anda anggap mengandung kata kunci yang anda incar dan paling tepat menggambarkan isi dari halaman muka blog anda, karena ini adalah tempat memasukkan meta description untuk homepage.
• Klik Simpan Perubahan, maka anda sudah mengaktifkan meta description pada blogspot anda.

Editan Ringan Pada Heading Blogspot Anda

Setelah anda mengedit 2 hal di atas; kembalilah ke menu TEMPLATE > EDIT HTML dan klik pointer kursor anda di antara kode-kode yang ditampilkan setelah itu tekan CTRL+F.

• Masukkan kode <h3 dan tekan enter, anda akan di bawah menuju kode tersebut dan ubahlah menjadi <h2. Tekan enter lagi untuk menemukan <h3 yang lainnya dan ubah semuanya menjadi <h2. Jika enter anda tiba-tiba merusak kode, cukup tekan saja CTRL+Z untuk UNDO dan mengembalikan perubahan terakhir
• Ganti kode <h3 yang ada di kotak pencarian menjadi </h3>, lalu tekan lagi enter untuk mencari semua kode itu dan ubah jadi </h2>.
• Jika sudah selesai, tekan tombol jingga SIMPAN TEMPLATE.

Semua perubahan di atas mungkin hanya akan membawa onpage blog anda menjadi 70% SEO Friendly, tapi itu sudah cukup sebagai awalan.

Cara Membuat Artikel Di Blog Baru Anda

Sekarang saatnya anda membuat artikel. Ini sangatlah mudah, jadi anda pasti bisa melakukan ini.... Anda cukup mengenali icon-icon yang menjadi fitur di editor posting di blogspot di bawah ini:

1. JUDUL POS adalah tempat anda memasukkan judul artikel yang akan anda ketik. Untuk membuat blog anda bersaing di pencarian Google, pastikan anda meletakkan kata kunci yang anda incar di awal judul.
2. PUBLIKASIKAN adalah tombol untuk menerbitkan artikel yang anda anggap sudah selesai dan layak diterbitkan
3. SIMPAN adalah tombol yang bisa anda gunakan untuk menyimpan ketikan anda dalam bentuk draft jika anda belum bisa menyelesaikannya saat itu juga. Anda bisa mengeditnya lagi nanti dengan membuka menu POS dan mengklik link EDIT di bawah draft yang tersimpan ini.
4. PRATINJAU adalah tombol untuk melihat bagaimana tampilan dari ketikan anda saat diterapkan dalam template blog anda
5. TUTUP adalah tombol untuk menutup editor ini
6. COMPOSE adalah tampilan RICH TEXT saat kita sedang mengetik artikel
7. HTML adalah tampilan dalam bentuk kode HTML, anda juga bisa membuat kode yang tidak ada pada icon di tampilan ini.
8. UNDO dan REDO, di mana anda bisa membatalkan atau mengulangi suatu tindakan
9. FONT FAMILY adalah tombol untuk mengubah jenis huruf yang digunakan dalam pengetikan
10. FONT SIZE adalah tombol yang digunakan untuk mengubah ukuran dari huruf
11. FORMAT adalah tombol untuk mengubah suatu text menjadi judul poin pembahasan, atau judul subpoin pembahasan, atau judul dari subsubpoin pembahasan. Sangat direkomendasikan menggunakan fitur ini untuk membuat artikel blog menjadi SEO friendly.
12. BOLD adalah tombol untuk membuat huruf menjadi cetak tebal. Untuk membuat artikel blog anda lebih SEO, maka sebaiknya pemunculan pertama kata kunci di dalam artikel dicetak tebal
13. ITALIC adalah tombol untuk membuat cetak miring, selain bold anda juga bisa menggunakan ini dan poin SEOnya sama saja
14. UNDERLINED adalah tombol untuk memberi garis bawah
15. STRIKETHROUGH adalah tombol untuk memberi coretan pada tulisan
16. FONT COLOR adalah tombol untuk mengubah warna teks
17. FONT HIGHLIGHTS berfungsi untuk memberi sorotan berwarna pada suatu bagian di dalam artikel yang dianggap penting
18. LINK dipergunakan untuk membuat tautan di dalam artikel anda
19. MASUKKAN GAMBAR tentu saja untuk memasang gambar di dalam postingan
20. MASUKKAN VIDEO untuk mengunggah sebuah video ke dalam postingan anda
21. JUMPBREAK digunakan untuk memotong tampilan artikel saat ditampilkan di halaman muka blog anda. Cukup klik pada suatu titik di dalam artikel anda lalu klik icon jumpbreak ini, maka yang berada di bawah titik yang anda tentukan tadi tidak akan ditayangkan di halaman muka.
22. RATA TEKS, digunakan untuk mengatur tulisan rata kiri, tengah, kanan, atau imbang.
23. ORDERED LIST untuk memberi penomoran pada poin-poin artikel.
24. UNORDERED LIST untuk memberi penandaan pada poin-poin artikel.
25. QUOTE untuk memberi tampilan khusus pada frasa atau kalimat atau paragraf yang kita anggap sebagai kutipan
26. REMOVE FORMATTING, untuk membersihkan semua style atau editan yang sudah kita terapkan pada suatu bagian di dalam artikel
27. CHECK SPELLING, jika anda mau mengecek pengejaan. Sepertinya ini untuk bahasa inggris saja
28. LEBEL, untuk memberi label kepada tulisan anda sebagai sistem pengelompokan artikel
29. JADWAL, bisa anda gunakan untuk menentukan waktu artikel akan terbit secara otomatis suatu saat di waktu yang akan datang
30. TAUTAN PERMANEN bisa anda gunakan untuk membuat URL yang anda inginkan untuk artikel anda
31. LOKASI untuk memasukkan keterangan tempat di mana anda saat menulis  artikel tersebut
32. DESKRIPSI PENELUSURAN, ini adalah tempat memasukkan meta description ke dalam artikel. Masukkan penjelasan singkat dari isi artikel anda (max.150 karakter) dan pastikan mengandung kata kunci....
33. PILIHAN adalah tombol yang berisi opsi HTML untuk mode tulis dan baris baru ketikan anda. Kalau anda bingung, maka abaikan saja.

Sekarang anda sudah tahu cara mendaftar akun blogger dan cara membuat blog anda, mengubah templatenya dan mengisi sebuah artikel ke dalamnya. Itu berarti anda sudah mengetahui dasar dari cara membuat blog.... Yang perlu anda lakukan sekarang adalah mengisi blog anda dengan hal-hal yang anda sukai atau yang anda "targetkan untuk dikuasai".