Free Premium Plogger Template Seo Friendly 2020

     

Daftar Icon yang Cocok untuk Template Median UI

     
Daftar Icon yang Cocok untuk Template Median UI

Berikut adalah beberapa icon yang kami rekomendasikan untuk anda gunakan pada template ini, beberapa icon dibawah ini sangat serasi dan cocok dari segi style serta ketebalan garis dengan icon yang digunakan pada template ini.

Sebagian besar icon set di bawah ini kami dapatkan dari iconfinder.com dengan lisensi Free for commercial user yang artinya dapat digunakan secara gratis bahkan untuk penggunakan komersil. Tapi kami tetap menyarankan untuk memeriksa ulang lisensi dari icon dibawah ini barangkali author merubah lisensi penggunaanya.

1. Iconly - Essential icons

2. Feather icons by Cole Bemis

3. Basic Actions Set by Dmitriy Bunin

4. Free Ui icons by nixx design

5. Eon - Social Media & Contact Info

6. Social Media & Entertainment by AlternativeStd

7. Heroicons UI by Steve Schoger

Bagaimana cara mengubah SVG ke HTML?

Ada dua metode yang bisa Anda terapkan untuk mendapatkan kode HTML dari icon SVG, cara termudah yang bisa Anda lakukan adalah membuka file SVG yang sudah Anda download tadi dengan Notepad lalu salin semua kode antara tag [ <svg>...</svg> ]

Cara kedua adalah dengan cara manual, ikuti langkah dibawah ini:
  • Download file svg yang Anda inginkan
  • Klik kanan pada file svg yang sudah didownload kemudian pilih Open with > Browser pilihan Anda, kami menyarankan Anda untuk menggunakan Chrome atau Firefox
  • Setelah file SVG dibuka pada browser, Klik kanan > Inspect element atau pada Chrome tekan ctrl + shift + i
  • Maka akan muncul kode HTML dari icon svg yang sudah didownload tadi, salin semua kode html-nya dan tempel di bagian yang Anda inginkan pada template ini

Icon langsung pakai

Kami mengerti bahwa icon SVG mungkin masih terasa asing atau sulit bagi Anda, karena itu kami sudah mengumplkan beberapa icon yang kemungkinan terpakai dari icon set diatas seperti icon codepen, document, folder, image dan sebagainya.
Silahkan salin dan tempelkan kode icon SVG dibawah ini kedalam blog Ada.

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4.000000, 2.000000)"><path d="M11.5258621,0 L4.62931034,0 C1.78448276,0 0,1.9858782 0,5.17210944 L0,18.3230362 C0,19.2491977 0.733326703,20 1.63793103,20 C1.91180194,20 2.18135035,19.9300723 2.42241379,19.7969991 L8.03448276,16.6813769 L14.5689655,19.8146514 C14.7461483,19.8908228 14.9456376,19.8917645 15.1234989,19.8172691 C15.3013603,19.7427737 15.4430062,19.598951 15.5172414,19.4174757 C15.6267768,19.0830842 15.4940188,18.7157283 15.1982759,18.5348632 L8.70689655,15.4280671 C8.28279792,15.1893907 7.76892621,15.1893907 7.34482759,15.4280671 L1.72413793,18.5348632 C1.65968122,18.5709713 1.58169809,18.5709713 1.51724138,18.5348632 C1.45595472,18.494491 1.41993354,18.4240845 1.42241379,18.3495146 L1.42241379,5.17210944 C1.43103448,2.81553398 2.5862069,1.47396293 4.65517241,1.47396293 L11.5517241,1.47396293 C14.2068966,1.47396293 14.5948276,3.68049426 14.5948276,5.00441306 L14.5948276,5.60458959 L7.12931034,5.60458959 C6.93950091,5.61148655 6.76015756,5.69536443 6.63079621,5.83774183 C6.50143487,5.98011924 6.43267077,6.16931284 6.43965517,6.36363636 C6.44874481,6.74967865 6.75225353,7.06042014 7.12931034,7.06972639 L14.5689655,7.06972639 L14.5689655,14.7925861 C14.5689655,15.1971724 14.8893135,15.5251545 15.2844828,15.5251545 C15.6763098,15.5251836 15.9952792,15.2025475 16,14.8014122 L16,14.8014122 L16,5.00441306 C16,1.9152692 14.2931034,0 11.5258621,0 Z"></path></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(3.500000, 2.000000)"><path d="M10.1405897,17.5694629 C10.4180311,17.32187 10.8438152,17.306518 11.140035,17.5494941 C11.4658769,17.8167678 11.5115565,18.2954075 11.2420632,18.6185658 C10.5777028,19.4801758 9.54987935,19.989855 8.45625097,20 L8.45625097,20 L8.23912504,19.9908542 C7.23082501,19.9176829 6.2975965,19.4204774 5.67931074,18.6185658 L5.67931074,18.6185658 L5.61360047,18.5268524 C5.42043825,18.2101289 5.48511904,17.7924702 5.78133891,17.5494941 C6.10718078,17.2822203 6.58979525,17.3275237 6.85928854,17.6506819 C6.97764172,17.807587 7.11806508,17.9468539 7.27627317,18.0642323 C7.69914856,18.37647 8.23018908,18.5084076 8.75154604,18.4307656 C9.272903,18.3531235 9.74145234,18.0723239 10.0532134,17.6506819 L10.0532134,17.6506819 L10.0620854,17.6506819 Z M8.46512298,-4.79616347e-14 C11.5348397,-4.79616347e-14 14.9771809,2.16454026 15.3675495,5.64012319 L15.3675495,5.64012319 L15.3675495,7.45270568 C15.5008238,8.10690808 15.8070074,8.7142317 16.2547509,9.2124945 C16.2812788,9.24258861 16.3050326,9.27498109 16.325727,9.30928289 C16.7316898,9.92038415 16.9645715,10.62847 17,11.3594369 L17,11.3594369 L16.973384,11.5442147 C17.0039701,12.5445164 16.6701014,13.5222546 16.0329505,14.2982842 C15.2192877,15.1762511 14.1069384,15.724711 12.9100018,15.8380994 C9.96166621,16.1617418 6.98632378,16.1617418 4.03798823,15.8380994 C2.85854477,15.7169871 1.76556768,15.1687337 0.968271552,14.2982842 C0.32061592,13.5333882 -0.0232529078,12.5603384 0.00122207695,11.5618126 L0.00122207695,11.5618126 L0.00122207695,11.4386274 C0.0499997173,10.6857871 0.301205421,9.95964452 0.728727186,9.33567972 L0.728727186,9.33567972 L0.799703295,9.24769028 C1.24431614,8.74732875 1.550059,8.1408792 1.68690465,7.48790145 L1.68690465,7.48790145 L1.68690465,5.67531896 L1.73596444,5.57406421 C1.88512364,5.31699255 2.17563111,5.16663879 2.47988876,5.19955716 C2.82217862,5.23659034 3.09704701,5.4964 3.15078688,5.83369996 L3.15078688,5.83369996 L3.15078688,7.64628245 C3.15423731,7.6784545 3.15423731,7.71089878 3.15078688,7.74307083 C2.96605585,8.65082423 2.5438164,9.49441706 1.92644901,10.1891773 C1.68869608,10.5647756 1.55412081,10.9955098 1.53608042,11.4386274 L1.53608042,11.4386274 L1.53608042,11.6322041 C1.5163842,12.2554331 1.72432594,12.8647465 2.12163331,13.3479982 C2.67246619,13.9122665 3.40906548,14.2619232 4.19768448,14.33348 C7.05196634,14.641453 9.93151171,14.641453 12.7857936,14.33348 C13.5959515,14.2597331 14.3505573,13.893366 14.9062048,13.3040035 C15.2840021,12.832157 15.4819205,12.2432918 15.4651417,11.6410031 L15.4651417,11.6410031 L15.4651417,11.4386274 C15.4469401,10.9940255 15.3157095,10.5612015 15.0836451,10.1803784 C14.4405839,9.49350507 13.9935016,8.64922252 13.7883311,7.73427189 C13.7848807,7.70209983 13.7848807,7.66965556 13.7883311,7.6374835 L13.7883311,7.6374835 L13.7883311,5.81610207 C13.5310427,3.15882094 10.8605666,1.51341839 8.53609909,1.51341839 C7.54785763,1.51116468 6.57587086,1.76276992 5.71479879,2.24373075 L5.71479879,2.24373075 L5.60933557,2.2960794 C5.3925253,2.38362843 5.14447476,2.36825807 4.93831291,2.24943144 C4.69779074,2.11080037 4.55240903,1.8533283 4.55890889,1.57750418 C4.56540876,1.30168007 4.72275991,1.05122495 4.96954965,0.923889133 C6.03654057,0.326071387 7.23966405,0.00808271832 8.46512298,-4.79616347e-14 Z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g transform="translate(2.500000, 2.000000)"><path d="M0.873095197,5.16335138 C1.07736478,5.12378632 1.28935874,5.16536248 1.46214576,5.27887571 C1.80346964,5.50552363 1.90243476,5.95394091 1.68701228,6.29776021 L1.68701228,6.29776021 L1.63049727,6.40886656 C1.41692137,6.89799239 1.60769048,7.47656916 2.09177201,7.74703557 C2.4834486,7.98141148 2.80584873,8.31137851 3.02721671,8.70443566 C3.71653222,9.94093426 3.28873846,11.4881571 2.05579336,12.2178305 C1.5344748,12.509102 1.35332921,13.1577086 1.65103364,13.6671058 L1.65103364,13.6671058 L2.27166522,14.7123408 C2.41288109,14.9614196 2.65203322,15.1434682 2.93385106,15.2164131 C3.2156689,15.2893581 3.51576316,15.2468866 3.76477889,15.0988142 C4.16629362,14.8713997 4.62284123,14.7531186 5.086994,14.7562582 C6.57727817,14.7562582 7.7853922,15.9360086 7.7853922,17.3913043 C7.79033116,17.9796916 8.28018723,18.454126 8.88274079,18.4541063 L8.88274079,18.4541063 L8.87374613,18.4716733 C9.15331914,18.4716732 9.41165527,18.617322 9.55144177,18.8537549 C9.69122828,19.0901879 9.69122828,19.3814853 9.55144177,19.6179183 C9.41165527,19.8543513 9.15331914,20 8.87374613,20 C7.38346196,20 6.17534794,18.8202497 6.17534794,17.3649539 C6.17777146,17.1797208 6.12798477,16.9974041 6.03143337,16.8379447 C5.72964011,16.3277527 5.06266326,16.1511907 4.5383197,16.4426877 L4.5383197,16.4426877 L4.37846769,16.5211696 C3.14151143,17.0796422 1.65653771,16.647903 0.940455444,15.4940711 L0.940455444,15.4940711 L0.328818521,14.4488362 C-0.360496985,13.2123376 0.0672967775,11.6651148 1.30024187,10.9354414 C1.46365758,10.8415595 1.59986794,10.708547 1.69600694,10.5489679 C1.8763988,10.3034349 1.94122763,9.99452277 1.87427955,9.69949129 C1.80733148,9.40445982 1.61493722,9.15120776 1.34521517,9.00307422 L1.34521517,9.00307422 L1.1953131,8.90768859 C0.0785600264,8.14500505 -0.286802202,6.67465723 0.373791824,5.4896794 L0.373791824,5.4896794 L0.450399681,5.39452047 C0.561991749,5.27649703 0.709679528,5.19500342 0.873095197,5.16335138 Z M17.001622,7.70191857 C17.3561623,7.5776619 17.7596901,7.71242785 17.9583534,8.03689065 C18.1782389,8.39845653 18.057649,8.86556614 17.6885136,9.0821256 C17.5250979,9.17600748 17.3888875,9.30901995 17.2927485,9.46859903 C17.1461723,9.71295723 17.1055255,10.0043354 17.1798277,10.2780759 C17.2541299,10.5518165 17.4372357,10.7852791 17.6885136,10.9266579 C18.9613109,11.6716815 19.3792149,13.2805084 18.6239583,14.5278876 L18.6239583,14.5278876 L18.0123214,15.5731225 L17.9146425,15.7195053 C17.1336224,16.8100396 15.6279243,17.166824 14.4144571,16.5217391 C14.0779771,16.3233633 13.6576674,16.3192826 13.3172148,16.5110862 C12.9767623,16.7028897 12.7699918,17.0602538 12.7774289,17.4440053 C12.7343665,17.8367986 12.3949315,18.1346728 11.990396,18.1346728 C11.5858606,18.1346728 11.2464256,17.8367986 11.2033632,17.4440053 C11.2226877,16.5230894 11.7330478,15.6788723 12.5494071,15.217434 C13.3657664,14.7559956 14.3696134,14.7443234 15.1969926,15.1866491 C15.4455875,15.3326398 15.7442164,15.3738466 16.0245013,15.3008344 C16.3042857,15.2242105 16.542826,15.0447838 16.6901062,14.8001757 L16.6901062,14.8001757 L17.3017432,13.7549407 C17.4479092,13.5119249 17.4883234,13.2218682 17.4139597,12.9495514 C17.339596,12.6772345 17.1566491,12.4453424 16.9059781,12.3056653 C16.4844845,12.0548529 16.1445142,11.6924066 15.9255601,11.2604304 C15.2362446,10.0239318 15.6640383,8.47670896 16.8969834,7.74703557 L16.8969834,7.74703557 Z M9.49437772,6.70178889 C10.3905098,6.69946703 11.2507575,7.04546173 11.885264,7.6634236 C12.5197705,8.28138546 12.8763822,9.12051219 12.8763822,9.99560826 L12.8763822,9.99560826 L12.8707845,10.1950507 C12.7967374,11.4511365 11.9951527,12.5648103 10.7948548,13.0530599 C9.53138337,13.5670069 8.07525531,13.2866234 7.10614636,12.3427838 C6.13703741,11.3989442 5.84603609,9.97775434 6.36897286,8.74258193 C6.89190962,7.50740952 8.125672,6.70178889 9.49437772,6.70178889 Z M9.49437772,8.24769433 C8.50085494,8.24769433 7.69544559,9.03419455 7.69544559,10.0043917 C7.69544559,10.9745889 8.50085494,11.7610892 9.49437772,11.7610892 C10.4879005,11.7610892 11.2933098,10.9745889 11.2933098,10.0043917 L11.2933098,10.0043917 L11.2873464,9.86031524 C11.2122986,8.95751078 10.4382244,8.24769433 9.49437772,8.24769433 Z M10.1150093,-1.44328993e-13 C11.6052935,-1.44328993e-13 12.8134075,1.17975033 12.8134075,2.63504611 C12.810984,2.82027917 12.8607707,3.00259594 12.9573221,3.16205534 C13.1005848,3.4089241 13.3389912,3.58959879 13.6194445,3.66384036 C13.8998978,3.73808193 14.1991078,3.699725 14.4504357,3.55731225 C15.7166624,2.88418026 17.3010837,3.30193043 18.0483,4.50592885 C18.2548102,4.87335233 18.1278399,5.33443771 17.7604709,5.55116381 C17.3871594,5.75928058 16.9119889,5.6384028 16.6901062,5.27887571 L16.6901062,5.27887571 L16.6194327,5.1754002 C16.2908071,4.74960935 15.6817056,4.62034539 15.1969926,4.89240228 C14.3710046,5.3340714 13.3689751,5.32328725 12.553156,4.86394851 C11.7373368,4.40460977 11.2257575,3.56317174 11.2033632,2.6438296 C11.2131151,2.35592011 11.1027692,2.07647732 10.8975968,1.8694985 C10.6924243,1.66251968 10.4100019,1.54573627 10.1150093,1.54589372 L10.1150093,1.54589372 L8.88274079,1.54589372 C8.58696967,1.54580638 8.30368621,1.6623152 8.09709986,1.86901212 C7.8905135,2.07570904 7.77811912,2.35508982 7.7853922,2.6438296 C7.77705279,3.5681803 7.26506951,4.4181882 6.44181545,4.87447051 C5.61856138,5.33075283 4.6087325,5.32419777 3.79176287,4.85726834 L3.79176287,4.85726834 L3.75578423,4.82213439 L3.66924268,4.76137496 C3.37175784,4.52112323 3.29446603,4.09717449 3.50393374,3.76811595 C3.73244398,3.409143 4.21568958,3.29903296 4.58329301,3.5221783 C4.74737874,3.61567616 4.93305,3.66704793 5.12297264,3.67149758 C5.41407245,3.68338695 5.69806446,3.58174102 5.91234656,3.38896624 C6.12662867,3.19619145 6.2536083,2.92811463 6.26529455,2.6438296 C6.2597607,1.21544702 7.42066447,0.0428415621 8.88274079,-1.44328993e-13 L8.88274079,-1.44328993e-13 Z"/></g></svg>
<svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3"/><polyline points="8 12 12 16 16 12"/><line x1="12" x2="12" y1="2" y2="16"/></svg>
<svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polyline points="8 17 12 21 16 17"/><line x1="12" x2="12" y1="12" y2="21"/><path d="M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29"/></svg>
<svg class="line" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><polygon points="12 2 22 8.5 22 15.5 12 22 2 15.5 2 8.5 12 2"/><line x1="12" x2="12" y1="22" y2="15.5"/><polyline points="22 8.5 12 15.5 2 8.5"/><polyline points="2 15.5 12 8.5 22 15.5"/><line x1="12" x2="12" y1="2" y2="8.5"/></svg>
<svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12" y1="16" y2="16"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.5,24c-0.046,0-0.092-0.006-0.137-0.019l-7-2c-0.198-0.057-0.341-0.229-0.361-0.434l-1.5-16 C3.489,5.407,3.536,5.268,3.63,5.164C3.725,5.059,3.859,5,4,5h16c0.141,0,0.275,0.059,0.37,0.164 c0.095,0.104,0.141,0.243,0.128,0.383l-1.5,16c-0.019,0.197-0.152,0.365-0.34,0.427l-6,2C12.607,23.991,12.553,24,12.5,24z M5.966,21.113l6.523,1.863l5.544-1.848L19.451,6H4.549L5.966,21.113z"></path><path d="M12.5,20c-0.046,0-0.092-0.006-0.137-0.019l-3.5-1c-0.172-0.049-0.305-0.187-0.348-0.36l-0.5-2 c-0.067-0.268,0.096-0.539,0.364-0.606c0.266-0.067,0.539,0.095,0.606,0.364l0.43,1.72L12.5,18.98l3.04-0.869L16.441,10H7.5 C7.224,10,7,9.776,7,9.5S7.224,9,7.5,9H17c0.142,0,0.278,0.061,0.373,0.167s0.14,0.248,0.125,0.389l-1,9 c-0.022,0.202-0.165,0.37-0.36,0.426l-3.5,1C12.592,19.994,12.546,20,12.5,20z"></path><path d="M16.5,14H8c-0.276,0-0.5-0.224-0.5-0.5S7.724,13,8,13h8.5c0.276,0,0.5,0.224,0.5,0.5S16.776,14,16.5,14z"></path><path d="M9,3H7C6.724,3,6.5,2.776,6.5,2.5v-2C6.5,0.224,6.724,0,7,0h2c0.276,0,0.5,0.224,0.5,0.5S9.276,1,9,1H7.5v1H9 c0.276,0,0.5,0.224,0.5,0.5S9.276,3,9,3z"></path><path d="M13,3h-2c-0.276,0-0.5-0.224-0.5-0.5S10.724,2,11,2h0.793l-1.146-1.146c-0.143-0.143-0.186-0.358-0.108-0.545 C10.615,0.122,10.798,0,11,0h2c0.276,0,0.5,0.224,0.5,0.5S13.276,1,13,1h-0.793l1.146,1.146c0.143,0.143,0.186,0.358,0.108,0.545 C13.385,2.878,13.202,3,13,3z"></path><path d="M17,3h-2c-0.276,0-0.5-0.224-0.5-0.5S14.724,2,15,2h0.793l-1.146-1.146c-0.143-0.143-0.186-0.358-0.108-0.545 C14.615,0.122,14.798,0,15,0h2c0.276,0,0.5,0.224,0.5,0.5S17.276,1,17,1h-0.793l1.146,1.146c0.143,0.143,0.186,0.358,0.108,0.545 C17.385,2.878,17.202,3,17,3z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,3C4.724,3,4.5,2.777,4.5,2.5v-2C4.5,0.224,4.724,0,5,0s0.5,0.224,0.5,0.5v2C5.5,2.777,5.276,3,5,3z"></path><path d="M7,2H5C4.724,2,4.5,1.777,4.5,1.5S4.724,1,5,1h2c0.276,0,0.5,0.224,0.5,0.5S7.276,2,7,2z"></path><path d="M7,3C6.724,3,6.5,2.777,6.5,2.5v-2C6.5,0.224,6.724,0,7,0s0.5,0.224,0.5,0.5v2C7.5,2.777,7.276,3,7,3z"></path><path d="M11,1H9C8.724,1,8.5,0.777,8.5,0.5S8.724,0,9,0h2c0.276,0,0.5,0.224,0.5,0.5S11.276,1,11,1z"></path><path d="M10,3C9.724,3,9.5,2.777,9.5,2.5v-2C9.5,0.224,9.724,0,10,0s0.5,0.224,0.5,0.5v2C10.5,2.777,10.276,3,10,3z"></path><path d="M16,3c-0.276,0-0.5-0.224-0.5-0.5V2l-0.6,0.8c-0.188,0.252-0.611,0.252-0.8,0L13.5,2v0.5C13.5,2.777,13.276,3,13,3 s-0.5-0.224-0.5-0.5v-2c0-0.215,0.138-0.406,0.342-0.474C13.046-0.043,13.271,0.028,13.4,0.2l1.1,1.466L15.6,0.2 c0.129-0.172,0.353-0.243,0.558-0.174C16.362,0.094,16.5,0.285,16.5,0.5v2C16.5,2.777,16.276,3,16,3z"></path><path d="M19.5,3H18c-0.276,0-0.5-0.224-0.5-0.5v-2C17.5,0.224,17.724,0,18,0s0.5,0.224,0.5,0.5V2h1C19.776,2,20,2.224,20,2.5 S19.776,3,19.5,3z"></path><path d="M12.5,24c-0.046,0-0.092-0.006-0.137-0.019l-7-2c-0.198-0.057-0.341-0.229-0.361-0.434l-1.5-16 C3.489,5.407,3.536,5.268,3.63,5.164C3.725,5.059,3.859,5,4,5h16c0.141,0,0.275,0.059,0.37,0.164 c0.095,0.104,0.141,0.243,0.128,0.383l-1.5,16c-0.019,0.197-0.152,0.365-0.34,0.427l-6,2C12.607,23.991,12.553,24,12.5,24z M5.966,21.113l6.523,1.863l5.544-1.848L19.451,6H4.549L5.966,21.113z"></path><path d="M12.5,20c-0.046,0-0.092-0.006-0.137-0.019l-3.5-1c-0.172-0.049-0.305-0.187-0.348-0.36l-0.5-2 c-0.067-0.268,0.096-0.539,0.364-0.606c0.266-0.067,0.539,0.095,0.606,0.364l0.43,1.72l3.074,0.878l2.546-0.849L15.447,14H8 c-0.252,0-0.465-0.188-0.496-0.438l-0.5-4C6.986,9.42,7.03,9.277,7.125,9.169C7.22,9.062,7.356,9,7.5,9H17 c0.276,0,0.5,0.224,0.5,0.5S17.276,10,17,10H8.066l0.375,3H16c0.141,0,0.276,0.06,0.371,0.165 c0.095,0.104,0.141,0.245,0.127,0.385l-0.5,5c-0.02,0.196-0.152,0.362-0.339,0.424l-3,1C12.607,19.991,12.553,20,12.5,20z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z"></path></svg>
<svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path><line x1="7" x2="7" y1="7" y2="7"></line></svg>
<svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28,21H27V7a1,1,0,0,0-1-1H6A1,1,0,0,0,5,7V21H4a1,1,0,0,0-1,1,5,5,0,0,0,5,5H24a5,5,0,0,0,5-5A1,1,0,0,0,28,21ZM7,8H25V21H7ZM24,25H8a3,3,0,0,1-2.83-2H26.83A3,3,0,0,1,24,25Z"></path><path d="M19,11.79l-4.29,4.3L13,14.29a1,1,0,0,0-1.42,1.42l2.5,2.5a1,1,0,0,0,1.42,0l5-5A1,1,0,0,0,19,11.79Z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path d="M91,0H37A11,11,0,0,0,26,11V117a11,11,0,0,0,11,11H91a11,11,0,0,0,11-11V11A11,11,0,0,0,91,0ZM32,22.69H96V99.58H32ZM37,6H91a5,5,0,0,1,5,5v5.69H32V11A5,5,0,0,1,37,6ZM91,122H37a5,5,0,0,1-5-5V105.58H96V117A5,5,0,0,1,91,122Z"></path><circle cx="64" cy="113.91" r="6"></circle><path d="M56.13,14.22H71.88a3,3,0,1,0,0-6H56.13a3,3,0,1,0,0,6Z"></path></svg>
Request icon
Silahkan tulis icon yang Anda inginkan pada kolom komentar dan jika Anda watu kami akan menambahkannya dalam list diatas.

Panduan Mengedit Menu Navigasi Pada Template Median UI

     
Panduan Mengedit Menu Navigasi Pada Template Median UI


kebanyakan menu navigasi pada template responsive mengharuskan penggunanya untuk menguba/menambahkan link melalui Edit HTML template, begitu pula template ini Anda harus mengeditnya melalui Edit HTML template.

Alasan satu-satunya hal ini adalah karena template ini menggunakan icon SVG, kami bisa memindahkan kodenya ke menu tata letak blogger namun Anda tetap harus menambahkan linknya secara manual pada menu tata letak.

Pada artikel ini kami akan memberikan arahan pada Anda agar lebih mudah mengedit menu navigasi pada template ini. Ikuti cara dibawah ini untuk menambahkan atau mengubah link di menu navigasi:

  1. Silahkan menuju Edit HTML template Anda
  2. Cari id='HTML00', klik pada kode template kemudian tekan CTRL + F.
  3. Cara mudahnya adalah silahkan klik icon yang ditandai pada gambar dibawah, lalu gulir sampai bawah maka Anda akan menemukan widget dengan id HTML 00
  4. Dalam widget tersebut Anda akan menemukan kode yang kurang lebih seperti dibawah ini:

    <li>
      <a class='link' href='javascript:void(0)' itemprop='url'>
        <!-- Link Icon -->
        <svg class='icon' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(4.000000, 2.000000)'><path d='M5.88450545,12.7673223 C7.32107647,12.6441193 8.76545208,12.6441193 10.2020231,12.7673223 C10.9876051,12.819974 11.7678606,12.9347129 12.5355802,13.1104786 C14.1961639,13.4448359 15.2799133,14.1047518 15.7343888,15.0726283 C16.0974922,15.8767717 16.08789,16.80158 15.7081691,17.5979063 C15.2449536,18.5657829 14.1612043,19.2256987 12.4744008,19.568855 C11.7092951,19.7410988 10.9319902,19.8528915 10.1495836,19.9032123 C9.2843321,20 8.5501793,20 7.86846599,20 L7.59752865,20 C7.21132744,19.9581349 6.91855939,19.6299512 6.91855939,19.2388971 C6.91855939,18.8478429 7.21132744,18.5196592 7.59752865,18.4777941 L7.59752865,18.4777941 L8.19552997,18.4776566 C8.7948969,18.470645 9.39795098,18.4425986 10.0010051,18.3898053 C10.7124372,18.3432116 11.4194216,18.2432131 12.1160643,18.0906435 C13.3134326,17.8266771 14.0650652,17.4483254 14.3010429,16.9467893 C14.484604,16.5631348 14.484604,16.1161987 14.3010429,15.7325442 C14.0650652,15.2222093 13.3134326,14.8262598 12.1422841,14.5886901 C11.4348379,14.4289038 10.7159053,14.3259265 9.99226515,14.2807293 C8.64034215,14.1575279 7.28012802,14.1575279 5.92820502,14.2807293 C5.21388459,14.3273105 4.50399397,14.4273069 3.80440586,14.5798912 C2.6070376,14.8438575 1.86414489,15.2222093 1.61942729,15.7237453 C1.53272302,15.9142245 1.48799947,16.1213408 1.48832858,16.3308679 C1.48783807,16.5432444 1.53254045,16.7532629 1.61942729,16.9467893 C2.03541113,17.5187562 2.66831687,17.8915039 3.36741014,17.9762581 L3.36741014,17.9762581 L3.46883074,18.003768 C3.69882672,18.0836728 3.87936538,18.2709306 3.94969781,18.5098707 C4.03007773,18.7829451 3.95322349,19.0783682 3.75020277,19.2767179 C3.54718205,19.4750675 3.25156561,19.5435453 2.98285392,19.4544696 C1.85607336,19.2695203 0.86780853,18.5933528 0.282220408,17.6067052 C-0.0940734694,16.8075691 -0.0940734694,15.8805633 0.282220408,15.0814272 C0.745435864,14.087154 1.82918523,13.4448359 3.49850886,13.1016797 C4.28445329,12.9305221 5.08200812,12.8187582 5.88450545,12.7673223 Z M5.96471469,0.407206951 C7.95471011,-0.421671419 10.2447427,0.0383955276 11.7663081,1.57274551 C13.2878734,3.1070955 13.7410933,5.41333076 12.9145002,7.41538679 C12.0879072,9.41744281 10.1444105,10.7207439 7.99082479,10.717191 C5.05464341,10.7123299 2.67695692,8.31466134 2.67695692,5.35866706 L2.67695692,5.35866706 L2.68189526,5.12722783 C2.77053718,3.05238043 4.04579053,1.20648252 5.96471469,0.407206951 Z M7.99082479,1.53114502 C6.98099466,1.52881803 6.01172919,1.93104061 5.29685022,2.6490918 C4.58197126,3.367143 4.18021208,4.34202145 4.18021208,5.35866706 C4.17668538,6.91110569 5.10286315,8.31266199 6.52650415,8.90922336 C7.95014515,9.50578474 9.59058472,9.17974169 10.6822224,8.08325997 C11.77386,6.98677826 12.1014841,5.3360245 11.512191,3.90141287 C10.9228979,2.46680125 9.53286415,1.53114502 7.99082479,1.53114502 Z'></path></g></svg>
        <!-- Teks Icon -->
        <span class='name' itemprop='name'>Tentang</span>
      </a>
    </li>
    Kode diatas adalah kode penulisan untuk satu link, anda akan menemukan beberapa kode serupa seperti diatas. Silahkan salin kode diatas dan letakkan tepat dibawahnya untuk menambahkan link baru
  5. Keterangan:
    • [ <svg>...</svg> ] : Merupakan kode untuk menampilkan icon pada menu navigasi, tempel kode svg anda pada bagian ini.
    • [ <span class='name' itemprop='name'>Tentang</span> ] : Adalah kode untuk menampilkan judul pada link blog Anda ubahlah tulisan 'Tentang' dengan judul link yang Anda inginkan.
  6. Simpan template Anda dan lihat hasil perubahannya.

Bagaimana cara menambahkan icon baru pada blog?
Kami menyadari mungkin SVG masih terasa baru dan menyulitkan bagi beberapa orang, untuk itu kami sudah menyiapkan beberapa list icon serta rekomendasi icon set yang cocok digunakan pada template ini.

Silahkan pergi ke halaman ini dan cari icon yang sesuai dengan keinginan Anda.

Fitur dan Kelebihan Median UI

     
Fitur dan Kelebihan Median UI


Pada template ini kami bereksperimen dengan mengaplikasikan dashboard elemen pada blog yang akhirnya melahirkan Median UI, template ini lebih direkomendasikan untuk blog dengan tema berita atau tema campuran namun bukan berarti tidak cocok dengan niche lain.

Kami mendapat inspirasi ini dari tampilan beberapa website terkenal seperti Google Adsense dan GDrive serta dari beberapa UI element yang kami temukan di Dribbble. Didukung dengan ikon yang lebih sederhana dan serasi, membuat template ini terasa seperti antarmuka dari sebuah aplikasi memberikan pengalaman membaca artikel yang lebih nyaman dan tidak membosankan.

Fitur dan Kelebihan

Kelebihan Median UI
Kami menerapkan beberapa kelebihan yang ada pada template Fletro ke tema ini, bedanya adalah kami merombak tampilan tema sehingga menghasilkan sesuatu yang baru

100% SEO Friendly
Template ini sudah lulus audit SEO dengan hasil yang memuaskan seperti pada screenshot dibawah ini:

SEO Median UIScreenshot dibuat pada tanggal : 25 Mei 2020


Meta tag pada template disusun lebih rapi agar mudah untuk di edit, penambahan beberapa schema seperti Breadcrumbs, Comment dan lainnya memudahkan robot search engine untuk mengedintifikasi struktur konten pada blog, hal ini sangat baik terutama bisa membuat konten blog muncul lebih cepat pada hasil pencarian.

Catatan:
Kebanyakan template hanya mengoptimalkan SEO Onpage serta semua hal yang bisa di optimalkan pada blog seperti mempercepat loading Blog, penambahan meta tag, penambahan schema Breadcrumbs dan sebagainya. SEO Offpage itu diluar template dan diluar kendali pembuat template, cakupannya seperti robot.txt, search console, backlink atau hal kecil seperti penambahan artibut src='' pada gambar di postingan, semua itu diluar tanggung jawab pembuat template.

Semua pembuat template tidak pernah menjamin blog Anda akan langsung berada di halaman pertama hasil pencarian setelah menggunakan template mereka, masalah yang muncul pada search console seperti Diindeks meski di blokir oleh robot.txt atau sebagainya diluar kendali pembuat template bahkan template blog terkenal pun juga mengalami hal yang sama.

Lebih mengutamakan konten
Struktur kerangka template disusun dengan lebih mengutamakan konten atau artikel daripada bagian template lainya. Bagaimana cara kami melakukannya? Cara kerja mesin pencari saat mengindeks suatau konten pada blog ialah merendernya dari urutan atas kebawah struktur HTML template, yang kami lakukan adalah menyesuaikan urutan elemen pada template dengan memindahkan bagian konten pada bagian atas template dan memindahkan elemen lainya seperti sidebar dan navigasi ke bagian bawah sehingga bagian pertama yang di render oleh mesin pencarian adalah konten blog.

Untuk membuktikannya cobalah reload halaman ini dan perhatikan secara detail, Anda akan menemukan bagian pertama yang muncul dari laman ini adalah artikel utama disusul oleh sidebar dan menu navigasi yang dimuat terakhir setelah bagian konten selesai.

Lebih mudah dikostumisasi
Didesain agar lebih mudah untuk disesuaikan melalui Desainer Tema Blogger, Anda leluasa mengubah warna, lebar dan font pada template ini. Bahkan warna Dark mode/Mode malam pada template ini bisa Anda ubah kapan saja tanpa perlu repot-repot mengedit HTML template

Kekurangan Median UI
Hanya ada satu kekurangan dari kebanyakan template responsif atau dinamis yaitu tidak bisa mengedit menu navigasi pada Tata Letak Blogger, Anda harus mengedit menu navigasi pada Edit HTML template.

Menambahkan atau mengubah link akan terasa lebih sulit bagi Anda yang tidak mengerti HTML hal ini dikarenakan penulisan kode icon SVG yang kebanyakan lebih panjang sehingga sedikit membingungkan bagi yang awam HTML.

Tapi kami akan memberikan arahan semudah mungkin untuk Anda agar lebih mudah mengedit menu navigasi pada template ini.

Fitur utama

Dark mode/Mode malam
Salah satu ciri khas dari template kami adalah adanya fitur mode malam ini, kami akan terus pertahankan pada template lainnya. Fungsi utama dari fitur ini adalah mengubah tampilan warna latar pada template menjadi lebih gelap agar konten lebih mudah dibaca oleh user pada saat malam hari.

Adaptive template
Alih-alih membuat elemen template yang responsive, kami lebih memilih membuat elemen yang bisa beradaptasi dengan lebar layar ketika blog dibuka. template ini akan otomatis menyesuaikan tampilannya ketika ukuran layar di perkecil.

Perbedaannya dengan responsive adalah terkadang layout elemen pada template responsive terlihat dipaksakan ketika tampil di mobile, pada template ini layout akan otomatis berubah pada tampilan mobile seperti menu navigasi yang berpindah kebawah serta elemen lainnya yang berubah otomatis.

Lebar thumbnail yang menyesuaikan
Berbeda dari Fletro, gambar thumbnail pada template ini dapat menyesuaikan dengan ukuran layar tanpa mengubah ukuran gambar atau membuat gambar tidak proporsional.

Kami mencoba bekesperimen dan berhasil menemukan cara yang membuat gambar bisa fit otomatis tanpa mengubah tinggi atau lebarnya pada CSS. Kami menggunakan aspect ratio pada gambar sehingga ukurannya tidak akan berubah pada saat layar diperkecil, kelebihan lain dari fitur ini adalah anda tidak perlu khawatir mengenai ukuran standar gambar pada template berapapun lebar dan tinggi gambar Anda akan otomatis sesuai pada ukuran gambar thumbnail terutama di homepage.

SVG Icon
Icon yang paling ringan dan stabil diantara jenis icon lainnya, serta lebih mudah mengubah warnanya ketimbang penyedia icon pihak ketiga seperti font awesome dan sebagainya.

Walaupun penggunaannya sedikit lebih sulit dari icon pihak ketika. Namun dari segi loading blog, SVG jauh lebih baik dari font awesome. Salah satu kelebihannya adalah style icon nya yang tidak monoton, Anda bisa menggunakan satu icon dari sebuah icon pack lalu mengambil icon lain dari sumber lain terebih sekarang banyak sekali SVG icon yang dibagikan secara gratis.

Modifikasi komentar bawaan Blogger
Kami memodifikasi komentar bawaan blogger dengan menambahkan schema Comment, serta menambahkan efek lazy pada gambar. Sebelumnya jika Anda ujicoba pagespeed konten dengan komentar yang banyak, Anda akan menemukan kalau gambar pada komentar juga akan ikut terindeks dan memperlambat loading blog.

Karna itu kami menambahkan efek lazy agar gambar komentar tidak ikut terindeks, tak hanya itu ukuran gambah pada komentar juga diubah menjadi lebih besar agar bisa menyesuaikan dengan style komentar pada template ini. Sekarang pengguna tidak akan bisa menambahkan link aktif pada komentar, semua link eksternal pada komentar termasuk link profil blogger akan terhapus otomatis



Untuk melihat fitur dan kelebihan lainnya Anda bisa langsung melihatnya pada blog demo, beri masukan terkait fitur template ini atau saran fitur tambahan yang ingin ditambahkan pada template ini melalui kolom komentar dibawah.

Semua Tipografi Template Median UI

     
Semua Tipografi Template Median UI

Compose mode

Ini adalah layout standar dari postingan Blogger dengan mode compose beserta semua fitur yang terdapat pada mode ini. Mode ini juga sudah responsive jadi beberapa layout seperti gambar, blockquote dan sebagainya akan menyesuaikan tampilan berdasarkan ukuran layar user.

Judul Utama (H1)

Judul (H2)

Subjudul (H3)

Judul Kecil (H4)


Teks ukuran standar bawaan template
Teks dengan ukuran font terkecil
Teks dengan ukuran font normal
Teks dengan ukuran font besar
Teks dengan ukuran font sangat besar

Teks dengan warna yang berbeda
Teks dengan warna latar belakang

Paragraf ini adalah standar dari template tanpa tambahan inden, ukuran font serta garis ketinggian sudah diatur agar teks lebih mudah dibaca.

Paragraf kedua dengan tambahan inden yang terdapat dalam mode compose Blogger 

Paragraf ketiga dengan tambahan 2 inden  yang mungkin akan sedikit berpengaruh pada tampilan mobile

Pargaraf teks kutipan akan tampil seperti ini dengan warna teks yang berbeda dari paragraf biasa

Daftar atau list pada postingan dengan nomor
  1. Daftar pertama
  2. Daftar kedua
  3. Daftar ketiga
  4. Daftar Keempat

Daftar atau list dengan dots
  • Daftar pertama
  • Daftar kedua
  • Daftar ketiga
  • Daftar Keempat
Paragraf dengan tambahan link anchor dan link aktif yang ditambahkan secara manual melalui mode compose.

Gambar

Template Median UI

Gambar median UI

Median UI Blogger Template
Caption gambar

Pada paragraf ini akan ditampilkan format table pada template ini beserta format lainnya seperti blockquote atau penyisipan kode html serta style tambahan yang bisa digunakan pada mode html.

No Nama Kota Jumlah Penduduk Usia 19-25 Usia 25-40 Usia > 40
1 Balikpapan 10.023.211 5.000.223 2.500.332 2.499.232
2 Banjarmasin 10.023.211 5.000.223 2.500.332 2.499.232
3 Banjar Baru 10.023.211 5.000.223 2.500.332 2.499.232
4 Samarinda 10.023.211 5.000.223 2.500.332 2.499.232

Cara penulisan table yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Kota</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Kota</td>
        <td>Balikpapan</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Kelurahan</td>
        <td>Gunung Sari</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Desa</td>
        <td>Klandasan Ilir</td>
      </tr>
    </tbody>
  </table>
</div>

Penulisan format kode atau biasa disebut Syntax Highlighter yang ditulis secara otomatis pada mode Compose

<pre>
<code>
<!-- kode html, css ata javascript disini -->
</code>
</pre>

Format tambahan yang hanya bisa digunakan pada mode HTML

Penulisan Syntax Highlighter secara manual pada mode HTML postingan
// Untuk menggunakan Syntax Highlighter penulisannya adalah seperti ini
<pre>
  <code>
    <!-- kode html, css ata javascript disini -->
  </code>
</pre>

// Fitur syntax tambahan yang bisa Anda gunakan ketika menulis kode
<i>Comment</i>     = Kode dalam tag ini otomatis tidak akan ikut terseoroti
<i class='comment'>Comment</i>     = <!-- kode html, css ata javascript disini -->
<span>CSS Property</span>     = main{display: block;position: relative}
<span class='block'>Block Text</span>  = Digunakan untuk menyoroti bagian yang perlu diganti oleh user

Daftar isi atau table of content

Merupakan fitur yang biasanya terdapat pada wikipedia yang berfungsi untuk memudahkan user untuk mengetahui poin utama atau isi postingan dalam postingan.

  1. Subheading satu
  2. Subheading dua
  3. Subheading tiga
  4. Subheading empat
  5. Subheading lima

Format penulisan:
<div class="daftar-isi">
  <input class="isi-input hidden" id="daftar-isi01" type="checkbox">
  <label class="isi-judul" for="daftar-isi01">Daftar isi</label>
  <div class="isi-content" id="isi-content">
    <ol>
      <li><a href="#toc-1">Subheading satu</a></li>
      <li><a href="#toc-2">Subheading dua</a></li>
      <li><a href="#toc-3">Subheading tiga</a></li>
      <li><a href="#toc-4">Subheading empat</a></li>
      <li><a href="#toc-5">Subheading lima</a></li>
    </ol>
  </div>
</div>

// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h4> pada artikel Anda. Contoh:

<h4>Judul subheading</h4>
Isi paragraf pada subheading artikel

// Tambahkan id pada heading menjadi seperti dibawah :

<h4 id='toc-1'>Judul subheading</h4>
Isi paragraf pada subheading artikel

Anda bisa menyembunyikan daftar isi diawal dan hanya muncul setelah judul daftar isi di klik, caranya ubah penulisan dafar isi menjadi seperti dibawah ini:
<div class="daftar-isi">
  <input class="isi-input hidden" id="daftar-isi01" type="checkbox" checked>
  <label class="isi-judul" for="daftar-isi01">Daftar isi</label>
  <div class="isi-content" id="isi-content">
    <ol>
      <li><a href="#toc-1">Subheading satu</a></li>
      <li><a href="#toc-2">Subheading dua</a></li>
      <li><a href="#toc-3">Subheading tiga</a></li>
      <li><a href="#toc-4">Subheading empat</a></li>
      <li><a href="#toc-5">Subheading lima</a></li>
    </ol>
  </div>
</div>

Tombol

Tombol link berbeda untuk menampilkan link penting seperti link download, preview dan sebagainya. Secara defaul tampilannya akan seperti dibawah ini:

Tombol
Format penulisan:
<a class="button" href="url_anda_disini">Tombol</a>

Penambahan icon download pada tombol
Download
Format penulisan:
<a class="button" href="url_anda_disini"><i class="m-icon download"></i>Download</a>

Tombol dengan style berbeda
Download
Format penulisan:
<a class="button outline" href="url_anda_disini"><i class="m-icon download"></i>Download</a>

Tombol link Whatsapp
Butuh Bantuan?
Format penulisan:
<a class="button whatsapp" href="url_anda_disini"><i class="m-icon whatsapp"></i>Butuh Bantuan?</a>

Dua tombol dalam satu baris
Download Demo

Format penulisan:
<div class="button-info">
  <a class="button" href="url_anda_disini"><i class="m-icon download"></i>Download</a>
  <a class="button outline" href="url_anda_disini">Demo</a>
</div>

Lazy youtube

Berguna untuk memuat video youtube setelah halaman di scroll agar loading blog lebih cepat lagi


Penggunaanya sangat mudah:
  • Salin kode pemutaran video youtube yang ingin ditampilkan
  • Contoh url video youtube : youtube.com/watch?v=s1tAYmMjLdY
  • Yang perlu Anda salin hanyalah kode "s1tAYmMjLdY" lalu tempel pada bagian yang suda ditandai di kode ini
Format penulisan:
<div class="lazy-youtube" data-embed="rvrZJ5C_Nwg">
  <div class="playBut">
    <svg class="svg-play" viewbox="0 0 213.7 213.7"><polygon class="triangle" points="73.5,62.5 148.5,105.8 73.5,149.1"></polygon><circle class="circle" cx="106.8" cy="106.8" r="103.3"></circle></svg>
  </div>
</div>

Spoiler atau tombol show hide

Spoiler berfungsi untuk menyembunyikan sebagian isi artikel dan akan ditampilkan dengan cara di klik

Judul Spoiler:
Isi spoiler

Format penulisan:
<div class="spoiler">
  <input class="spoiler-input hidden" id="spoiler-01" type="checkbox">
  <div class="spoiler-judul"><b>Judul Spoiler</b>: <label aria-label="Spoiler" class="button" for="spoiler-01"></label></div>
  <div class="spoiler-isi">
    <div>
Isi spoiler
    </div>
  </div>
</div>

Spoiler untuk menyembunyikan kode atau syntax highlighter
Judul Spoiler: 
Isi kode syntax highlighter

Format penulisan:
<div class="spoiler">
  <input class="spoiler-input hidden" id="spoiler-01" type="checkbox">
  <div class="spoiler-judul"><b>Judul Spoiler</b>: <label aria-label="Spoiler" class="button" for="spoiler-01"></label></div>
  <div class="spoiler-isi">
    <div>
      <pre><code>Isi kode syntax highlighter</code></pre>
    </div>
  </div>
</div>

Faq / Accordion Menu

Berfungsi untuk menampilkan konten faq atau bertanyaan dalam blog, sering disebut dengan accordion menu

  • Jawaban pertanyaan pertama
  • Jawaban pertanyaan kedua
  • Jawaban pertanyaan ketiga

Format penulisan:
<ul class="accordion">
  <li>
    <div class="accor-content">
      <input class="accor-menu hidden" id="offaccor-menu1" name="accordion-menu" type="radio" />
      <label class="accor-title" for="offaccor-menu1">
        <svg class="line icon-1" viewBox="0 0 24 24"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg>
        <svg class="line icon-2" viewBox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line></svg>
        <span class="title">Pertanyaan pertama</span>        
      </label>
      <div class="content">Jawaban pertanyaan pertama</div>
    </div>
  </li>
  <li>
    <div class="accor-content">
      <input class="accor-menu hidden" id="offaccor-menu2" name="accordion-menu" type="radio" />
      <label class="accor-title" for="offaccor-menu2">
        <svg class="line icon-1" viewBox="0 0 24 24"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg>
        <svg class="line icon-2" viewBox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line></svg>
        <span class="title">Pertanyaan kedua</span>        
      </label>
      <div class="content">Jawaban pertanyaan kedua</div>
    </div>
  </li>
  <li>
    <div class="accor-content">
      <input class="accor-menu hidden" id="offaccor-menu3" name="accordion-menu" type="radio" />
      <label class="accor-title" for="offaccor-menu3">
        <svg class="line icon-1" viewBox="0 0 24 24"><line x1="12" x2="12" y1="5" y2="19"></line><line x1="5" x2="19" y1="12" y2="12"></line></svg>
        <svg class="line icon-2" viewBox="0 0 24 24"><line x1="5" x2="19" y1="12" y2="12"></line></svg>
        <span class="title">Pertanyaan ketiga</span>        
      </label>
      <div class="content">Jawaban pertanyaan ketiga</div>
    </div>
  </li>
</ul>

Setiap menambahkan baris baru pastikan bagian yang ditandai offaccor-menu-1 sama, penambahan baris baru tidak terbatas bahkan sampai 100 baris
Cara Memasang Musik Dari Youtube Ke Blog

Cara Memasang Musik Dari Youtube Ke Blog

     

Cara memasukan lagu dari toutube ke blog

Tutorial cara embedded lagu / musik mp3 dari youtube ke blogger, untuk memasnag musik ke dalam website / blog ada banyak cara dan banyak juga situs untuk menerapkan embedded musik yang bisa di play secara otomatis dan menampilkan banyak list lagu yang kalian bisa pilih sesuka hati.

misalnya seperti soundcloud.com,8tracks.com dan yg lainnya, tapi pada
Membuat Multi Tab Server Video Streaming Seperti Layarkaca21

Membuat Multi Tab Server Video Streaming Seperti Layarkaca21

     

Tutorial Cara Membuat Multi tab Video Streaming Click to Load Iframe
Memasang Tab Pilihan Server Untuk Video Streaming di Blog, kali ini saya akan membagikan lagi sebuah widget untuk blog movie yang akan menampilkan beberapa pilihan server dan kualitas video yang berbeda seperti pada wrbsite layar kaca

Buat kalin yang membuat blog moveie tentunya harus membuat beberapa video / Film cadangan di
Membuat Tombol Download Keren Seperti JalanTikus di blog

Membuat Tombol Download Keren Seperti JalanTikus di blog

     

Tutorial Cara Membuat Tombol Download di Blogger Responsive
Cara Membuat Tombol Download Seperti Pada Website Jalan Tikus, pada kesempatan kali ini saya akan berbagi tutorial membuat tombol download keren yang akan menampilkan icon aplikasi / game seperti di website jalantikus.
sebelumnya saya juga sudah pernah share beberapa tutorial untuk cara membuat tombol download dan demo di halaman post