Tempat Tutorial Blogspot, SEO, HTML5, CSS3, Facebook, Twitter, Software, Game, Motivasi, Tips dan Trik.

Articles by "Blogging"
Twitter Facebook

08:30 ,
Syntax Highlighter Pada Tag Blockquote - Pada Kesempatan yang lalu, saya pernah memposting Tutorial tentang Cara Memasang Prism Syntax Highlighter. Nah, Pada kesempatan kali ini saya akan posting Bagaimana Cara Memasang Syntax Highlighter Pada Tag Blockquote. Jika sebelumnya sobat harus menerapkan kode pemanggil di mode HTML, sekarang sobat tidak perlu repot repot menerapkan kode pemanggil di mode HTML lagi, karena kita akan menggabungkannya dengan tag Blockquote.

Syntax Highlighter Pada Blockquote

 1. Letakkan kode CSS berikut ini dibawah kode ]]></b:skin>

/*

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

*/

pre code {

display: block; padding: 0.5em;

background: white; color: black;

}

pre .comment,

pre .template_comment,

pre .javadoc,

pre .comment * {

color: #800;

}

pre .keyword,

pre .method,

pre .list .title,

pre .clojure .built_in,

pre .nginx .title,

pre .tag .title,

pre .setting .value,

pre .winutils,

pre .tex .command,

pre.http .title,

pre .request,

pre .status {

color: #008;

}

pre .envvar,

pre .tex .special {

color: #660;

}

pre .string,

pre .tag .value,

pre .cdata,

pre .filter .argument,

pre .attr_selector,

pre .apache .cbracket,

pre .date,

pre .regexp,

pre .coffeescript .attribute {

color: #080;

}

pre .sub .identifier,

pre .pi,

pre .tag,

pre .tag .keyword,

pre .decorator,

pre .ini .title,

pre .shebang,

pre .prompt,

pre .hexcolor,

pre .rules .value,

pre .css .value .number,

pre .literal,

pre .symbol,

pre .ruby .symbol .string,

pre .number,

pre .css .function,

pre .clojure .attribute {

color: #066;

}

pre .class .title,

pre .haskell .type,

pre .smalltalk .class,

pre .javadoctag,

pre .yardoctag,

pre .phpdoc,

pre .typename,

pre .tag .attribute,

pre .doctype,

pre .class .id,

pre .built_in,

pre .setting,

pre .params,

pre .variable,

pre .clojure .title {

color: #606;

}

pre .css .tag,

pre .rules .property,

pre .pseudo,

pre .subst {

color: #000;

}

pre .css .class, pre .css .id {

color: #9B703F;

}

pre .value .important {

color: #ff7700;

font-weight: bold;

}

pre .rules .keyword {

color: #C5AF75;

}

pre .annotation,

pre .apache .sqbracket,

pre .nginx .built_in {

color: #9B859D;

}

pre .preprocessor,

pre .preprocessor * {

color: #444;

}

pre .tex .formula {

background-color: #EEE;

font-style: italic;

}

pre .diff .header,

pre .chunk {

color: #808080;

font-weight: bold;

}

pre .diff .change {

background-color: #BCCFF9;

}

pre .addition {

background-color: #BAEEBA;

}

pre .deletion {

background-color: #FFC8BD;

}

pre .comment .yardoctag {

font-weight: bold;

}


2. Letakkan kode berikut ini diatas kode </body>
<script src="http://boyz.googlecode.com/svn/JS/highlighter.js" type="text/javascript">



<script type='text/javascript'>

//<![CDATA[

// Manipulasi tag pada blockquote

$('.post-body, .post-body p, div.post-body, #text-body, #main_text').each(function () {

    $('blockquote[class="tr_bq"]').replaceWith(function () {

        return $('<pre><code>' + $(this).html() + '</code></pre>

');

    });

});

//]]>

</script>

<script>

hljs.initHighlightingOnLoad();

</script>

 3. Simpan .

 Ada banyak pilihan CSS untuk Syntax Highlighter tersebut, untuk Demo cssnya bisa dilihat Disini dan untuk kode CSSnya bisa ambil Disini. Silahkan sesuaikan tampilan CSSnya.
Twitter Facebook

21:34 1 ,
Tombol Back To Top adalah sebuah tombol yang berfungsi untuk memudahkan pengunjung kembali ke atas artikel secara otomatis. Tombol ini bisa di bilang penting karena jika sobat mempunyai artikel yang cukup panjang dan pengunjung ingin kembali keatas artikel harus menscroll keatas. Jika ada tombol ini maka pengunjung akan cukup terbantu.

Saya akan memberikan tutorial cara memasangnya di blog. Langsung saja simak langkah langkahnya :


Berikut Tutorial Cara Memasang Tombol Back To Top:

1. Login ke blogger.com
2. Pilih Template >> Edit template
3. Kemudian cari kode </head> (gunakan CTRL+F untuk mempermudah pencarian)
4. Letakkan 2 kode di bawah ini, diatas kode </head>

<script type="text/javascript" src="https://googledrive.com/host/0B1xeWeMyQXhgZ2FCT3VCYVRpZWc/"></script> 

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

5. Kemudian Cari kode </body>
6. Letakkan kode di bawah ini tepat di atas kode </body>
<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC8L7Hqhr8rJ4pzKPdY-rsgotql2gUv8HLdqYEJaE92UCsoTrZII2lv9cWrJR0opa7h_juoB-CfEUv1oYeEB5dhHmOe65vw32ACn0CXDsOxs-chtcnJ3ABtyvDZpF_knSGUuu26mbFRVM/s1600/back-to-top.gif'/></a>

7. Setelah selesai simpan template

Keterangan:

  • Yang saya beri warna merah adalah URL dari gambar Back To Top, jika ingin menggantinya saya sediakan sedikit gambar.
     

   

          
  • Klik kanan pada gambar lalu salin URL gambar, dan hapus kode berwarna biru terus pastekan
Twitter Facebook

07:39 2 , ,
Memasang Prism Syntax Highlighter Di Blog - Bagi sobat yang sudah lama menggeluti dunia blogging pasti sudah tidak asing lagi dengan Syntax Highlighter.


Syntax Highlighter ini pertama kali saya lihat di blog kang ismet . Oke langsung saja pada intinya :)

Pertama tama buka blogger >> Template >> Edit HTML >> Kemudian, cari </b:skin>, lalu, letakan CSS Dibawah ini tepat Diatasnya :


/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

Setelah itu, simpan 3 kode di bawah ini tepat sebelum kode </body> atau </head> 
<script src="https://arlina-design.googlecode.com/svn/prism.js" type="text/javascript">


<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>


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

Setelah itu simpan template sobat. Selanjutnya saat Anda membuat post baru, terapkan kode pemanggil di bawah ini pada postingan (Di Tab HTML) 
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Source : http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html
Twitter Facebook

08:47 2 ,
Cara Membuat Readmore Otomatis di Blog - Seringkali kita melihat kata Readmore/Baca selengkapnya di homepage blog seseorang. Kegunaan redmore adalah untuk meringkas artikel dihalaman utama blog kita. Jika kita baru membuat blog pertama kali dan memposting sebuah artikel pasti halaman blog kita akan melihat deretan artikel yang panjang. Fungsi readmore adalah seperti itu, memotong sebagian artikel untuk ditampilkan dihalaman utama.



Secara ringkas fungsi readmore adalah:
  • Menghemat ruang pada tampilan halaman utama blog/website.
  • Menjadi lebih elegan dan interaktif.
  • Menambah pageviews artikelyang dibaca pengunjung.
  • Menambah link anchor terhadap judul.
Berikut Cara Membuat Readmore yang lebih berkualitas terhadap SEO:
1. Login ke Blogger > Template > Edit HTML
2. Tekan Ctrl+F
3. Cari kode </head>, dan letak kode ini diatasnya:

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 220;

img_thumb_height = 120;

img_thumb_width = 220;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};

//]]>

</script>

4. Ganti kode <data:post.body/> ( yang pertama ) pada template anda, dengan kode berikut :

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

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

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>

<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>

</b:if></b:if>

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

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

5. Klik Pratinjau/Preview unutk melihat hasilnya, jika sudah terpasang dengan benar klik Save Template.

Terima kasih telah membaca artikel ini. :)

Twitter Facebook

08:56 , ,
Kenama - Kalian mungkin pernah melihat blog yang menampilkan salam pembuka ketika memuat hompage, Dan rasanya blog kita akan terasa ramah jika kiita memasang widget ini.Dan jika sobat Ingin memasang widget Ini, sobat bisa mengikuti langkah Langkah dibawah ini :


BERIKUT LANGKAH LANGKAH Memasang Widget Salam Pembuka :


  1. Login ke akun Blogger sobat masing masing
  2. Masuk Ke menu Tata Letak
  3. Klik Tambahkan Gadget >> HTML/JavaScript
  4. kemudian Copy kode dibawah ini, Dan pastekan Pada kolom yang telah tersedia
    5. <script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda ");
alert("salam kenal ya "+name)
alert("selamat browsing di blog saya")
</script>
    Teks yang berwarna merah bisa sobat ganti dengan teks yang sobat inginkan
  5. Klik Simpan dan lihat Hasilnya

Semoga Bermanfaat :D
Twitter Facebook

08:03 ,

Membuat Label / Tag Cloud Bergerak Berputar - Kali Ini saya akan share Cara Membuat Label / Tag Cloud Bergerak Berputar Di BLOG, Oke Lah langsung lihat SSnya dibawah ini :

Bagaimana Menurut Sobat ???? Keren bukan :D
Jika sobat sekalian ingin memasang diblog masing masing, Simak langkah langkah dibawah ini :

BERIKUT LANGKAH LANGKAHNYA :

1. Login Blogger
2. Pilih Template => Klik Edit HTML
3. Cari Kode
<b:section class='sidebar' id='sidebar' preferred='yes'>
  Supaya Mepercepat Pencarian guanakan CTRL+F
4. Kemudian Copy Paste Kode di bawah ini tepat di atas 
<b:section class='sidebar' id='sidebar' preferred='yes'>


<b:widget id='Label99' locked='false' title='Tag Cloud/Label' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://anvity.googlecode.com/files/swfobject.js' type='text/javascript'/>
<div id='flashcontent'> by <a href='http://kenama.blogspot.com/'>Majid Alfredi</a> and <a href='http://kenama.blogspot.com'>Kenama</a> Distributed by <a href='http://kenama.blogspot.com'>MaVny</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</b:includable>
</b:widget>

kalian bisa rubah ukuran sesuai yang kalian inginkan dengan mengganti kode kode di bawah ini .

                1. " 250px " Lebar widget
                2. " 300px " Tinggi widget
                3. " #ffffff " Warna latar
                4. " 0x333333 " Warna huruf
                5. " 12 " Ukuran huruf
5. klik simpan template . Dan Lihat hasilnya .
Twitter Facebook

08:00 ,
Permalink SEO

Permalink sangat baik dalam SEO halaman posting blog. Permalink akan mngindikasikan mengenai judul dan link artikel yang sedang dibaca oleh pengunjung. Permalink juga digunakan sebagai media untuk mempublikasi kepada pengunjung mengenai artikel yang dibaca.

Permalink adalah link permanen yang menuju halaman tertentu dari sumber artikel itu berada. Permalink sangat baik dalam yang membuat sebuah artikel yang berisi link murni dari halaman blog kita sendiri. Sehingga akan membuat halaman blog kita mempunyai nilai SEO yang lebih baik lagi. Selain itu, permalink juga sebagai internal link yang membantu indexing di search engine berdasarkan keyword yang tepat.

BERIKUT LANGKAH LANGKAHNYA


1.Login ke dashboard blogger anda, pilih Rancangan > Edit HTML
2.Tekan Ctrl+F
3.Cari kode ]]></b:skin> pada template anda.
4.Letakkan kode CSS dibawah ini diatas kode ]]></b:skin>.

.permalink-seofriendly

{border: 2px dashed #424242;

padding: 5px;

background: #fbfbef;-moz-border-radius:5px;}

.permalink-seofriendly a

{background:none;}

img.float-right {margin: 5px 0px 0 10px;}

img.float-left {margin: 5px 10px 0 0px;}

5.Kemudian cari kode <data:post.body/>. Letakkan kode permalink dibawah ini tepat dibawah kode <data:post.body/>. Jika template anda telah menggunakan fungsi Read More, maka letakkan kode permalink dibawah kode <data:post.body/> yang ke-2.

<div class='permalink-seofriendly' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: justify;'>

<small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>. Anda boleh menyebarluaskan atau mengcopy artikel <strong><data:blog.pageName/></strong> ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.</small></div>

6. Jika anda ingin membuat url postingan pada permalink menjadi link aktif, sobat dapat mengganti kode <data:post.url/> dengan kode <a expr:href='data:post.url'><data:post.url/></a>.
7. Silahkan melakukan modifikasi pada jenis style border atau background warna sesuai keinginan anda. Mencoba membuat dengan kreasi sendiri tentunya akan lebih memuaskan hasilnya.
8. Save/Simpan template anda.

Lihat hasilnya pada bagian bawah postingan
Semoga bermanfaat :D
Twitter Facebook

10:18 ,
Google Drive adalah sebuah layanan hosting gratis yang disediakan oleh mesin pencari raksasa google dan merupakan salah satu layanan Cloud Computing. Kalian bisa upload file apa saja di Google Drive hingga kapasitas 15GB. Untuk lebih detailnya bisa  berkunjung di id.wikipedia.org/wiki/Google_Drive.


Upload File CSS, JavaScript di Host Google Drive

Cara Upload File CSS, JavaScript di Host Google Drive:

1. Silahkan menuju ke drive.google.com
2. Login dengan alamat Gmail kamu
3. Lalu, upload file seperti CSS atau JavaScript dan tunggu hingga upload selesai

Upload File CSS, JavaScript di Host Google Drive

4. Beri tanda centang atau klik kanan lalu klik share



5. Akan muncul jendela popup Sharing Setting, lalu ubah menjadi public, seperti gambar di bawah



6. Copy alamat URL, dan paste di notepad atau dimana saja. Lalu klik Done atau selesai

Sekarang untuk mengkoneksikan file yang ada di google drive dengan blog kamu, caranya adalah:

Perhatikan, link to share file tadi yang sudah kamu paste di notepad, contohnya seperti ini :
https://drive.google.com/file/d/0B1xeWeMyQXhgZXdqcEd3UDgzMXM/edit?usp=sharing
Kode berwarna merah silahkan di copy dan paste di belakang URL ini:
https://googledrive.com/host/paste disini
Akan menjadi seperti ini: 
https://googledrive.com/host/0B1xeWeMyQXhgZXdqcEd3UDgzMXM/

Nah, sekarang dengan link seperti itu sudah bisa di gunakan untuk menghost file yang ada di Google Drive di blog sobat. Mohon di perhatikan jika sobat mengelompokan semua file dalam satu folder, jangan lupa untuk mengshare foldernya dan di ubah pengaturannya menjadi Public juga, jika tidak maka tidak akan bisa di akses.

Untuk menghost javascript contohnya seperti ini:
<script type="text/javascript" src="https://googledrive.com/host/0ByvUBU3eU6tucU4tcDk3WWYtWW8/"></script>
Dengan membackup semua data yang ada di Google Code dan di upload ke Google Drive maka semua data project kamu tidak akan hilang jika Google Code akan benar-benar di tutup dan dihapus semua data-datanya.

Semoga bermanfaat dan bisa membantu teman-teman semua.
Twitter Facebook

09:24 , ,
Trafik menjadi hal yang penting dalam suatu situs, apa jadinya kalau suatu web/blog tanpa adanya trafik. Trafik di sini adalah pengunjung yang datang dari berbagai sumber, salah satunya dari sosial media.

Seperti kita ketahui banyak orang yang menggunakan sosial media, entah untuk berbagi sesuatu, berinteraksi dengan teman, bahkan untuk pasar bisnis. Banyak blogger yang menyadari kekuatan dari sosial media, seperti: Facebook, Twitter, Google Plus, ataupun Pinterest.

3 Cara Mendapatkan Trafik Dari Sosial Media
Image: viralheat.com

Berikut Tiga Cara Mendapatkan Trafik Dari Sosial Media:

1. Halaman FansPage

Halaman FansPage adalah hal yang wajib di miliki oleh semua situs, entah web berita atau blog pribadi sekalipun. Kamu bisa membuat halaman fans di Facebook atau membuat akun di Twitter, karena dengan cara ini kamu bisa menjaring pengunjung yang tertarget. Jika jumlah follower akun kamu banyak, kamu bisa membagikan artikel di Halaman Fans tersebut.

2. Gunakan Hashtag

Untuk memperkuat artikel kamu di jejaring sosial, gunakan hashtag dalam membagikan setiap artikel kamu. Karena dengan hashtag, tidak hanya mendapatkan pengunjung dari follower saja melainkan dari berbagai akun lainnya.

Hashtag itu ibarat label atau kata kunci, jika ada yang mengklik link hashtag itu maka akan muncul deretan konten yang menggunakan hashtag yang sama. Jika banyak yang menggunakan hashtag yang sama, maka akan menjadi trending topik seperti yang kita lihat di Twitter dan Google Plus.

3. Bagikan di semua Jejaring Sosial

Untuk mendapatkan pengunjung yang cukup banyak tidak hanya terpaku oleh satu jejaring sosial. Gunakan dan manfaatkan semua jejaring sosial yang ada, Facebook, Twitter, Google Plus, Pinterest. dan masih banyak lagi.


Jejaring Sosial atau Sosial Media bisa menjadi tempat yang kuat untuk membangun komunitas dan mendapatkan trafik. Maka dari itu manfaatkan dan maksimalkan akun sosial media kamu. Selamat mencoba!
Twitter Facebook

09:10
Ternyata kamus juga berlaku dalam dunia blogging, ya fungsi kamus adalah untuk membantu menerjemahkan atau memahami arti dari setiap kata yang tidak kita kenal. Bagi blogger pemula atau blogger yang baru terjun di dunia blogging akan kesulitan memahami arti atau maksud dari istilah-istilah yang sering di dengarnya. 

Kamus Istilah Blogger

Adsense

Jaringan periklanan online yang terkenal di internet yang di kelola oleh Google. Adsense memberi kesempatan kepada para blogger untuk menjadi publisher iklan dengan menampilkan iklan kontekstual di blognya.

Adword

Adword memungkinkan perusahaan atau individu untuk memasang iklan dan mempromosikan produk, jasa atau situs mereka berdasarkan perhitungan CPC (Cost per Click).

Affiliate (Affiliasi)

Adalah sebuah cara untuk mendapatkan uang dari internet tanpa modal, dimana seorang pemilik program affiliasi memberi kesempatan kepada orang lain untuk memasarkan produk dengan imbalan sejumlah komisi jika produk itu berhasil di jual.

Akismet

Plugin filter spam untuk blog berplatform wordpress yang sangat populer. Dibuat oleh perusahaan yang sama dengan membuat kode wordpress. Istilah ini sangat penting untuk pengguna wordpress.

Alexa

Adalah sebuah perusahaab yang memantau sebuah traffic dari semua situs di internet. Semakin rendah ranking alexa, maka semakin tinggi trafficnya.

Anchor Text

Adalah sebuah teks yang diigunakan di dalam backlink. Anchor text merupakan salah satu faktor penting yang mempengaruhi posisi ranking sebuah situs atau blog di hasil pencarian search engine.

SERP

SERP kepanjangannya adalah Search Engine Result Page. Dalam bahasa indonesia hasil halaman di dalam mesin pencari. Istilah ini biasa di gunakan blogger yang terbiasa mengotak-atik seo.

Atom

Sebuah format sindikasi feed yang di kembangkan sebagai alternatif RSS. Atom memungkinkan orang untuk mendapatkan update artikel dari sebuah situs web blog.

Backlink

Link yang tampil di blog atau situs lain dan mengarah ke halaman utama atau halaman artikel dalam suatu blog atau situs. Backlink masih di anggap penting karena Google dan mesin pencari lain mempergunakan jumlah dan kualitas backlink sebagai ukuran tingkat kepercayaan sebuah blog atau situs.

Blackhat

Ini merupakan teknik SEO yang tidak etis dan bahkan ilegal dengan tujuan tertentu. Menyembunyikan teks di balik gambar atau menggunakan halaman doorway dengan re-direct.

Blog

Adalah sebuah situs di mana sang pemiliknya mempublikasikan pikira, ide, atau pengetahuan mengenai topik tertentu.

Blog Carnival

Sebuah event ketika para blogger berkumpul untuk membuat sebuah koleksi artikel mengenai sebuah topik tertentu.

Blogger

Seseorang yang memiliki sebuah situs blog. Blogger juga merupakan nama komersil platform dan hosting blog gratis milik Google, yang biasa di sebut blogspot.

Blogosphere

Istilah ini menjelaskan bahwa blog ada bersama-sama terhubung sebagai sebuah komunitas (atau sebagai kumpulan masyarakat yang terhubung) atau sebagai jaringan sosial di mana penulis sehari-hari dapat mempublikasikan pendapat mereka. Karena istilah telah diciptakan, telah dirujuk di sejumlah media dan juga digunakan untuk merujuk ke Internet.

Blogroll

Fitur blog yang sudah sangat populer yang memungkinkan pemilik blog menampilkan daftar blog-blgo lain yang di rekomendasikan. Biasa di pasang di bagian sidebar atau footer.

Comment Spam

Komentar yang ditulis semata-mata hanya untuk mendapatkan backlink dan di harapkan mendapatkan traffic pengunjung yang menulis komentar spam tersebut. Spam tidak hanya berlaku kepada orang yang menanam backlink sembarangan saja, spam juga berlaku komenatar yang tidak ada hubungannya dengan artikel yang di komentarin alia OOT (Out Of Topic).

CPC

Singkatan dari Cost Per Click, dan ia mempresentasekan suatu bentuk onlin advertising dimana si pengiklan memberikan sejumlah uang kepada setiap pengunjung yang mengklik iklannya dan mengunjungi situsnya.

CPA

Singkatan dari Cost Per Action, dan ia mempresentasekan suatu bentuk onlin advertising dimana si pengiklan akan membayar ketika pengunjung sebuah situs melakukan tertentu (misalnya ketika mereka membeli sebuah produk tertentu).

CPM

Singkatan dari Cost Per Mille, dimana mille berarti 1000 dalam bahasa latin. Advertiser (pengiklan) akan di bayar per 1000 tayangan atau impressi dari iklan yang di pasang di situs web blognya.

CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Untuk penjelasan lebih lanjut silahkan kunjungi id.wikipedia.org/wiki/Cascading_Style_Sheets dan untuk belajar CSS bisa berkunjung ke www.w3schools.com/css.

HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. HTML dan CSS tidak dapat di pisahkan. Untuk penjelasan lebih lanjut silahkan kunjungi id.wikipedia.org/wiki/HTML dan untuk belajar HTML bisa berkunjung ke www.w3schools.com/html/default.asp.

Domain

Adalah sebuah nama domain untuk situs web blog atau nama hosting domain. Contoh: Google.com, Youtube.com, dll.

Feedburner

Sebuah layanan onlin milik google yang menyediakan layanan rss feed. Feedburner merupakan layanan gratis yang menyediakan RSS Feed dengan fitur menarik, dan memudahkan pemilik situs atau blog mengumpulkan data statistik RSS Feed situs atau blognya.

Google Analytics

Sebuah layanan gratis dari google yang memberi pemilik situs sejumlah informasi dan data statistik mengenai jumlah traffic dan pengunjung situsnya.

Niche

Dalam jaringan internet, niche merujuk kepada sebuah topik atau subyek tertentu. Kebanyakan situs mencakup satu atau lebih niche.

Nofollow

Disebut tag nofollow, adalah sebuah tag yang sisipkan dalam kode link yang berfungsi untuk memerintah robot mesin pencari agar tidak mengikuti link bersangkutan.

Dofollow

Kebalikan dari tag nofollow, tag dofollow berfungsi untuk memerintah mesin pencari agar mengikuti link tersebut.

PageRank

Sering disebut Google PageRank, adalah sebuah algoritma yang digunakan Google untuk menilai tingkat kepercayaan situs web blog.

Page Views

Sering disebut impresi. Setiap kali pengguna internet membuka sebuah halaman situs tertentu, satu pageview akan dihitung. Situs-situs populer bisa mendapatkan jutaan pageviews setiap bulannya.

RSS

Singkatan dari Really Simple Syndication. RSS adalah suatu format halaman yang digunakan untuk mengirimkan informasi dari sebuah situs dan halaman situs yang di update secara berkala.

SEO

Singkatan dari Search Engine Optimization. SEO mencakup sejumlah aktivitas yang ditujukan untuk meniingkatkan ranking sebuah situs di halaman hasil pencarian mesin pencari.

Social Bookmarking

Adalah situs yang memungkinkan penggunanya untuk menemukan, mengirimkan, meyebarluaskan, dan memberi vote sebuah artikel dari internet.

Social Media

Sebuah istilah umum yang digunakan untuk mendefinisikan situs dan aplikasi web di mana terdapat unsur interaksi sosial di  dalamnya.

Trackback

Sebuah tool networking, yang digunakan untuk memberi informasi kepada sebuah situs ketika seseorang menautkan link kesitus tersebut.

Unique Visitor

Adalah sejumlah pengunjung yang masuk ke sebuah situs dalam jangka waktu tertentu.

Istilah-istilah diatas adalah sebagian dari kamus blogger yang ada, untuk mendapatkan semua kamus istilah blogger ini bisa mendownload di sebuah situs duniadownload.com.

Twitter Facebook

03:40 ,
Dalam mengoptimalkan blog kita bisa mengatasi beratnya loading blog, sehingga blog kita bisa ringan dan loading cepat. Terkadang kita dipusingkan dengan banyaknya widget yang terpasang atau kita menginginkan hanya widget tertentu yang tampil di halaman tertentu. Sebelum membahas optimasi widget, kita bahas dulu yang menyebabkan blog kita loadingnya berat. Berikut beberapa penyebab loading blog berat:

1. Terlalu banyak widget yang terpasang

Ini biasanya terjadi pada blogger yang baru mengenal blog, sehingga banyak widget yang dipasang untuk mempercantik blog, contoh: widget musik, widget geo visitor, widget video dll


2. Template Blog

Yang terpenting dalam loading blog adalah jenis template yang digunakannya. Memang template yang keren itu tidak simple, sehingga banyak desainer template yang membuat template yang keren namun ringan dan tentunya itu tidak gratis. Ada juga template yang gratis namun tidak se-keren template berbayar. Para blogger biasa menyebutnya template SEO Friendly.

Berikut widget yang perlu dipasang di blog:

  1. Widget populars post
  2. Widget Kotak pencarian
  3. Widget Recent post
  4. Widget Followers

untuk widget archive saya rasa tidak perlu, karena bisa di ganti dengan sitemap atau daftar isi. Sobat bisa membaca pstingan saya Cara Memasang Daftar Isi Sitemap.

Berikut Optimasi Widget Mengatasi Loading Blog:

Sebenarnya cara ini hanya memberikan fungsi conditional tags pada widget tersebut untuk memberikan perintah agar suatu elemen ditampilkan pada bagian atau halaman tertentu saja dan menyembunyikan pada halaman tertentu.

Mencari ID widget

Sebelum memberi conditional tags kita harus tahu ID widget yang akan di berikan conditional tags
Masuk ke blogger.com >> layout atau tata letak >> klik edit pada widget yang akan di beri conditional tags.

Optimasi Widget

Bisa dilihat pada anak panah id widgetnya adalah HTML5. Setelah itu masuk ke Template >> Edit HTML >> klik Jump to Widget lalu pilih HTML5. Bisa lihat gambar

Optimasi Widget
Optimasi Widget


Lalu masukkan kode dibawah ini sesuai dimana widget akan ditampilkan, penempatannya setelah <b:includable id='main'> dan penutupnya </b:includable>.

Cara menampikan widget hanya di Halaman utama/indeks (Homepage)

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

Cara menampilkan widget hanya di Halaman Posting

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

Cara menampilkan widget hanya di Halaman Statis

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

Cara menampilkan widget hanya di Halaman Archive

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

Cara menampilkan widget hanya berdasarkan alamat URL

<b:widget id='HTML5' locked='false' title='' type='HTML'>
    <b:includable id='main'>
<b:if cond='data:blog.url == "Ganti dengan alamat URL Halaman di sini"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>


Cara menampilkan widget pada halaman index

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

Simpan template setelah menambahkan tag conditionalnya, hanya gunakan salah satu atau beberapa saja.
Jika ingin melakukan cara ini pada widget lain, lakukan mulai dari atas.

Dengan menambahkan conditional tags pada widget, kita bisa mengatur munculnya widget pada halaman tertentu saja. Sehingga tidak semua widget muncul pada satu halaman langsung, dan bisa untuk mengoptimalkan loading blog sehingga loading blog jadi ringan. Semoga artikel Optimasi Widget Mengatasi Loading Blog bisa bermanfaat untuk sobat blogger yang sedang mengalami loading blog yang berat dan bisa menambah wawasan pembaca. Terima kasih  :)
Twitter Facebook

09:55 ,
Apakah sobat pernah terpikir untuk memasang animasi lentera  ramadhan di blog ? Kali ini saya akan berbagi tutorial untuk menambahkan widget dekorasi untuk blog sobat untuk mempercantik di bulan ramadhan ini. Sumber tutorial ini dari www.mybloggerlab.com, yang berbahas inggris lalu coba saya posting di blog saya dengan tetap memberikan sumber linknya untuk menghargainya.

Untuk demonya bisa mengunjungi link website yang saya berikan di atas atau bisa lihat gambar di bawah ini

Memasang Animasi Lentera Ramadhan di Blog

Animasi Lentera Ramadhan ini di bangun dengan Adobe Flash sehingga jika siapa saja yang menjalankan browser tanpa Flash maka tidak akan bekerja bagaimana mestinya. Namun, saat ini, semua sudah berjalan pada Smartphone dan sistem operasi yang handal seperti Windows 7 yang telah built-in flash Terpasang, sehingga tentu tidak akan menciptakan masalah besar terhadap kompatibilitas. Menurut informasi dari websitenya widget ini sangat ringan, jadi tidak akan menghambat loading web blog sobat.

BERIKUT LANGKAH LANGKAHNYA

1. Seperti biasa sobat harus login terlebih dahulu ke blogger.com
2. Masuk ke Template >> Edit HTML dan cari kode </body>, lalu copy dan pastekan kode berikut di atasnya
<!--  Ramadan Lantern By MyBloggerLab.com -->
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="900" height="0">
<div style="float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;">
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj2" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="192" height="144"><param name="movie" value="http://mybloggerlab.com/Scripts/stardima.swf"/><param name="quality" value="High"/><param name="wmode" value="transparent"/><embed src="http://mybloggerlab.com/Scripts/stardima.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj2" width="192" height="144" quality="High" wmode="transparent"></embed></object>
</div>
</td>
</tr>
</table>
</div>
3. Simpan dan lihat hasilnya

Widget ini tidak hanya untuk pengguna Blogger. Setiap platform yang mendukung HTML dan Flash dapat dengan mudah memasang ini di situs Web sobat termasuk Wordpress dan lain-lain.

Semoga berhasil
Twitter Facebook

10:25 , ,
flipper sharing widget
Kali Ini saya akan memposting tentang Cara Membuat Tombol Share Keren Di Blog, Jika agan sekalian berminat memasang tombol share diblog agan, silahkan simak tutorialnya Dibawah ini :

LANGKAH LANGKAHNYA

  1. Pergi ke Blogger > Template 
  2. Backup template Anda 
  3. Klik Edit HTML > Lanjutkan 
  4. Klik kotak Expand Template Widget 
  5. Tambahkan CSS Dibawah ini tepat diatas ]]></b:skin> Atau </style>
    6. 
/*--------Flipper Sharing Widget ------*/ 
.flipper a { 
display:block; 
height:48px; 
width:48px; 
padding:0 4px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGw9MrrA6-r9Yeuwor_XD3uj__PwMQ5JQhA67VzwNDG3GqXJlwBPUgGMMQAk_NajtdJH36SEe629HyO6Yy-_EXwYXCGgK1iDpNRfJ2ib-eq5VfcLVKtCVqwzx2aQLpRxGdi2nU_qHJ-n_/s1600/flipper.png) no-repeat; 
-webkit-transition: ease-in 0.15s all;    
-moz-transition: ease-in 0.15s all;    
-o-transition: ease-in 0.15s all;    
-ms-transition: ease-in 0.15s all;    
transition: ease-in 0.15s all; 
cursor:pointer;
}

