Cara Mempercantik Tampilan Blog Part 1

Cara Mempercantik Blog dalam 10 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 Muksinin19.blogspot.com. 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

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

CARA MEMPERINDAH TAMPILAN BLOG DENGAN   FITUR RELATED POST

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

Labels: BLOG

Thanks for reading Cara Mempercantik Tampilan Blog Part 1. Please share...!