Cara Mempercantik & Memperindah Tampilan Blog Dalam 7 Menit

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

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

Tapi hening saja, untuk mempercantik atau memperindah tampilan blog Anda tidak diwajibkan menguasai ketiga bahasa tersebut kok, alasannya yaitu sudah terdapat source yang sanggup eksklusif Anda pasang untuk mempercantik tampilan blog

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

Cara Mempercantik Tampilan Blog dengan Widget Social Media

Widget ini secara tidak eksklusif bila diletakkan di Sidebar blog agan menambah kecantikkan blog Anda sebanyak 10% haha, ingin tau ? berikut penampakkannya :

Jika tertarik dengan widget social media yang dibentuk oleh Mas Sugeng. berikut cara memasang atau menggunakannya, pertama buka dulu sajian Template, kemudian klik Edit HTML, sehabis itu masukkan isyarat 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, kemudian klik Tambahkan Gadget, nanti akan ada banyak pilihan, pilih saja HTML/Javascript dan pastekan isyarat 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, bila gagal cek dari awal apakah penempatan css sudah benar atau belum, pastikan meletakkan isyarat CSS sempurna diatas ]]></b:skin>

Cara Mempercantik Tampilan Blog dengan Widget Social Share

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

Untuk menciptakan Widget Social Share ini banyak cara, ada yang dengan memakai 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, eksklusif saja copy kemudian 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), semoga Anda ingin tau coba saja sendiri ya

Cara Memperindah Tampilan Blog dengan  Fitur Read More

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

Untuk cara menciptakan readmore, saya tidak akan jelasakan disini, alasannya yaitu apa ? dikarenakan saya sudah menulisnya beberapa waktu yang lalu, bila 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 yaitu 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 manis bukan blog Anda ? bila masih kurang puas silahkan Anda comot eksklusif template yang disediakan oleh para pembuat template menyerupai Mas Sugen, Damzacky dan kawan-kawan, ada yang gratis dan ada juga yang berbayar

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