Cara membuat layout blog plus watermark keren

Pernah lihat tampilan layout blog amburadul? Dan tahukah Anda dari tampilan layout pengguna akan mengerti mana template yang benar benar premium, mana yang hanya sekedar redesain. Walaupun secara analogi tidak selamanya harus demikian. Agar mengerti apa apa dan bagaimana tampilan layout blogger tersebut, Perhatikan gambar di bawah ini:

Gambar diatas benar benar sebuah rancangan layout dan bagaimana kelak sebuah halaman secara terstruktur bekerja. 

Akan tetapi kita sedang membahas tampilan layout yang dipergunakan oleh pengguna pada saat menggunakan template blogger untuk blogging.

Dalam hal ini saya akan memberikan contoh template yang sedang saya kustom dari template default bawaan blogger, setelah menambahkan beberapa widget kustom dan membuka tampilan layout, ternyata tampilannya sudah penuh 'noda'. Jadi saya harus memperbaikinya sebelum dipergunakan oleh teman yang memesannya. Walaupun di berikan gratis tetap saja harus memberikan yang terbaik bukan?

Pada tampilan sebelum diperbaiki, tampak banyak titik titik pada tampilan layout. Itu menandakan template telah di tambahkan dengan widget kustom di luar widget yang telah ada (widget bawaan). Namun setelah di perbaiki kita juga dapat menambahkan water mark di atasnya seperti terlihat pada gambar kanan 'created with ....by...' 

Itu hanya contoh ya. Dan saya menemukan contoh watermark yang sama pada layout template viomagz, Anda dapat menginspeksinya melalui tool browser inspect elemen secara online. Insect elemen memungkinkan kita menyalin sumber kode dan mengkonversikannya kembali agar menjadi template yang utuh. 

Perhatikan gambar layout template viomagz buatan Mas Sugeng berikut: (maaf, ini memang hasil ngoprek via in browser inspect element biar orang kata ada proteksinya tapi kan itu hanyalah usaha:

Jadi pembuatnya menjual template premium dan memberi watermark pada bagian atas layout template buatannya, bukan? Water mark viomagz berwarna biru dengan tulisan informasi versi template yang dibuatnya. (VioMagz v.3.1.0. ) saya intip dari salah satu template yang di pakai oleh teman teman blogger melalui browser. Itu memang versi lama dan breadcrumbnya masih data.vocabulary.

Bagaimana cara membuatnya?

Perhatikan kode buatan pencipta template viomagz ini, saya mengkritiknya dengan sengit, karena terlalu panjang:

<b:template-skin>
<![CDATA[
/* CSS FOR LAYOUT */
body#layout, body#layout div.section {
font-family: Arial, sans-serif;
}
body#layout {
max-width: 1040px;
}
body#layout .sidebar-sticky {
z-index:0;
}
body#layout #wrapper {
overflow: unset;
}
body#layout #header-container {
height: auto;
position: unset;
}
body#layout::before {
content: "VioMagz v.3.1.0";
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
padding: 10px 20px;
font-size: 18px;
color: #49ACE1;
background: #fff;
border-radius: 20px;
border: 1px solid #d6d6d6;
}
body#layout .widget-content {
box-shadow: none;
}
body#layout #navbar {
display: block;
margin: 0;
max-width: 100%;
padding: 0 20px;
margin-bottom: 12px;
}
body#layout .header {
width: 200px;
}
body#layout #navbar::before {
content: "Untuk mempercepat loading blog, klik edit dan nonaktifkan Navbar ==>>";
position: absolute;
bottom: 18px;
z-index: 999;
right: 80px;
color: #999;
font-size: 12px;
}
body#layout #wrapper, body#layout #header-wrapper, body#layout #footer-container, body#layout #footer-widget-container {
margin: 0 0;
padding: 0 20px;
}
body#layout #footer-container {
padding-bottom: 20px;
}
body#layout #cssmenu {
position: relative;
height: 33px;
display: block;
padding: 20px;
margin: 8px 0;
width: 500px;
font-size: 14px;
color: #fff;
background: #bbbbbb;
font-weight: bold;
float: right;
border: 1px solid #8e8e8e;
}
body#layout #cssmenu ul, body#layout #footer-navmenu ul {
display: none;
}
body#layout #cssmenu::after {
content: "Menu navigasi harus diedit melalui Edit HTML";
color: #fff;
position: absolute;
top: 30px;
left: 20px;
visibility: visible;
}
body#layout .post-container {
padding: 0 15px 0 0;
}
body#layout .sidebar-container {
padding: 0 0 0 0;
}
body#layout #searchfs, body#layout .latest-post-title, body#layout .section h4 {
display: none;
}
body#layout div.section { 
background: transparent;
margin: 0px 0px 15px 0px;
padding: 0px;
border: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body#layout .sidebar-sticky::before {
content: "Widget Sidebar (Sticky)";
}
body#layout .sidebar::before {
content: "Widget Sidebar";
}
body#layout .above-post-widget::before {
content: "Widget di Atas Post (Hanya Homepage)";
}
body#layout .Blog::before {
content: "Posting Blog";
margin-bottom: 8px;
}
body#layout .bellow-header-widget::before {
content: "Widget di Bawah Header/Menu Navigasi";
}
body#layout #footer-widget-container::before {
content: "Widget di Atas Footer";
}
body#layout .sidebar-sticky::before, body#layout .sidebar::before, body#layout .above-post-widget::before, body#layout .Blog::before, body#layout .bellow-header-widget::before, body#layout #footer-widget-container::before {
padding: 5px 10px;
display: block;
font-size: 14px;
color: #fff;
background: #bbbbbb;
border: 1px solid #8e8e8e;
font-weight: bold;
}
body#layout .add_widget, body#layout .widget-content {
padding: 12px;
}
body#layout .add_widget a {
margin-left: 0px;
font-size: 14px;
}
body#layout div.layout-title {
font-size: 14px;
}
body#layout div.layout-widget-description {
font-size: 12px;
}
body#layout .editlink {
color: #FFFFFF !important;
background: #bbbbbb;
border-radius: 15px;
padding: 4px 6px;
}


