Cara Mempercantik & Memperindah Tampilan Blog

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


Sekian Dulu tutorial kali ini semoga bermanfaat...

Tweet