Cara Mempercantik & Memperindah Tampilan Blog Dalam 7 Menit

benar sudah mahir dalam hal Edit mengedi template Teknik Mempercantik & Memperindah Tampilan Blog dalam 7 Menit

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

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

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

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


Teknik Mempercantik Tampilan Blog dengan Widget Social Media


Widget ini secara tidak pribadi jikalau diletakkan di Sidebar blog agan menambah kecantikkan blog Anda sebanyak 10% haha, penamasukan ? diberikut penampakkannya :

benar sudah mahir dalam hal Edit mengedi template Teknik Mempercantik & Memperindah Tampilan Blog dalam 7 Menit

Jika tertarik dengan widget social media yang dibentuk oleh Mas Sugeng. diberikut cara memasang atau menggunakannya, pertama buka doloe hidangan 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, jikalau gagal cek dari pertama apakah penempatan css sudah benar atau belum, pastikan meletakkan isyarat CSS sempurna diatas ]]></b:skin>


Teknik Mempercantik Tampilan Blog dengan Widget Social Share


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

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

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

Untuk menciptakannya cukup gampang, pribadi 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), agar Anda penamasukan coba saja sendiri ya


Teknik 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 dengan adanya Read More, maka blog akan tertata rapi.

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


Teknik Memperindah Tampilan Blog dengan   Fitur Related Post


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

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

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

Sampai disini doloe pembahasan terkena Teknik Mempercantik & Memperindah Tampilan Blog, jikalau ada waktu akan saya usakahan update.

Komentar

Postingan populer dari blog ini

Belajar Cara Menciptakan Game Pc Sederhana Sendiri Gratis !

Cara Menambah Like Fanpage Facebook Secara Instan !

Kupas Tuntas : Open Site Explorer