Cara Mempercantik & Memperindah Tampilan Blog Dalam 7 Menit

Kamis, 19 Juli 2018

Bagikan :

Tweet

Teknik Mempercantik Blog dalam 7 Menit bukan hal yang mustahil, kalau Anda benar-benar sudah hebat 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 kasus 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 yaitu 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 kalau diletakkan di Sidebar blog agan menambah kecantikkan blog Anda sebanyak 10% haha, penamasukan ? diberikut penampakkannya :

Jika tertarik dengan widget social media yang dibentuk oleh Mas Sugeng. diberikut cara memasang atau menggunakannya, pertama buka doloe sajian Template, kemudian klik Edit HTML, setelah itu masukkan arahan 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 arahan 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, kalau gagal cek dari pertama apakah penempatan css sudah benar atau belum, pastikan meletakkan arahan CSS sempurna diatas ]]></b:skin>

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

Untuk cara membuat readmore, saya tidak akan jelasakan disini, alasannya yaitu apa ? dikarenakan saya sudah menulisnya beberapa waktu yang lalu, kalau 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 yaitu 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 anggun bukan blog Anda ? kalau 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, kalau ada waktu akan saya usakahan update.

Tag : Blogger Tips