Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat post icon pack di blogger
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Post icon pack
Post icon pack merupakan sebutan untuk menampilkan ICon SVG beserta kode SVG secara bersamaan, biasanya icon park di gunakan untuk memposting artikel mengenai kumpulan svg beserta kode svg, sesuai namanya penggunaan post icon pack sangat di rekomendasikan untuk di gunakan di dalam postingan artikel, namun jika di mungkinkan kami juga bisa menampilkan icon park di body template lainnya
Contoh Tampilan
Silahkan sobat periksa bagaimana sih tampilan dari post ICon park tersebut, silahkan klik gombol di bawah ini untuk mulai memeriksanya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak
Cara oembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai cara membuat post icon pack khusus pengguna blogger, silahkan baca dan ikuti setiap arahan yang admin jelaskan di bawah ini
- Login ke blogger menggunakan akun google milikmu
- Kemudian pergi ke menu Tema atau Theme dalam bahasa inggrisnya
- Selanjutnya silahkan salin kode CSS di bawah ini kemudian taruh di atas kode ]]><b:skin>
- Kemudian simpan template, dan lanjut kan ke tahapan berikutnya
- Selanjutnya untuk menampilkan post icon pack nya silahkan salin dan gunakan kode HTML di bawah ini
.rahIc{display:flex; position:relative;width:calc(100% + 12px);left:-5px;right:-5px}.rahIc:not(:last-child){margin-bottom:15px}
.rahIc >*{border:1px solid;background:#f6f6f6;border-radius:10px;color:inherit;direction:ltr; margin:0 5px}
.rahIc .rahIcl{display:flex;align-items:center;justify-content:center;flex:0 0 55px}
.rahIc .rahIcl svg{width:26px;height:26px}
.rahIc .rahIcC{position:relative;overflow:hidden;font-family:'Fira Mono',monospace;flex-grow:1}
.rahIc .rahIcC::before{content:attr(data-text); display:flex;justify-content:flex-end;position:absolute;top:0;left:0;right:0;background:/*inherit*/#253545;color:/*inherit*/#f2f2f2;font-size:10px;padding:0 10px;z-index:2;line-height:25px}
.rahIc .rahIcC pre{margin:0;padding:25px 16px 16px; color:/*inherit*/ #f2f2f2; background:/*inherit*/#253545}.drK .rahIc >*{background:#253545}Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
<!--[ Activity ]-->
<div class="rahIc">
<div class="rahIcl">
<svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<rect height="20" rx="5" width="20" x="2" y="2">
</rect>
<path d="M175.376,181.85188c1.11615-2.25844,2.38586-3.16,3.49436-3.49435,1.91917-.57878,3.21384.58547,5.12781,0a6.13147,6.13147,0,0,0,3.42179-3.4218" transform="translate(-169.39801 -166.39381)">
</path>
</g>
</svg>
</div>
<div class="rahIcC" data-text="Activity">
<pre><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><rect x='2' y='2' width='20' height='20' rx='5'></rect><path d='M175.376,181.85188c1.11615-2.25844,2.38586-3.16,3.49436-3.49435,1.91917-.57878,3.21384.58547,5.12781,0a6.13147,6.13147,0,0,0,3.42179-3.4218' transform='translate(-169.39801 -166.39381)'></path></g></svg></pre>
</div>
</div>
<!--[ Attachment ]-->
<div class="rahIc">
<div class="rahIcl">
<svg class="line" viewbox="0 0 24 24">
<path d="M179.38391,179.442a5.02556,5.02556,0,0,0,7.5831.5436l3.01715-3.02a5.031,5.031,0,0,0-7.11042-7.1173l-1.72983,1.72145" transform="translate(-169.39568 -166.4353)">
</path>
<path d="M183.40745,177.42863a5.02556,5.02556,0,0,0-7.5831-.5436l-3.01715,3.02a5.031,5.031,0,0,0,7.11042,7.1173l1.71976-1.72145" transform="translate(-169.39568 -166.4353)">
</path>
</svg>
</div>
<div class="rahIcC" data-text="Attachment">
<pre><svg class='line' viewBox='0 0 24 24'><path d='M179.38391,179.442a5.02556,5.02556,0,0,0,7.5831.5436l3.01715-3.02a5.031,5.031,0,0,0-7.11042-7.1173l-1.72983,1.72145' transform='translate(-169.39568 -166.4353)'></path><path d='M183.40745,177.42863a5.02556,5.02556,0,0,0-7.5831-.5436l-3.01715,3.02a5.031,5.031,0,0,0,7.11042,7.1173l1.71976-1.72145' transform='translate(-169.39568 -166.4353)'></path></svg></pre>
</div>
</div>
<!--[ Calendar ]-->
<div class="rahIc">
<div class="rahIcl">
<svg class="line" viewbox="0 0 24 24">
<rect height="18" rx="5" width="20" x="2" y="4">
</rect>
<line x1="16.59341" x2="16.59341" y1="5.84619" y2="2">
</line>
<line x1="7.40659" x2="7.40659" y1="5.84619" y2="2">
</line>
<line x1="2" x2="22" y1="9" y2="9">
</line>
</svg>
</div>
<div class="rahIcC" data-text="Calendar">
<pre><svg class='line' viewBox='0 0 24 24'><rect x='2' y='4' width='20' height='18' rx='5'></rect><line x1='16.59341' y1='5.84619' x2='16.59341' y2='2'></line><line x1='7.40659' y1='5.84619' x2='7.40659' y2='2'></line><line x1='2' y1='9' x2='22' y2='9'></line></svg></pre>
</div>
</div>
<!--[ Bag ]-->
<div class="rahIc">
<div class="rahIcl">
<svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M185.404,189.43193h-8.01673a5.98982,5.98982,0,0,1-5.88763-7.09154l.86727-4.63469a5.98982,5.98982,0,0,1,5.88763-4.8881h6.28219a5.98983,5.98983,0,0,1,5.88763,4.8881l.86727,4.63469A5.98982,5.98982,0,0,1,185.404,189.43193Z" transform="translate(-169.39562 -167.43193)">
</path>
<line x1="14.71978" x2="9.28022" y1="16.69283" y2="16.69283">
</line>
<line x1="15.97802" x2="14.71978" y1="7.64835" y2="2">
</line>
<line x1="8.02198" x2="9.28022" y1="7.64835" y2="2">
</line>
</g>
</svg>
</div>
<div class="rahIcC" data-text="Bag">
<pre><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M185.404,189.43193h-8.01673a5.98982,5.98982,0,0,1-5.88763-7.09154l.86727-4.63469a5.98982,5.98982,0,0,1,5.88763-4.8881h6.28219a5.98983,5.98983,0,0,1,5.88763,4.8881l.86727,4.63469A5.98982,5.98982,0,0,1,185.404,189.43193Z' transform='translate(-169.39562 -167.43193)'></path><line x1='14.71978' y1='16.69283' x2='9.28022' y2='16.69283'></line><line x1='15.97802' y1='7.64835' x2='14.71978' y2='2'></line><line x1='8.02198' y1='7.64835' x2='9.28022' y2='2'></line></g></svg></pre>
</div>
</div>
<!--[ Category ]-->
<div class="rahIc">
<div class="rahIcl">
<svg class="line" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="17.47857" cy="17.49096" r="4.5">
</circle>
<circle cx="6.50904" cy="6.52143" r="4.5">
</circle>
<circle cx="5.00904" cy="18.99096" r="3">
</circle>
<circle cx="18.99096" cy="5.00904" r="3">
</circle>
</g>
</svg>
</div>
<div class="rahIcC" data-text="Category">
<pre><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><circle cx='17.47857' cy='17.49096' r='4.5'></circle><circle cx='6.50904' cy='6.52143' r='4.5'></circle><circle cx='5.00904' cy='18.99096' r='3'></circle><circle cx='18.99096' cy='5.00904' r='3'></circle></g></svg></pre>
</div>
</div> Info: Silahkan gunakan saat ingin memposting artikel menggunakan mode HTML bukan mode Compose (menulis)
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><rect x='2' y='2' width='20' height='20' rx='5'></rect><path d='M175.376,181.85188c1.11615-2.25844,2.38586-3.16,3.49436-3.49435,1.91917-.57878,3.21384.58547,5.12781,0a6.13147,6.13147,0,0,0,3.42179-3.4218' transform='translate(-169.39801 -166.39381)'></path></g></svg>
<svg class='line' viewBox='0 0 24 24'><path d='M179.38391,179.442a5.02556,5.02556,0,0,0,7.5831.5436l3.01715-3.02a5.031,5.031,0,0,0-7.11042-7.1173l-1.72983,1.72145' transform='translate(-169.39568 -166.4353)'></path><path d='M183.40745,177.42863a5.02556,5.02556,0,0,0-7.5831-.5436l-3.01715,3.02a5.031,5.031,0,0,0,7.11042,7.1173l1.71976-1.72145' transform='translate(-169.39568 -166.4353)'></path></svg>
<svg class='line' viewBox='0 0 24 24'><rect x='2' y='4' width='20' height='18' rx='5'></rect><line x1='16.59341' y1='5.84619' x2='16.59341' y2='2'></line><line x1='7.40659' y1='5.84619' x2='7.40659' y2='2'></line><line x1='2' y1='9' x2='22' y2='9'></line></svg>
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><path d='M185.404,189.43193h-8.01673a5.98982,5.98982,0,0,1-5.88763-7.09154l.86727-4.63469a5.98982,5.98982,0,0,1,5.88763-4.8881h6.28219a5.98983,5.98983,0,0,1,5.88763,4.8881l.86727,4.63469A5.98982,5.98982,0,0,1,185.404,189.43193Z' transform='translate(-169.39562 -167.43193)'></path><line x1='14.71978' y1='16.69283' x2='9.28022' y2='16.69283'></line><line x1='15.97802' y1='7.64835' x2='14.71978' y2='2'></line><line x1='8.02198' y1='7.64835' x2='9.28022' y2='2'></line></g></svg>
<svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g><circle cx='17.47857' cy='17.49096' r='4.5'></circle><circle cx='6.50904' cy='6.52143' r='4.5'></circle><circle cx='5.00904' cy='18.99096' r='3'></circle><circle cx='18.99096' cy='5.00904' r='3'></circle></g></svg>