Blogging Explore | Fastest Loading Responsive Blogger Template 2015

Langkah Efektif Membuat Keyword

Riset keyword adalah sesuatu yang vital dari perencanaan sebuah SEO, jika situs anda memasang keyword yang salah, search engine dan pengunjung blog anda tidak akan menemukan website anda.Ikuti Langkah beberapa riset keyword supaya keyword anda lebih familiar dengan mesin pencari berikut ini :

Buat Daftar Keyword

Langkah pertama dalam proses adalah membuat daftar keyword yang Potensial banyak dicari. Pikirkan semua kata-kata yang akan di ketikkan visitor dalam kotak search google atau search engine lainnya untuk menemukan website anda

seperti: "tutorial photoshop" atau "Handphone murah "

Gunakan Tool Riset Keyword

Dalam hal ini kita ambil sebuajh contoh kita hendak memasang keyword "tutorial photoshop", sebelumnya kita tidak tahu berapa nilai persainganm, dari keyword "tutorial photoshop" tersebut, semakin tinggi nilai persaingan maka semakin banyak visitor mencari keyword tersebut.

Contoh:

Perbandingan dan Nilai persaingan

tutorial photoshop 50%

belajar photoshop 20%

maka orang lebih suka mencari keyword "tutorial photoshop" daripada "belajar photoshop"

Nah dalam mencari perbandingan nilai keyword kita dapat menggunakan beberapa tool yang tersedia di internet, ada yang gratis dan ada yang bayar, diantaranya:

Overture

selain menunjukkan persaingan keyword,overture juga menampilkan kombinasi frase-frase keyword terkait

hal ini cocok untuk mencari "Niche Market"

Wordtracker

Tools yang sangat bagus, tapi untuk versi gratisnya Wordtracker hanya menampilkan Search Result dariMSN

Google AdWords Keyword Tool

Pastikan cari Daftar Keyword Anda Sekali Lagi

Dibagian ini anda tahu sendiri apa yang harus nya di lakukan, apakah memilih keyword yang mempunyai persaingan tinggi atau persaingan rendah

Contoh:

Perbandingan dan Nilai persaingan

tutorial photoshop 50%

belajar photoshop 20%

Disini terserah, anda pilih menggunakan keyword yang mana

Jika anda menggunakan keyword yang mempunyai persaingan keyword yang tinggi, maka untuk mengimbanginya Blog anda harus ber-pagerank tinggi pula

Jika anda menggunakan keyword yang mempunyai persaingan keyword yang rendah , maka website anda dapat dengan mudah meraih Ranking #1 di mesin pencari

Memasang keyword

Siapkan langkah dengan memasang keyword-keyword tersebut pada:

Title Tag <title>
Meta Description Tags <meta decscription>
Meta Keywords Tag <meta keyword>
Headings <h1> <h2>
Alt text <alt>
Anchor Text/ Navigational Links <a href=> keyword </a>

Submit ke Search Engine

Anda bisa mensubmit website anda kebeberapa mesin pencari seperti Google,Yahoo,Bing atau yang lainnya

4 Cara membuat Popular Post Yang Keren

Widget Popular Post di blog Blogspot memainkan peranan penting untuk meningkatkan trafik suatu web,oleh karena itu haruslah tampil keren dan stylish . Itulah sebabnya widget Popular Post di blog sangatlah diperlukan. Dalam postingan kali ini saya akan bagikan 4 jenis widget popular post yang keren. widget yang saya berikan Ini adalah beberapa widget yang terbaik dari yang terbaik dan paling populer.

Saya akan memberikan Anda langkah demi langkah cara bagaimana menambahkan widget di template blogger Anda.

Untuk menambahkan widget popular post keren di blog blogger Anda. Anda hanya perlu mengikuti beberapa langkah di bawah ini.

Pergi ke Blogger dashboard.
Klik pada Layout.
Klik pada Add a Gadget atau tambahkan Gadget.
Pilih HTML/JAVASCRIPT.
Copy salah satu kode dibawah sesuai selera Anda.
Pastekan ke Html/javascript.
Simpan.

Coba salah satu html/javascript dibawah ini sesuai selera anda

1.Popular Post dengan thumbnail gambar Bulat

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS619_t2xYoYo6uxT5WI3j2e43CvVReKLZL7Iflz0IL0rw_SEHKyEHq7aI52Cwjd0hthcgjnXiR_E72EyhZaBMwTvxRMy0p-ZHv2FFiZLsyX2ZwO2rJ9PeWJDCJfQjmSjUWwHn87T28_4/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:2px solid #6BB5FF;
background:#FFFFFF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
color:#6633FF;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

2.Popular Post dengan Thumbnail dari Label

3.Popular post dengan judul Posting sebagai Thhumbnail

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS619_t2xYoYo6uxT5WI3j2e43CvVReKLZL7Iflz0IL0rw_SEHKyEHq7aI52Cwjd0hthcgjnXiR_E72EyhZaBMwTvxRMy0p-ZHv2FFiZLsyX2ZwO2rJ9PeWJDCJfQjmSjUWwHn87T28_4/s1600/1.gif) no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #ddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.popular-posts ul

li:hover {

border:1px solid #6BB5FF;

}

.popular-posts ul

li a:hover {

text-decoration:none;

}

.popular-posts .item-thumbnail img {

webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

}

4.Popular post Warna-Warni

.sidebar .PopularPosts .widget-content ul li{

height: 100%;

line-height: 22px;

float: left;

clear: left;

list-style-type: none;

overflow: hidden;

color: gray;

}

.sidebar .PopularPosts .widget-content ul{margin:0;padding:5px 0;list-style-type:none;}

.sidebar .PopularPosts .widget-content ul li{position:relative;margin:5px 0;border:0;padding:10px;opacity:0.8;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;}

.sidebar .PopularPosts .widget-content ul li:hover {border-radius:30px 0px 0px 0px;margin-left:10px;opacity:1.0}

.sidebar .PopularPosts .widget-content ul li:first-child {background:#ff4c54;width:90%}

.sidebar .PopularPosts .widget-content ul li:first-child:after{content:"1"}

.sidebar .PopularPosts .widget-content ul li:first-child + li{background:#ff764c;width:80%}

.sidebar .PopularPosts .widget-content ul li:first-child + li:after{content:"2"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li{background:#ffde4c;width:70%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after{content:"3"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li{background:#c7f25f;width:60%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after{content:"4"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#33c9f7;width:40%;padding-right:20px;}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after{content:"5"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:30%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after{content:"6"}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:20%}

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{content:"7"}

.sidebar .PopularPosts .widget-content ul li:first-child:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li:after,

.sidebar .PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:15px;right:-5px;border-radius:9%;background:#353535;width:30px;height:40px;line-height:1em;text-align:center;font-size:22px;color:#fff;}

.sidebar .PopularPosts .widget-content ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:30px;height:90px}

.sidebar .PopularPosts .widget-content ul li a{font-size:12px;font-weight:bold;color:white;text-decoration:none;text-shadow:0px 0px 6px white;

-webkit-transition:all 0.4s;

-moz-transition:all 0.4s;

-ms-transition:all 0.4s;

-o-transition:all 0.4s;

}

.sidebar .PopularPosts .widget-content ul li a:hover{color:black;text-decoration:none;text-shadow:1px 1px 1px white;}

Cara Membuat widget Google + Melayang

Widget kali ini adalah widget yang Luar biasa menurut saya,karena melalui G+ pembaca blog anda bisa bertambah banyak, widget ini seperti widget floating facebook like ketika anda mengunjungi sebuah web/blog,dan trafik anda bisa bertambah dari widget ini.

Keunggulan dari widget kali ini :

Widget ini cocok di semua browser seperti Firefox, Opera, Google Chrome dan Internet Explorer.
Cepat dalam loading widgetnya
Tidak diperlukan javascript pihak ketiga
Murni CSS Yang diperuntukan untuk widget Blogger

Bagaimana Cara Membuat widget Google + Melayang :

Silahkan menuju Blogger Dashboad Anda
Klik Layout
Klik Add A gadget/Tambahkan Gadget
Pilih HTML/JAVASCRIPT
Copy dan pastekan kode dibawah ini dan klik Simpan

Catatan : Ganti url G+ Yang berwarna biru dengan url G+ Anda

Semoga bermanfaat and happy Blogging

Cara Membuat Widget G+,Facebook Like,Follower Twitter Melayang

Banyak sekali widget-widget keren dalam blog jika di eksplorasi,salah satunya adalah Cara Membuat Widget G+,Facebook Like,Follower Twitter Melayang berikut ini :

1. Seperti biasa pergi ke Dashboard Blogger

2.Klik add a gadget/Tambahkan Gadget

3.Pilih Html Java Script

4. Copy dan Tambahkan Kode di bawah:

<script type='text/javascript'>
//<![CDATA[
TITLEKN='Join us at Facebook';FBKN='url Facebook Anda';TWITTERKN='url twitter Anda';URLKN='url halaman Google + Anda’;
//]]>
</script>
<style>#stp-bg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:998;}#stp-main{position:fixed;top:220px;_position:absolute; /* hack for IE 6*/display:none;width:450px;border:7px solid #2f2f2f;background:#fff;z-index:999;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif !important;font-size:13px;}#stp-title{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;font-size:18px;padding:13px 0 13px 15px;}#stp-close{float:right;font-size:14px;font-weight:bold;font-family:Verdana, Geneva, sans-serif;color:#777777 !important;margin:0 13px 0 0;border-bottom:0px !important;text-decoration:none !important;}#stp-close:hover{text-decoration:none !important;}#stp-msg{background:#4074CF;padding:10px 15px;color:#ffffff;font-family:Arial, Helvetica, sans-serif !important;font-weight:bold;line-height:20px;}#stp-buttons{margin:25px 0px 25px 0;padding:0 0 0 15px;}#stp-bottom{padding:15px 10px;background:#EFEFEF;color:#95989F;border-top:1px solid #DDE0E8;}#stp-counter{font-size:11px !important;text-align:right;font-weight:bold;}.stp-button{float:left;width:120px;}.step-clear{clear:both !important;}</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src='https://apis.google.com/js/plusone.js'></script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
<script src='
http://coolraman.herobo.com/facebook.js' type='text/javascript'></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KN3IN1({
timeout: 60,
wait: 0,
closeable: true });
});
//]]>
</script>

Cara Membuat Related Post Keren

Ok masbro,pakbro,mbakbro pembaca setia blog saya hehe :D , pada postingan kali ini saya akan berikan Cara Membuat Related Post Keren ....ok tanpa basa basi langsung saja kita praktekan caranya :

1.Seperti biasa pergi ke Dashboard --> Template
2. Klik pada Edit HTML
3. Gunakan Ctrl+F Temukan kode </head>
4. Kemudian copy dan paste kode dibawah ini setelah atau sesudah kode ( </head>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;

var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ2R8N-1FBS-cXdpeQ-pqpnlCFs31Se_NAdQvrXag8rUHxcSj6i33tBgFIOv1gFUda_6sSOmtaFz8V7-qpz_6AWYmFCHHiWo0JXr40tZGHxCe3bympirk5pyf-Ov7kQRyAoCS-iJZbS85k/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {
var entry, postimg, postcontent, cat;
for (var i = 0; i < json.feed.entry.length; i++) {
entry = json.feed.entry[i];
if (i==json.feed.entry.length) { break; }
relatedTitles[relatedTitlesNum] = entry.title.$t;
postcontent = "";
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
}
relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = relatednoimage;
}
relatedThumb[relatedTitlesNum] = postimg;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
break;
}
}
relatedTitlesNum++;
}
}
function showrelated() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
var tmp4 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
}
}
relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
for(var i = 0; i < relatedTitles.length; i++){
var index = Math.floor((relatedTitles.length - 1) * Math.random());
var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
}
var somePosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var relsump = r;
var output;
var dirURL = document.URL;

while (somePosts < relatedPostsNum) {
if (relatedUrls[r] != dirURL) {

output = "<div class='relatedsumposts'>";
output += "<a href='" + relatedUrls[r] + "' rel='nofollow' target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
output += "<p>" + relatedpSummary[r] + " ... </p>";
output += "</div>";
document.write(output);

somePosts++;
if (somePosts == relatedPostsNum) { break; }
}
if (r < relatedTitles.length - 1) {

r++;
} else {

r = 0;
}

if(r==relsump) { break; }
}
}
function removetags(text,length){
var pSummary = text.split("<");
for(var i=0;i<pSummary.length;i++){
if(pSummary[i].indexOf(">")!=-1){
pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
}
}
pSummary = pSummary.join("");
pSummary = pSummary.substring(0,length-1);
return pSummary;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
//]]>
</script>

Catatan :

- Ganti url Gambar default yang berwarna biru dengan url milik anda.
- Untuk menampilkan lebih dari 4 related post ganti angka 4 sesuka Anda
- Untuk menampilkan/memperpendek banyaknya karakter kata pada related post ganti angka 75 sesuka anda.

5.Sekarang temukan kode berikut :
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>

6.Tambahkan kode berikut diwah kode tadi :
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>

</b:if>

7. Sekarang cari kode berikut:
</b:includable>
<b:includable id='postQuickEdit' var='post'>

8.Tambahkan kode dibawah ini tepat diatas kode tadi:
<b:if cond='data:blog.pageType == "item"'>
<div class='post-footer-line post-footer-line-4'>
<div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>

</b:if>

9.Langkah terakhir cari kode ]]></b:skin> dan tambahkan kode dibawah ini
tepat di atas kode ]]></b:skin>

<relatedsumposts {
float: left;
margin: 0px 5px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 210px;
}

.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 5em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}

.relatedsumposts p {
/* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #ffffff;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;

}

10. Preview Template,kalau tidak terjadi error, maka simpan template.

Semoga Bermanfaat !