Tool Untuk Mengetahui HTML Kode Warna

Sobat blogger, bertemu dengan saya Bani Cyber, yang akan membagikan tool untuk mengetahui kode html warna yang simple dan ukuran nya pun kecil. Kalau mau tool nya silahkan baca kisah selanjutnya dibawah.

Bagi seorang Master yang ahli seo, Kode HTML warna adalah hal yang penting. Apalagi, blogger yang membuat template. Kita perlu menambahkan warna pada bagian bagian tertentu supaya template yang dibuat tampak lebih keren dan tentunya harus seo dan responsive.

Kode HTML warna bukan hanya untuk orang yang sedang membuat template saja, bagi orang yang newbie atau pemula atau baru dalam blogger. Kode html warna sangat lah penting, tidak seperti sang master yang sudah berpengalaman dan sudah hapal puluhan kode html pada warna.

Maka itulah saya ingin menyelesaikan masalah yang anda alami saya akan membagikan tool atau aplikasi atau software atau apapun namanya itu untuk cara mengetahui kode HTML warna. Penggunaan tool ini sangat mudah  , hanya dengan mengarahkan mouse ke warna yang ingin diketahui kode nya.

Akan lebih melelahkan dan boros jika kita selalu membuka internet dan mencari kode html warna di website yang menyediakan kode html warna tersebut. Bagi yang punya paket internet melimpah, membuka internet terus itu tidak merugikan. Tapi jika orang yang paket internet nya kritis sedangkan membuka internet memerlukan koneksi internet yang kencang dan paket yang banyak itu adalah hal yang sangat merugikan.

Lebih baik anda download tool ringan/ ukuran yang sangat kecil untuk mengetahui kode html warna daripada bolak balik buka browser internet. Hal simple ini sebenarnya tidak ingin saya sampaikan tetapi kebanyakan pemula biasanya sering mencari kode html warna yang telah tersedia langsung beserta warna yang di inginkan nya.

Dari pada anda terus lupa dengan kode html warna lebih baik anda mencatat kode html warna nya di notepad supaya anda tidak usah membuka tool html warna untuk mengetahui kode html warna.

Saya akan bagikan 3 Tool/ Software untuk mengetahui kode html warna yang anda sukai. Ingat!! 3 tool loh, bisa anda koleksi di rumah atau komputer anda. Berikut tool yang saya bagikan :

1.Just Colour Picker

Tool ini di produksi oleh Anny Studio, yang website nya adalah http://annystudio.com. software ini adalah software gratis dan bisa dibilang FreeWare. Tool inilah yang saya pakai untuk merombak atau meng-edit warna warna di bagian bagian tertentu blog saya. Untuk download software ini silahkan lihat info tentang tool ini :

Nama : JUST COLOUR PICKER (Freeware) Gratis!!

Versi : -

Ukuran : 2 MB

URL : http://annystudio.com

LINK DOWNLOAD : http://link-download.com

2.Colour HTML

Tool ini juga keren dan gratis, walaupun tidak se-praktis JUST Colour Picker tapi software ini sangat cocok bagi yang ingin lebih mudah seperti pemula atau newbie. Untuk Link download software baca dulu info tool nya dibawah.

Nama : COLOUR HTML (Freeware) Gratis!!

Versi : -

Ukuran : 3 MB

URL : http://htmlcode.com

LINK DOWNLOAD : http://link-download.com

3.HTML Colour Editor

Tool ini yang sangat keren full service atau layanan nya yang lengkap, anda bisa menggunakan fitur fitur tambahan di dalam software pembuat html warna. Sama seperti diatas kalau mau download tool nya harus dibaca dulu.

Nama : HTML Colour EDITOR (Juga Freeware)

Versi : -

Ukuran : 966 KB

URL : http://col-our-editor.org

LINK DOWNLOAD : http://link-download.com

Nah, sekarang bisa anda download sendiri dan anda pakai untuk edit edit template blog anda di rumah. Begitu lah tool untuk mengetahui kode html pada warna untuk meng-edit template anda. Bagaimana kesan anda terhadap artikel yang biasa ini jika membantu jangan lupa komentar ya sob.

KEYWORDS :

CARA MENGETAHUI KODE HTML WARNA DI TEMPLATE | TOOL PENYEDIA KODE HTML WARNA | CARA MENGETAHUI KODE HTML WARNA | GIMANA MENGETAHUI KODE HTML WARNA ?

Cara Memasang widget icon social media di sidebar blog

Bani Cyber – Hallo blogger, di artikel ini saya akan membahas dan memberikan informasi secara lengkap untuk membuat widget sosial media di sidebar blog anda. Sebelum itu, Widget Sosial media ataupun Media Sosial dalam bahasa indonesianya sangat dibutuhkan dalam perannya untuk membantu pengguna nya mencari teman ataupun followers. Disamping itu pula ada juga yang menggunakan media sosial sebagai alat atau modal untuk mencari korban kejahatan mereka. Seperti penipuan, penjualan anak bayi, dll.

Udah sampai penipuan pula ceritanya, balik lagi ke social media/media sosial. Widget ini terdapat banyak jenis social media seperti Facebook, twitter, instagram, rss, usercloud, youtube, pinterest, linkedin dan lainnya. Facebook adalah media sosial yang mendapat peringkat nomor 1 karena media sosial ini yang paling sering digunakan untuk mencari kenalan, teman, sahabat ataupun pasangan. Pasti anda juga punya akun Facebook, kalau belum punya silahkan daftar disini.

Baca Lengkap : Cara membuat dan memasang author box di bawah artikel blog – part 2

Baca Lengkap : Cara memasang anti klik kanan di blog

Baca Lengkap : Cara membuat text area beserta “copy all” di blog

Widget ini sebenarnya adalah widget yang telah terpasang di template yang saya pakai ini, saya melepasnya supaya blog saya tampil lebih elegan di ponsel atau smartphone. Tapi tenang saja widget medsos ini tidak memberatkan blog anda, dijamin jika anda menggunakan widget ini blog anda tetap fast seperti biasanya. Apakah widget ini seo? Mungkin. Karena saya belum yakin, tapi jangan khawatir widget ini tidak akan menggeser peringkat blog anda di google.

Baca Dulu : Cara agar blog berada di peringkat nomor 1 halaman pertama google.

Penggunaan widget medsos adalah salah satu syarat seo loh, supaya google mengetahui kita berada di media sosial lain. Dan ini akan berdampak baik pada nilai seo blog kita, maka dari itu saya sarankan kepada anda untuk memasang widget ini di blog anda dengan cara nya yang akan dibahas dibawah nanti. Ada 3 dari 10 blogger yang tidak menggunakan widget ini, tapi ya ada juga yang menjadi no.1 di mesin pencari google karena artikel berkualitas dan juga template nya yang seo serta responsive ketika di akses dimanapun, misal smartphone dan ipad.

Baca Juga : 10 Free Template Berkualitas Premium, Fast, Seo Responsive Dan Mobile Friendly

Setelah membahas tentang widget media sosial diatas, sekarang kita masuk ke cara memasang widget social media di sidebar blog , langsung saja baca tutorial nya sebagai berikut:

1.Buka blogger.com dan login.

2.Buka Template, Lalu Edit HTML

3.Find (CTRL+F) kode berikut : <div class='sidebar-inner'>

4.Letakkan Kode Script berikut dibawah kode tadi

<div class='gvusion-socials-icons mom-socials-widget'>

    <ul>

        <li class='facebook'><a href=’#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/></a></li>

        <li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></a></li>

        <li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/></a></li>

        <li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/></a></li>

        <li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '/></a></li>

        <li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/></a></li>

        <li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on DeviantArt'><i class='fa fa-deviantart'/></a></li>

        <li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/></a></li>

        <li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/></a></li>

        <li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '/></a></li>

        <li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '/></a></li>

        <li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on Soundcloud'><i class='fa fa-soundcloud '/></a></li>

    </ul>

5.Sekarang Find (CTRL+F) lagi kode berikut : </style> atau ]]></b:skin>

6.Masukkan Kode css berikut diatasnya.

/* CSS Social Network */

.gvusion-socials-icons{margin:0 0 20px 0}

.gvusion-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}

.gvusion-socials-icons ul li:before{display:none}

.gvusion-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;}

.gvusion-socials-icons ul li:hover{opacity:1;}

.secondary-sidebar .gvusion-socials-icons ul li{width:36px;height:36px}

.secondary-sidebar .gvusion-socials-icons ul li a{line-height:45px}

.secondary-sidebar .gvusion-socials-icons ul li a i{font-size:20px}

.gvusion-socials-icons ul li a{line-height:45px;display:block;color:#fff}

.gvusion-socials-icons ul li a:hover{color:#fff}

.gvusion-socials-icons ul li.home{background:#83868a}

.gvusion-socials-icons ul li.facebook{background:#516ca4}

.gvusion-socials-icons ul li.googleplus{background:#f20000}

.gvusion-socials-icons ul li.rss{background:#f29400}

.gvusion-socials-icons ul li.youtube{background:#f20000}

.gvusion-socials-icons ul li.dribbble{background:#dc71a6}

.gvusion-socials-icons ul li.deviantart{background:#4c5e51}

.gvusion-socials-icons ul li.pinterest{background:#f20000}

.gvusion-socials-icons ul li.instgram{background:#406f94}

.gvusion-socials-icons ul li.tumblr{background:#395875}

.gvusion-socials-icons ul li.linkedin{background:#1985bc}

.gvusion-socials-icons ul li.soundcloud{background:#f60}

7.Preview template, jika berhasil langsung Save Template.

Settings Script Code :

!Kode Pagar (#) bisa anda ganti dengan dengan url akun medsos anda.

Maka hasilnya menjadi sebagai berikut:

Bagaimana keren gak? Gak bisa bilang “Tidak”. Ya iyalah, widget ini di design oleh sang pendesign handal yaitu Arlina Design ( http://arlinadesign.com ). Saya? saya cuma share saja ke anda supaya blog anda juga terlihat keren dan ganteng. Jangan lupa tinggalkan komentar sebelum pergi dari artikel Cara Memasang widget social media full di sidebar blog. Wassalamualaikum blogger J.

Membuat Pasang : Kotak Author Box di Bawah Postingan Blog

BaniCyber.com – Cara Membuat Dan Memasang Widget Kotak Admin Di Bawah Artikel Blog, Widget Kotak Admin atau dalam bahasa inggrisnya disebut Author Box, Biasanya dibuat dan dipasang diblog supaya memberitahu informasi tentang kita, Tapi Sekarang ini banyak orang yang membuat Author Box dalam gaya yang berbeda. Sekarang Author Box atau Kotak Admin digunakan oleh blogger untuk mempercantik tampilan Blog dan menarik perhatian blog lainnya.

Baca Artikel Sama : Cara Membuat Widget Kotak Admin (Author Box) Di Blog versi 1

Blogger juga menyediakan About me/tentang saya yang hampir sama dengan Author box atau Kotak Admin, Yang membedakan keduanya adalah yang bawaan blogger tidak memiliki pesan yang disampaikan untuk pembaca atau pengunjung blog. Satu lagi yang membedakan nya Author box bawaan blogger tidak memiliki gaya yang menarik sedangkan Author box buatan ahli lebih bergaya atau style yang menarik.

Author box biasa diletakkan dibawah artikel blog supaya pengunjung mengetahui nya setelah membaca artikel. Mau tau gak? Author box juga berdampak baik pada Seo Friendly suatu blog loh? Kalau gak percaya ini SS (gambar) nya atau bisa anda cek sendiri Disini.

Apakah anda tertarik dengan Kotak admin? yah, Saya akan bagikan Cara pembuatan dan pemasangan widget kotak admin versi Mas Yadi, bisa dicek Disini. Berikut cara pembuatan nya:

1.       Login Dan Buka Blogger Sobat

2.       Buka Di Bagian Template > Edit HTML

3.       Copy Paste atau Tempelkan Kode Berikut Diatas Kode ]]></b:skin>atau </style>

4.       Lalu Masukkan Kode Css Berikut Diatas Atau Sebelum <data:post.body/> Yang ke-2

Settings Kode :

Ganti Kode Bani Dengan Nama Anda.

Ganti Kode Bani Cyber dengan ID media sosial anda.

Save Template anda, Lihat Blog Anda.

Bagaimana tampilan blog anda setelah anda tambahkan kotak admin diatas, Anda bisa mengubah tampilan atau style sesuai selera anda sendiri supaya lebih pas dengan blog anda. Begitulah Cara Membuat Dan Memasang Author Box Di Blog, Jika ada yang kurang jelas atau ingin memberi saran silahkan berkomentar dibawah dengan peraturang yang tersedia, Terimakasih.