BLOGGER and HISTORY part II

Written by: Admin

Share Impression SEO, Insurance, Schoolarsip, All Update Updated at: April 04, 2016

BLOGGER  and History (Continues)

Available designs

Blogger allows its users to choose from various templates and then customize them. Users may also choose to create their own templates using CSS. The new design template, known as "Dynamic View", was introduced on 31 August 2011 with Dynamic Views being introduced on 27 September 2011. It is built with AJAX, HTML5, and CSS3. The time for loading is 40 percent shorter than traditional templates, and allows user to present blog in seven different ways: classic, flipcard, magazine, mosaic, sidebar, snapshot, and timeslide. Readers still have the option to choose preferable views when the blog owner has set a default view. Some of the widgets (e.g., Labels, Profile, Link List, Subscription Links, Followers and Blog Archive etc.) are available for Dynamic Views; other templates are chosen by the blogger.

In April 2013, Blogger updated its HTML template editor that has some improvements to make it easy for the users to edit the blog's source code. The editor was updated with syntax highlight, number line and jump-to-widget button for ease of editing the code.

For over half a year dynamic views users were suffering from a bug causing custom CSS and page navigation often not to load properly. This happened because a JavaScriptroutine rendered the page before it was loaded. A blogger user fixed the template and published the fix.

Integration

• The Google Toolbar has a feature called "BlogThis!" which allows toolbar users with Blogger accounts to post links directly to their blogs.
• "Blogger for Word" is an add-in for Microsoft Word which allows users to save a Microsoft Word document directly to a Blogger blog, as well as edit their posts both on- and offline. As of January 2007, Google says "Blogger for Word is not currently compatible with the new version of Blogger", and they state no decision has been made about supporting it with the new Blogger. However, Microsoft Office 2007 adds native support for a variety of blogging systems, including Blogger.
• Blogger supports Google's AdSense service as a way of generating revenue from running a blog.
• Blogger also started integration with Amazon Associates in December 2009, as a service to generate revenue. It was not publicly announced, but by September 2011 it appeared that all integration options had been removed and that the partnership had ended.
• Windows Live Writer, a standalone app of the Windows Live suite, publishes directly to Blogger.
• Blogger can be optionally integrated with Google+.
• Google+ comments can be integrated with blogger comments.
• The Campaigns tab in Blogger dashboard links to Adwords making it easier to create ads .
• You may create and add HTML site map static page to your blogger BlogSpot blogs using Blogger JSON Feed API which helps both website live visitors as well as Search Engine bots.

Blogger on mobile devices

Blogger has launched mobile applications for users with mobile devices. Users can post and edit blogs, and also share photos and links on Blogger through their mobile devices. Not only advanced mobile devices, such as smartphones, are being considered, since users can also post blogs via traditional cell phones by SMS and MMS.

The major two mobile operating systems that Blogger focuses on are Android and iOS. Blogger allow users to edit blogs anywhere through the app and either publish the blogs or save them as drafts. Quick navigation from posts and drafts is accessible from a list. Users can attach photos by taking a picture with a Blogger app or selecting pictures from their photo galleries. Sharing current locations on posts is also possible by tabbing My Location bar and adding locations. Users can also share photos and links directly to Blogger. 

Blogger also provides dynamic mobile views for the blogging compatibility with mobile devices and smart phones.They enhance the readability accuracy on these smart devices.But still editing your blog on the blogger app remains an open issue for the users.

BLOGGER and HISTORY Part I

Written by: Admin

Share Impression SEO, Insurance, Schoolarsip, All Update Updated at: April 03, 2016

BLOGGER  and History

On August 23, 1999, Blogger was launched by Pyra Labs. As one of the earliest dedicated blog-publishing tools, it is credited for helping popularize the format. In February 2003, Pyra Labs was acquired by Google under undisclosed terms. The acquisition allowed premium features (for which Pyra had charged) to become free. In October 2004, Pyra Labs' co-founder, Evan Williams, left Google. In 2004, Google purchased Picasa; it integrated Picasa and its photo sharing utility Hello into Blogger, allowing users to post photos to their blogs.

On May 9, 2004, Blogger introduced a major redesign, adding features such as web standards-compliant templates, individual archive pages for posts, comments, and posting by email. On August 14, 2006, Blogger launched its latest version in beta, codenamed "Invader", alongside the gold release. This migrated users to Google servers and had some new features, including interface language in French, Italian, German and Spanish.^[8] In December 2006, this new version of Blogger was taken out of beta. By May 2007, Blogger had completely moved over to Google-operated servers. Blogger was ranked 16 on the list of top 50 domains in terms of number of unique visitors in 2007.

On February 24, 2015, Blogger announced it will no longer allow its users in late March to post sexually explicit content, unless the nudity on offer "substantial public benefit," for example in "artistic, educational, documentary, or scientific contexts."^[10] On February 28, 2015, accounting for severe backlash from long-term bloggers, Blogger reversed its decision on banning sexual content, going back to the previous policy that allowed explicit images and videos if the blog was marked as "adult".

Redesign

As part of the Blogger redesign in 2006, all blogs associated with a user's Google Account were migrated to Google servers. Blogger claims that the service is now more reliable because of the quality of the servers.

Along with the migration to Google servers, several new features were introduced, including label organization, a drag-and-drop template editing interface, reading permissions (to create private blogs) and new Web feed options. Furthermore, blogs are updated dynamically, as opposed to rewriting HTML files.

In a version of the service called Blogger in Draft, new features are tested before being released to all users. New features are discussed in the service's official blog. In September 2009, Google introduced new features into Blogger as part of its tenth anniversary celebration. The features included a new interface for post editing, improved image handling, Raw HTML Conversion, and other Google Docs-based implementations, including:

ü  Adding location to posts via geotagging.

ü  Post time-stamping at publication, not at original creation.

ü  Vertical re-sizing of the post editor. The size is saved in a per-user, per-blog preference.

ü  Link editing in compose mode.

ü  ull Safari 3 support and fidelity on both Windows and Mac OS.

ü  New Preview dialog that shows posts in a width and font size approximating what is seen in the published view.

ü  Placeholder image for tags so that embeds are movable in compose mode.

ü  New toolbar with Google aesthetics, faster loading time, and "undo" and "redo" buttons. Also added was the full justification button, a strike-through button, and an expanded color palette.

In 2010, Blogger introduced new templates and redesigned its website. The new post editor was criticized for being less reliable than its predecessor.

Available languages

Blogger is available in these languages: Arabic, Bengali, Bulgarian, Catalan, Chinese (Simplified), Chinese (Traditional), Croatian, Czech, Danish, Dutch, English, Filipino, Finnish, French, German, Greek, Gujarati, Hebrew, Hindi, Hungarian, Indonesian, Italian, Japanese, Kannada, Korean, Latvian, Lithuanian, Malay, Malayalam, Marathi, Norwegian, Oriya, Persian, Polish, Portuguese (Brazil), Portuguese (Portugal), Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Tamil, Telugu, Thai, Turkish, Ukrainian, Urdu Vietnamese. Nepali, Farashi.Bemba,Tonga,Tumbuka and Cewa. wikipedia.org

Country-specific blogger addresses

Starting in February 2013, Blogger began integrating user blogs with multiple country-specific URLs. For example, exampleuserblogname.blogspot.com would be automatically redirected to exampleuserblogname.blogspot.ca in Canada, exampleuserblogname.blogspot.co.uk in the United Kingdom. Blogger explained that by doing this they could manage the blog content more locally so if there was any objectionable material that violated a particular country's laws they could remove and block access to that blog for that country through the assigned ccTLD while retaining access through other ccTLD addresses and the default Blogspot.com URL. However it should be noted that if a blog using a country-specific URL was removed it is still technically possible to still access the blog through Google's No Country Redirect override by entering the URL using the regular Blogspot.com address and adding /ncr after the .com. Continues BLOGGER  and HISTORY (II)

CARA MEMBUAT MENU NAVIGASI

Written by: Admin

Share Impression SEO, Insurance, Schoolarsip, All Update Updated at: March 30, 2016

CARA MEMBUAT MENU NAVIGASI PADA BLOG ATAU WEBSITE atau Dikenal dengan MENU BAR

