Trik Widget Menjadi Satu

Trik Kali ini sederhana yang berupa membuat tampilan widget dalam satu tempat kelihatan rapi. Dengan trik ini teman-teman bisa mengatur tatanan widget teman-teman agar tidak kelihatan tidak rapi. 



Sebagai contohnya teman-teman bisa menengok sidebar blog ini, tepat di bagian STATS DAN DIREKTORI. Pada bagian tersebut saya menggunakan jasa penambahan elemen HTML/Java Script, (Bagaimana mengatur HTML) sering terjadi ketika kita ingin menyimpan banyak widget ke dalam satu tempat dan hasil tampilannya kelihatan tidak rapi. Namun, bagi teman-teman yang ingin tampilan widgetnya tersebut kelihatan rapi, tidak perlu kawatir karena kita akan membahas cara agar tampilannya tidak rusak lagi. 

perlu diingat - mungkin sebagai catatan aja, trik ini bagus bagi teman-teman yang memiliki sidebar maupun kolom yang ada di dalam blognya yang memiliki ukuran yang relarif kecil, dan juga hasil dari trik yang ingin kita bahas akan menjadikan setiap widget menempati spasi baru, sehingga inilah yang membuat tampilan widget-widget kita rapi. 

Langkah awal yang perlu anda lakukan tentunya menyediakan terlebih dahulu kode-kode widget yang ingin disimpan dalam satu tempat => Selanjutnya masuklah ke "tambah gadget"/add gadgetdan pilihlah HTML/Java Script. Yang perlu anda lakukan agar tampilan semua widget anda rapi yaitu dengan cara mengakhiri setiap kode <br/>  widget anda dengan kode dan simpanlah kode widget lain dibawahnya lalu jangan lupa diakhiri dengan kode <br/>  lagi. Jika anda ingin menambah widget lain, silahkan disimpan tepat di bagian bawah widget tadi dan seterusnya.

Sebagai contoh, agar lebih jelas - berikut formatnya: 
KODE WIDGET PERTAMA DI SINI<br/>
LALU KODE WIDGET KE DUA DI SINI<br/>
LALU KODE WIDGET KE TIGA DI SINI<br/>
LALU INI KODE WIDGET TERAKHIR (tanpa <br/>)

jika masih ada kode widget lain yang ingin ditambahkan di bagian bawah, silahkan tambah kode <br/> di bagian akhir kode widget tersebut) Nah, begitu aja. Simpel, gampang, mudah, dan tidak susah bukan?

PENTING,

Jika teman-teman ingin agar tampilan widget-widgetnya rapi - khususunya pada bagian footer/bawah blog, maka jadikan saja rataan semua widget menjadi "tengah" alias "center". Untuk caranya gampang-gampang aja, apit saja semua widget yang anda punya dengan kode <center> dan berikutlah formatnya:
<center> DI SINI KODE WIDGET2 ANDA<center> 

Trik Selesai semoga bermanfaat, jangan lupa share jika bermanfaat dan like jika suka.

Cara menambah widget Header menjadi dua (2) 

Widget yang terletak tepat disamping kanan header, sehingga header menjadi 2 bagian. dengan menambahakan widget disamping header, kita dapat menghemat penggunaan halaman blog dan juga bisa membuat tampilan blog semakin menarik. Widget disamping header bisa kita tambahkan dengan iklan, tombol search atau widget yang lainnya sesuai dengan yang kita inginkan, Untuk lebih jelasnya silakan lihat contoh gambar dibawah ini:



Contoh Header menjadi dua



Seperti gambar diatas, ada 2 widget. 1 widget header yang bertuliskan judul blog, dan yang kedua widget kosong, yang bisa kita isi dengan gadget apa saja. Widget Header akan di perkecil lebarnya, agar widget buatan dapat ditempatkan disampingnya, dengan ukuran yang disesuaikan dengan lebar halaman blog. Header yang awalnya hanya ada 1 widget, dibuat menjadi 2 bagian, header kiri dan kanan. Untuk lebih jelasnya, Ikuti langkah-langkah dibawah ini.

  • Login ke blogger. Dari halaman dasbord pilih pengaturan Template.
  • Selanjutnya Klik edit HTML, dan cari kode .header-outer { . selengkapnya persis seperti dibawah ini.



.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

Ganti semua kode diatas dengan kode dibawah ini.

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;_background-image: none;min-height: 104px;}
#header {
width: 40%;
margin-right: 10px;float: left; }
#headerkanan {
float: right;
width: 54%;
margin: 20px 10px 5px 10px;
padding: 2px;}
#headerkanan .widget {margin: 3px;}

  • Penting: 



.header-outer { pada bagian height: 104px berfungsi untuk mengatur tinggi  header
 #header { pada bagian width: 40%; berfungsi untuk lebar header kiri.
#headerkanan { pada bagian width: 54%; berfungsi untuk lebar header kanan, dan 
margin: 20px 10px 5px 10px; berfungsi untuk posisi atas-bawah header kanan.

  • Kemudian. Cari kode <div class='region-inner header-inner'> dan tambahkan kode berikut disamping kanannya.



<b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

  • Kemudian kodenya akan  menjadi seperti dibawah ini.


<div class='region-inner header-inner'><b:section class='headerkanan' id='headerkanan' maxwidgets='1' showaddelement='yes'></b:section>



  • Selanjutnya klik save tamplate. Silakan di refres dashbourd blog dan lihat hasilnya.
Semoga bermanfaat dan sebelum anda menutup Artikel ini, silahkan berikan masukannya di kolom komentar. Apa kekurangan dan kelebihan Artikel ini, supaya penulis bisa terus belajar untuk memberikan yang terbaik. Anda juga bisa bertanya jika ada beberapa penjelasan yang masih belum dipahami. Jika anda merasa artikel ini bermanfaat, jangan lupa untuk mengklik tombol share. Sekali lagi belajar mudah bersama bimbing dong, tutorial ini lebih lengkap di SINI

Iklan atas layar bagian bawah

Dalam menampilkan iklan kita sering melihat tataletak iklan itu sendiri baik di dalam artikel maupun bagian samping atau bawah artikel dan salah satunya cukup efektif kita letakkan iklan diatas layar bagian bawah sehingga pengguna atau pengunjung bisa menutup iklan kita jika mengganggu.



untuk banner iklan ini memiliki sebuah tombol close, dimana yang jika kita klik tombol closenya sekali maka iklan nya akan menghilang, iklan tersebut terletak di bagian bawah blog.

Langkah-langkah membuatnya sebagai berikut:

  1. Silakan login blog seprti biasa
  2. Klik menun TATA LETAK ~ klik TAMBAHKAN GADGET 
  3. Silakan copy kode yang ada didalam kotak dibawah ini, kebetulan juga dari ajax
  4. Pastekan kode diatas kedalam Widget Blog yang dibuka tadi
  5. Klik Save, dan lihat hasilnya.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type="text/css">
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style="height: 0px;">
</div>
<div align="center" id="btm_banner" style="height: 50px; z-index: 9999;">
<div style="height: 6px; text-align: right; width: 320px;">
<img id="closed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhChASFoBaSGFTpRWYi5ca360E2AprzA3BufT6XePm26iJiiirBWRlGWA4xTJ8FYvB-AeTwmoyJHwGm1D4Nqa1fgh6oj-38S_aKS4Qi0ayczNmYCwpowdumm-ZruyHIFYLvuV1MlBsDF4XT/s1600/close-icon.png" /></div>
<div style="clear: both;">
</div>
<center>
<a href="URL IKLAN" target=" blank"><img src="URL GAMBAR" /></a>
</center>
</div>

Baca Juga : Tambah Widget header menjadi 2

PENTING

  • Warna hijau anda ganti dengan ukuran iklan anda
  • Warna biru anda ganti dengan URL ikalan / URL yang dituju
  • Warna merah diganti dengan URL gambar iklan
Semoga bermanfaat dan sebelum anda menutup Artikel ini, silahkan berikan masukannya di kolom komentar. Apa kekurangan dan kelebihan Artikel ini, supaya penulis bisa terus belajar untuk memberikan yang terbaik. Anda juga bisa bertanya jika ada beberapa penjelasan yang masih belum dipahami. Jika anda merasa artikel ini bermanfaat, jangan lupa untuk mengklik tombol share. Sekali lagi belajar mudah bersama bimbing dong.

Cara meringankan HTML dengan cara kompres




Blog atau website yang kita miliki supaya mempunyai kecepatan Loading yang Ringan dan ini akan memicu setiap pengunjung yang masuk ke halaman Blog/website Anda tidak kelamaan menunggu tampilan blog anda terbuka dengan sempurna. Terkadang kita juga suka bertanya-tanya apa sih yang membuat Blog/Website Loadingnya Lama?  salah satu Faktor penyebabnya ialah karena terlalu banyak kode-kode HTML yang di pasang di blog.

Baca Juga : Tambah Gadget di header

Sebagai gambaran saja untuk memulai melakukan kompres HTML

  1. Login dulu ke Blogger anda  
  2. Ke rancangan
  3. Edit HTML
  4.  Untuk berjaga-jaga, silakan download terlebih dahulu template anda
  5.  Silakan salin semua Kode HTML template,(gunakan Ctrl+A agar lebih cepat)
  6. Buka halaman salah satu dibaah ini :
  • http://www.textfixer.com/html/compress-html-compression.php
  • http://cssoptimiser.com 
  • http://mabblog.com/cssoptimizer/compress.html 
  • http://tools.arantius.com/css-compressor 
  • http://iceyboard.no-ip.org/projects/css_compressor 
  • http://www.cssdrive.com/index.php/main/csscompressor

perhatikan di bawah ini dan ikuti langkah-langkahnya simpan template (lihat perbedaanya) Semoga bermanfaat, Sebelum anda menutup Artikel ini, silahkan berikan masukannya di kolom komentar. Apa kekurangan dan kelebihan Artikel ini, supaya penulis bisa terus belajar untuk memberikan yang terbaik. Anda juga bisa bertanya jika ada beberapa penjelasan yang masih belum dipahami. Jika anda merasa artikel ini bermanfaat, jangan lupa untuk mengklik tombol share. Sekali lagi belajar mudah bersama bimbing dong

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. 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." 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. 

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. 

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 AJAXHTML5, 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.[22] 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. 

wikipedia.org
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
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)

Categories

Popular Posts