.flipper a.googleplus { 
background-position: 0px -348px;
} 
.flipper a.googleplus:hover { 
background-position: 0px -406px;
}

.flipper a.pinterest { 
background-position: 0px -464px; 
} 
.flipper a.pinterest:hover { 
background-position: 0px -522px;
}

.flipper a.delicious { 
background-position: 0px 0px; 
} 
.flipper a.delicious:hover { 
background-position: 0px -58px;
} 
.flipper a.digg { 
background-position: 0px -116px;
} 
.flipper a.digg:hover { 
background-position: 0px -174px;
} 
.flipper a.stumbleupon { 
background-position: 0px -812px;
} 
.flipper a.stumbleupon:hover { 
background-position: 0px -870px;
} 
.flipper a.technorati { 
background-position: 0px -928px;
} 
.flipper a.technorati:hover { 
background-position: 0px -406px;
} 
.flipper a.twitter { 
background-position: 0px -928px;
} 
.flipper a.twitter:hover { 
background-position: 0px -986px;
} 
.flipper a.facebook { 
background-position: 0px -232px;
} 
.flipper a.facebook:hover { 
background-position: 0px -290px;
} 
.flipper a.reddit { 
background-position: 0px -580px;
} 
.flipper a.reddit:hover { 
background-position: 0px -638px;
}
.flipper a.rss { 
background-position: 0px -696px;
} 
.flipper a.rss:hover { 
background-position: 0px -754px;
}

.Pleaseshare{ 
margin:10px 0px; 
color:#333333; 
font-weight:bold; 
font-size:20px; 
font-family:sans-serif;
}
  6. Kemudian, Cari kode <data:post.body/>, Paste kode dibawah ini tepat dibawah kode <data:post.body/>
    7. 
<div class='flipper'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare"> 
Please Share it! :) </div>

<!--Google Plus--> 
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest --> 
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble--> 
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS --> 
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 
</b:if></div>
<div style="clear:both"/>

  7. Terakhir, Simpan template
    8.
Semoga Berhasil :D

Terimakasih telah mampir diblog saya, semoga bermanfaat
Twitter Facebook

12:26 4 ,
Kali ini saya akan membagikan cara membuat spoiler yang bertujuan untuk menyembunyikan konten / gambar. Sebenarnya banyak sekali tutorial mengenai cara pembuatan spoiler ini tetapi  setelah dimodifikasi ternyata cukup mudah, saya hanya menambahkan efek naik keatas ( slide up ) sama turun kebawah ( slide down ).

Proses pemasangan ini cukup mudah dan mudah sekali di modifikasi.

berikut LANGKAH LANGKAHNYA



Langkah 1 : Simpan kode di bawah ini tepat di atas kode </head> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Lewati langkah ini jika blog sobat sudah terdapat jquery seperti diatas.

Langkah 2 : Tambahkan CSS Dibawah ini tepat diatas ]]></b:skin> Atau </style> 

.buka-tutup {
text-align:center;
cursor:pointer;
}

#tkp {
margin-top:15px;
padding:5px;
}


Langkah 3 : Simpan code JavaScript dibawah ini tepat di atas kode </body> 

<script type='text/javascript'>
//<![CDATA[
$('.buka-tutup').toggle(function() {
    $(this).text('Tutup Box Spoiler!');
    $('#tkp').slideDown(800);
}, function() {
    $(this).text('Buka Lagi Box Spoier-nya!');
    $('#tkp').slideUp(100);
});
//]]>  
</script>

penulisan pada html


Pemasangan kode HTML pada area posting / area blog sesiuai yang di inginkan! 


<button class="buka-tutup">Buka Box Spoiler!</button>
<div id="tkp" style="display:none;">Ini adalah Content yang di hasilkan dari tombol yang sudah sobat klik! :)</div>

Semoga Berhasil :)
sumber
Twitter Facebook

11:34 , ,
kali ini saya akan berbagi cara membuat catatan, informasi, tips, atau peringatan di blog, agar blog lebih stylish dan pengunjung betah berlama-lama di blog kita.

Sebenarnya bagi sahabat yang sudah mahir CSS dan HTML tidak akan aneh lagi dengan tutorial seperti ini. Tapi walaupun mahir dalam CSS dan HTML terkadang buntu ide untuk memoles blognya supaya lebih menarik.

Sebelum saya kasih CSS dan HTMLnya, silahkan lihat dulu penampakan blok catatan, tips dan peringatan pada demo di bawah ini :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.


Untuk memasangnya, silahkan sobat simpan kode ini di atas ]]></b:skin> atau </style> 