Langkah-langkahnya sebagai berikut:

klik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {

  height:0px; visibility: hidden; display: none;

}

PENTING

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin>
.bilah-menu-atas {

  width: 100%;

  min-width: 960px;

  position: fixed;

  top: 0px;

  left: 0px;

  right: 0px;

  height: 27px;

  font-size: 13px;

  z-index: 99;

  white-space: nowrap;

  background-color: #336699;

  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);

  box-shadow: 0px 2px 0px rgb(14, 90, 140);

  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}

.kolom-utama {

  -moz-transition: all 0.2s linear 0s;

  width: 960px;

  height: auto;

  margin: 0px auto;

}

.kolom-menu {

  width: 521px;

  height: auto;

  margin: 0px 0px 0px -41px;

  float: left;

  display: inline;

}

.kolom-menu ul {

  height: auto;

  margin-top: 0px;

}

.kolom-menu ul li {

  float: left;

  position: relative;

  list-style: none outside none;

}

.kolom-menu ul li:first-child {

  border-left: 1px solid rgba(30, 30, 30, 0.125);

}

.kolom-menu ul li a {

  color: #ffffff;

  font-weight: bold;

  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);

  text-decoration: none;

  display: inline-block;

  padding-top: 5px;

  padding-right: 10px;

  padding-bottom: 5px;

  padding-left: 10px;

  position: relative;

  border-right: 1px solid rgba(30, 30, 30, 0.125);

  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);

}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {

  background-color: rgba(255, 255, 255, 0.125);

}

Baca Juga : Cara Mengatasi Deskripsi Singkat Meta Pada Webmaster tools

PENTING :

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>

  <div class='kolom-utama'>

    <div class='kolom-menu'>

      <ul>

        <li><a href='http://getakai.blogspot.co.id/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-iCk3b0qgt568PzPJoR7xSVKM6IX7IGGVvg0Sa5kBt0APtPKfT3-xvWQh0Ibf0nTXkAjl8p-27IT7k0Puv5c1j85Klyk5AEVdWXAl8IqosqhWph1GG_8b-3KItf3iCgVG6VtmAA_GLIY/s800/Beranda.png' width='20px'/></a></li>

        <li><a href='URL'>Menu Kiri 1</a></li>

        <li><a href='URL'>Menu Kiri 2</a></li>

      </ul>

    </div>

    <div class='kolom-menu'>

      <ul style='float: right'>

        <li><a href='URL'>Menu Kanan 1</a></li>

        <li><a href='URL'>Menu Kanan 2</a></li>

      </ul>

    </div>

  </div>

</div>

Keterangan:

Ganti http://getakai.blogspot.co.id/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga materi ini bermanfaat bagi semua, dan lanjutan materinya akan dibahas dalam materi selanjutnya, silakan buka label  Tutorial   untuk melihat lainnya,  mengupas tuntas belajar mudah, dan bagi yang ingin ditanyakan silakan berkomentar dibawah atau kotak admin untuk menyempurnakan tulisan. (berbagai Sumber)

Cara Mengatasi Deskripsi Singkat Meta Pada Webmaster tools

Written by: Admin

Share Impression SEO, Insurance, Schoolarsip, All Update Updated at: March 27, 2016

Optimasi pada blog memang jadi tantangan bagi webmaster atau pemilik blog dikarenakan optimasi akan membuat blog yang dilakukan akan membuahkan hasil yang sangat bagus terutama di search engine atau mesin pencari seperti google. Blog akan menjadi gampang ditemui oleh pengunjung dan biasanya akan membuat blog semakin terdepan dihalaman satu google. salah satu pilihan bari para blogging dalam membuat blog adalah ingin blog nya bisa masuk halaman pertama google itu sendiri adalah karena jika blog sudah semakin terdepan di search engin akan sangat mudah dalam menghasilkan uang dan dengan mudah untuk mempromosikan suatu produk ke khalayak umum.

Pada pembahasan kali ini akan dibahas tentang deskripsi singkat meta pada webmaster tools kalau dalam bahasa inggris nya adalah short meta descriptions. Short meta descriptions ini adalah salah satu menu yang disediakan oleh google webmaster tools agar para webmaster atau sipemilik blog lebih mengutamakan kesehatan pada blognya. Menu deskripsi singkat meta bisa di akses dengan pertama kali nya adalah masuk ke halaman depan webmaster lalu pilih salah satu blog yang ingin di pilih jika di dalam webmaster tools tersebut anda memiliki lebih dari satu blog. Jika sudah terpilih blog atau website yang kita pilih, lalu lihat dan pilih pada menu Search Appearance atau dalam bahasa indonesianya adalah tampilan penelusuran lalu pilih menu HTML Improvements dengan bahasa indonesianya adalah penyempurnaan html. Di menu tersebut akan ditampilkan kesalahan-kesalahan pada blog kita agar lebih teroptimasi di mesin telusur google.

Salah satu yang akan kita bahas dalam artikel ini adalah tentang masalah Short Meta Descriptions. Apa itu short meta descriptions pada webmaster tools? Short meta descriptions kalau dalam bahasa indonesianya adalah deskripsi singkat meta. Lebih jelasnya adalah deskripsi atau keterangan tentang blog atau suatu website yang akan muncul di penelusuran seperti google. Dengan adanya keterangan pada pada blog akan lebih menarik perhatian bagi para pencari informasi di google untuk lebih memilih blog yang kita buat.

Jika blog kita terdapat kesalahan dalam short meta descriptions akan diberitahu atau dimunculkan lewat laporan webmaster ini dengan cara yang sudah kita bahas diatas. Kalau tidak ada muncul berarti blog kita tidak memiliki kesalahan yang serius. Short meta descriptions ini akan timbul jika dalam memasukan deskripsi pada blog terlalu sedikit atau terlalu singkat. Karena menurut google jika deskripsi terlalu sedikit atau singkat tidak akan akurat dalam memberikan informasi kepada pencari informasi. Dan muncul juga ketika dalam membuat artikel kita terlalu sedikit dalam memasukan deskripsi penelusuran yang disediakan oleh blogger jika blog yang kita kelola adalah dengan menggunakan fasiltas gratis yang disediakan google yaitu blogger atau blogspot.

Baca Juga : KODE WARNA HEX

Ada dua solusi bagi pengguna blogger atau blogspot cara mengatasinya. Yang  pertama sekali  dengan menonaktifkan menu ini karena menu ini hanyalah menu tambahan jika blog ingin lebih menarik perhatian para pencari informasi di internet. Menurut penulis dengan tidak menggunakan menu ini artikel atau blog yang kita kelola akan dengan sendirinya teroptimasi karena dengan artikel yang ada didalam blog saja sudah cukup untuk mewakilinya. Jika dalam membuat artikel kita sudah pas dengan menentukan kata kunci yang pas pula. Dan cara yang kedua adalah dengan memasukan deskripsi penelusuran di blog dengan tidak sedikit. Dengan memberikan deskripsi atau keterangan pada artikel atau blog akan membuat para pencari informasi tertarik untuk langsung mengklik blog kita yang tampil di hasil penelusurannya. Setelah melakukan hal diatas, silahkan lihat di google webmaster kira-kira seminggu setelah membuat perubahan pada blog.

Semoga materi ini bermanfaat bagi semua, dan lanjutan materinya akan dibahas dalam materi selanjutnya, silakan buka label  Tutorial   untuk melihat lainnya,  mengupas tuntas belajar mudah, dan bagi yang ingin ditanyakan silakan berkomentar dibawah atau kotak admin untuk menyempurnakan tulisan. 

KODE WARNA HEX

Written by: Admin

Share Impression SEO, Insurance, Schoolarsip, All Update Updated at: March 25, 2016

Buat Kamu yang ingin membuat Blog warna warni, atau mewarnai blog atau web, pasti memerlukan warna yang beragam, nah disini kita akan membagikan kode warna yang bisa diterapkan daam blog atau web kita ,.. silakan di copy.

KODE WARNA HEX
KODE HEX:#ffffff NAMA WARNA: PUTIH , Kode Hex, Nama Warna: #F0F8FF Aliceblue
Kode Hex, Nama Warna: #FAEBD7 Antiquewhite , Kode Hex, Nama Warna: #00FFFF Aqua
Kode Hex, Nama Warna: #7FFFD4 Aquamarine, Kode Hex, Nama Warna: #F0FFFF Azure
Kode Hex, Nama Warna: #F5F5DC Beige , Kode Hex, Nama Warna: #FFE4C4 Bisque
Kode Hex, Nama Warna: #000000 Black ,  Kode Hex, Nama Warna: #FFEBCD Blanchedalmond
Kode Hex, Nama Warna: #0000FF Blue , Kode Hex, Nama Warna: #8A2BE2 Blueviolet
Kode Hex, Nama Warna: #A52A2A Brown, Kode Hex, Nama Warna: #DEB887 Burlywood

Kode Hex, Nama Warna: #5F9EAD Cadetblue, Kode Hex, Nama Warna: #7FFF00 Chartreuse
Kode Hex, Nama Warna: #D2691E Chocolate, Kode Hex, Nama Warna: #FF7F50 Coral
Kode Hex, Nama Warna: #64950 Cornflowerblue , Kode Hex, Nama Warna: #FFF8DC Cornsilk

Kode Hex, Nama Warna: #DC143C Crimson, Kode Hex, Nama Warna: #00FFFF Cyan
Kode Hex, Nama Warna: #00008B Darkblue, Kode Hex, Nama Warna: #008B8B Darkcyan
Kode Hex, Nama Warna: #B8860B Darkgoldenrod , Kode Hex, Nama Warna: #A9A9A9 Darkgray
Kode Hex, Nama Warna: #006400 Darkgreen,  Kode Hex, Nama Warna: #8B008B Darkmagenta
Kode Hex, Nama Warna: #BDB76B Darkkhaki, Kode Hex, Nama Warna: #556B2F Darkolivegreen
Kode Hex, Nama Warna: #FF8C00 Darkorange,  Kode Hex, Nama Warna: #9932CC Darkorchid
Kode Hex, Nama Warna: #8B0000 Darkred,  Kode Hex, Nama Warna: #E9967A Darksalmon

Kode Hex, Nama Warna: #8FBC8B Darkseagreen, Kode Hex, Nama Warna: #483D8B Darkslateblue
Kode Hex, Nama Warna: #2F4F4F Darkslategray, Kode Hex, Nama Warna: #00CED1 Darkturquoise
Kode Hex, Nama Warna: #9400D3 Darkviolet, Kode Hex, Nama Warna: #FF1493 Deeppink
Kode Hex, Nama Warna: #00BFFF Deepskyblue,  Kode Hex, Nama Warna: #696969 Dimgray
Kode Hex, Nama Warna: #1E90FF Dodgerblue,  Kode Hex, Nama Warna: #B22222 Firebrick
Kode Hex, Nama Warna: #FFFAF0 Floralwhite,  Kode Hex, Nama Warna: #228B22 Forestgreen
Kode Hex, Nama Warna: #FF00FF Fuchsia, Kode Hex, Nama Warna: #DCDCDC Gainsboro
Kode Hex, Nama Warna: #F8F8FF Ghostwhite, Kode Hex, Nama Warna: #FFD700 Gold
Kode Hex, Nama Warna: #DAA520 Goldenrod,  Kode Hex, Nama Warna: #808080 Gray
Kode Hex, Nama Warna: #008000 Green,  Kode Hex, Nama Warna: #ADFF2F Greenyellow

Kode Hex, Nama Warna: #F0FFF0 Honeydew
Kode Hex, Nama Warna: #FF69B4 Hotpink
Kode Hex, Nama Warna: #CD5C5C Indianred
Kode Hex, Nama Warna: #4B0082 Indigo
Kode Hex, Nama Warna: #FFFFF0 Ivory
Kode Hex, Nama Warna: #F0E68C Khaki
Kode Hex, Nama Warna: #E6E6FA Lavender
Kode Hex, Nama Warna: #FFF0F5 Lavenderblush
Kode Hex, Nama Warna: #7CFC00 Lawngreen
Kode Hex, Nama Warna: #FFFACD Lemonchiffon
Kode Hex, Nama Warna: #ADE8E6 Lightblue
Kode Hex, Nama Warna: #F08080 Lightcoral
Kode Hex, Nama Warna: #E0FFFF Lightcyan
Kode Hex, Nama Warna: #FAFAD2 Lightgoldenrodyellow
Kode Hex, Nama Warna: #90EE90 Lightgreen
Kode Hex, Nama Warna: #D3D3D3 Lightgray
Kode Hex, Nama Warna: #FFB6C1 Lightpink

Kode Hex, Nama Warna: #FFA072 Lightsalmon
Kode Hex, Nama Warna: #20B2AA Lightseagreen
Kode Hex, Nama Warna: #87CEFA Lightskyblue
Kode Hex, Nama Warna: #778899 Lightslategray
Kode Hex, Nama Warna: #B0C4DE Lightsteelblue
Kode Hex, Nama Warna: #FFFFE0 Lightyellow
Kode Hex, Nama Warna: #00FF00 Lime
Kode Hex, Nama Warna: #32CD32 Limegreen
Kode Hex, Nama Warna: #FAF0E6 Linen
Kode Hex, Nama Warna: #FF00FF Magenta
Kode Hex, Nama Warna: #800000 Maroon
Kode Hex, Nama Warna: #66CDAA Mediumaquamarine
Kode Hex, Nama Warna: #0000CD Mediumblue
Kode Hex, Nama Warna: #BA55D3 Mediumorchid
Kode Hex, Nama Warna: #9370DB Mediumpurple
Kode Hex, Nama Warna: #3CB371 Mediumseagreen
Kode Hex, Nama Warna: #7B68EE Mediumslateblue
Kode Hex, Nama Warna: #00FA9A Mediumspringgreen
Kode Hex, Nama Warna: #48D1CC Mediumturquoise
Kode Hex, Nama Warna: #C71585 Mediumvioletred
Kode Hex, Nama Warna: #191970 Midnightblue
Kode Hex, Nama Warna: #F5FFFA Mintcream
Kode Hex, Nama Warna: #FFE4E1 Mistyrose
Kode Hex, Nama Warna: #FFE4E1 Moccasin
Kode Hex, Nama Warna: #FFDEAD Navajowhite
Kode Hex, Nama Warna: #000080 Navy
Kode Hex, Nama Warna: #FDF5E6 Oldlace
Kode Hex, Nama Warna: #808000 Olive

Kode Hex, Nama Warna: #6B8E23 Olivedrab
Kode Hex, Nama Warna: #FFA500 Orange
Kode Hex, Nama Warna: #FF1000 Orangered
Kode Hex, Nama Warna: #DA70D6 Orchid
Kode Hex, Nama Warna: #EEE8AA Palegoldenrod
Kode Hex, Nama Warna: #98FB98 Palgreen
Kode Hex, Nama Warna: #AFEEEE Paleturquoise
Kode Hex, Nama Warna: #DB7093 Palevioletred
Kode Hex, Nama Warna: #FFEFD5 Papayawhip
Kode Hex, Nama Warna: #FFDAB9 Peachpuff
Kode Hex, Nama Warna: #CD853F Peru
Kode Hex, Nama Warna: #FFC0CB Pink
Kode Hex, Nama Warna: #DDA0DD Plum
Kode Hex, Nama Warna: #B0E0E6 Powderblue
Kode Hex, Nama Warna: #800080 Purple
Kode Hex, Nama Warna: #FF0000 Red
Kode Hex, Nama Warna: #BC8F8F Rosybrown
Kode Hex, Nama Warna: #4169E1 Royalblue
Kode Hex, Nama Warna: #8B4513 Saddlebrown
Kode Hex, Nama Warna: #FA8072 Salmon
Kode Hex, Nama Warna: #F4A460 Sandybrown
Kode Hex, Nama Warna: #2E8B57 Seagreen
Kode Hex, Nama Warna: #FFF5EE Seashell
Kode Hex, Nama Warna: #A0522D Sienna
Kode Hex, Nama Warna: #C0C0C0 Silver
Kode Hex, Nama Warna: #87CEEB Skyblue
Kode Hex, Nama Warna: #708090 Slategray

Kode Hex, Nama Warna: #FFFAFA Snow
Kode Hex, Nama Warna: #00FF7F Springgreen
Kode Hex, Nama Warna: #4682B4 Steelblue
Kode Hex, Nama Warna: #D2B48C Tan
Kode Hex, Nama Warna: #008080 Teal
Kode Hex, Nama Warna: #D8BFD8 Thistle
Kode Hex, Nama Warna: #FF6347 Tomato
Kode Hex, Nama Warna: #40E0D0 Turquoise
Kode Hex, Nama Warna: #EE82EE Violet
Kode Hex, Nama Warna: #F5DEB3 Wheat
Kode Hex, Nama Warna: #FFFFFF White
Kode Hex, Nama Warna: #F5F5F5 Whitesmoke
Kode Hex, Nama Warna: #FFFF00 Yellow
Kode Hex, Nama Warna: #9ACD32 Yellowgreen

Semoga materi ini bermanfaat bagi semua, dan lanjutan materinya akan dibahas dalam materi selanjutnya, silakan buka label  Tutorial   untuk melihat lainnya,  mengupas tuntas belajar mudah, dan bagi yang ingin ditanyakan silakan berkomentar dibawah atau kotak admin untuk menyempurnakan tulisan.

Cara memasang Widget Icon Sosial di Blog

Written by: Admin

Share Impression SEO, Insurance, Schoolarsip, All Update Updated at: March 24, 2016

Icon Sosial  menjadi salah satu Widget yang sangat penting dalam blog atau Web. Berdasarkan ungkapan para ahli, fungsi link akun media sosial yang dipasang di blog antara lain "attract new readers and engage with regulars", menarik pembaca baru dan "merawat" pengunjung setia.

Disini kita coba membahasa masalah, bagaimana cara memberikan label icon sosial dalam blog, mungkin ada beberapa teman kita menanyakan masalah yang sama, berikut ini cara  menambah, atau memasang widget icon/link media sosial di sidebar blog yang juga berfungsi menambah follower, liker, dan teman. dan menurut para ahli, akun media sosial, selain berfungsi menyebarkan posting blog, juga bisa menjadi sumber "backlink" atau "outbond link", yakni tautan dari situs lain ke blog kita.

Backlink adalah salah satu yang diperhatikan oleh mesin pencari Google untuk menentukan peringkat blog kita di halaman hasil pencarian (SERP).

Perlu diingat bahwa :

1. Logo / icon harus menambahkan icon / gambar seperti diatas dengan cara ambil logonya dan bisa       kita masukkan ke pos atau laman blog baru untuk mengambil alamat gambar 

    contoh : gambar Youtube seperti diatas kita ambil saja         

    https://www.youtube.com/channel/UCMWjJvY13qWMQOP3ZaH0EDA 

   dari semua yang keluar di HTML pos atau laman ambil saja seperti diatas biasanya tengah.  

    dan langsung di copy ke dalam link yang saya buat di bawah ini;

2. untu alamat url-nya diambil punya url sendiri yang telah dibuat sesuai kebutuhan. jika belum

   dibuat lihat cara membuatnya. dalam blog ini. atau bisa tanyakan di komentar dibawah, 

    ataupun kontak admin

untuk menghemat waktu bisa juga kita paste yang saya berikan dibawah ini:

langkah-langkah membuat Icon Sosial Sebagai berikut:

Cara Memasang Widget Ikon Media Sosial :

1. Login ke Blogger.

2. Klik "Template"  

3. Klik  "Edit HTML"

    Temukan ]]></b:skin> atau bisa juga (Ctrl+F) dan cari ]]></b:skin> 

    selanjutnya silakan Copy paste ling dibawah ini di atasnya

#top-social-profiles{height:42px;text-align:right}#top-social-profiles img{margin:0 6px 0 0px !important}

#top-social-profiles img:hover{opacity:0.8}

#top-social-profiles .widget-container{background:none;padding:0;border:0}

.social-profiles-widget img{margin:0 6px 0 0}

.social-profiles-widget img:hover{opacity:0.8}

4. kemudian Save Template!

                            Baca Juga : Berita , Blogger

    langkah selanjutnya kita ke tampilan layout blog,

5. Klik "Layout" dan klik salah satu  "Add a Gadget" dimana kita ingin menambahkan icon sosial

     kemudian klik  "HTML/JavaScript" yang ada dalam kotak Gadge tadi yang dibuka.

6. silakan kopy paste kode  berikut ini di kolom "content". untuk judulnya biarkan kosong, (y)

"<div id='center-social-profiles'>

<ul class='widget-container'>

<li class='social-profiles-widget'>

<a href='https://twitter.com/mukhzi/' target='_blank'><img alt='Twitter' src='https://lh6.googleusercontent.com/-40NMu9YKlek/VJ66NcYZy3I/AAAAAAAAI5Y/9Yn9ZtLQb18/s32-no/twitter.png' title='Twitter'/></a>

<a href='https://www.facebook.com/getakai.co.id/' target='_blank'><img alt='Facebook' src='https://lh6.googleusercontent.com/-DDBzF64PrRQ/VJ66Llwc7uI/AAAAAAAAI44/9cZaAsCSBOM/s32-no/facebook.png' title='Facebook'/></a>

<a href='https://plus.google.com/111060712782439145108/' target='_blank'><img alt='Google Plus' src='https://lh4.googleusercontent.com/-87tOc499YgM/VJ66MM6smeI/AAAAAAAAI48/CpqKtTJyhSs/s32-no/google.png' title='Google Plus'/></a>

<a href='https://id.linkedin.com/in/mukhzi-ibr-a74665102/' target='_blank'><img alt='LinkedIn' src='https://lh6.googleusercontent.com/-wsMOZqtgZsI/VJ_Wi7YStbI/AAAAAAAAI9Y/xWVrEivmlZY/s32-no/linkedin.png' title='LinkedIn'/></a>

<a href='http://www.pinterest.com/mukhzi/' target='_blank'><img alt='Pinterest' src='https://lh5.googleusercontent.com/-rQI0ZCqxvX0/VJ_WjcQ9QII/AAAAAAAAI9g/0XajOPBuXKI/s32-no/pinterest.png' title='Pinterest'/></a>

<a href='http://feeds.feedburner.com/Getakai/' target='_blank'><img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgitLyc7-ccPjrZlA6y4pQbJL-U-TNomKSDOC5Aw3eZPllXdoXRafraVLHAIneE7_uke5zsAzml1wNKRyc3qdM5N6howQWVYnc06plypuRWBm7lx0EIGqs9Iq7xtNiHLmNIBTmwiNDYXWiM/s32/feed+rss.png' title='Feed Rss'/></a>

<a href='https://www.youtube.com/channel/UCMWjJvY13qWMQOP3ZaH0EDA' target='_blank'><img alt='youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv8y7gqi0KRxg0710XPktAMay01WXArX_zK_vwZl9AYSepqPuPn7O3pjVDD5RYz-NWRLVUnftddK1zB81qbN72QEIpNenGaROAsvbZIISIU8AGaYL4w2WW89Ix_u_OaWyKIYWIFOEF_oiu/s60/youtube.png' title='youtube'/></a>

</li>

</ul>

</div>"

PENTING,....

Silakan ganti link yang berwarna hijau dengan link media sosial yang anda buat tadi,..

7. Klik save , dan silakan diklik icon sosial yang dibuat tadi, (apakah, atau maukah, atau apapun itu,..     bisa tampil atau tidak)

 jika Icon tadi pada saat diklik tidak mau keluar maka kesalahan ada pada link yang warna hijau, dan

 jika icon atau gambar tadi tidak muncul, yang pasti (src) gambarnya salah silakan diganti atau pakai saja yang saya buat diatas cuma ganti link saja kok, kok, ayam.

Semoga materi ini bermanfaat bagi semua, dan lanjutan materinya akan dibahas dalam materi selanjutnya, silakan buka label  Tutorial   untuk melihat lainnya,  mengupas tuntas belajar mudah, dan bagi yang ingin ditanyakan silakan berkomentar dibawah atau kotak admin untuk menyempurnakan tulisan.