Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Tutorial Mempercantik Tampilan Heading, Subheading Dan Minor

Cara Memberikan gambar/ikon di samping goresan pena H1, H2, H3 dsb. - Ok kali ini Blog Espada akan membahas salah satu cara untuk memperindah atau mempercantik tampilan Blog yaitu memberi Icon di samping goresan pena yg di beri ukuran abjad Heading, Subheading serta Minor heading atau lebih tepatnya H1 to H6.

Biasanya Heading di pakai supaya goresan pena menso lebih tebal serta besar yg dimaksudkan supaya pengunjung sanggup mengetahui apa yg dimaksudkan diblog atau Judul. Namun dengan mempercantik tampilan Heading akan menciptakan artikel anda semakin yummy untuk dipansertag serta banyak blog yg mempunyai tampilan bagus memberi headingnya ikon. Ok pribadi aja bila ingin demo tampilannnya menyerupai dibawah ini.

Cara Memperindah tampilan Heading


1. Pertama silahkan masuk ke akun blogger anda - Template serta Edit HTML.
2. Kemudian silahkan cari Kode h1, h2, h3,h4,h5,h6, sebagai tumpuan menyerupai dibawah ini.

h1,h2,h3,h4,h5,h6{font-family:'Oswald',sans-serif;font-weight:400;line-height:1.1;margin:0 0 0.5em}
h1{font-size:160%}
h2{font-size:150%}
h3{font-size:140%}
h4{font-size:130%;}
h5{font-size:100%}
h6{font-size:80%}
dl,ol,ul{margin-left:20px}

3. Sebagian besar template mempunyai Kode menyerupai diatas, namun mungkin saja sedikit berbeda, silahkan cari saja serta bila sudah ketemu hapus arahan didalam kurung serta ganti dengan arahan CSS dibawah ini.

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoqGCNIST_SyVsV4pSZlxA8tNAbUv9916wcQKgYfqsfAlVD5i2R3eICp0JUbta53IDgBlQ8R1_TdPsy7-WrjSrka9NiruuneOKg7GCHkHCy3Lm9IVqtWDJ4mTQUYC2PJ1t305AeDjA74/s22/seocipsh3.png) no-repeat 5px 9px;font-size:140%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;

4. Maka Hasilnya menyerupai dibawah ini.

h1,h2,h3,h4,h5,h6{font-family:'Oswald',sans-serif;font-weight:400;line-height:1.1;margin:0 0 0.5em}
h1{font-size:160%}
h2{font-size:150%}
h3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoqGCNIST_SyVsV4pSZlxA8tNAbUv9916wcQKgYfqsfAlVD5i2R3eICp0JUbta53IDgBlQ8R1_TdPsy7-WrjSrka9NiruuneOKg7GCHkHCy3Lm9IVqtWDJ4mTQUYC2PJ1t305AeDjA74/s22/seocipsh3.png) no-repeat 5px 9px;font-size:140%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;}
h4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoqGCNIST_SyVsV4pSZlxA8tNAbUv9916wcQKgYfqsfAlVD5i2R3eICp0JUbta53IDgBlQ8R1_TdPsy7-WrjSrka9NiruuneOKg7GCHkHCy3Lm9IVqtWDJ4mTQUYC2PJ1t305AeDjA74/s22/seocipsh3.png) no-repeat 5px 7px;font-size:130%; color:#222; margin:4px 0; padding:9px 38px;border-bottom:2px solid #e2e2e2;}
h5{font-size:100%}
h6{font-size:80%}
dl,ol,ul{margin-left:20px}

Note : Silahkan ganti heading yg sering dipakai saja, biasanya Heading yaitu H2, Subheading : H3 serta Minor Heading : H4. Jangan anda pasang kesemua heading, alasannya yaitu nantinya judulpun akan ada ikonnya. Terakhir silahkan ganti angka didalam kolom Heading dengan angka lain untuk menyesuaikan ikon bila perlu. Dan silahkan bereksperimen sendiri.

Demikian artikel ihwal Cara Mempercantik heading dengan menambahkan ikon atau logo. sekian yg sanggup saya bagikan serta Terima kasih.

Tutorial Pasang Klasemen Sepakbola Whatsthescore Di Blog

Cara Memasang Widget Klasemen liga Inggris, Itali, Sanyol serta Bundes Liga dari Whatsthescore.com di Blog.

EspadaBlog,- Klasemen Sepakbola merupakan kawasan ukur atau peringkat yg memilih suatu kehebatan dari sebuah Klub sepakbola yg berlaga disebuah liga, semakin teratas maka semakin baik klub tersebut.

Sepakbola yakni olahraga no 1 didunia, oleh alasannya itu banyak web atau blog yg membahas sepakbola mulai dari Jadwal pertandingan, Hasil, Score, Highlights serta lain sebagainya, Namun tahukah anda biasanya Web atau Blog tersebut memiliki widget yg cukup manis yaitu widget klasemen sepakbola.

Nah jikalau anda memiliki blog/web sepakbola serta ingin menempatkan klasemen sepakbola, namun tidak tahu caranya. Disini saya akan membagikan Cara menempatkan Widget Sepakbola yg sanggup dibilang sanagt manis widgetnya dari WhatstheScore.com, Tampilan widgetnya menyerupai diatas. Ok eksklusif aja berikut tutorialnya.

Cara Memasang Widget Klasemen Sepakbola di Blog.


1. Pertama silahkan masuk ke akun Blogger anda.
2. Kemudian masuk ke Tata Letak - klik Tambahkan Gadget serta Pilih HTML/Java Script
3. Selanjutnya silahkan Copy code dibawah ini serta paste di kolom konten.

<div class='widget-content'>
<div class="widget"><div class="inner"> <div class="textwidget"><div data-type="standing" data-id="63152" id="wgt-63152" class="tap-sport-tools" style="width:300px; height:auto;"></div>
<div id="wgt-ft-63152" style="width:296px;"><p>Standings provided by <a href="http://www.whatsthescore.com" target="_blank" rel="nofollow"><img src="http://medias.whatsthescore.com/upload/logo-s.png" alt="Cara Memasang Widget Klasemen liga Inggris Tutorial Pasang Klasemen Sepakbola Whatsthescore di Blog" /></a></p></div><style type="text/css">#wgt-ft-63152  {background:#FFFFFF !important;color:#484848 !important;text-decoration:none !important;padding:4px 2px !important;margin:0 !important;}#wgt-ft-63152 * {font:10px Arial !important;}#wgt-ft-63152 a {color:#484848 !important;}#wgt-ft-63152 img {vertical-align:bottom !important;height:15px !important;}</style><script type="text/javascript" src="http://tools.whatsthescore.com/load.min.js?242"></script></div></div></div>
</div>
<div class='widget HTML' data-version='1' id='HTML5'></div>

4. Terakhir tinggal kasih judul serta Simpan.
5. Selesai.

Nah kini blog/web anda sudah terdapat widget klasemen sepakbola, serta kini pengunjung sudah sanggup melihat klasemen sepakbola favoritnya dengan mudah. sekian yg sanggup saya bagikan serta Terima kasih.

Tutorial Menciptakan Kotak Subsribe Di Blog Menyerupai Evo Magz

Cara Membuat Subscribe atau Artiel Berlangganan Seperti EVO Magz,- Pada postingan sebelumnya aku pernah membagikan Cara menciptakan Tombol share media umum ala EVO Magz serta kali ini aku akan membagikan tutorial yg pun terkait template EVO Magz yakni Cara menciptakan Subscribe atau artikel berlangganan menyerupai EVO Magz.


Berbicara mengenai template evo magz tidak ada habisnya, banyak blogger yg ingin memiliki template evo magz namun apa daya jikalau tidak memiliki uang untuk membelinya, Template Premium buatan Mas Sugeng ini merupakan template yg paling SEO serta meiliki tampilan yg sangat cantik serta rata-rata yg memakai template EVO Mgaz ini niscaya berada di halaman pertama search Google.

Nah pada kesempatan kali ini aku akan membagikan bagi anda yg menginginkan salah satu fitur dari Template EVO Magz yakni Tombol Subscribe atau artikel berlanganan. dengan Tombol subscribe akan mempermudah pengunjung untuk berlangganan artikel dari Blo anda. Ok tanpa berlama-lama silahkan ikuti saja tutorial dibawah ini.

Cara Buat Tombol Subscribe Seperti EVO Magz


1. Pertama anda harus memiliki ID Feedburner, Jika belum punya silahkan Cara mendaftarkan Blog di Feedburner Terbaru

2. Jika Sudah Punya Catat ID-nya Contoh feeds.feedburner.com/Lirik-Lagu-For-You, yg berwarna merah merupakan ID Feedburner

3. Untuk Pemasangannya silahkan Login ke Blogger - Template serta Edit HTML. Kemudian Cari ]]></b:skin> serta Pastekan Kode CSS dibawah ini sempurna diatas ]]></b:skin>

/* SUBSCRIBER BOX Ala EVO MAGZ by */
.berlangganan-box {
border: 1px solid #f0f0f0;
padding: 15px;
margin: 0 0 20px;
text-align:center;
}
.berlangganan-box input.email-address[type="text"] {
width:60%;
padding:10px;
border:1px solid #ddd;
text-align:center;
border-radius: 4px;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"] {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
padding:10px 15px;
background:#07ACEC;
border-radius: 3px;
color:#fff;
border:none;
font-weight:bold;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background:#0D9AD0;
cursor:pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #f9f2a5;
}

4. Kemudian Cari Lagi Kode Related Post, Contoh Kodenya menyerupai berikut <div class='related-post' id='related-post'>

5. Jika Sudah Ketemu silahkan Pastekan Kode CSS dibawah ini Tepat diatas Kode Tersebut.

<div class='berlangganan-box'>
 <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Lirik-Lagu-For-You&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
 <p>Subscribe to receive free email updates:</p><p><input class='email-address' name='email' placeholder='Your email address...' type='text'/></p><input name='uri' type='hidden' value='Lirik-Lagu-For-You'/>
 <input name='loc' type='hidden' value='en_US'/>
 <p><input class='submit-email' type='submit' value='Subscribe'/></p>
 </form>
</div>

6. Keterangan: Silahkan Ganti Kode berwarna Merah Lirik-Lagu-For-You dengan ID Feedburner anda.

7. Jika sudah Simpan serta Lihat Hasilnya

Itulah Cara Membuat Subscribe atau Artikel Berlangganan Seperti EVO Magz, Demikian Artikel mengenai Cara menciptakan Subscribe ala Template EVO Magz, Sekian serta Selamat Mencoba.