body#layout #footer-wrapper {
position: relative;
background: #fff;
height: 40px;
border: 1px solid #ddd;
}
body#layout #footer-wrapper::after {
content:"Footer";
color:#999;
position:absolute;
top:12px;
}
body#layout #footer-navmenu {
position: relative;
display: block;
padding:0;
font-size: 14px;
color: #fff;
background: #bbbbbb;
border: 1px solid #8e8e8e;
font-weight: bold;
margin: 0 20px 8px;
height: 50px;
}
body#layout #footer-navmenu::after {
content: "Menu navigasi harus diedit melalui Edit HTML";
color: #fff;
position: absolute;
top: 17px;
left: 20px;
visibility: visible;
}
]]></b:template-skin>

Ya dari <b:template-skin> ke ]]></b:template-skin> adalah kode layout sedangkan kode watermarknya hanya yang saya merahkan saja. 

Karena tidak ingin menirunya saya membuat yang sederhana dengan hasil tampilan gambar pertama postingan ini:

<b:template-skin> <![CDATA[
body#layout header{
padding:18px;
}
body#layout header .inner{
padding:0px;
}
body#layout #header{
width:100%;
}
body#layout .AnissaBG{
display:none;
}
body#layout main{
padding:0px 18px;
margin-top:0px;
}
body#layout #main{
width:70%;
margin-right:18px;
}
body#layout #HTML1 .widget-content{
margin-bottom:0px;
background-color:#555;
}
body#layout .outer-wrapper {width:970px}
body#layout .content-wrapper {width:970px}
body#layout #header {width:300px;float:left;margin-top:30px}
body#layout #header2 {width:500px;float:right}
body#layout .main-wrapper {width:auto;}
body#layout .sidebar-wrapper,.sidebar1-wrapper {width:300px;float:right}
body#layout #footer {width:auto;}
.footer {width:215px;float:left}
body#layout ul {display: none}
]]>
 /*------adel markup (start)----------*/ 
#layout:before { content: &#39;created with &#10084;&#65039; by Adelina Sofyan&#39;;
text-transform: uppercase;
font-size: 14px;
color: #fff;
margin: 0 0 20px 0;
display: inline-block;
font-weight: 400;
padding: 20px;
font-family: sans-serif;
{ margin : 0 0px; padding: 10px 20px 10px 20px; background :#fff;font: bold .9em &#8220;comic sans ms&#8221;, courier, Helvetica,verdana, Georgia; color : #555; border: 6px dashed #f0f0f0; }
/*------adel markup (end)----------*/
</b:template-skin>

Di letakan di bawah kode ]]></b:skin> cari kode yang di awali dengan kode <b:template-skin> hapus sampai dengan </b:template-skin> ganti kode lama dengan kode baru tapi jangan lupa terlebih dahulu menghapus nama yang telah saya tulis dengan warna merah ya...

Baca juga: 

CARA MEMPERBAIKI LAYOUT DESAIN TEMPLATE BLOGGER DENGAN MUDAH

Adapun khasiat dari obat layout diatas adalah: jika layout template blog Anda tampak amburadul oleh lobang lobang atau noda noda hitam di atas silahkan ganti saja layout-nya. Siapa tahu cocok. Namun walaupun pada kebanyakan template itu bekerja ada beberapa jenis template yang mungkin tidak cocok dan kode layout di atas maka terkadang memang harus diperbaiki terlebih dahulu sebelum dipasangkan.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share: