Rahmat Kriz

Download Kaizen Awesome Magz Blogger Template

2014-04-04T12:45:00.000+07:00

Selamat siang sobat blogger. Kali saya akan membagikan template blogger yang bernama kaizen awesome magz. Kaizen awesome magz adalah template simple untuk situs majalah. Berikut fitur yang ada pada template ini

Description :
Name : Kaizen Awesome Magz
Author : Kaizen Template

Fitur :

Simple Magazine Site
Fully Responsive
Awesome Font
Flat Subscribe Mail Widget
Post by Label Widget
Social Widget
Custom 404 Page
Floating Menu and Back to top
Dll

Untuk setting templatenya bisa anda lihat Disini

Membuat Tombol Follow Blog (Join This Site) Berkedip-Kedip

2014-04-03T15:15:00.000+07:00

Tombol follow blog atau biasa disebut join this site merupakan tombol yang berfungsi untuk mengikuti blog/situs dimana pada saat anda memfollow blog, maka akan terlihat postingan terbaru dari blog yang telah anda follow di dashbor blog anda. Ini adalah salah satu cara untuk memperbanyak pengunjung blog.

Dengan memasang tombol follow ini pengunjung blog akan mudah untuk memfollow blog kita. Tapi kurang menarik kalau tombol join this site ini cuma tampil biasa-biasa saja. Nah, pada postingan kali ini saya akan membagikan cara membuat tombol follow blog (Join This Site) berkedip-kedip. Untuk tampilan tombolnya bisa dilihat disidebar blog saya (jika belum dihapus). Jika sudah dihapus lihat saja tampilanya sebagai berikut

Membuat Tombol Follow Blog (Join This Site) Berkedip-Kedip

1.Klik Tata letak > HTML/Javascript
2.Letakkan kode berikut dikolom tersebut

<a href="http://www.blogger.com/follow-blog.g?blogID=3265309526519083420" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPEKRtA0HYIXcnnpEI6avmFKlmcApMaQv0ByKw5zPIxDEozPe2oqbtOWAwcmN5xv56Z2MsLyf8iBYd6dTIuy9rKnt6miK6UamHoiHUoNAlMVEEU_7Pnh8kY58wl3bykne6eekjbDvcwk72/s1600/Follow+my+blog.gif" /></a>

Untuk kode berwarna kuning ganti dengan nomor ID blog anda

Untuk menemukan nomor ID blog anda silahkan copy nomor yang ada pada atas kolom HTML/Javascript anda seperti gambar berikut

3.Simpan dan lihat hasilnya

Sekian tutorial membuat tombol follow blog (Join This Site) berkedip-kedip. Jangan lupa follow blog ini :D Baca postingan sebelumnya Cara Membuat Persentase Pada Scrollbar

Cara Membuat Persentase Pada Scrollbar

2014-04-02T17:10:00.002+07:00

Halo sobat blogger,, bagaimana kabarnya? semoga anda baik-baik saja. Kali ini saya akan membagikan cara membuat persentase pada scrollbar. Membuat persentase pada scrollbar adalah salah satu cara untuk mempergantengkan tampilan blog dimana pada saat scrollbar disorot kebawah dan keatas maka akan muncul persentase disebelah kiri scrollbar. Agar anda tahu lebih jelas silahkan lihat tampilan berikut

Cara Membuat Persentase Pada Scrollbar

1.Klik Template > Edit HTML
2.Letakkan kode berikut diatas ]]></b:skin> atau </style>

#scroll {
  display:none;
  position:fixed;
  top:0;
  right:20px;
  z-index:500;
  padding:3px 8px;
  background-color:#2187e7;
  color:#fff;
  border-radius:3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-8px;
  height:0;
  width:0;
  margin-top:-4px;
  border:4px solid transparent;
  border-left-color:#2187e7;
}

2.Masukkan kode pemanggil di atas </head>

<div id='scroll'></div>

3.Kemudian letakkan javascript ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

4.Simpan template dan lihat hasilnya.

Persentase pada scrollbar ini hanya berfungsi dihalaman posting

Video : Cuplikan Goal Real Madrid vs Barcelona 3-4 2014

2014-03-26T18:24:00.000+07:00

Mungkin dari anda ada yang belum melihat cuplikan goal antara Real Madrid vs Barcelona beberapa hari yang lalu. Kini saya akan memberikan video cuplikan goalnya yang saya ambil dari youtube. Mungkin sedikit telat nih hehehe. Dalam pertandingan tersebut Real Madrid yang menjadi tuan rumah gagal mencuri 3 poin setelah takluk dari tamunya Barcelona dengan skor 3-4. Berikut cuplikan goalnya

Sumber :https://www.youtube.com/watch?v=ARAdCLGvjw0

Membuat Tombol Demo dan Download ala Kang Ismet

2014-03-25T18:29:00.001+07:00

Apakah anda bosan dengan tampilan tombol demo dan download yang biasa-biasa aja? Pasti bosan buat para blogger yang suka mempercantik tampilan blognya. Biasanya tombol demo dan download yang pernah aku temui biasanya cuma berupa link warna biru dengan huruf besar-besar hehehe.

Nah, di postingan kedua hari ini saya akan membagikan cara membuat tombol demo dan download ala kang Ismet, yang mana tombol demo dan downloadnya akan dipergantengkan tampilanya seperti dibawah ini

Cara membuatnya :

Pertama, Letakkan CSS berikut diatas kode ]]></b:skin>

.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

Kedua, Masukkan kode ini di mode HTML bila membuat postingan

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://rahmatkriz.blogspot.com" target="_blank">Demo</a></li>
<li><a class="download" href="http://rahmatkriz.blogspot.com" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Download Maz Mawan Blogger Template

2014-03-25T17:20:00.001+07:00

Halo sobat blogger.. Kali ini saya akan membagikan template kepada kalian. Template ini dibuat oleh mas Mawan. Sesuai namanya template ini dinamakan Maz Mawan Blogger Template. Template ini sangat bagus buat adsense karena banyak space iklan yang ada di template ini mulai ukuran 720x90 ,970x90, dan 320x250. Bagi anda yang tertarik dengan template ini silahkan download dibawah ini

Fitur Template :

Mobile version
Breadcrumbs
Ads ready
Subcribe dibawah postingan
Tombol share sosial media
Dll

Untuk settingan templatenya klik Disini

Cara Memasang Tombol Follow Twitter di Blog

2014-03-21T13:28:00.000+07:00

Pada postingan sebelumnya saya sudah membahas tentang Cara Memasang Widget Twitter Timeline di Blog. Sekarang saya akan membagikan postingan yang sama-sama berhubungan dengan twitter yaitu Cara Memasang Tombol Follow Twitter di Blog. Saya kira anda semua sudah tahu fungsi dari tombol follow tersebut. Tampilanya seperti yang ada pada sidebar blog ini. Dari pada lama-lama langsung saja ke tutorialnya

Cara Memasang Tombol Follow Twitter di Blog

1.Login dulu ke akun twitter anda
2.Masuk Disini
3.Pilih Follow, Kemudian atur bentuk dan ukuranya. Setelah itu ambil kode yang didapat

4.Masuk ke akun blogger anda
5.Klik Tata letak > Tambahkan gadget > HTML/Javascript
6.Letakkan kode yang didapat tadi dikolom HTML/Javascript
7.Simpan dan lihat hasilnya

Sekian artikel Cara Memasang Tombol Follow Twitter di Blog. Semoga bermanfaat. Jangan lupa like dan follow rahmatkriz.blogspot.com agar mendapatkan informasi seputar tutorial blog. Terima kasih. Happy Blogging :)

Cara Memasang Widget Twitter Timeline di Blog

2014-03-21T11:12:00.000+07:00

Selamat pagi sobat blogger! Kali ini saya akan membagikan Cara Memasang Widget Twitter Timeline di Blog. Memasang widget twitter timeline adalah salah satu cara untuk mempercantik blog dan memperbanyak jumlah follower. Widget ini akan menampilkan tweet secara real time. Dengan memasang widget twitter timeline ini pengunjung blog akan tahu aktivitas terbaru dari akun twitter kita. Sehingga kemungkian besar pengunjung blog akan memfollow twiiter kita. Untuk memasang widget twitter timeline caranya cukup mudah, anda tinggal memasukkan kode dari twitter developers ke kolom HTML/Javascript. Sebelum saya memberikan tutorialnya alangkah baiknya lihat dulu tampilan widget twitter timeline dibawah ini

Cara Memasang Widget Twitter Timeline di Blog

1.Login ke akun twitter anda
2.Klik setting > Widget > Create New
3.Silahkan atur sendiri settingan tampilan widget

4.Setelah itu klik 'Create widget'
5.Kemudian ambil kodenya yang ada dalam kotak

6.Masuk ke akun blogger anda
7.Klik Tata letak > Tambahkan gadget > HTML/Javascript
8.Masukkan kode yang tadi didapat ke kolom HTML/Javascript.
9.Simpan

Sekian artikel Cara Memasang Widget Twitter Timeline di Blog. Semoga bermanfaat. Happy Blogging :)

Memasang Widget Alexa Rank Di Blog

2014-03-20T17:13:00.001+07:00

Pada postingan seminggu yang lalu saya sudah membagikan Cara Mendaftarkan Blog Ke Alexa. Setelah mendaftarkan blog ke Alexa selanjutnya adalah Memasang Widget Alexa Rank Di Blog. Mungkin postingan ini sudah banyak dibahas oleh sobat blogger lainya. Tapi untuk memperbanyak artikel di blog ini tidak ada salahnya saya membagikanya kepada anda.

Widget ini akan menampilkan ranking blog yang telah anda daftarkan di Alexa. Tampilanya seperti yang ada pada sidebar blog ini. Fungsinya jelas untuk memantau penilaian blog kita yang sudah diakui secara internasional sekaligus untuk memancing para advertiser untuk memasang iklan di blog kita bila ranking blog kita mengecil. Oke bagi anda yang ingin memasang widget Alexa rank. Ikuti langkah-langkahnya berikut ini

1.Masuk ke halaman Alexa site widget Disini
2.Isikan URL blog anda dikolom yang disediakan dan klik "Build Widget"

3.Pilih tampilan widget yang ingin anda pasangkan di blog anda. kemudian copy kode disebelah kirinya

4.Masuk ke akun blogger anda, klik tata letak
5.Klik tambahkan gadget > HTML/Javascript
6.Masukkan kode yang anda dapat tadi di kolom HTML/Javascript
7.Simpan

Sekian artikel Memasang Widget Alexa Rank Di Blog. Semoga bermanfaat. Happy Blogging :)

Mendeteksi Link Aktif Pada Komentar

2014-03-19T17:22:00.000+07:00

Kali ini saya akan membahas atikel dengan topik Mendeteksi Link Aktif Pada Komentar. Banyak blogger yang tidak suka dengan adanya komentar spam seperti mencamtumkan link aktif dengan tujuan untuk mendapatkan backlink. Rata-rata komentar yang menyantumkan link aktif, komentarnya tidak bermutu seperti promosi-promosi produk maupun togel. Untuk mencegah hal itu saya memiliki cara agar komentar yang menyertakan link aktif, otomatis akan terdeteksi. Berikut Caranya

Dengan Peringatan

1.Masuk Ke Template > Edit HTML
2.Letakkan script berikut diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID,children){var parent=document.getElementById(parentID),content=parent.getElementsByTagName(children);for(var i=0;i<content.length;i++){if(content[i].innerHTML.indexOf('</a>')!==-1){var salinan=content[i].innerHTML;content[i].innerHTML="<div>Komentar ini akan segera di hapus karena menyertakan link aktif yang tidak diperlukan oleh para pembaca yang lain. Berikut ini merupakan salinan dari komentarnya :</div><div><textarea>"+salinan+"</textarea> <div>Terimakasih atas partisipasinya!</div>";content[i].className="spammers"}}}blockLinks('comments','p');
//]]> 
</script>

3.Simpan Template

Mengganti link aktif dengan kata-kata

1.Masuk Ke Template > Edit HTML
2.Letakkan script berikut diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// Hapus link aktif komentar by Rahmat Kriz
jQuery(document).ready(function(){ jQuery("#comments p").find("a").replaceWith("<span><b> Dilarang nyepam gan</b></span>"); });
//]]>
</script>

3.Simpan Template

Anda bisa merubah kata-katanya sesuai selera anda, misalkan menyinggung perasaan si penyepam seperti 'Gue habis homo sama bapak gue gan' wkwkwkwkw (tidak untuk ditiru). Sekian artikel Mendeteksi Link Aktif Pada Komentar Apabila ada kata-kata yang kurang berkenan saya mohon maaf. Happy Blogging :)

Membuat Seleksi Otomatis Pada Tag Pre

2014-03-18T09:16:00.001+07:00

Sekitar satu jam yang lalu saya sudah membuat postingan tentang Cara Membuat Syntax Highlighter. Silahkan baca dulu karena postingan ini berhubungan dengan syntax highlighter. Syntax highlighter yang saya bagikan tadi apabila di double klik pada area teks editor, kodenya masih belum terblok semua. Intinya kalau kita mau mengambil kode yang panjang kita harus ngeblok dulu dengan menscroll mouse sampai kebawah. Tentu hal ini tidak nyaman apabila kode yang kita ambil terlalu panjang.

Nah, untuk mengatasi ketidaknyamanan ini, kali ini saya akan membagikan cara Membuat Seleksi Otomatis Pada Tag Pre. Membuat seleksi otomatis ini akan mempermudahkan kita untuk mengambil kode yang panjang dengan cara mendouble klik. Jadi kita tinggal mendouble klik pada area teks editor, otomatis kode tersebut akan terblok semua. Jadi kita bisa lebih cepat untuk mengambil kode yang terlalu panjang. Seleksi otomatis ini bisa digunakan untuk satu klik dan juga untuk blockquote. Yah itu tadi penjelasan yang dibilang sedikit ruwet haha. Oke langsung saja tidak usah panjang lebar untuk menerapkanya silahkan ikuti tutorialnya berikut

1. Masukkan Javascript ini diatas </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Penjelasan :
Untuk mengganti seleksi otomatis pada blockquote ubah pre menjadi blockquote
Jika ingin menerapkan seleksi otomatis dengan satu klik ubah dbclick dengan click

Sekian tutorial Membuat Seleksi Otomatis Pada Tag Pre. Semoga penjelasan diatas bisa dipahami. happy blogging :)

Cara Membuat Syntax Highlighter Di Blog

2014-03-18T08:00:00.001+07:00

Mungkin dari sobat blogger yang baru terjun didunia blogging belum tahu apa itu syntax highlighter. Syntax highlighter adalah fitur pada teks editor yang menampilkan teks warna-warni pada bahasa pemrograman seperti HTML,Javascript,CSS,Jquery dan bahasa pemrograman lainya. Penggunaan syntax highlighter biasanya ada di blog berbasis tutorial seperti yang ada di blog ini.Tujuanya agar memudahkan kita dalam menulis source kode seperti HTML,Javascript,CSS,dan Jquery. Untuk lebih jelasnya silahkan lihat gambar dibawah ini

Cara Membuat Syntax Highlighter Di Blog

Pilihan CSS Syntax Highlighter bisa lihat di https://github.com

1. Letakkan CSS ini diatas kode ]]></b:skin> atau </style>

pre,i[rel="pre"] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:11px;
color:#839496;
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
line-height:1.4em;
position:relative;
white-space: pre;
word-wrap: normal;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
pre.line-number:after{
content:"";
width:35px;
height:8px;
background-color:#39424e;
bottom:0;
left:0;
position:absolute;
}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:12px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
font-size:13px;
color: #d14;
}
#comments code {
color:#bbbb6d;
}
pre code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
color:#61686d;
background-color:#39424e;
text-align:right;
min-width:2.5em;
padding-right:4px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;}

2.Letakkan Script berikut diatas </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

3.Untuk mengaktifkan syntax highlighter di komentar masukkan script ini diatas </body>

<script type='text/javascript'>
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
</script>

4.Simpan Template

Untuk penggunaan syntax ini tinggal masukkan kode berikut di mode HTML bukan Compose

<pre><code>...kode HTML atau JavaSript di sini...</code></pre>

Untuk memberikan warna pada border left silahkan pakai kode ini

<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */

Mendaftarkan Blog Ke Google Feedburner

2014-03-17T16:21:00.000+07:00

Mendaftarkan Blog Ke Google Feedburner - Feedburner adalah salah satu layanan dari Google yang berupa RSS feed (umpan web). Biasanya digunakan oleh para blogger untuk mempermudah pengunjung berlangganan artikel di blognya atau untuk melakukan ping artikel terbaru di blognya. Mendaftarkan blog ke feedburner adalah salah satu optimasi SEO on page, karena akan memudahkan blog cepat terindeks Google. Bagi anda yang belum mendaftarkan blog ke feedburner, segera daftarkan dengan mengikuti langkah-langkah dibawah ini

1.Masuk ke http://feedburner.google.com/
2.Isikan URL blog anda dikolom yang disediakan, kemudian klik "Next"

3.Setelah itu anda akan melihat tampilan seperti dibawah ini, silahkan pilih Atom karena lebih mudah dihafal, Kemudian klik "Next"

4.Isikan kotak yang berwarna merah sesuai keinginan anda kemudian klik "Next"

5.Kemudian akan ada ucapan selamat bahwa feed anda berhasil
6.Pada "Get More Gusto From Your Feed Traffic Statistics" Silahkan klik next.
7.Feed anda sudah jadi.

Mengalihkan Feed Blogspot Ke Feedburner

1.Masuk ke akun blogger anda
2.Klik Setelan > lainya > Posting URL Pengubahan Arah Feed > Tambah
3.Masukkan alamat feedburner anda di kolom tersebut
4.Klik Simpan Setelan

Mengaktifkan Ping Service Feedburner

Kembali ke halaman Feedburner anda, klik Publicize > PingShot > Activate

Sekian artikel Mendaftarkan Blog Ke Google Feedburner. Semoga bermanfaat. Happy Blogging :)

Cara Memasukkan Video Responsive dan Valid HTML 5

2014-03-17T07:45:00.003+07:00

Cara Memasukkan Video Responsive dan Valid HTML 5 - Pada tutorial minggu yang lalu saya sudah membagikan Cara Memasukkan Video Youtube Di Blog. Tapi yang saya bagikan itu masih belum responsive dan valid HTML 5. Yah, memang jaman sekarang ini lagi trend-trendya responsive dan valid HTML 5.

Nah untuk kali ini saya akan membagikan cara agar video youtube yang anda masukkan ke blog menjadi responsive dan valid HTML 5. Sebenarnya bukan cuma video youtube saja sih, semua video bisa menjadi responsive dan valid HTML 5. Tapi untuk tutorial ini saya akan menerapkanya pakai video dari youtube.

Berikut Cara Memasukkan Video Responsive dan Valid HTML 5

Letakkan kode dibawah ini diatas kode ]]></b:skin>

.ResponsiveVideo {
     position:relative;padding-bottom: 56.25%;
     padding-top:25px;
     height:0;
}
.ResponsiveVideo iframe, video, object, embed {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
}

Contoh kode embed dari youtube

<iframe width="640" height="360" src="//www.youtube.com/embed/nP4U_EJ5Trc?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

Kode tersebut belum valid HTML 5. Agar kode tersebut menjadi valid HTML 5, hapus kode
frameborder="0" allowfullscreen Jadi kodenya akan menjadi seperti ini

<iframe width="640" height="360" src="//www.youtube.com/embed/nP4U_EJ5Trc?feature=player_detailpage"></iframe>

Sekarang kalau ingin menjadi responsive kita tinggal memasukkan kode dibawah ini dan hapus ?feature=player_detailpage

<div class="ResponsiveVideo">...Kode video disini...</div>

Jadi kalau kita hubungkan akan menjadi seperti ini

<div class="ResponsiveVideo"><iframe width="529" height="329" src="//www.youtube.com/embed/nP4U_EJ5Trc"></iframe></div>

Saya akan mencoba mengambil video dari youtube. Silahkan kecilkan layar browser anda. Jika sudah responsive berarti berhasil. Selamat mencoba

Cara Membuat Animasi Loading Dengan Efek Keyframe

2014-03-16T08:35:00.000+07:00

Cara Membuat Animasi Loading Dengan Efek Keyframe - Kali ini saya akan membagikan Cara Membuat Animasi Loading Dengan Efek Keyframe. Pernahkah anda melihat blog yang sidebar atau post nya tiba-tiba muncul dengan animasi slide, animasi bounce and rotate, atau earthquake effect. Nah, itulah yang dinamakan efek keyframe. Efek yang sangat menarik ini sama sekali tidak memperberat loading blog karena efek ini cuma dibumbui dengan CSS tanpa Javascript. Berikut screenshot yang saya ambil dari animasi blog ini.

Cara Membuat Animasi Loading Dengan Efek Keyframe

Animation Bounce And Rotate

1.Masuk ke Template
2.Cari kode ]]></b:skin> kemudian masukkan kode ini di atasnya

@keyframes BounceRate{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

3.Masukkan kode animation:BounceRate 3s;dibagian yang ingin diberi efek misalkan

#sidebar-wrapper {animation:BounceRate 3s;}

4.Save Template

Animation Earthquake Effect

Kode diatas ]]></b:skin>

@keyframes Earthquake{
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}

Masukkan kode animation:Earthquake 3s; di bagian yang ingin diberi efek, misalkan

#sidebar-wrapper {animation : Earthquake 3s;}

Kemudian Save Template

Animation Sliding Effect

Kode diatas ]]></b:skin>

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

Masukkan kode animation:Sliding 2s; dibagian yang ingin diberi efek, misalkan

#sidebar-wrapper {animation:Sliding 2s;}

Kemudian Save Template

Kode diatas bisa anda masukkan ketiga-tiganya. Sekian artikel Cara Membuat Animasi Loding Dengan Efek Keyframe. Semoga bermanfaat. Happy Blogging :)

resource : http://the-anarchyta.blogspot.com/2014/03/cara-membuat-efek-loading-dengan.html

Cara Submit Blog Ke Bing Webmaster

2014-03-14T17:05:00.000+07:00

Pada tutorial sebelumnya saya sudah membahas Cara Mendaftarkan Blog Ke Alexa. Nah, pada tutorial ini saya akan membahas Cara Submit Blog Ke Bing Webmaster. Selain mensubmit blog kita ke Google Webmaster kita juga harus mensubmit blog kita ke Bing Webmaster. Karena pengguna internet di dunia khususnya negeri kita Indonesia selain mencari informasi menggunakan mesin pencari Google ternyata banyak juga yang mencari informasi-informasi lewat mesin pencari Bing.

Nah, agar blog kita ingin kecipratan pengunjung dari mesin pencari Bing, kita harus mendaftarkan blog kita ke mesin pencari tersebut. Untuk mendaftarkan blog ke Bing anda harus punya akun hotmail.com atau outlook.com. Untuk cara membuatnya mudah sama seperti anda membuat email di Gmail. Kalau anda masih bingung membuat email di hotmail atau outlook silahkan cari di eyang Google. Bagi yang sudah punya langsung ikuti langkah-langkahnya berikut

1. Pergi ke Bing Webmaster
2. Sign in dengan akun anda
3. Kemudian akan muncul tampilan seperti dibawah. isikan URL blog anda dan klik 'ADD'

4. Setelah mengklik 'ADD' isikan sitemap blog anda dikolom yang disediakan kemudian klik 'ADD' lagi. Lihat gambar berikut

5. Setelah itu dibagian ini anda harus mengambil kode verifikasi yang nantinya akan diletakkan dibawah kode <head>. Copy kode yang saya beri kotak merah dibawah dengan kode yang anda dapat.

6. Masuk ke Template dan letakkan dibawah kode <head> dengan struktur seperti ini

<meta content='kode verifikasi bing webmaster anda' name='msvalidate.01' />

7. Setelah itu simpan template anda dan kembali ke halaman Webmaster dan klik 'Verify'. Selesai

Sekian tutorial Cara Submit Blog Ke Bing Webmaster. Apabila masih ada masalah silahkan komentar dibawah. Jangan lupa follow dan like nya :p. Terima Kasih

Cara Mendaftarkan Blog Ke Alexa (Lengkap)

2014-03-14T09:42:00.001+07:00

Dikesempatan kali ini saya akan membagikan Cara Mendaftarkan Blog Ke Alexa. Alexa adalah sebuah situs yang merangking web atau blog yang didasarkan pada jumlah trafik yang masuk ke situs tersebut. Yang mana semakin kecil nilai alexa maka semakin tinggi trafik yang ada pada blog tersebut. Begitu juga sebaliknya semakin besar nilai alexa maka semakin rendah trafik dari blog tersebut.

Untuk blog ini sendiri nilai alexanya masih gendut wkwkwk :D. Bagi anda yang sudah memasang alexa toolbar di browser anda maka akan terlihat ranking dari blog ini. Nah, sekarang apa tujuan mendaftarkan blog ke Alexa? Yah tujuanya untuk mengetahui sejauh mana perkembangan blog dan kualitas trafiknya.

Biasanya blog yang memiliki nilai alexa yang kecil, banyak para advertiser yang memburu blog tersebut dikarenakan jika nilai alexanya kecil pasti blog tersebut memiliki tingkat pengunjung yang tinggi. Oleh karena itu silahkan daftarkan blog anda ke Alexa untuk memantau perkembangan pengunjung blog anda. Oke berikut Cara Mendaftarkan Blog Ke Alexa

Pertama, masuk ke http://www.alexa.com/siteowners/claim
Kedua, masukkan URL blog anda dikolom yang telah disediakan

Ketiga, Setelah anda mengisi URL blog, akan muncul tampilan seperti ini pilih aja yang "Free"

Keempat, Setelah itu anda akan diminta untuk memverifikasi blog anda dengan meletakkan kode yang diberikan untuk ditaruh di blog. Copy kode yang mirip dengan kotak berwarna merah dibawah ini

Kelima, Masuk ke akun blogger anda kemudian klik template
Keenam, letakkan kode yang anda dapat tadi dibawah kode <head>
Ketujuh, Kembali ke halaman verifikasi, klik 'Verify my ID' (Jika berhasil akan muncul tampilan seperti ini)

Kedelapan, Klik next kemudian isikan formulir sesuai dengan blog anda. Kemudian klik Save.

Sekarang blog anda sudah terdaftar di Alexa. Semoga blog anda mempunyai nilai alexa yang kecil. Sekian artikel Cara Mendaftarkan Blog Ke Alexa. Seoga bermanfaat. Happy blogging :)

Cara Membuat Daftar Isi Otomatis Berdasarkan Label

2014-03-12T15:35:00.000+07:00

Pada postingan sebelumnya saya sudah membagikan Cara Membuat Daftar Isi Dengan Navigasi. Nah, untuk kali ini saya akan membagikan Cara Membuat Daftar Isi Otomatis Berdasarkan Label. Daftar isi inilah yang menurut saya sangat simple karena daftar isi ini cuma menampilkan judul-judul yang ada dalam blog dan membaginya dalam label/kategori yang ditentukan dan diberi fungsi scroll. Berikut tampilanya

Cara Membuat Daftar Isi Otomatis Berdasarkan Label

Pertama, Klik Laman > Laman baru
Kedua, Pilih mode HTML
Ketiga, masukkan kode berikut di kolom tersebut

<div style="background: transparent url(#) no-repeat; border: 1px solid white; height: 400px; overflow: auto; padding-left: 5px; width: 95%;">
<script language="javascript">
numposts=9999;
home_page="rahmatkriz.blogspot.com";
explanpost="new";
</script>
<br />
<ul><script src="https://boyzrahmatkriz.googlecode.com/svn/daftar%20isi%20scroll.js">
</script></ul>
</div>

ganti kode yang berwarna kuning dengan URL blog anda

Keempat, Simpan dan ihat hasilnya
Sekian tutorial yang singkat ini semoga bermanfaat. Happy blogging

Cara Membuat Daftar Isi Dengan Navigasi

2014-03-12T09:56:00.001+07:00

Halo sobat blogger kembali lagi bersama saya ramatkriz. Kali ini saya akan memberikan tutorial Cara Membuat Daftar Isi Dengan Navigasi. Membuat daftar isi adalah cara agar pengunjung bisa lebih mudah memilih dan membaca artikel di blog.

Sebenarnya banyak macam-macam daftar isi yang bisa diterapkan di blog mulai dari daftar isi berdasarkan label, daftar isi accordion, daftar isi tabulasi, dan daftar isi dengan navigasi itu semua tergantung anda ingin memasang yang mana.

Nah, kali ini saya akan membahas cara membuat daftar isi dengan navigasi. Untuk daftar isi yang lainya ditutorial selanjutnya aja yah. Tampilan daftar isi ini mirip seperti yang ada di blog ini (jika belum dihapus) berikut tampilanya

Berikut Cara Membuat Daftar Isi Dengan Navigasi yang saya dapat dari DTE:]

Pertama, Klik laman > Laman baru
Kedua, Klik mode HTML
Ketiga, Masukkan kode berikut di kolom tersebut

<link href="http://dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination_minima-brown-theme.css" rel="stylesheet"></link>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://rahmatkriz.blogspot.com",
    postPerPage   = 5,
    numChars       = 370,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-toc-with-pagination.js"></script>

ganti http://rahmatkriz.blogspot.com dengan URL blog anda

Keempat, Simpan dan lihat hasilnya

Sekian artikel Cara Membuat Daftar Isi Dengan Navigasi. Semoga bermanfaat. Happy blogging

Cara Memasang Emoticon Di Komentar Blog

2014-03-11T09:39:00.000+07:00

Halo sobat blogger! Di pagi yang cerah ini saya akan memberikan Tutorial Cara Memasang Emoticon Di Komentar Blog. Memasang emoticon di komentar blog adalah salah satu cara untuk mempercantik tampilan blog. Selain untuk mempercantik tampilan blog, emoticon juga bisa menggambarkan perasaan para komentator. Dengan begitu komentar blog akan terasa lebih hidup. Untuk contoh emoticonya tampilanya seperti yang ada di blog ini.

Cara Memasang Emoticon Di Komentar Blog

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

Lewati langkah pertama bila di template anda sudah ada kode tersebut

Kedua, Letakkan kode berikut diatas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

jQuery(document).ready(function () {emoticonx({

emoRange:"#comments p, div.emoWrap",

putEmoAbove:"iframe#comment-editor",

topText:"Klik untuk melihat code!",

emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."

})

});

//]]>

</script>

<script src='https://boyz.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/></b:if>

Ketiga, Simpan Template

Ssekian tutorial Cara Memasang Emoticon Di Komentar Blog. Semoga bermanfaaat. Happy blogging :>)

Modifikasi Widget Arsip Dengan CSS

2014-03-10T12:42:00.001+07:00

Halo sobat blogger kembali lagi bersama saya rahmatkriz. Kali ini saya akan memberikan tutorial Modifikasi Widget Arsip Dengan CSS. Kira-kira tampilanya seperti gambar diatas.Tutorial ini saya dapat dari mdf-blog.Modifikasi ini hanya diberi efek keyframe dan ada bullet listnya. Bila anda tertarik dengan widget tersebut. ikuti tutorialnya dibawah ini

Pertama, Letakkan kode berikut diatas ]]><b:skin>

/* Modifikasi widget Arsip */
@keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-o-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-ms-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-moz-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
@-webkit-keyframes list_archive_anima{0%{opacity:1.0;margin-left:0px;color:brown;}60%{opacity:0;margin-left:20px;color:red;}100%{opacity:1.0;margin-left:-30px;color:orange;}}  /* brown, red, orange bisa diganti dengan warna lain */
#BlogArchive1_ArchiveList ul.posts li{
    list-style-type:circle; /* circle bisa diganti dg square, disc, georgian, decimal */ 
    width:97%;  /* max width 100% */
    color: brown; /* brown bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li:hover{
    animation:list_archive_anima 0.4s forwards; /* 0.4s merupakan durasi animasi */
    -o-animation:list_archive_anima 0.4s forwards; /* semakin kecil semakin cepat */
    -ms-animation:list_archive_anima 0.4s forwards; /* semakin besar maka akan semakin lambat */
    -moz-animation:list_archive_anima 0.4s forwards; /* nilai dapat dirubah - dalam s atau ms */
    -webkit-animation:list_archive_anima 0.4s forwards;
    color:red; /* red bisa diganti dengan warna lain */
}
#BlogArchive1_ArchiveList ul.posts li a{
    text-decoration:none; /* by: http://gubhugreyot.blogspot.com - 12 juli 2012 */
    transition:color 1.5s; /* transisi animasi warna teks link */
    -o-transition:color 1.5s; /* 1.5s bisa diperbesar atau diperkecil */
    -ms-transition:color 1.5s; /* semakin besar maka perubahan warna semakin lama  */
    -moz-transition:color 1.5s; /* tsemakin kecil akan semakin cepat */
    -webkit-transition:color 1.5s; /* nilai dalam s atau ms */
}
#BlogArchive1_ArchiveList ul.posts li:hover a{
    color:red; /* red bisa diganti dengan warna lain */
}
/* Modifikasi widget Arsip */

Kedua, Simpan template.
Widget tersebut sesuaikan sendiri dengan widget arsip anda. Sekian artikel Modifikasi Widget Arsip Dengan CSS semoga bermanfaat. happy blogging :>)

Cara Memasukkan Video Youtube Di Blog

2014-03-07T19:39:00.000+07:00

Kali ini saya akan membagikan Cara Memasukkan Video Youtube Di Blog. Memasukkan video youtube di blog ada dua cara yaitu langsung melewati postingan dan langsung dari Youtube. Melewati postingan yaitu dengan mengklik menu video yang ada di postingan blog dan langsung dari Youtube adalah mengambil kode embed yang ada pada video yang akan anda masukkan. Video yang nantinya akan anda masukkan di blog bisa anda taruh di postingan maupun sidebar. Berikut cara memasukkan video youtube di blog

Memasukkan video lewat postingan

Pertama, Klik "insert a video"

Kedua, Pilih "From Youtube"
Ketiga, Cari video yang akan anda masukkan di blog misalkan "Trik Dasar Pemain Futsal Mengecoh Pemain Belakang"

Keempat, Pilih video tersebut kemudian klik pilih
Selesai untuk cara memasukkan video melewati postingan.

Memasukkan video langsung dari Youtube

Pertama, Cari video yang akan anda masukkan (saya akan mengambil video yang tadi)
Kedua, klik kanan pada video tersebut kemudian klik "copy embed code"

Ketiga, Pastekan kode yang didapat di postingan mode HTML.

Penjelasan :

<iframe width="640" height="360" src="//www.youtube.com/embed/7OqjlKk7nfk?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

Atur width dan height sesuai kebutuhan anda. Untuk memberikan rata tengah tambahkan tag <center> dan penutup </center>

<center><iframe width="640" height="360" src="//www.youtube.com/embed/7OqjlKk7nfk?feature=player_detailpage" frameborder="0" allowfullscreen></iframe></center>

Agar Valid HTML 5 hilangkan tulisan frameborder="0" allowfullscreen dan ganti <iframe> dengan <object>

<center><object width="640" height="360" src="//www.youtube.com/embed/7OqjlKk7nfk?feature=player_detailpage"></object></center>

Keempat, Publikasikan

Maka videonya akan jadi seperti ini

untuk memasang di sidebar tinggal klik Tata Letak>Tambahkan gadget>HTML/JavaScript pastekan kode yang didapat dikolom Javascript.

Sekian artikel Cara Memasukkan Video Youtube Di Blog. Semoga bermanfaat.

Cara Membuat Tombol Share Di Bawah Postingan

2014-03-05T14:34:00.002+07:00

Dikesempatan kali ini saya akan membagikan tutorial Cara Membuat Tombol Share Di Bawah Postingan. Menambahkan tombol share dibawah postingan adalah salah satu cara untuk menyebarluaskan artikel blog melewati pengunjung.

Biasanya pengunjung yang suka dengan artikel yang dia baca dan menurut dia bermanfaat bagi orang lain otomatis dia akan membagikan artikel tersebut ke sosial media seperti facebook, twitter, dan google plus. Cara seperti ini juga salah satu cara untuk menigkatkan traffic blog.

Tombol share yang akan saya bagikan ini mirip seperti yang ada di blog ini (jika belum di hapus). Berikut tampilanya

Berikut Cara Membuat Tombol Share Di Bawah Postingan

Pertama, Letakkan kode berikut diatas ]]></b:skin>

.tb-share {
background: #ffffff;
border: none solid #999;
padding: 5px;
}

.fbshare {line-height: 20px; color: #fff !important; background: #3b5998; text-decoration: none !important; border: 1px solid #313c7d; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px; border-radius: 2px;}
.twshare {color: #fff !important; background: #4099FF; text-decoration: none !important; border: 1px solid #3a8be8; padding: 3px;  font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.plshare {color: #fff !important; background: #c0361a; text-decoration: none !important; border: 1px solid #9c2c15; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.dgshare {color: #fff !important; background: #5b88af; text-decoration: none !important; border: 1px solid #4a6f8f; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.lkshare {color: #fff !important; background: #005a87; text-decoration: none !important; border: 1px solid #003f5e; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}
.tcshare {color: #fff !important; background: #157501; text-decoration: none !important; border: 1px solid #105901; padding: 3px; font-family: arial, verdana, sans-serif; font-size: 12px; line-height: 20px; border-radius: 2px;}

Kedua, Letakkan kode berikut dibawah kode <data:post.body/> (Jika di template blog anda ada dua/tiga kode <data:post.body/> maka letakkan di kode yang ke dua)

<div class='tb-share'>
SHARE THIS ARTICLE :
<a class='fbshare' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a>
<a class='twshare' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a>
<a class='plshare' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkshare' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tcshare' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='dgshare' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
</div>

Ketiga, Simpan template

Sekian artikel Cara Membuat Tombol Share Di Bawah Postingan. Semoga bermanfaat. Happy blogging :>)

Cara Submit Sitemap Ke Google Webmaster Tools

2014-03-03T15:23:00.002+07:00

Halo sobat blogger kembali lagi bersama saya rahmatkriz :-). Kemarin saya sudah memberikan tutorial Cara Mendaftarkan Blog Ke Google. Nah sekarang saya akan memberikan tutorial yang sama-sama berhubungan dengan Google yaitu Cara Submit Sitemap Ke Google Webmaster Tools.

Sebelum masuk ke tutorial apakah anda tahu apa itu sitemap? Yah, sitemap adalah peta situs yang nantinya akan dikirimkan ke Google webmaster tools agar semua artikel yang kita publish cepat terindeks google. Sehingga setiap kita mempublish artikel otomatis google akan langsung mengindex artikel kita dan langsung muncul di halaman pencarian google.

Berikut Cara Submit Sitemap Ke Google Webmaster Tools

Pertama, masuk ke Google webmaster tools
Kedua, klik blog anda yang mau ditambahkan sitemap
Ketiga, klik menu "crawl" disebelah kiri dan pilih "sitemap"

Keempat, klik "ADD/TEST SITEMAP" dan muncul tampilan seperti ini

Isikan kotak yang berwarna merah dengan kode dibawah ini dan letakkan satu persatu dan setelah satu kode masuk jangan lupa klik "Submit Sitemap."

atom.xml?
atom.xml?redirect=false
feeds/posts/default?orderby=updated
atom.xml?redirect=false&start-index=1&max-results=500

Setelah anda memasukkan kode tersebut satu persatu akan muncul tampilan seperti dibawah ini. Klik aja "Refresh the page"

Kelima, Setelah anda selesai semua memasukkan kode-kode tersebut. akan muncul tampilan seperti dibawah ini

Kalau punya anda belum muncul warna merahnya ya umak sabaro :-d (kamu sabaro) dalam beberapa jam pasti muncul.

Yah sekian dari tutorial Cara Submit Sitemap Ke Google Webmaster Tools. Semoga bermanfaat happy blogging :>)

Cara Mendaftarkan Blog Ke Google

2014-03-02T18:04:00.000+07:00

Cara Mendaftarkan Blog Ke Google - Setelah anda membuat blog dan memposting artikel kini saatnya anda mendaftarkan blog ke Google. Mendaftarkan blog ke google adalah hal yang wajib bagi setiap blogger yang mau blognya dikunjungi banyak orang.

Tapi lihat dulu tujuan anda ngeblog untuk apa kalau cuma buat pribadi atau cuma dikunjungi oleh orang-orang tertentu, mendaftarkan blog ke Google bukanlah hal yang penting. Tapi kalau tujuan anda membuat blog ingin dikunjungi banyak orang, mendaftarkan blog ke Google adalah hal yang wajib.

Apalagi kalau artikel blog anda banyak dicari orang dan menjadi peringkat pertama di hasil pencarian, bukan tidak mungkin pengunjung akan membanjiri blog anda. oke langsung saja berikut cara mendaftarkan blog ke Google

Pertama, klik link berikut http://www.google.com/addurl
Kedua, setelah anda mengklik link tersebut akan muncul tampilan seperti ini

Isikan URL dengan URL blog anda.
masukkan kode captcha di kolom yang disediakan.

Ketiga, klik "Submit Request"

Setelah mendaftarkan blog ke Google sekarang saatnya mengambil kode verifikasi untuk dipasang di blog anda. Berikut caranya :

Pertama, buka link berikut https://www.google.com/webmasters/tools/
Kedua, klik tab "manage site/kelola situs" > Add or remove users

Ketiga, klik "manage site owner" disebelah "Add a new user"

Keempat,pilih "HTML Tag"

Kelima, kemudian copy kode yang didapat di bawah kode <head>
Keenam, setelah anda letakkan kode tersebut klik "verify"

Jika berhasil maka akan ada pemberitahuan bahwa blog anda sudah terverifikasi, kemudian klik "continue/lanjutkan". Sekian artikel dari saya semoga bermanfaat. happy blogging :>)