Selasa, 08 November 2016

Blok Catatan Responsive Pada Post

Blok Catatan Responsive Pada Post - Hallo Sobat blogger bertemu lagi dengan Ambarawa Cyber Army untuk kali ini kita akan membahas dengan widget blogger. Berikut cara membuat Blok Catatan Responsive Pada Post blogspot. Kita simak yuk sobat.
Blok Catatan Responsive Pada Post
Blok Catatan Responsive Pada Post

Blok Catatan Responsive Pada Post

1. Pertama sobat masuk ke Blogger > Template > masukan code di bawah ini dan letakan di atas ]]></b:skin>

/* Germyload Blok Catatan */
.germyload-additem,.germyload-cari,.germyload-catatan,.germyload-contact,.germyload-gear,.germyload-home,.germyload-info,.germyload-komentar,.germyload-mark,.germyload-tips,.germyload-trash,.germyload-warning,.germyload-winner{line-height:22px;min-height:38px;padding:10px 12px 12px 68px;margin:5px 0}
.germyload-additem{background:#ABB7B7 url(https://3.bp.blogspot.com/-hNSaoXrdnbI/WCC-Bq4XLlI/AAAAAAAAAZM/a9QYLr48410WMQnzz69B29cdDS2v3XL_ACPcB/s1600/germyload-additem.png) no-repeat 12px 8px;color:#222}
.germyload-cari{background:#19B5FE url(https://4.bp.blogspot.com/-mQxib5ei3jE/WCC-BsIUYlI/AAAAAAAAAZI/rkGBMWnKgPslyvHFvFL5DXUF12Pc6EX2ACPcB/s1600/germyload-cari.png) no-repeat 12px 8px;color:#222}
.germyload-catatan{background:#F4D03F url(https://4.bp.blogspot.com/-kdYaHNKP-h8/WCC-Bjiud3I/AAAAAAAAAZE/NVVom4M5G5oOnoNqGzL0O3xUFkHYSAOoQCPcB/s1600/germyload-catatan.png) no-repeat 12px 8px;color:#222}
.germyload-contact{background:#52B3D9 url(https://3.bp.blogspot.com/-Z8GGD_D152A/WCC-CKPfZLI/AAAAAAAAAZU/itgCLsK1yIMlg59boAhlH7Wag6ATiePjACPcB/s1600/germyload-contact.png) no-repeat 12px 8px;color:#222}
.germyload-gear{background:#2ECC71 url(https://2.bp.blogspot.com/-RAMMSyhuRZQ/WCC-CFU2dII/AAAAAAAAAZQ/OtWDkzazx1o2tp1-Jjs79G8rWweLJHSmgCPcB/s1600/germyload-gear.png) no-repeat 12px 8px;color:#222}
.germyload-home{background:#2ECC71 url(https://4.bp.blogspot.com/-RLmwcVrUdgU/WCC-CWJZ1lI/AAAAAAAAAZY/mli8NP9StHcto8Dif6r2Dg-KJuSldobeACPcB/s1600/germyload-home.png) no-repeat 12px 8px;color:#222}
.germyload-info{background:#DADFE1 url(https://2.bp.blogspot.com/-s7ogPMNgq_I/WCC-C7VwjbI/AAAAAAAAAZc/m7tAFCtU9DoOJmFrsStR4rtiHyzbFUDfwCPcB/s1600/germyload-info.png) no-repeat 12px 8px;color:#222}
.germyload-komentar{background:#1BA39C url(https://4.bp.blogspot.com/-L2xpOZbslU8/WCC-C4pkkjI/AAAAAAAAAZg/9ltF7iM-JowcLlksG9U-xUNaNvTb0j7VwCPcB/s1600/germyload-komentar.png) no-repeat 12px 8px;color:#222}
.germyload-mark{background:#65C6BB url(https://2.bp.blogspot.com/-jiLfmjFUfL8/WCC-C2ybMrI/AAAAAAAAAZk/TzCZaAhkceQo4xayLqEjQOK1LwJL8497QCPcB/s1600/germyload-mark.png) no-repeat 12px 8px;color:#222}
.germyload-tips{background:#7CADDE url(https://2.bp.blogspot.com/-Xiy9PaDfnqg/WCC-DaGsbQI/AAAAAAAAAZo/IVbgq-fpvBc7Vg0gmzqmbepet5KUYHonACPcB/s1600/germyload-tips.png) no-repeat 12px 8px;color:#fff}
.germyload-trash{background:#5C97BF url(https://2.bp.blogspot.com/-Fctx5pIYxek/WCC-DjSsQYI/AAAAAAAAAZs/IJbQORmBgZAy4CM_h9l20pk0Vn3VlR3pQCPcB/s1600/germyload-trash.png) no-repeat 12px 8px;color:#222}
.germyload-warning{background:#F7CA18 url(https://3.bp.blogspot.com/-EOBS_mjWQOo/WCC-DvZ6psI/AAAAAAAAAZw/eXVso7EDrfQn2DNjsFrksJwtHcBv6J2XACPcB/s1600/germyload-warning.png) no-repeat 12px 8px;color:#fff}
.germyload-winner{background:#52B3D9 url(https://1.bp.blogspot.com/-iDPMCCsPTjs/WCC-D5oR-yI/AAAAAAAAAZ0/_tFR8Y7vJJ4k4hbwWRFUa180KeZbBYZkgCPcB/s1600/germyload-winner.png) no-repeat 12px 8px;color:#222}
2. Lalu save template sobat.

Cara Memanggil Blok

Keranjang
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-additem'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Cari
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-cari'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Catatan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-catatan'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Contact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-contact'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Gear
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-gear'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Home
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-home'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-info'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Komentar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-komentar'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Bintang
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-mark'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Tips
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-tips'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Trash
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-trash'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-warning'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>
Piala
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Code
<div class='germyload-winner'> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue. </div>

Sekian pembahasan tentang Blok Catatan Responsive Pada Post untuk kali ini, Sekian dan terima kasih. Semoga bermanfaat untuk sobat sekalian.

0 komentar: