Cara Mengatasi Upload Gambar di Blog Berubah Warna Abu-abu Gelap

Sebagian dari Anda, pasti akan merasa jengkel bukan, jika saat kita upload foto di blog yang aslinya mempunyai  warna background putih lalu dibubah jadi abu-abu ?

Kalau benar seperti itu, maka Anda tidak sendirian, karena saya pribadi juga mengalami kejadian seperti itu, gambar yang dasarnya berwarna putih, lalu setelah saya upload di blogger berubah warna menjadi abu-abu.

Dalam hati Anda mungkin akan bertanya 'fitur apa sih ini, yang bikin semua foto yang saya upload backgroundnya jadi abu-abu ?'

Jika saya boleh mengoreksi, sebenarnya bukan semua foto bakal kena 'dampak' perubahan warna background, melainkan hanya foto atau gambar dengan background default alias putih lah yang akan diganti atau digelapkan warnanya adi abu-abu.

Lalu kembali ke pertanyaan 'ulah siapakah ini ?'

Bicara penyebab, jujur saja semua ini disebabkan oleh fitur yang ada di google plus, namanya Auto Enhance atau kalau dalam bahasa indoneisa artinya Koreksi Otomatis

Lantas bagaimana menonaktifkan fitur ini, supaya gambar yang saya upload tidak dikoreksi jadi gelap (abu-abu) ?

Untuk mematikan fitur tersebut tetunya Anda harus masuk ke Akun google+ milik Anda, begini cara menonaktifkan secara detailnya

Cara Mengatasi Upload Gambar di Blog Berubah Warna Jadi Abu-abu Gelap

Seperti biasa pastikan Anda sudah login ke akun Google Plus yang terkait dengan akun Anda di Blogger, setelah masuk, lakukan langkah-langkah berikut ini :

1. Pergi ke plus.google.com, tungu hingga proses Loading selesai, lalu lanjutkan dengan mengklik tombol Setting yang berada di sebelah Kiri, lihat gambar agar lebih jelas
   
   

   

   Cara Mengatasi Gambar di Blog Jadi Abu-abu gambar 1

   
   
2. Setelah halaman baru terbuka, scroll atau geser mouse Anda ke bawah, dan cari kata-kata Auto Enhance (en) atau Koreksi Otomatis (id), lalu ubah dari Normal ke Off, seperti gambar yang ada di bawah ini
   
   

   

   Cara Mengatasi Gambar di Blog Jadi Abu-abu gambar 2

Dari sini sebenarnya kita sudah berhasil mematikan fitur dari google plus yang bertugas untuk mengubah warna background menjadi abu-abu.

Dengan mematikan fitur ini saya kurang tau apakah gambar yang sudah diupload bisa kembali ke normal atau tidak (karena saya juga baru menggunakan) tapi yang pasti setiap Anda upload foto atau gambar baru  yang mempunyai background putih, saya jamin pasti tidak akan berubah menjadi gelap atau abu-abu lagi.

Untuk perbandingan hasil sesudah dan sebelum mematikan fitur Koreksi Otomatis bisa dilihat pada gambar dibawah ini.

Perbandingan Sebelum dan Sesudah Fitur Auto Koreksi Dimatikan

Sedikit penjelasan, gambar 'mata' yang berada diatas adalah gambar sewaktu Fitur Auto Koreksi atau Auto Enhance Sebelum Dimatikan, sementara gambar mata yang ada di bawah saya upload setelah Fitur Auto Koreksi saya matikan ( OFF ).

Itu saja dari saya, kurang lebihnya saya mohon maaf, akhir kata saya ucapkan terimakasih banyak sudah bersedia membaca Cara Mengatasi Gambar di Blog Berubah Warna Abu-abu, berharap ini bisa bermanfaat untuk kita semua.

Cara Mempercantik & Memperindah Tampilan Blog dalam 7 Menit

Cara Mempercantik Blog dalam 7 Menit bukan hal yang mustahil, jika Anda benar-benar sudah ahli dalam hal Edit mengedi template, dan sudah paham akan bahasa CSS, HTML dan JavaScript, hal tersebut mungkin-mungkin saja dilakukan.

Nah, lalu yang jadi masalah disini adalah, tidak banyak dari kita (termasuk saya) yang belum benar-benar menguasai bahasa CSS dan HTML, apalagi JavaScript, bisa dibilang hanya pengetahuan dasar tentang ketiga bahasa tersebut yang saya ketahui.

Tapi tenang saja, untuk mempercantik atau memperindah tampilan blog Anda tidak diwajibkan menguasai ketiga bahasa tersebut kok, karena sudah terdapat source yang bisa langsung Anda pasang untuk mempercantik tampilan blog

Daripada banyak ngomong mending langsung saja Anda simak, macam-macam source yang bisa langsung Anda copy dan paste untuk mempercantik Blog Anda.

Cara Mempercantik Tampilan Blog dengan Widget Social Media

Widget ini secara tidak langsung jika diletakkan di Sidebar blog agan menambah kecantikkan blog Anda sebanyak 10% haha, penasaran ? berikut penampakkannya :

Jika tertarik dengan widget social media yang dibuat oleh Mas Sugeng. berikut cara memasang atau menggunakannya, pertama buka dulu menu Template, lalu klik Edit HTML, setelah itu masukkan kode css dibawah ini

.social-box {
width: 280px;
padding: 10px 9px;
margin: 0;
overflow: hidden;
background-color: #f2f2f2;
border: 1px solid #f2f2f2;
text-align: center;
}
.social-item-outer {
background: #f8f8f8;
margin: 0 0 0 8px;
overflow: hidden;
float: left;
display: inline-block;
}
.social-item-outer:first-child {
margin-left: 0px;
}
a.social-item-box {
display: block;
color: #4b4b4b;
float: left;
width: 64px;
overflow: hidden;
margin: 0;
padding: 4px 0;
background-image: url("http://4.bp.blogspot.com/-BijS0OXNqUM/Ub9XA_RlZLI/AAAAAAAACCM/c19K_XX4R30/s1600/csg-51bf56d8dd195.png");
background-repeat: no-repeat;
}
.facebook-box {
background-position: 7px 4px;
}
.counter {
margin: 60px 0 0 0;
font-family: 'Oswald',Verdana,Sans-serif;
line-height: 1.2em;
font-size: 16px;
font-weight: 500;
}
.social-title {
color: #888;
font-size: 11px;
}
.twitter-box {
background-position: -153px 4px;
}
.googleplus-box {
background-position: -233px 4px;
}
.rss-box {
background-position: -73px 4px;
}

Lanjut pergi ke Tata Letak, lalu klik Tambahkan Gadget, nanti akan ada banyak pilihan, pilih saja HTML/Javascript dan pastekan kode dibawah ini

<div class="social-box">
<div class="social-item-outer">
<a class="social-item-box facebook-box" href="http://www.facebook.com">
<div class="counter">
76.098
</div>
<span class="social-title">Fans</span>
</a>
</div>

<div class="social-item-outer">
<a class="social-item-box twitter-box" href="http://twitter.com">
<div class="counter">
6.987
</div>
<span class="social-title">Followers</span>
</a>
</div>

<div class="social-item-outer">
<a class="social-item-box googleplus-box" href="http://plus.google.com">
<div class="counter">
4.987
</div>
<span class="social-title">Followers</span>
</a>
</div>

<div class="social-item-outer">
<a class="social-item-box rss-box" href="/feeds/posts/default">
<div class="counter">
398
</div>
<span class="social-title">Subcribers</span>
</a>
</div>
</div>

Selanjutnya silahkan dilihat hasilnya, jika gagal cek dari awal apakah penempatan css sudah benar atau belum, pastikan meletakkan kode CSS tepat diatas ]]></b:skin>

Cara Mempercantik Tampilan Blog dengan Widget Social Share

Kalau yang diatas adalah Widget Social Media, yang artinya itu untuk meletakkan link menuju akun media sosial Anda sekarang kita akan membuat widget social share, dimana ini fungsinya sangat vital sekali untuk menjaring visitor dari Social Media, yang dimana semua kita tau, bahwa social media seperti facebook traffiknya bukan main-main, jadi sangat berpotensi sekali untuk kita 'curi'

Untuk membuat Widget Social Share ini banyak cara, ada yang dengan menggunakan Javascript, tapi ada juga yang hanya memanfaatkan HTML dan CSS.

Namun disini saya tidak akan membahasa keduanya, melainkan hanya yang kedua saja yang akan saya informasikan ke Anda ( widget social share html + css )

Untuk membuatnya cukup mudah, langsung saja copy lalu pastekan di bawah content Anda

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998; color:white; padding: 5px;'>Facebook</a>
<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a; color:white; padding: 5px;'>Google+</a>
<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=blogmassugeng&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff; color:white; padding: 5p;'>Twitter</a>

Untuk penampakannya sangat simple ( flat design), biar Anda penasaran coba saja sendiri ya

Cara Memperindah Tampilan Blog dengan  Fitur Read More

Ini yang tak kalah penting, dan bisa dibilang yang paling penting untuk mempercantik maupun memperindah tampilan blog Anda, karena dengan adanya Read More, maka blog akan tertata rapi.

Untuk cara membuat readmore, saya tidak akan jelasakan disini, karena apa ? dikarenakan saya sudah menulisnya beberapa waktu yang lalu, jika tertarik silahkan Anda baca disini Cara Membuat Readmore di Blog

Cara Memperindah Tampilan Blog dengan   Fitur Related Post

Tak kalah penitng dengan Read More, ada Related Post, dimana fungsinya adalah untuk menambahkan artikel yang terkait dengan artikel yang sedang pengunjung baca, sedikit membingungkan memang, tapi begitulah adanya

Cara untuk menambahkan related post di blog pun juga sudah pernah saya bahasa sebelumnya, tidak percaya ? silahkan cek sendiri melalui link ini Cara Membuat Artikel Terkait

Gimana ? Tidak ada 7 Menit sudah jadi (sedikit) tambah indah dan cantik bukan blog Anda ? jika masih kurang puas silahkan Anda comot langsung template yang disediakan oleh para pembuat template seperti Mas Sugen, Damzacky dan kawan-kawan, ada yang gratis dan ada juga yang berbayar

Sampai disini dulu pembahasan mengenai Cara Mempercantik & Memperindah Tampilan Blog, jika ada waktu akan saya usakahan update.

Cara Membuat Artikel Terkait Yang Menarik di Blogspot

Cara Membuat Artikel Terkait atau sering juga disebut Related Post, bisa dibilang bukan hal yang susah apalagi buatnya di Blogspot, semakin mudah !

Mungkin ada yang belum tahu apa itu Artikel Terkait, ok ok tidak masalah, akan saya jelaskan. sesuai namanya Artikel Terkait adalah artikel tambahan yang kita sajikan ke pengunjung berdasarkan apa yang sedang pengunjung baca dengan memanfaatkan label atau tag.

Masih bingung nih, contohnya mana woi ? oke ini contoh sederhananya, misal ada seorang pengunjung yang sedang membaca Artikel kita dengan judul Cara Cepat Kaya Tanpa Kerja ! nah disini kita wajib memberi nama label pada artikel tersebut, misalnya lebelnya kita kasih nama 'Kerja'

Selanjutnya saat kita buat artikel baru dengan judul, misalnya Tanpa Kerja Bisa Kaya ? Ngimpi ! pada artikel kedua kita  juga harus memberinya sebuah label yang sama dengan label yang ada di artikel pertama tadi yaitu 'Kerja'

Selanjutnya mereka akan saling terkait, saat pengunjung membuka Artikel 1 mereka akan disarankan oleh Artikel Terkait untuk membaca Artikel 2 dan begitu sebaliknya

Sudah jelas atau Tambah bingung ? lupakan artikel diatas jika justru membuat Anda bingung, karena sejujurnya tulisan saya diatas itu hanya untuk membuat artikel ini terlihat banyak dan sukur sukur bisa masuk pejawan dan bisa duduk di peringkat satu

Kembali ke Topik, disini kita akan membuat Artikel Terkait Sederhana tapi tetap Menarik atau enak dipandang mata, tanpa Thumnail, ingat ya, disini saya akan mejelaskan Cara Membuat Artikel Terkait tanpa Thumnbail. Kenapa tanpa Thumnail ? karena Ringan !

Yap, artikel terkait polosan atau tanpa Thumnail tidak akan terlalu membebani pengunjung saat mengakses situs atau artikel kita.

So, saya putuskan untuk menuliskan Tutorial ini.

Baik, karena Tangan saya sudah pegel itu artinya kita siap masuk pada pembahasan utama kita.

Cara Membuat Artikel Terkait

Agar pembuatan atau cara membuat artikel terkait ini sukses diperlukan ketelitian yang matang, jadi pastikan Anda melakukan step by step dengan benar.

1. Klik Menu Template dan Pilih Edit HTML

2. Backup Template jika dirasa perlu (tapi saya rasa tidak perlu)

3. Tekan CTRL + F dan ketikkan </head>

4. Jika sudah menemukan kode diatas, letakkan kode dibawah ini tepat diatas </head>

<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 atau kode diatas fungsinya untuk mengatur Artikel Terkait kita agar nanti setiap artikelnya masuk dalam Unordered List ( ul ) jadi nanti kita bisa mengeditnya dengan mudah melalui css.

5. Selanjutnya cari juga kode <data:post.body/> dengan menggunakan CTRL + F lalu letakkan script dibawah tepat setelah kode <data:post.body/> (dibawahnya) namun disini biasanya banyak terjadi kesalahan, karena <data:post.body/> terkadang ada lebih dari satu buah (tergantung template) jika template standar dari blogspot akan ada 4 <data:post.body/> jadi letakkan letakkan pada kode ke 3, untuk template yang lain yang mempunya 2 <data:post.body/> solusinya letakkan pada kode kedua atau terakhir, template lain silahkan dicoba coba sendiri. Kode yang harus diletakkan dibawah <data:post.body/> adalah sebagai berikut.

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

6. Simpan, dan lihat hasilnya

Jike berhasil, penampakan Artikel Terkait akan seperti punya saya dibawah ini :

Penentu kesuksesan lain dari pembuat Artikel Terkait adalah penamaan pada Label, misalnya dalam 1 Artikel terdapat dua Label, contohnya 'Kerja' dan 'Online' nah jika ingin Artikel Terkait dimuncul dalam salah satu artikel tentu kedua artikel tersebut juga harus diberi kedua label tersebut, Tidak bisa Satu !

Sampai disini dulu tutotial cupu mengenai Cara Membuat Artikel Terkait Yang Menarik di Blogspot yang bisa saya bagikan ke Anda, selamat mencoba dan semoga berhasil.

Cara Otomatis Dalam Membuat Daftar Isi / Sitemap di Blog

Cara Membuat Daftar Isi / Sitemap di Blog sebenarnya bisa dibuat secara otomatis, tapi banyak juga blogger indonesia yang memilih untuk Membuat Daftar Isi / Sitemap tersebut dengan Manual. Alasannya pun beragam, ada yang bilang 'biar ringan' ya biar ringan, karena memang Sitemap yang dibuat dengan Manual (bukan otomatis) tidak memerlukan JavaScript, sebaliknya untuk Sitemap yang dibuat dengan cara otomatis tentu akan membutuhkan bantuan JavaScript, dan ini dianggap sebagian Blogger akan memberatkan situs tersebut saat dibuka.

Tapi masih banyak juga Blogger indonesia yang tetap memilih untuk membuat sitemap dengan cara otomatis, karena mereka menganggap selain praktis dan cepat, juga tidak sulit dalam membuatnya.

Untuk itulah, disini saya akan menjelaskan kedua cara tersebut, otomatis dan manual. Jadi nantinya Anda bisa memilih mana yang akan Anda gunakan.

• Cara Otomatis Dalam Membuat Daftar Isi / Sitemap di Blog
• Cara Manual Dalam Membuat Daftar Isi / Sitemap di Blog

Mungkin tak perlu berlama-lama langsung saja kita masuk pada cara yang pertama, yaitu membuat daftar isi atau sitemap di blog secara otomatis.

Cara Membuat Daftar Isi / Sitemap di Blog secara Otomatis

Seperti yang saya jelaskan, cara membuat daftar isi secara otomatis, akan membuat loading blog Anda menjadi sedikit lebih berat, karena apa ? dikarenakan, ada JavaScript yang harus dibaca oleh Browser yang digunkan oleh pengunjung, dan dampak yang lebih parah jika Browser yang digunakan oleh pengunjung Anda tidak support JavaScript atau JavaScript di Browsernya sedang dimatikan, tentu Daftar Isi / Sitemap yang Anda buat, tidak akan terlihat.

Tapi jika Anda tetap ingin menggunakan Cara Otomatis ini, saya akan menjelaskan Tahap demi Tahapnya, dan pastikan Anda membacanya dengan teliti.

1. Masuk ke Blogger, dan klik pada menu Laman

2. Pilih Laman Baru

3. Tuliskan Judul terlebih dahulu, untuk Judul bisa Anda isi Daftar Isi atau Sitemap

4. Pindah ke Mode HTML (defaultnya adalah Compose)

5. Copy dan Paste, script dibawah ini

<script type="text/javascript">var postTitle=new Array();var postUrl=new Array();var postMp3=new Array();var postDate=new Array();var postLabels=new Array();var postBaru=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function loadtoc(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postMp3[ii]=o;if(h<10){postBaru[ii]=true}else{postBaru[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postMp3[e];postMp3[e]=postMp3[g];postMp3[g]=f;var f=postBaru[e];postBaru[e]=postBaru[g];postBaru[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postMp3[f];postMp3[f]=postMp3[h];postMp3[h]=g;var g=postBaru[f];postBaru[f]=postBaru[h];postBaru[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Judul Artikel";var m="Klik untuk sortir berdasarkan judul";var d="Tanggal";var k="Klik untuk Sortir bedasarkan tanggal";var c="Kategori";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Klik untuk menampilkan semua"}h+="<table>";h+="
<tr>";h+='<td class="toc-header-col1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="toc-header-col2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="toc-header-col3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="toc-header-col4">';h+="Download MP3";h+="</td>";h+="</tr>
";for(var g=0;g<postTitle.length;g++){if(a==""){h+='
<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>
';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='
<tr><td class="toc-entry-col1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="toc-entry-col2">'+postDate[g]+'</td><td class="toc-entry-col3">'+postLabels[g]+'</td><td class="toc-entry-col4"><a href="'+postMp3[g]+'">Download</a></td></tr>
';l++}}}h+="</table>
";if(l==postTitle.length){var f='<span class="toc-note">Menampilkan Semua '+postTitle.length+" Artikel
</span>"}else{var f='<span class="toc-note">Menampilkan '+l+" artikel dengan kategori '";f+=postFilter+"' dari "+postTitle.length+" Total Artikel
</span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p>
<a href="/search/label/'+temp1+'">'+temp1+"</a></p>
<ol>");firsti=a;do{document.write("
<li>");document.write('<a href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postBaru[a]==true){document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')}document.write("</li>
");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>
");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("
");document.write('Post Link  : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a>
");document.write('Download mp3  : <a href="'+postMp3[a]+'">'+postTitle[a]+"</a>
");document.write("
")}};</script> <script src="http://berguruseo.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

6. Penting ! Ganti alama blog yang saya beri warna merah (berguruseo.blogspot.com) dengan alamat Blog yang akan Anda isi Daftar Isi atau Sitemap

7. Klik Publikasikan

Cek dengan cara mengklik ' Lihat ' apakah sudah muncul ? jika sudah muncul Daftar Isi atau Sitemap seperti gambar diatas, berarti Anda sudah sukses membuat daftar isi di blog.

Mudah bukan, hanya butuh beberapa langkah dan waktu yang sangat singkat.

Nah, kita akan melanjutkan cara membuat daftar isi atau sitemap di blog yang kedua, yaitu dengan cara Manual, yang tentunya akan sedikit lebih merepotkan ketimbang cara yang pertama, dan jauh lebih menguntungkan dari segi performa blog.

Cara Membuat Daftar Isi / Sitemap di Blog secara Manual

Keuntungan membuat daftar isi atau sitemap di blog secara manual adalah fleksibel. Ya, karena tetap akan terlihat walaupun Browser tersebut tidak support javascript (opera mini). Dan selain itu, tentunya tidak akan memberatkan blog kita.

Mungkin langsung saja, berikut adalah cara membuat daftar isi di blog secara manual.

1. Sama seperti langkah diatas, Masuk ke Blogger, lalu pilih Laman

2. Klik Laman Baru

3. Masukkan Judul yang Anda inginkan, misal Sitemap atau Daftar Isi

4. Ubah ke Mode HTML caranya dengan mengklik Tombol HTML (kiri atas)

5. Copy Paste script dibawah ini

<p><a href="/search/label/Alexa Rank">Alexa Rank</a></p><ol><li><a href="http://berguruseo.blogspot.com/2013/06/cara-meningkatkan-alexa-rank-dengan.html">Cara Meningkatkan Alexa Rank Dengan Manipulasi Referer Link</a></li><li><a href="http://berguruseo.blogspot.com/2013/06/cara-unik-meningkatkan-alexa-rank-blog.html">Cara Unik Meningkatkan Alexa Rank Blog</a></li></ol>

6. Seperti biasa ubah alamat blog saya, dan ganti dengan alamat blog Anda, jangan lupa juga ganti Anchor Textnya

Sedikit Penjelasan : Kata yang diapit oleh kode HTML <p> dan </p> adalah untuk menuliskan Judul Label, sementar yang diapit oleh <li> dan </li> digunakan untuk menuliskan Isi dari Label tersebut.

Disini Anda juga bisa lebih leluasa dalam mengedit atau mendesain tampilan Daftar Isi, sebagai contoh jika ingin membuat Judul Daftar isi tersebut berwarna Merah, ya tingga kita tambahkan <span style="color: red;">Judul Label</span>, atau bisa juga kita buat hurufnya jadi lebih besar, ingin menambahkan border atau garis bawah ? bisa juga caranya cukup mudah yaitu dengan dengan menambahkan font-size: 14px; border-bottom: 1px solid blue jadi nanti hasilnya akan seperti gambar dibawah ini.



Tidak terlalu susah bukan dalam membuat sitemap ? namun, jika Anda tetap merasa kesulitan, jangan sungkan-sungkan untuk bertanya di kolom komentar, nanti akan coba saya bantu.

Itu saja dari saya, akhir kata saya ucapkan terimakasih banyak telah sudi meluangkan waktu sejenak untuk membaca Cara Otomatis Dalam Membuat Daftar Isi / Sitemap di Blog dan semoga dapat bermanfaat.

Cara Membuat Read More di Blog Blogspot

Cara Membuat Read More di Blog Blogspot mungkin belum banyak yang mengetahuinya, untuk itu disini saya akan mencoba menjelaskan secara singkat Bagaimana Cara Membuat Read More di Blog Blogspot.

Tapi sebelumnya saya ingin memberitahukan bahwa Read More yang akan kita buat ini otomatis, maksudnya kita akan belajar Cara Membuat Read More secara otomatis menggunakan bantuan dari jump link yang ada di blogspot.

Dalam tutorial ini saya menggunakan Template Sederhana (standar) dari Blogger.

Baik, langsung saja kita mulai pembahasan cara membuat read more di blog blogspot.

Cara Membuat Read More di Blog

1. Masuk ke Template dan klik Edit Template

2. Klik CTRL + F, dan cari kode html </head>

3. Letakan kode dibawah ini, tepat diatas kode html </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 275;
summary_img = 275;
img_thumb_height = 120;
img_thumb_width = 120;
</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>

4. Lanjut dan cari kode ini <data:post.body/> dan ubah dengan kode HTML di bawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<div class='readmore-link'><span class='arrow'>›</span> <a expr:href='data:post.url'>Read More</a></div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Disini banyak blogger yang bingung, karena ada banyak sekali kode <data:post.body/>, kalau pakai template standar yang diganti adalah yang kode Kedua ( itemprop='description articleBody' )

6. Jika sudah tinggal Anda klik Save dan, silahkan lihat hasilnya. Jika cara membuat read more di blog Anda berhasil, maka hasilnya akan seperti gambar dibawah ini.

Kalau tampilan read more hanya berupa link, sepertinya kurang menarik bukan ? tapi jangan khawatir, kita bisa mengubah tampilan read more dengan bantuan css.

Cara Membuat Read More di Blog Lebih Menarik

1. Sama seperti langkah cara membuat read more diatas, yang pertama adalah buka Template lalu klik Edit

2. Klik CTRL + F dan ketikkan ]]></b:skin> lalu klik Enter

3. Masukkan kode css dibawah ini tepat diatas ]]></b:skin>.

.arrow {
font-size: 18px;
font-family: serif;
font-weight: 900;
}
.readmore-link {
margin-top: 20px;
border-bottom: 1px solid gainsboro;
margin-left: 250px;
}

4. Langkah terakhir tinggal anda klik save template.

5. Silahkan Anda cek tampilan read more anda yang baru, gimana ? tambah hancur bukan, haha.

Untuk informasi saja, bahwa sebenarnya kode javascript diatas bisa Anda ubah sesuai selera, misalnya kita ingin membuat thumbnail-nya lebih besar, katakanlah ingin dirubah menjadi 250px, caranya mudah tinggal Anda ganti img_thumb_height = 120; menjadi img_thumb_height = 250; dan img_thumb_width = 120; menjadi img_thumb_width = 250;

Mungkin itu saja penjelasan dari saya mengenai cara membuat read more di blog, jika ada hal yang ingin anda tanyakan seputar cara membuat read more di blog ini, jangan sungkan-sungkan untuk menanyakannya melalui kolom komentar dibawah, gratis pastinya.

Akhir kata saya ucapkan terimakasih banyak sudah bersedia meluangkan waktu Anda untuk membaca artikel Cara Membuat Read More di Blog Blogspot.

Cara Membuat Tulisan Berjalan di Blog

Contoh Tulisan Berjalan

Minggu lalu ada teman saya sebut saja Otong nanya begini ‘ eh, bro kira-kira bakal keren ya kalau blog kita dibawahnya (footer) bisa dikasih teks berjalan mirip kayak di berita-berita yang ada di TV ’ spontan langsung saya komentari bahwa hal tersebut sangat mungkin untuk diterapkan juga di Blog.

Dengan wajah lugu teman saya nanya lagi, ‘ emang gimana cara membuat tulisan berjalan di blog ? ’ nah, daripada saya jelasin cara membuat tulisan berjalan tersebut langsung lewat mulut, agak ribet juga, untuk itu saya tulis di blog ini, itung-itung nambah jumlah postingan blog.

Sekedar informasi, kalau di dunia blogging Tulisan Berjalan itu disebut Marquee, sebenarnya saya juga sedikit bingung kenapa teks berjalan disebut Marquee padahal jika diartikan kedalam bahasa indonesia, Marquee berarti Tenda Besar. Entah apa filosofi dibalik pemilihan kata Marquee tersebut.

Dah, dari tadi ngoceh mulu, sekarang kita masuk pada Cara Membuat Tulisan Berjalan (Marquee) di Blog.

Contoh Tulisan Berjalan / Marquee Standar

Contoh Teks Yang Dikenai Marquee

Untuk membuat Tulisan Berjalan seperti diatas, kita membutuhkan kode html seperti dibawah ini :

<marquee>Contoh Teks Yang Dikenai Marquee</marquee>

Si <marquee> inilah yang nantinya akan membuat seluruh Tulisan atau Teks yang diapit kode tersebut dapat bergerak.

Yang diatas itu kan Tulisan Berjalan yang biasa saja tanpa tambahan efek apapun pada kode html. Kita pun bisa memvariasikan kode <marquee> diatas dengan JavaScript atau HTML yang lain, agar lebih jelas kita masuk contoh saja.

Cara Menambahkan Warna Background di Tulisan Berjalan

Untuk menambahkan warna background, kita perlu menyisipkan style="background: warna;" kedalam kode marquee-nya, dibawah ini adalah contoh jika kita ingin memberi warna abu-abu pada Marquee Text.

<marquee style="background: gray;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu</marquee>

Maka hasil dari kode HTML diatasa akan nampak seperti ini.

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu

Tulisan Berjalan diatas susah untuk dibaca bukan ? kita juga bisa mengganti warna dari Teks diatas, agar kontras dengan backgroundnya.

Cara Mengganti Warna Tulisan Berjalan

Disini saya akan mencotohkan bagaimana mengganti warna Tulisan Berjalan diatas dengan warna Putih agar teks tersebut mudah untuk terbaca.

Kode yang kita pakai adalah seperti ini :

<marquee style="background: gray; color: white;">Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih</marquee>

Dan Hasilnya akan nampak seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dengan Background Abu-abu Teks Putih

Cara Membuat Tulisan Berjalan Setengah Layar

Selain mengganti warna dan juga background kita juga bisa membuat Tulisan Berjalan tersebut hanya tampil dari tengah, tidak full dari kanan ke kiri.

Dan cara ini tergantung dari Div atau Nav pembungkus Marquee Teks tersebut, artinya jika lebar selector Div hanya 500px maka Tulisan berjalan akan muncul pada pixel ke 250 - 0 (tengah ke kiri).

Contoh penerapan dalam kode HTML :

<marquee width="50%">Contoh Teks Yang Dikenai Marquee Width 50%</marquee>

Kode HTML diatas akan membuat tulisan 'Contoh Teks Yang Dikenai Marquee' akan berjalan dari tengah-tengah layar menuju ke kiri, atau lebih jelasnya seperti contoh dibawah ini :

Contoh Teks Yang Dikenai Marquee Width 50%

Dan Anda pun bebas mengganti persentase tersebut. Semakin kecil maka semakin ke kiri pula teks yang akan tampil.

Diatas kita hanya menggunakan HTML dan CSS bukan, nah sekarang kita akan menambahkan JavaScript kedalam kode <marquee> tersebut.

Cara Membuat Tulisan Berjalan Dengan Jeda

Jika normalnya Tulisan Bejalan atau <marquee> selalu berjalan tanpa henti dari kanan ke kiri, maka kita bisa menyuruhnya untuk berhenti sejenak (jeda) dengan cara menambahkan kode berikut.

<marquee scrolldelay="500">Contoh Teks Yang Dikenai Marquee Scrolldelay 500</marquee>

500 disini maksudnya adalah 0,5 Detik bukan 500 Detik. Jadi kode diatas jika dijalankan akan membuat Teks yang ada didalam kode <marquee></marquee> berhenti sejenak setiap 0,5 Detik.

Contohnya seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Scrolldelay 500

Cara Mengatur Kecepatan Tulisan Berjalan

Walaupun standar dari Marquee Text sudah sesuai (tidak terlalu cepat atau lambat) namun jika Anda merasa Tulisan Berjalan tersebut begitu amat cepat, Anda bisa dengan mudah mengatur kecepatannya, yaitu dengan menambahkan scrollamount="angka"

Contoh penerapan dalam HTML :

<marquee scrollamount="10">Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10</marquee>

Dan kode tersebut akan menghasilkan efek seperti ini :

Contoh Teks Yang Dikenai Marquee Dengan Speed Scroll Amount 10

Saya sendiri tidak tahu persis makna dari angka 10 tersebut, apakah 10px per detik atau apalah saya kurang tahu, Tapi yang jelas jika Anda merubah angkanya menjadi lebih besar, maka Kecepatan Tulisan Berjalan tersebut akan makin cepat.

Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan

Seperti yang kita semua tahu, bahwa Standar dari Teks Berjalan adalah mengarah Dari Kanan ke Kiri. Namun kali ini kita akan mencoba hal yang berbeda yaitu membalikkan arah pergerakannya (kiri ke kanan).

Kode HTML tambahan yang kita butuhkan adalah direction="right" yang nanti akan kita pasangkan dengan <marquee> tentunya.

Contoh penggabungan :

<marquee direction="right">Contoh Tulisan Berjalan Dari Kiri ke Kanan</marquee>

Dan hasilnya akan menjadi seperti ini :

Contoh Tulisan Berjalan Dari Kiri ke Kanan

Cara Membuat Tulisan Berjalan Memantul

Agar Tulisan Berjalan tersebut dapat memantul, kita cukup menambahkan behavior="alternate".

Contoh penambahan ke dalam HTML :

<marquee behavior="alternate">Contoh Tulisan Berjalan Dengan Efek Memantul</marquee>

Hasilnya setelah kita terapkan :

Contoh Tulisan Berjalan Dengan Efek Memantul

Cara Membuat Tulisan Berjalan Dari Bawah ke Atas

Sebenarnya kode untuk membuat Tulisan Berjalan Dari Bawah ke Atas sama saja dengan dengan Cara Membuat Tulisan Berjalan Dari Kiri ke Kanan, hanya saja kita mengubah valuenya menjadi direction="up"

Contoh penerspan :

<marquee direction="up">Contoh Tulisan Berjalan Dari Bawah ke Atas</marquee>

Dan Hasilnya :

Contoh Tulisan Berjalan Dari Bawah ke Atas

Kata "up" juga bisa Anda ganti dengan down (untuk memberi efek tulisan berjalan dari atas ke bawah).

Cara Membuat Tulisan Berjalan Berhenti Ketika Disentuh Oleh Kursor Mouse

Membaca dalam kondisi teks sedang berjalan memang saya akui cukup sulit, nah untuk itu ada kode JavaScript (JS) untuk memecahkan masalah tersebut, yaitu onmouseover="this.stop()" onmouseout="this.start()" kode JS tersebut fungsinya untuk menghentikan laju Tulisan Berjalan tersebut, dengan catatan ada Kursor Mouse yang melewati atau bersentuhan dengan Tulisan Berjalan.

Contoh Penggabungan JavaScript diatas dengan kode HTML Marquee :

<marquee onmouseover="this.stop()" onmouseout="this.start()">Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya</marquee>

Dan hasil dari kolaborasi JavaScript dan HTML diatas adalah seperti dibawah ini :

Contoh Teks Yang Dikenai Marquee Dan Akan Berhenti Jika Ada Kursor Diatasnya

Cara Memasang Kode Marquee di Dalam Artikel	Cara Memasang Kode Marquee di Dalam Widget
1. Masuk ke dalam Text Editor, lalu pilih Mode HTML 2. Copy dan Paste kode Marquee Anda disini 3. Beralihlah ke Mode Compose (jika berhasil text 4. akan berjalan) 4. Untuk memastikan kode berjalan sempurna klik pada Pratinjau	1. Masuk ke dalam menu Tata Letak lalu Klik Tambahkan Gadget 2. Pilih opsi HTML/JavaScript 3. Copy dan Paste kode Marquee pada textare yang sudah disediakan 4. Klik Simpan dan silahkan dilihat hasilnya

Sebenarnya masih banyak variasi-variasi yang bisa kita lakukan dengan <marquee> ini. Kalau sempat nanti pasti artikel cara membuat tulisan berjalan ini nantinya akan saya Update, jadi jangan sungkan-sungkan untuk membookmark halaman ini untuk mendapatkan update.an terbaru tentang cara membuat tulisan berjalan, hhe.

Akhir kata saya ucapkan terimaksih banyak telah bersedia membaca artikel cara membuat tulisan berjalan ini.

Belajar Cara Edit Template Blogger Supaya Keren Part 4 ( Final ! )

Tutorial Final ini saya dedikasikan khusus untuk teman-teman Blogger yang masih kesulitan mengedit template. Jadi untuk para master silahkan skip ke comment atau close saja halaman ini.

Sesuai janji saya kemarin, pada post kali ini maka saya akan menjelaskan mengenai Cara Memasukan CSS yang masih ada di Developer Tools ke dalam template yang sesungguhnya (xml).

Saya harap Anda sudah membaca tutorial sebelumnya, agar nantinya saat membaca pejelasan dibawah ini Anda tidak bingung.

' link alternatif untuk membaca artikel sebelumnya '

• Belajar Cara Edit Template Blogger Supaya Keren Part 1

• Belajar Cara Edit Template Blogger Supaya Keren Part 2

• Belajar Cara Edit Template Blogger Supaya Keren Part 3

Untuk mengingatkan saja, template yang akan kita import ke dalam xml nanti hasilnya akan seperti ini.

Tak perlu berlama-lama sekarang kita mulai saja penjelasannya.

Tutorial Mengedit Template Blogger Supaya Keren Part 4 ( Final ! )

Sebenarnya cukup mudah untuk memindahkan css yang sudah kita tulis di Developer Tools dan memindahkannya ke dalam xml, yaitu cukup dengan mencari '' dan mengcopas kan saja. Agar lebih jelas saya sertakan pula gambar. Dan pastikan Anda sudah masuk ke dalam file xml di template Anda, caranya : lihat sidebar kiri, lalu Template dan pilih Edit HTML.

1. Mengedit Warna Background dan Border Body
   
   Untuk mengubah Background Body kita cari dulu class dengan nama .body-fauxcolumns lalu kita tambahkan background: #f2f2f2; untuk mengganti warna backgroundnya.
   
   Dan lanjut kita cari lagi selector class bernama .content-inner dan kita masukan property border: 1px solid gainsboro;
   
   
   

   
   
   
   
2. Mengedit Warna Tanggal dan Border Artikel
   
   Tak jauh beda dengan cara diatas, caranya kita cari (ctrl+f) terlebih dahulu selector .main-inner dan selanjutnya kita masukkan property ini.
   
   

   padding: 0 0;
   border: 1px solid gainsboro;
   padding-bottom: 10px;
   border-radius: 6px;

   
   Sementara untuk mengganti warna tanggal kita cari selector .date-header span dan tambahkan selector dibawah ini.
   
   

   background-color: #FFFFFF;
   color: #747474;
   padding: 0.4em;
   letter-spacing: 3px;
   margin: inherit;
   border: 1px solid gainsboro;
   border-radius: 6px;
   font-weight: bold;
   font-size: 14px;

   
   
   
   
   
   
   
3. Mengedit Warna Background, Border dan Judul Sidebar
   
   Langkahnya sama persis dengan cara diatas namun bedanya disini kita tidak mencari selektor, melainkan kita akan menambahkan atau membuat selektor sendiri.
   
   Cara pertama, ketik ctrl + f lalu ketikkan </b:skin> dan masukkan selektor baru ini, tepat diatas kode </b:skin> tadi.
   
   

   aside {
   border: 1px solid gainsboro;
   border-radius: 6px;
   padding-top: 10px;
   padding-bottom: 10px;
   }
   #sidebar-right-1 h2 {
   border-bottom: 1px solid gainsboro;
   padding: 10px;
   text-align: center;
   font-size: 16px;
   }

   
   Untuk lebih jelasnya tentanng peletakannya, bisa Anda lihat screenshot dibawah ini.
   
   
   
   
   
   
   
4. Menambahkan Slot Iklan, Menu Help dan Menu Navigasi
   
   Untuk mempermudah Anda memahaminya maka saya akan membaginya menjadi tiga bagian.
   
   
   • Menambahkan Slot Iklan
     
     Cari div dengan selector content-outer lalu pastekan kode html ini <div class="slotiklan">Advertisement 728x90</div> dibawahnya content-outer.
     
     Selanjutnya kita tambahkan CSSnya.
     
     

     .slotiklan {
     border: 1px solid gainsboro;
     height: 90px;
     background-color: #FDF5F5;
     border-bottom: 0;
     font-size: 20px;
     padding-left: 60px;
     line-height: 90px;
     }

     
     
   • Menambahkan Menu Help
     
     Letakan kode dibawah ini, tepat dibawahnya div slot iklan tadi.
     
     

     <div id="navbarfirst">
     <ul>
     <li><a href="">About Us</a></li>
     <li><a href="">Sitemap</a></li>
     <li><a href="">Contact Us</a></li>
     </ul>
     <div>

     
     Lalu kita permak dengan CSS seperti ini.
     
     

     #navbarfirst {
     background: white;
     padding: 5px;
     border: 1px solid gainsboro;
     border-bottom: 0;
     padding-left: 515px;
     height: 40px;
     }
     #navbarfirst ul li {
     float: left;
     list-style-type: none;
     padding-left: 33px;
     font-size: 14px;
     }

     
     
   • Menambahkan Menu Navigasi
     
     Menu navigasi ini akan kita letakkan dibawah header (judul blog), maka kita cari dulu </header> dan masukkan kode html unyuk membuat navigasi dibawah ini.
     
     

     <div id="navbarsecond">
     <ul>
     <li><a href="">SEO Lokal</a></li>
     <li><a href="">SEO Manca</a></li>
     <li><a href="">SEO Tips</a></li>
     <li><a href="">SEO Kawe</a></li>
     <li><a href="">SEO Sawang</a></li>
     <li><a href="">SEO Sumber</a></li>
     <li><a href="">SEO Google</a></li>
     </ul>
     </div>

     
     Selanjutnya kita cari lagi </b:skin>, dan letakkan css dibawah ini tepat diatasnya kode </b:skin>.
     
     

     #navbarsecond {
     border-bottom: 1px solid gainsboro;
     height: 30px;
     padding-left: 50px;
     }
     #navbarsecond ul li {
     float: left;
     list-style-type: none;
     padding-right: 40px;
     font-size: 14px;
     }

Dan wala, selesai sudah template simple yang gak ada namanya ini, hha. Dengan begini selesai sudah rangkain Tutorial berseri ini.

Selanjutnya terserah Anda, mau dijual kah templatnyae atau dibuangkah, tapi saran saya sih dijual murah aja dulu Rp. 5.000,00 misalnya. Kalau laku 1000 template kan lumayan banget dapat 5 Juta.

Jika tidak mau repot memasang satu persatu kode diatas, Anda bisa mendownload Template XML secara lengkapnya melalui link dibawah ini :

Template Blogger SEO Light

Download

Demo

Mungkin ini saja yang bisa saya begikan, mohon maaf jika ada yang kurang dalam Tutorial ini. Akhir kata saya ucapkan terimakasih banyak telah berkunjung dan bersedia membaca tutorial cupu ini.

[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : Part 1 - Part 2 - Part 3 - Part 4

Belajar Cara Edit Template Blogger Supaya Keren Part 3

Halo sahabat setia Blog Berguru SEO, akhirnya admin punya waktu luang nih untuk melanjutkan tutorial berseri ini. Nah untuk Anda yang elum tahu apa aja sih yang kita bahas di tutorial mengedit template blogger seri sebelumnya. Berikut cuplikan singkat mengenai apa yang sudah kita pelajari pada part-part sebelumnya.

• Belajar Cara Edit Template Blogger Supaya Keren Part 1

  
  Pada part pertama ini kita fokus pada cara menggunakan alat yang akan dipakay untuk mengedit (developers tool) dan juga sedikit melakukan goresan pada bagian heading, backgorund body luar, dan
  
  

• Belajar Cara Edit Template Blogger Supaya Keren Part 2

  
  Untuk part dua, yang kita bahas adalah pengeditan sidebar, meliputi judul widget yang ada di sidebar, border pemisah judu widget dan isi widget. Intinya pada part ini fokus untuk sidebar blog.

Nah, semenatara untuk tutorial pada part 3 ini, kita akan fokus pada pembuatan Menu Navigasi dan Menu Bantuan yang berisi About, Contact dan Sitemap.

Dibawah ini adalah penampakan hasil akhir yang akan kita buat.

Menu ini saya buat sesimple mungkin (karena bisanya cuma gitu, hhe) tapi fungsinya akan tetap sama seperti menu menu keren lainnya.

Tanpa perlu basa-basi lagi sekarang saatnya kita mulai tutorialnya.

Tutorial Mengedit Template Blogger Supaya Keren Part 3

Sedikit penjelasan, nantinya disini kita akan membuat dua menu, yaitu menu navigasi yang berada di bawah judul dan deskripsi blog dan satunya lagi menu bantuan yang akan kita letakan diatas judul dan deskripsi blog kita. Ok, langsung saja berikut langkah-langkahnya.

1. Membuat Menu Navigasi

   
   Pertama kita buat dahulu daftar menu menggunakan kode html ul li. Contoh yang paling sederhana adalah seperti ini. Dan kita bungkus dengan div atau nav (html5) tapi disini saya akan mencontohkan menggunakan div, karena div terdengar lebih familiar, kalau nav masih liar, hehe.
   
   

   <div id="navbarsecond">
   <ul>
   <li><a href="">SEO Lokal</a></li>
   <li><a href="">SEO Manca</a></li>
   <li><a href="">SEO Tips</a></li>
   <li><a href="">SEO Kawe</a></li>
   <li><a href="">SEO Sawang</a></li>
   <li><a href="">SEO Sumber</a></li>
   <li><a href="">SEO Google</a></li>
   </ul>
   <div>

   
   Pada pemberian nama id boleh Anda kreasikan, misal menu2 jadi tidak harus navbarsecond.
   
   Dan selanjutnya letakkan dibawah header. Lihat gambar dibawah agar lebih jelas.
   
   
   
   
   
   
   Tapi ada yang aneh, menunya kok kebawah (vertikal) kan seharusnya ke samping (horisontal) ? solusinya cukup Anda tambahkan property float: left; untuk membuat menu tersebut mengarah kesamping. Masalah kedua adalah jarak yang terlalu dekat, maka kita gunakan padding untuk mengatur jaraknya. Lalu untuk menghapus bulatannya kita gunakan list-style-type: none;. Kode lengkapnya ada di bawah.
   
   

   #navbarsecond ul li {
   float: left;
   padding: 10px;
   list-style-type: none;
   margin-left: 30px;
   }

   
   Masukan selector diatas dengan cara menekan tombol new style rule (simbol +) yang ada di pojok kanan atas menu inspect element.
   
   
   
   
   
   
   Selanjutnya, klik pada div dengan selector navbarsecond, klik tanda +, lalu tambahkan kode dibawah ini.
   
   

   #navbarsecond {
   border-bottom: 1px solid gainsboro;
   margin: 0 20px;
   margin-top: -12px;
   margin-bottom: -10px;
   }

   
   Hasilnya akan seperti gambar dibawah ini.
   
   
   
   
   
   
   

2. Membuat Menu Bantuan

   
   Seperti yang saya jelaskan sebelumnya, menu bantuan disini akan terdiri dari about, contact, sitemap dan bisa Anda tambahkan sendiri lainnya.
   
   Untuk caranya mudah saja, cukup tambahkan (ctrl + c) div menu navigasi yang sudah kita buat tadi, dan letakkan dibawah selector content-outer. Dan jangan lupa tambahkan selektor ul li didalam id navbarfirst. Contoh kode cssnya seperti dibawah ini.
   
   

   /* CSS Untuk Mengatur DIV */

   #navbarfirst {

   background: white;

   padding: 5px;

   border: 1px solid gainsboro;

   border-bottom: 0;

   padding-left: 485px;

   }

   
   

   /* CSS Untuk Mengatur UL LI ( Menu ) */

   #navbarfirst ul li {

   float: left;

   padding: 10px;

   list-style-type: none;

   padding-left: 47px;

   }

   
   Untuk lebih jelasnya perhatikan gambar dibawah ini.
   
   
   
   
   

Dengan begitu selesai sudah pembuatan Menu Navigasi kita kali ini. Dan juga itu menandakan selesai juga Tutorial Edit Template Blogger Supaya Keren seri ke 3 ini.

Pada Artikel selanjutnya Belajar Cara Edit Template Blogger Supaya Keren Part 4 ( Final ) kita akan memasukan semua css yang sudah kita buat ke dalam template blogger sesungguhnya (xml). Pastikan Anda tidak melewatkannya, karena itu adalah akhir dari rangkain tutorial berseri ini.

Akhir kata saya ucapkan terimakasih banyak.

[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : Part 1 - Part 2 - Part 3 - Part 4

Belajar Cara Edit Template Blogger Supaya Keren Part 2

Belajar Edit Template Blogger Part 2

Melanjutkan tutorial Belajar Cara Edit Template Blogger Part 1 kemarin, maka kali ini Blog Berguru SEO akan melanjutkan seri ke duanya.

Oke, seperti biasa pertama siapkan dulu Alat dan Bahan 'memasaknya'

• Untuk bahanya, siapkan dulu sebuah Blog yang akan kita 'racik'

• Sementara untuk alatnya adalah Google Chrome Developers Tool

Jika semua Alat dan Bahan sudah terseida, sekarang saatnya memulainya.

Ohya, tema dari Template yang akan kita buat ini saya namakan Superficial Simple Silver Template, yang artinya Template yang berwarna Abu-abu dengan desain Simple dan Datar.

Hasil akhir pada Tahap ke 2 ini akan seperti gambar dibawah ini.

Saya rasa cukup basa-basinya, mari kita mulai mengedit.

Langkah Mengedit Template Blogger Supaya Keren Part 2

Pada tahap kedua ini kita akan fokus mengedit tampilan Content dan Sidebar.

1. Edit Tampilan Sidebar Template

   Yang pertama kita edit adalah Sidebarnya, maka sama seperti pada tutorial kemarin, klik kanan dimana saja, pilih inspector, lalu arahkan ke bagian Sidebar Template kalian. " pastikan kita berada di selector 'aside' lihat gambar agar dibawah agar lebih jelas. "
   
   
   
   
   
   Jika sudah terklik selector aside, sekarang lanjutkan dengan mengisi Element Stylenya dengan kode css (property) di bawah ini.
   
   

   border: 1px solid gainsboro;
   border-radius: 6px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-left: 10px;
   width: 280px;

   
   Maka akan muncul garis tepi melengkung setebal 1pixel dan berwarna abu-abu muda. Garis melengkung disebabkan oleh property border-radius.
   
   

2. Edit Judul Sidebar Template

   Kita Lanjutkan mengedit bagian Juduln Sidebarya, defaultnya kan sangat kecil ukurannya maka kita akan sedikit membesarkannya dan memberi garis tepi bawah.
   
   Caranya masih sama seperti cara diatas, pertama arahkan inspector tepat di bagian judul.
   
   Maka kita akan menemui selector h2, jika kita langsung memperbesar fontnya dengan font-size maka iitu nanti akan mengubah seluruh bagian isi template. Disini kan, kita hanya ingin mengubah h2 yang ada di bagian Sidebar bukan ? solusinya, tambahakan #sidebar-right-1 di samping selector h2.
   
   Perhatikan gambar dibawah ini, untuk lebih jelasnya.
   
   
   
   
   Lalu fungsinya menambahkan #sidebar-right-1 ini untuk apa ? itu adalah selector bertingkat, intinya untuk merubah tampilan css secara spesifik, lebih jelasnya bisa Anda googling.
   
   Lanjut, tambahkan property dibawah ini untuk mengubah ukuran font dan memberi garis tepi dibagian bawah Sidebar.
   
   

   border-bottom: 1px solid gainsboro;
   padding: 10px;
   text-align: center;
   font-size: 16px;

   
   Dan judul yang ada di sidebar pun akan terlihat sedikit menarik.
   
   

3. Edit Tampilan Artikel dan Background Tanggal Template

   Seperti yang sudah-sudah arahkan kursor pada bagian outer isi artikel, lalu pada Matched CSS Ruler tambahkan property dibawah ini.
   
   border: 1px solid gainsboro;
   border-radius: 6px;
   
   Jangan lupa untuk menghapus property width:100%, agar bagian Sidebar tidak bergeser kebawah.
   
   Selanjutnya pada bagian Tanggal yang mempunyai selector date-header, masukan property dibawah ini.
   
   

   background-color: #FFFFFF;
   color: #747474;
   padding: 0.4em;
   letter-spacing: 3px;
   margin: inherit;
   border: 1px solid gainsboro;
   border-radius: 6px;
   font-weight: normal;

   
   Dan walaa, Background Artikel dan Tanggal akan berubah wujud menjadi seperti gambar dibawah ini.
   
   
   
   
   

4. Edit Tampilan Judul Blog

   Disini kita akan memindahkan Judul Blog kita dibagian tengan, dan memberi batasan border dibagian bawah.
   
   Caranya klik judul blog dengan inspector, pastikan selectornya adalah header-inner lalu masukan property css dibawah ini.
   
   

   overflow: hidden;
   text-align: center;
   border-bottom: 1px solid gainsboro;

   
   Maka tampilan blog kita akan terlihat lebih kece badai.
   
   
   
   
   

Yap saya rasa untuk tutorial Belajar Cara Edit Template Blogger Supaya Keren Part 2 ckup sampai disini dulu, dan besok kita akan lanjutkan Bagaimana Cara Menambahkan Navigasi Menu di Template.

Akhir kata saya ucapkan terimakasih sudah membaca tutorial cupu dan berkenan berkunjung di Blog yang alakadarnya ini.

[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : Part 1 - Part 2 - Part 3 - Part 4