Cara Membuat Posting Blog Menjadi Thumbnail-Creadit By Xprees COmmunity

Halo sahabat XC ! Apa kabar semuanya nie hehehe... semoga baik" aja ya...
oke, sekarang Dandy mau upate "Cara Membuat Posting Blog Menjadi Thumbnail"
Apa itu Thumbnail ? Thumbnail yaitu agar postingan blog kita jadi terbagi 2 / menjadi postingan kecil-kecil sesuai ukurannya :D
Contoh Seperti ini :) Di Blog Saya Yang Isinya Tentang Naruto :D Saya Yang Buatin Gituan :D



oke langsung saja kita ke pembahasannya :D

1. Pertama" Masuk ke Blogger Account
2. Pergi ke Template
3. Kemudian Klik Edit HTML Nah
4. Lalu Centang "Expand Template Widget"
5. Sekarang Cari Kode </head> atau memakai pencarian menekan tombol F3 / CTRL + F...
6. Kemudian Pastekan Kode Dibawah ini Di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {
background:#fff;
background-image: url();
background-repeat:repeat;
border:4px solid #F6F6F6;
font-size:12px;
margin: 1px;
width:276px;
height:250px;
float:left;
margin-bottom:10px;
}
.post h1 {
text-color:;
font-size: 120%;
font:arial black;
}
h3.date-header {
font-size:10px;
background:#fff;
color:red;
}
</style>
<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 240;
summary_img = 200;
img_thumb_height = 90;
img_thumb_width = 90;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = 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];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<script type='text/javascript'>
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
</b:if>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>


Pengertian Code Berwarna Merah = yaitu warna latarnya
Pengertian Code berwarna Biru = Width : Lebarnya
Pengertian Code berwarna Hijau = Height : Tingginya

Gimana ? caranya mudah kan ?
pastinya donk hehehe..
oke sampai sini saja, semoga artikel ini sangat bermanfaat untuk anda :)
Jangan Lupa Tinggalkan Commentar

Credit By : Xpress Community

Apa Itu SEO

Apa Itu Seo ?


SEO ( Search Engine Optimization), Belajar memahami tentang apa itu SEO, dan apa pentingnya SEO bagi Sebuah Web/Blog.
Pengertian "SEO ( Search Engine Optimization)" itu sendiri merupakan suatu usaha untuk Pengoptimalan atau untuk meningkatkan rangking website atau blog di mata search engine (mesin pencari).
Fungsi/Tujuannya yaitu Untuk mendapatkan pengunjung atau visitor ke blog atau website kita melalui mesin pencari (search engine) seperti google, yahoo, MSN dan lain-lain.
Semakin baik rangking blog atau situs kita di mata mesin pencari, maka akan semakin banyak pengunjung yang mengunjungi blog/website kita. Itulah pentingnya mengapa kita harus belajar SEO. jadi penenrapan SEO di web/blog itu sangat diajurkan, bahkan mungkin wajib !

Menurut Info yang saya dapat di www.belajarngeblog.com,
Aktifitas SEO atau Search Engine Optimization ini terdiri dari dua Jenis yaitu:

  • Aktivitas on-page SEO, yaitu aktifitas belajar SEO yang kita lakukan langsung pada blog atau website kita sendiri. Aktifitas on-page ini menyangkut rekayasa terhadap elemen dan isi blog atau website kita, dan sebagian besar dilakukan tanpa memerlukan biaya. misalnya memilih nama domain, membuat konten original, menambahkan meta tag dan lain-lain.
  • Aktivitas off-page SEO, berlawanan dengan On Page, aktifitas belajar SEO ini dilakukan di luar blog kita, misalnya, mensubmit url blog ke search engine, submit ke web directory, bergabung dengan forum, mencari backlink dari blog/website sejenis dan lain-lain.


Kesimpulan:
Onpage Optimasi SEO ini sangat berpengaruh di mata Search Engine Google terhadap isi atau konten dari blog kita, terutama bagi sobat blogger yang mencari Page Rank.
Sedangkan Untuk Aktivitas off-page SEO itu atau bisa dikatakan usaha untuk lebih mendongkrak popularitas blog/web.

Cara Membuat Blog SEO Friendly

cara membuat blog seo friendly

Langkah-Langkah Cara Membuat Blog SEO Friendly Dengan Mudah :
1.     Membuat Blog SEO Friendly Dengan Mengubah Page Title
Format page title default dari blogger kan seperti ini “JUDUL BLOG : JUDUL POSTING”, nah supaya blog kita lebih disukai oleh search, kita harus merubah format page title standar itu menjadi seperti ini “JUDUL POSTING | JUDUL BLOG”. Berikut langkah-langkahnya :
Masuk ke dashboard blog sobat
Masuk ke rancangan kemudian pilih Edit html
Cari kode berikut :
<title><data:blog.pageTitle/></title>
(Cara mudah mencari kata/kalimat di web browser tinggal tekan ctrl + f kemudian ketik/pastekan kata/kalimatnya lalu tekan enter)
      Kalau sudah ketemu kodenya, ganti sama kode berikut ini :
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
Atau sobat juga bisa nambahin beberapa kata kunci ( keyword ) seperti ini :
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Kata kunci sobat | Kata kunci sobat </title>
</b:if>
      Kalau sudah jangan lupa disimpan templatenya.
2.     Membuat Blog SEO Friendly Dengan Menambahkan Meta Tag
Mesin pencari sangat menyukai web/blog yang jelas tema dan isi content-nya. Jadi, sobat harus nambahin suatu tag yang namanya meta tag. Berikut langkah-langkahnya :
 Masuk ke dashboard blog sobat
Masuk ke rancangan kemudian pilih Edit html
Cari kode berikut :
 <b:skin><![CDATA[/*

      Copy-kan kode berikut ini di atas kode tersebut (<b:skin><![CDATA[/*) :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<meta name='Author' content='Nama Sobat'/>
<meta name='description' content='Deskripsi singkat tentang blog sobat'/>
<meta name='keywords' content='keyword1, keyword2, keyword3, dst'/>
<meta name='language' content='id'/>
<meta name='geo.position' content='-5;120'/>
<meta name='geo.country' content='id' />
</b:if>
      Kemudian simpan templatenya
3.     Membuat Blog SEO Friendly Dengan Memasang Breadcrumbs
Breadcrumb adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Breadcumbs ini sangat disukai oleh search engine, sehingga apabila blog kita memiliki breadcumbs dapat menambah nilai SEO pada blog kita. Di mesin pencarian (SERP) url yang ditampilkan adalah kategori dari postingan sehingga blog sobat bisa bersaing untuk mendapatkan posisi top di google SERP.
4.     Membuat Blog SEO Friendly Dengan Memasang Related Post
Related post sangat bagus untuk SEO dan disukai para pengunjung. Setelah membaca suatu artikel pengunjung tidak akan lari ke blog lain dan biasanya akan tertarik untuk melihat-lihat related post yang ada di blog sobat.
5.     Membuat Blog SEO Friendly Dengan Mematikan Setting Archive ( Arsip )
Search engine sangat membenci yang namanya duplicate archive. Jika anda mengaktifkan opsi arsip, akan ada 2 buah link yang menuju 2 halaman yang berbeda (Halaman utama dan halaman artikel sendiri) tapi memiliki isi konten yang sama. Bagi search engine ini adalah masalah serius. Oleh karena itu kita sebaiknya me-non-aktifkan opsi arsip. Caranya adalah sebagai berikut :
Masuk ke dashboard blog sobat
Masuk ke Setting kemudian pilih Archiving
Pada bagian Archiving Frequency ubah menjadi no archive
Atau jika sobat tidak ingin menonaktifkan fungsi arsip, silahkan masuk ke rancangan kemudian pilih edit html dan letakkan kode berikut dibawah kode <head> :
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>
6.    Membuat Blog SEO Friendly Dengan Menambahkan Kode ‘Rel=Canonical’
Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para master of SEO bilang bahwa google sangat tidak dapat mentolerir sebuah duplicate content (Buat yang kerjanya cuma bisa copas hati-hati nih sebelum didepak dari google). Silahkan masuk ke rancangan kemudian pilih edit html dan letakkan kode berikut dibawah kode <head> :
<link expr:href='data:blog.url' rel='canonical' />
7.    Membuat Blog SEO Friendly Dengan Tag Heading
Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting sobat dengan tag H1. silahkan masuk ke rancangan kemudian pilih edit html kemudian cari kode seperti berikut ini :
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Ubah kode yang berwarna merah dari h3 atau h2 pada beberapa template menjadi h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>
h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Cara Membuat Read More Otomatis

membuat auto read more dengan CSS di blog
1. Login Blogger
2. Pergi Ke Template
3. Pergi ke Edit HTML
4. Centang Expand Template Widget
5. Kemudian Cari Code </head>, jika mau cepat, menggunakan F3 / CTRL + F
6. Lalu Copy Paste Code Dibawah Ini Tepat di Atas Code </head>


<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://bloggertutorial.googlecode.com/files/readmore%20thumbail.js' type='text/javascript'/>
<style>
.button {
        float:right;
    display: inline-block;
    zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
    *display: inline;
    vertical-align: baseline;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 1px 1px 4px #AAAAAA;
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}
.bigrounded {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
}
.medium {
    font-size: 12px;
    padding: .4em 1.5em .42em;
}
.small {
    font-size: 11px;
    padding: .2em 1em .275em;
}
.orange2 {
    color: #fef4e9;
    border: 2px solid white !important;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#faa51a&#39;, endColorstr=&#39;#f47a20&#39;);
}
.orange2:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top,  #f88e11,  #f06015);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f88e11&#39;, endColorstr=&#39;#f06015&#39;);
}
.orange2:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#f47a20&#39;, endColorstr=&#39;#faa51a&#39;);
}
</style>


Setelah itu sobat simpan/save template blog nya, tidak juga tidak apa apa, langkah selanjutnya sobat cari tag/kode yang mirip atau sama dengan ini tag <data:post.body/> setelah ketemu sobat ganti tag tersebut dengan kode di bawah.
<b:if cond='data:blog.pageType != &quot;item&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>
<a class='button orange2' expr:href='data:post.url'>Read More</a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if> 
setelah selesai semua, kemudian klik Partinjau jika sudah beres maka save template, jika belom, ulang caranya dengan benar....
oke sampai sini saja, semoga artikel ni berguna untuk sobat sobat semua :)

Cara Membuat CSS Berputar Di Blog




Hay sobat XC-Blog.. XC blog sebelumnya share sejarah 2clan terkuat dinaruto,..
sekarang xc blog mw share cara membuat css berputar di blog
ok langsung aja pe pembahasannya...
css berputar















1.Edit html di blog kalian masing masing
2.Cari kode ini ]]><b:skin
3.Masukkan kode di bawah ini di atas kode tadi

.KTputer{margin-top:-300px; margin-right:240px; width:98px; height:98px; float:right; font-size:14px; text-align:center; text-shadow:0 1px 1px black}
 .KT1{background-color:rgba(0,0,0,0); border:25px solid #fff; opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:190px; width:200px; height:200px; margin:0 auto; position:relative; top:-70px; -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear}
 @-moz-keyframes spin2Pulse{0%{-moz-transform:rotate(0deg);} 100%{-moz-transform:rotate(-360deg);} }
@-webkit-keyframes spin2Pulse{0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(-360deg);} }

4.Cari kode menu kalian misal nya nama menu kalian <div id='navijohanes'>
(Jika kamu taruh di atas kode tadi,maka css putar2 nya akan muncul di atas menu kalian) jika mau munculin putar2 nya di tempat lain,bisa kamu taruh dimana aja, letak nya dimana ) asalkan tidak error

5.masukkan kode HTML di bawah ini di atas kode tadi (terserah di mana aja,asalkan tidak error)

<div class='KTputer'>
<div class='KT1'/>
</div>

Cara Membuat Related Post Dengan Thumbnail

Related Post

1. Masuk ke Rancangan ---> Klik Edit HTML
2. Centang Expand Template Widget
3. Paste kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.2em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Cari salah satu kode berikut ini:
<div class='post-footer-line post-footer-line-3'>
atau <p class='post-footer-line post-footer-line-3'>
5. Setelah itu letakan kode dibawah ini, dibawah salah satu kode langkah ke.4
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
6. Terakhir simpan template anda.

Template Mask Shooter V2 By Kuntoro Cyber

Hallo Kali Ini Saya Akan Mengedakan template Keren Dan gambarnya Rusak maaaf ya SObat Tapi Di Sono Nya KEren Loh Pengen Coba Coba Aja Di BLog Agan Agan

Kalau SSnya gak ada .. Sory ..

Tapi bagi yang mau lihat Demonya bisa dilihat :




Fitur :

  • Read More Keren Dengan CSS 
  • Kotak Iklan 
  • Footer 3 Column
  • SEO Friendly
  • Ringan
  • Dan Masih banyak lagi


Search

Follow Donkk !!!

Hecker Deef

Warismankedua. Diberdayakan oleh Blogger.

Popular Post

Label

LABEL

Search This Blog

Blogroll

Friend

 

Link exchange