Cara Membuat Kotak Script HTML dan Text Dalam Postingan Blog Box Berwarna

Cara Membuat Kotak Script HTML dan Text Dalam Postingan Blog Box Berwarna | Admin baru saja mengabadikan sebuah artikel tentang "Membuat Tombol Back To Top" namun saat akan menuliskan kode kode terjadi kendala setelah ditampilkan yaitu di selangi oleh iklan. Sehingga kode yang muncu tidak full.

Salah satu cara agar script kode html itu muncul secara lengkap tanpa di selangi oleh apa pun adalah dengan membuat kotak/box.

Cara Membuat Kotak Script HTML dan Text Dalam Postingan Blog Box Berwarna

Setelah googling akhirnya admin mencoba mengikuti sebuah artikel yang dishare oleh "coldeja" dan ternyata informasi yang ada disana setelah saya praktekkan benar benar berhasil membuat kotak yang berwarna dan bisa diisi script html atau hanya text saja.

Berikut ini adalah Cara Membuat Kotak Script HTML dan Text Dalam Postingan Blog Box Berwarna dengan bermacam macam pilihan

Kode Kotak Double-Border


 <div style="background-color: #ace5f4; border: 3px #0180cf double; padding: 10px; text-align: left;">
MASUKKAN KODE HTML DISINI </div>
MASUKKAN KODE HTML DISINI


Kode Kotak Single-Border


 <div style="background-color: #ace5f4; border: 3px solid #0180cf ; padding: 10px; text-align: left;">
MASUKKAN KODE HTML DISINI </div>
MASUKKAN KODE HTML DISINI



Kode Kotak Border-Dotted


 <div style="background-color: #ace5f4; border: 2px #0180cf dotted; padding:10px; text-align:left;">MASUKKAN KODE HTML DISINI</div> 
TULISAN DISINI


Kode Kotak Scroll Vertikal


 <div style="background-color: white; border: 2px solid #0180cf; height: 70px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA
</div>
MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA


Kode Kotak Scroll Vertikal dan Horizontal


 <div style="border: 2px solid #0180cf; height: 70px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 1000%;">
MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA</div>
</div>
MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA


Ganti kode #0180cf untuk mengganti warna border, #0180cf untuk mengganti warna background, dan Merah untuk kode html kamu

Script HTML Cara Membuat Back To Top di Blogspot

Script HTML Cara Membuat Back To Top di Blogspot | Untuk memudahkan kembali keatas. Maka ada kode yang dibutuhakan yang diterapkan di template blogspot kita. berikut ini adalah langkah langkah selengkapnya:

Script HTML Cara Membuat Back To Top di Blogspot

Pertama kita pasang dulu css font awesome , karena back to top ini menggunakan font awesome.
Caranya pasang kode javascript berikut dan letakan diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Kemudian pasang css dibawah ini tepat diatas ]]></b:skin> atau </style>

/* Back To Top */ #back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

Setelah itu kita panggil back to topnya dengan memasang html dan javascript dibawah ini dan letakan diatas kode </body>
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
<i class='fa fa-chevron-up'/>
</a></div>
<script>         
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});
$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>
Terkahir simpan Template dan lihat hasilnya

Catatan;
background:#E73037 Silahkan ganti warnanya dengan melihat kodenya DISINI sebagai contoh #0b366b adalah kode yang warnanya seperti gambar back to top di artikel ini.

Sumber: Masyadi

Frontier Blogger Template Free Download Via Google Drive

Frontier Blogger Template Free Download | Template ini dapat didownload dari google drive yang merupakan salah satu versi yang free. Untuk versi premium bisa langsung order ke web resminya. 

Bagi kamu yang mencari templat untuk blogspot "Frontier" setidaknya sudah mengetahui apa saja fitur yang tersedia serta tampilannya.

Berikut ini adalah informasi lengkap yang admin dari "NewBloggerThemes"

Frontier Blogger Template Free Download Via Google Drive

Theme Categories: 1 Sidebar, 2 Columns, 3 Columns Footer, Adapted from Wordpress, Blue, Color Options, Featured Section, Fixed width, Grey, Header Banner, Magazine, Pro Version Available, Responsive, Right Sidebar, Slider, Top Navigation Bar, White,
Template Name:Frontier
Author / URL:NewBloggerThemes | https://newbloggerthemes.com/
Designer / URL:ronangelo | http://ronangelo.com/
Published Date:November 29, 2015
Updated Date:February 26, 2017

How To Add Links to Top Navigation Menu

Top Menu - Frontier Blogger Template

Go to "Layout". Click on "Edit" link of "Edit This Menu" widget.

Now add your links to that link list widget.

How To Change Header Logo

Find this image address in "Edit HTML" and replace it your logo image address:

http://1.bp.blogspot.com/-YT4tpZBSUGI/VlmrcpJpOPI/AAAAAAAAOP0/HWwqQm9iA4w/s1600/logo.png

How To Configure Main Drop-down Menu

Primary Menu - Frontier Blogger Template
How To Configure Main Drop-down Menu

Find this in "Edit HTML":

<ul class='nav-mainnbt' id='menu-nbt-menu'>

<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Market</a></li>
<li><a href='#'>Stock</a></li>
</ul>
</li>

...

</ul>

Replace "#" marks with real URLs and change anchor texts as you like.

How To Configure Featured Content Slider:

Slider - Frontier Blogger Template
How To Configure Featured Content Slider

There are 5 slides in the slider. You can add or remove more slides if you want. This is the code for the first slide:

<!-- slide 1 code start -->

<li>

 <a href='ENTER_SLIDE_1_LINK_HERE'>

  <img class='slider-element' src='http://1.bp.blogspot.com/-X4m05ySscnA/Vlks1pixfaI/AAAAAAAAOKQ/_nDhjfojHzY/s1600/slide-1.jpg'/>

  <h4 class='slider-element'>Enter Slide 1 Title Here</h4>

  <p class='slider-element'>This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words. This is a Blogger template by NewBloggerThemes.com...</p>

 </a>

</li>

<!-- slide 1 code end -->

Now replace,
"ENTER_SLIDE_1_LINK_HERE"s with your real slide link,
"Enter Slide 1 Title Here" with your real slide title,
"This is slide 1 description. Go to Edit HTML of your blogger blog. Find these sentences. You can replace these sentences with your own words. This is a Blogger template by NewBloggerThemes.com..." with your real slide description,
"http://1.bp.blogspot.com/-X4m05ySscnA/Vlks1pixfaI/AAAAAAAAOKQ/_nDhjfojHzY/s1600/slide-1.jpg" with your slide image URL.

Follow the same procedure to configure other 4 slides.

How To Configure Social Buttons

Social Buttons - Frontier Blogger Template
How To Configure Social Buttons

Find this in "Edit HTML":

<div class='widget social-buttonsnbt'>

 <a href='https://plus.google.com/' rel='nofollow' target='_blank' title='Google Plus'><i class='fa fa-google-plus'/></a>

 <a href='https://twitter.com/' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a>

 <a href='https://www.facebook.com/' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a>

 <a href='https://www.linkedin.com/' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></a>

 <a href='https://www.instagram.com/' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/></a>

 <a href='https://www.youtube.com/' rel='nofollow' target='_blank' title='Youtube'><i class='fa fa-youtube'/></a>

 <a href='http://www.pinterest.com/' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest'/></a>

 <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' target='_blank' title='RSS'><i class='fa fa-rss'/></a>

</div>
Add your own social links replacing default social profile URLs.

Frontier Blogger Template Responsive View

Responsive View - Frontier Blogger Template
Frontier Blogger Template Responsive View

Our Blogger templates are free for both personal and commercial use. However, you are required to keep the footer links intact, which provides due credit to its designers and authors. So do not remove the footer credits without our permission. If you need the footer credits free version of a theme, contact us.

Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger

Tanpa Basa Basi, inilah "Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger"

Masuk ke edit HTML template blog kamu
Cari kode </body>
Masukkan kode berikut tepat diatas kode /body tersebut;

Cara Membuat Widget Sticky di Sidebar di Blogspot Widget Melayang Blogger

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#sticky-sidebar').length) { // Ganti "#sticky-sidebar" dengan ID tertentu
    var el = $('#sticky-sidebar');
    var stickyTop = $('#sticky-sidebar').offset().top;
    var stickyHeight = $('#sticky-sidebar').height();
    $(window).scroll(function() {
      var limit = $('#footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" dan ID footer juga sama dengan ID footer template mu
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Simpan dan Lihat Hasilnya
Berikut ini adalah contoh penerapan pada  Newser SoraTemplate yang admin gunakan;

<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#HTML4').length) { // Ganti "#HTML4" dengan ID tertentu
    var el = $('#HTML4');
    var stickyTop = $('#HTML4').offset().top;
    var stickyHeight = $('#HTML4').height();
    $(window).scroll(function() {
      var limit = $('#LinkList236').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper"
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'fixed',
          top: 20 // Jarak atau margin sticky dari atas
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});
//]]>
</script>

Sumber Code

Solusi HyperLink Template Newser Free Version Warna Hitam dan Cara Mengubah Warna Tulisan Link HTML

Hyperlink adalah cara untuk menghubungkan suatu bagian di dalam slide, file, program ataupun pada halaman web dengan bagian yang lainnya dalam bidang-bidang tersebut.

Nah. Armaila baru saja menggunakan template Newser yang free version yang bisa di Download Disini. Template ini dibuat oleh soratemplate. Nah pada saat menyisipkan link dalam artikel, biasanya tulisan yang berisi link itu akan berwarna biru. Tetapi untuk kali ini hanya berwarna hitam. Hal ini akan menyebabkan orang yang membaca artikel kita tidak mengetahui ada link yang kita selipkan di artikel tersebut.

Nah untuk Cara Mengubah Warna Tulisan Link HTML cukup mudah. yaitu dengan mengganti kode yang menjadi penentu warna tulisan link tersebut.

Solusi HyperLink Template Newser Free Version Warna Hitam dan Cara Mengubah Warna Tulisan Link HTML

Cara Mengubah Warna Tulisan Link HTML


  1. Masuk ke Dashbor blogspot
  2. Pilih Tema
  3. Lalu lanjutkan ke pilihan Edit HTML
  4. Selanjutnya cari kode a {text-decoration:none;color:#000;}

Untuk memudahkan pencarian tekan ctrl+f di keyboard anda dan ketik kode diatas.

Selanjutnya ganti kode yang berwarna merah dengan kode warna lainnya. Sebagai contoh diganti menjadi warna biru dengan kode "0000FF" sehingga menjadi a {text-decoration:none;color:#0000FF;}

Simpan template anda jika sudah selesai. Dan cek hasilnya.

Berikut kode CSS Lengkap berdasarkan berdasarkan kode hexadecimal dan kode RGB. Referensi kode warna dibawah berdasarkan sumber dari w3schools yang aku tambahkan dengan kode RGB.


Nama WarnaHEXRGB
Alice Blue#F0F8FFrgb(240, 248, 254)
Antique White#FAEBD7rgb(251, 235, 217)
Aqua#00FFFFrgb(0, 255, 254)
Aquamarine#7FFFD4rgb(115, 255, 216)
Azure#F0FFFFrgb(239, 255, 255)
Beige#F5F5DCrgb(245, 245, 223)
Bisque#FFE4C4rgb(255, 227, 200)
Black#000000rgb(0, 0, 0)
Blanched Almond#FFEBCDrgb(255, 234, 208)
Blue#0000FFrgb(0, 0, 255)
Blue Violet#8A2BE2rgb(138, 43, 226)
Brown#A52A2Argb(165, 42, 42)
Burly Wood#DEB887rgb(222, 184, 135)
Cadet Blue#5F9EA0rgb(95, 158, 160)
Chartreuse#7FFF00rgb(127, 255, 1)
Chocolate#D2691Ergb(210, 105, 30)
Coral#FF7F50rgb(251, 127, 80)
Cornflower Blue#6495EDrgb(100, 149, 237)
Cornsilk#FFF8DCrgb(225, 248, 220)
Crimson#DC143Crgb(220, 20, 60)
Cyan#00FFFFrgb(62, 254, 255)
Dark Blue#00008Brgb(0, 0, 139)
Dark Cyan#008B8Brgb(29, 139, 139)
Dark Golden Rod#B8860Brgb(184, 134, 11)
Dark Gray#A9A9A9rgb(169, 169, 169)
Dark Green#006400rgb(19, 100, 0)
Dark Khaki#BDB76Brgb(189, 183, 107)
Dark Magenta#8B008Brgb(139, 0, 140)
Dark Olive Green#556B2Frgb(85, 107, 47)
Dark Orange#FF8C00rgb(251, 140, 1)
Dark Orchid#9932CCrgb(153, 50, 204)
Dark Red#8B0000rgb(139, 5, 0)
Dark Salmon#E9967Argb(233, 150, 122)
Dark Sea Green#8FBC8Frgb(143, 188, 144)
Dark Slate Blue#483D8Brgb(72, 61, 139)
Dark Slate Gray#2F4F4Frgb(47, 79, 79)
Dark Turquoise#00CED1rgb(48, 206, 209)
Dark Violet#9400D3rgb(148, 0, 211)
Deep Pink#FF1493rgb(249, 19, 147)
Deep Sky Blue#00BFFFrgb(43, 191, 254)
Dim Gray#696969rgb(105, 105, 105)
Dodger Blue#1E90FFrgb(30, 144, 255)
Fire Brick#B22222rgb(178, 34, 33)
Floral White#FFFAF0rgb(255, 250, 240)
Forest Green#228B22rgb(34, 139, 35)
Fuchsia#FF00FFrgb(249, 0, 255)
Gainsboro#DCDCDCrgb(220, 220, 220)
Ghost White#F8F8FFrgb(248, 248, 255)
Gold#FFD700rgb(253, 215, 3)
Golden Rod#DAA520rgb(218, 165, 32)
Gray#808080rgb(128, 128, 128)
Green#008000rgb(27, 128, 1)
Green Yellow#ADFF2Frgb(173, 255, 48)
Honey Dew#F0FFF0rgb(240, 255, 240)
Hot Pink#FF69B4rgb(240, 255, 240)
Indian Red#CD5C5Crgb(205, 92, 92)
Indigo#4B0082rgb(75, 0, 130)
Ivory#FFFFF0rgb(255, 255, 239)
Khaki#F0E68Crgb(240, 230, 140)
Lavender#E6E6FArgb(230, 230, 250)
Lavender Blush#FFF0F5rgb(254, 240, 245)
Lawn Green#7CFC00rgb(124, 252, 2)
Lemon Chiffon#FFFACDrgb(255, 250, 205)
Light Blue#ADD8E6rgb(173, 216, 230)
Light Coral#F08080rgb(240, 128, 128)
Light Cyan#E0FFFFrgb(224, 255, 255)
Light Golden Rod Yellow#FAFAD2rgb(250, 250, 210)
Light Gray#D3D3D3rgb(211, 211, 211)
Light Green#90EE90rgb(144, 238, 144)
Light Pink#FFB6C1rgb(252, 182, 193)
Light Salmon#FFA07Argb(251, 160, 122)
Light Sea Green#20B2AArgb(40, 178, 170)
Light Sky Blue#87CEFArgb(135, 206, 250)
Light Slate Gray#778899rgb(119, 136, 153)
Light Steel Blue#B0C4DErgb(176, 196, 222)
Light Yellow#FFFFE0rgb(255, 255, 224)
Lime#00FF00rgb(63, 255, 0)
Lime Green#32CD32rgb(50, 205, 50)
Linen#FAF0E6rgb(250, 240, 230)
Magenta#FF00FFrgb(249, 0, 255)
Maroon#800000rgb(128, 4, 0)
Medium Aqua Marine#66CDAArgb(102, 205, 170)
Medium Blue#0000CDrgb(0, 0, 205)
Medium Orchid#BA55D3rgb(186, 85, 211)
Medium Purple#9370DBrgb(147, 112, 219)
Medium Sea Green#3CB371rgb(60, 179, 113)
Medium Slate Blue#7B68EErgb(123, 103, 238)
Medium Spring Green#00FA9Argb(62, 250, 153)
Medium Turquoise#48D1CCrgb(72, 209, 204)
Medium Violet Red#C71585rgb(199, 21, 133)
Midnight Blue#191970rgb(25, 25, 112)
Mint Cream#F5FFFArgb(245, 255, 250)
Misty Rose#FFE4E1rgb(254, 228, 225)
Moccasin#FFE4B5rgb(254, 228, 181)
Navajo White#FFDEADrgb(254, 222, 173)
Navy#000080rgb(0, 0, 128)
Old Lace#FDF5E6rgb(253, 245, 230)
Olive#808000rgb(128, 128, 1)
Olive Drab#6B8E23rgb(107, 142, 35)
Orange#FFA500rgb(252, 165, 3)
Orange Red#FF4500rgb(250, 69, 1)
Orchid#DA70D6rgb(218, 112, 214)
Pale Golden Rod#EEE8AArgb(238, 232, 170)
Pale Green#98FB98rgb(152, 251, 153)
Pale Turquoise#AFEEEErgb(175, 238, 239)
Pale Violet Red#DB7093rgb(219, 112, 147)
Papaya Whip#FFEFD5rgb(254, 239, 213)
Peach Puff#FFDAB9rgb(253, 218, 185)
Peru#CD853Frgb(205, 133, 63)
Pink#FFC0CBrgb(252, 192, 203)
Plum#DDA0DDrgb(221, 160, 221)
Powder Blue#B0E0E6rgb(176, 224, 230)
Purple#800080rgb(128, 0, 128)
Rebecca Purple#663399rgb(102, 51, 153)
Red#FF0000rgb(255, 0, 0)
Rosy Brown#BC8F8Frgb(188, 143, 142)
Royal Blue#4169E1rgb(65, 105, 225)
Saddle Brown#8B4513rgb(139, 69, 19)
Salmon#FA8072rgb(250, 128, 114)
Sandy Brown#F4A460rgb(244, 164, 95)
Sea Green#2E8B57rgb(46, 139, 87)
Sea Shell#FFF5EErgb(255, 245, 238)
Sienna#A0522Drgb(160, 82, 45)
Silver#C0C0C0rgb(192, 192, 192)
Sky Blue#87CEEBrgb(135, 206, 235)
Slate Blue#6A5ACDrgb(106, 90, 205)
Slate Gray#708090rgb(112, 128, 145)
Snow#FFFAFArgb(255, 250, 250)
Spring Green#00FF7Frgb(63, 255, 128)
Steel Blue#4682B4rgb(70, 130, 180)
Tan#D2B48Crgb(210, 180, 140)
Teal#008080rgb(26, 128, 127)
Thistle#D8BFD8rgb(216, 191, 216)
Tomato#FF6347rgb(250, 99, 71)
Turquoise#40E0D0rgb(64, 224, 208)
Violet#EE82EErgb(238, 130, 238)
Wheat#F5DEB3rgb(245, 222, 179)
White#FFFFFFrgb(255, 255, 255)
White Smoke#F5F5F5rgb(245, 245, 245)
Yellow#FFFF00rgb(255, 255, 0)
Yellow Green#9ACD32rgb(154, 205, 49)


Demikianlah artikel tentang "Solusi HyperLink Template Newser Free Version Warna Hitam dan Cara Mengubah Warna Tulisan Link HTML" semoga bermanfaat