.info, .tips, .warning {
line-height: 22px;
min-height: 38px;
padding: 10px 12px 12px 68px;
margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gNG8_j_YqOUcX47eGqh4KrzILupH-1UTyspeKrFuLbqXm5CGKWIQQTDDWpy4VuDyH-_xONLfbua-0BiLraiW-FSbDYyTZant_a55Haxsv-MGOMIU6C_Wo53clR0dFBhuzOXdha6YNuI/s1600/info.png') no-repeat 12px 8px;
 color: #222;
 border-radius:2px;
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUo_aqkNU7v05xrIcOo15P-20o4s5nNyYC6hP09mYwgSk5XO04ZHcfpHCi_8HtYpgRMKYTGMiR0s4D8Bl11C_IvLPonJj1kixoKLIYiyybviVW59tCR5lg_McSlb88eKsI8gh5rivWGag/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
 border-radius:2px;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbjyIDSdkMNKX2j_PoDuW_M6glWTBdQUZlVWz5zRMSF7Y0Hm3bVjIM1_uT9qV8fNx87alUIAR7Q5xjM-VggdAAMK1SnUZkvecBxVpoSJpyH-6tNqpjjT9_Zx4A-O5ED4PUJbERmRceXb8/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
 border-radius:2px;
}


Untuk info, kodenya seperti ini :
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

Untuk tips, kodenya seperti ini :
<div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

Untuk warning, kodenya seperti ini :
<div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.</div>

Thanks To Kang Ismet
Twitter Facebook

07:36 3 , ,
Cara Membuat Subscribe Box Dengan CSS - Email Subscribe atau Berlangganan Email adalah sebuah layanan yang berfungsi untuk mengirimkan update artikel secara otomatis langsung ke email pengunjung, jadi nantinya pengunjung yang sudah mendaftar dan mengkonfirmasi langgananya, mereka akan langsung mendapatkan update yang terkirim secara otomatis ketika ada artikel terbaru di blog kita, jadi kita tidak perlu melakukanya secara manual, selain itu, tidak ada batas kuota langgananya, dan gratis tentunya!

Apa peranan email subscribe ini dalam meningkatkan trafik blog? Ya, layanan berlangganan via email ini dapat memberitahu para pengunjung terdaftar bahwa sudah ada artikel terbaru yang dapat mereka simak di blog kita, selain itu, email subscribe ini juga dapat mengingatkan jika suatu saat ada para pengunjung yang sudah lama tak berkunjung dan lupa akan blog kita. Memang untuk mendapatkan pelangganya tidaklah mudah, tapi setidaknya kita bisa mencoba terlebih dahulu dengan memasang widget ini, oleh karena itu, bangunlah konten yang bermanfaat, agar para pengunjung tertarik untuk berlangganan.

Berlangganan Email sering juga disebut sebagai newsletter, layanan ini merupakan salah satu teknik yang biasa dilakukan oleh blogger dalam mendongkrak kunjungan ke blog mereka, karena dengan memanfaatkan fungsi newsletter ini, itu artinya kita sudah masuk ke dalam bagian email marketer, yakni orang-orang yang menggunakan email sebagai sarana promosi (bukan spam). Untuk memaksimalkan sektor email marketing ini, terlebih dahulu anda harus mendaftarkan blog anda di feedburner, tentunya untuk menggunakan layanan gratis ini.

berikut LANGKAH LANGKAHNYA

  1. Login ke Blogger
  2. pilih menu "Tata Letak"
  3. Pilih "Tambahkan Gadget" >> "HTML/JavaScript", dan Paste-kan kode berikut :

<div class="widget-content">
<div id="subscribe-css">
<div class="subscribe-wrapper">
Ikuti Blog ini dengan memasukan Email Anda dibawah ini! Terima Kasih<br />
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=KenamaBlog" class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KenamaBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="KenamaBlog" /><input name="loc" type="hidden" value="en_US" /><input autocomplete="off" class="subscribe-css-email-field" name="email" placeholder="Enter your email address " /><input class="subscribe-css-button" title="" type="submit" value="SUBSCRIBE NOW !" /></form>
</div>
</div>
</div>
</div>

Ganti KenamaBlog Dengan ID Feedburner Sobat

      4.  Klik Simpan
   5.  Masuk ke Template > Edit HTML. Cari kode ]]></b:skin> atau </style>, agar lebih cepat, gunakan fasilitas Find ( CTRL+F  lalu pastekan script dibawah ini  tepat diatas kode ]]></b:skin> atau </style>.  



.subscribe-wrapper { color : #fff; background: none repeat scroll 0% 0% #FF6C60; font-family: "Oswald",Tahoma,Sans-serif; line-height : 20px; padding : 1px 20px 10px; text-align : center;  }  .subscribe-form { background : #FF6C60; clear : both; display : block; margin : 10px 0; overflow : hidden;  }  form.subscribe-form { clear : both; display : block; margin : 10px 0 0; width : auto; overflow : hidden;  }  .subscribe-css-email-field { background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjunk7BR-_ysGvbtPmDBLCqqN6WHKj5Dc8TT2ztMQU1N0WEYanvlF-MTT-DWk-OUH4qxxI5Weik84rfL08e15Y1ipWwDsjwvdQhEkQjKEk_ZXlG5bHqLJz4iYUhuFf_0L-J64P6l7F8geTZ/s1600/sprites.png) 1px -27px no-repeat #eee; color : #444; margin : 0 0 15px; padding : 12px 40px; width : 100%; border : none;  } .subscribe-css-button { background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.1); color : #fff; cursor : pointer; font-weight : 700; padding : 7px; text-transform : none; width : 100%; border : none; font-size : 16px; transition : all 0.3s ease-in;  } .subscribe-css-button:hover { transition : all 0.3s ease-in; background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.2);  }

    6.  Simpan template Dan lihat hasilnya

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget