4 Perubahan Gres Editor Html Pada Blogger Template - New Improvements

Apakah Anda seorang blogger atau web developer yang suka menciptakan halaman web dan template? Jika sudah masuk ke pekerjaan ini, Anda tidak akan lepas dari Google Blogger gres saja memperbaharui Blogger Template Editor HTML dan menambahkan empat fitur gres untuk menciptakan pengalaman Anda lebih baik! Jika Anda yaitu blogger yang suka mengutak-atik template blog-nya, mungkin artikel saya kali ini sanggup berkhasiat untuk Anda. Mari kita periksa fitur barunya sekarang!

Blogger Template HTML Editor memungkinkan Anda mengedit arahan sumber situs web Anda dan men-tweaknya sesuai dengan impian Anda. Jika Anda tahu HTML, CSS, dan/ atau JavaScript, Anda sanggup sepenuhnya menyesuaikan dengan preferensi Anda. Langitpun menjadi akrab jikalau Anda tahu apa yang Anda lakukan. :)

Untuk menemukan HTML editor, masuklah ke dashboard Blogger Anda lalu bukalah blog yang ingin Anda edit templatenya. Dari dashboard Blog, klik opsi Template dari sidebar kiri dan lalu Anda akan menemukan tombol Edit HTML.

Apa Yang Baru Pada Template Editor?

Fitur-fitur gres yang berpusat lebih ke arah user-friendliness (atau lebih tepatnya programer-friendliness) dan bertujuan untuk meningkatkan produktivitas. Sebelumnya, Template HTML editor mempunyai tampilan yang dingin dan tidak user friendly serta terkesan sulit untuk melaksanakan pengeditan arahan template.

Mengedit template yaitu hal lain yang dilakukan oleh blogger selain mengedit postingan. Jika sebelumnya kita harus men-download arahan Template, mengeditnya di editor yang lebih nyaman (seperti Notepad++) lalu meng-uploadnya lagi ke Template blogger. Sekarang Anda tidak perlu melaksanakan hal itu lagi alasannya perubahan yang dilakukan Blogger semakin memudahkan Anda untuk melaksanakan kostumisasi arahan template Anda.

Blogger telah menciptakan editor HTML template menjadi jauh lebih nyaman dipakai dengan menghadirkan fitur-fitur berikut ini:

• Line Numbering - Sekarang Anda sanggup melihat nomor baris pada setiap baris sehingga jauh lebih gampang untuk menemukan kesalahan dan melacak arahan Anda.
• Syntax Highlighting - Sama menyerupai di editor arahan yang sudah canggih, kini Anda sanggup melihat syntax yang berwarna.

• Auto-Indentation - Fitur ini terlihat menyerupai paragraf yang masuk ke dalam kalimat. Kaprikornus fitur auto-indent menciptakan Anda tidak perlu menekan tombol Tab dan Spacebar alasannya fitur ini membantu untuk menciptakan arahan Anda lebih terorganisis dan Anda sanggup dengan gampang melacak arahan apa yang menjadi satu kesatuan. Sebagai contoh, Anda sanggup dengan gampang mengetahui apa yang ada di dalam tag div atau apa yang telah Anda masukkan ke dalamnya, dll. Anda akan melihat indentasi otomatis muncul saat Anda sedang menulis beberapa kode. Anda sanggup memakai pilihan Format Template untuk membersihkan seluruh indentation yang ada di template Anda.
• Code Folding - Saya suka dengan opsi ini. Dengan fitur ini Anda sanggup melipat arahan dan tidak perlu melihat serpihan arahan yang sangat banyak lagi. Anda sanggup menemukan fitur ini pada nomor baris yang terdapati simbol (►) panah hitam. Jika Anda klik simbol itu, Anda akan membuka lipatan arahan yang di dalamnya terdapat kode-kode yang sangat banyak. Dengan fitur ini, semuanya menjadi lebih sederhana.

• Jump to widget - Sekarang Anda mempunyai cara yang lebih cepat untuk melompat ke bab tertentu dari arahan di dalam template (kode yang dimiliki widget). Cukup klik pada tombol Jump to Widget di bab atas editor dan Anda sanggup melihat semua daftar widget yang ada. Klik salah satunya maka Anda akan dibawa ke masing-masing kode.

Fitur gres yang sangat menakjupkan sekali, semua dirubah oleh Blogger hanya alasannya ingin menciptakan penggunanya gampang dan puas dalam meng-edit arahan HTML Template blog Anda. Jika menyukai postingan ini jangan lupa bagikan dengan teman-teman Anda dengan cara mengklik tombol share di bawah ini. :)

Read More

Cara Menambahkan Widget 3 Kolom Footer Pada Blogger Anda

Apakah Anda yakni seorang blogger yang ingin mempunyai 3 kolom footer yang manis yang terpasang di blog Anda? Jika ya Anda tidak sendirian, kami selalu ada untuk menyebarkan sedikit yang kami ketahui kepada Anda secara gratis. Jika 3 kolom footer ini memang benar-benar Anda butuhkan maka Anda sanggup menambahkannya secara gampang dan sederhana pada blog Anda. Kami telah menyediakan kodenya untuk Anda semua, silahkan Anda terapkan dalam blog Anda semua dengan proses instalasi yang sangat sederhana.

Tapi sebelum kita melompat ke proses instalasi, aku ingin menjelaskan lebih lanjut perihal apa dan mengapa Anda perlu menginstal widget di footer blogger Anda. Pada awalnya dengan widget 3 kolom footer ini Anda sanggup menambahkan banyak gadget yang Anda inginkan, widget footer ini juga menciptakan blog Anda terlihat bagus dan professional. Itu sebabnya banyak blogger memakai widget ini di blog mereka.

Baiklah pribadi saja ikuti langkah-langkah di bawah ini untuk menambahkan widget 3 kolom footer di blog Anda.

Menambahkan 3 Kolom Footer di Blogger

• Login ke Dashboard blog Anda
• Pilih tab Template

• Backup dulu template Anda jikalau diperlukan
• Klik Edit HTML
• Kemudian cari arahan ]]></b:skin> (Gunakan Ctrl + F untuk memudahkan pencarian)
• Lalu letakkan arahan di bawah ini sempurna di atas kode ]]></b:skin> tadi

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

• Setelah itu cari arahan </body> dan letakkan arahan di bawah ini sempurna sebelum arahan </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

• Klik Save template kemudian masuk ke tab Layout - Gulir ke bawah dan Anda siap menambahkan gadget yang Anda inginkan di sana.

Pengaturan
Anda sanggup dengan gampang menyesuaikan tampilan dan warna dari widget footer ini. Saya telah menandai dan mewarnai bagian-bagian penting dalam arahan CSS di atas. Bacalah deskripsi di bawah ini dengan hati-hati untuk menyesuaikan widget 3 kolom ini sesuai impian Anda. Untuk mengetahui arahan warna, gunakanlah Kode Warna Generator milik kami.

• background:#333434; Gantilah 6 digit arahan warna pada cuilan ini untuk mengubah warna background widget.
• width: 960px; Ini yakni lebar widget. Jika Anda mau, Anda sanggup menyesuaikan nilai ini supaya lebarnya sesuai dengan lebar blog Anda.
• background:#fff dan width: 32%; Ini yakni warna background dan lebar tiga kolom widget yang ditambahkan.
• color:#0084ce; Ini yakni warna Title Heading
• font: bold 14px Arial, Tahoma, Verdana; Edit cuilan ini untuk mengganti ukuran font dan jenis font.
• border-bottom: 3px solid # 0084ce; Edit cuilan ini untuk mengubah ketebalan, style, dan warna border yang muncul di cuilan bawah Title Heading.
• border-bottom: 1px dotted # ccc; Edit cuilan ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.

Jika Anda merasa artikel ini berguna, silahkan bagikan artikel ini dengan teman-teman Anda baik melalui Facebook, Twitter, Google Plus dan lain sebagainya. Terimakasih semoga ini membantu..

Read More

Cara Menambahkan Plugin Facebook Recomendation Box Di Blogger

Apakah Anda ingin traffic website atau blog Anda meningkat? Tambahkan saja plugin activity feed di sidebar Anda. Plugin ini menampilkan posting dan juga merekomendasikan story gres yang disukai oleh pengunjung. Oleh sebab itu membangun keterlibatan sosial dan menarik pembaca untuk menggali ke dalam website Anda untuk mengetahui apa yang mereka sukai sangatlah penting. Jika Anda memakai Facebook recomendation kafe di situs Anda, maka Anda akan bahagia mengetahui bahwa plugin ini juga menampilkan rekomendasi dari orang-orang yang memberi like serta menampilkan aktifitas sosial yang dilakukan pada halaman Anda.

Mari tambahkan widget ini ke blog Anda hanya dalam beberapa langkah sederhana saja. Contohnya menyerupai gambar yang berada di potongan atas artikel ini.

Cara Memasang Facebook Recomendation Box di Blog
Panduan instalasinya sangat sederhana, silahkan ikuti langkah-langkah gampang berikut ini:

• Login ke Blogger Anda dan masuk ke Template
• Backup template Anda bila perlu
• Klik Edit HTML
• Catatan (Jika Anda pernah memasang Facebook like box atau Facebook comment box maka Anda tidak perlu memasukkan kode JavaScript SDK dan pribadi ke langkah berikutnya). Jika belum maka lanjutkan langkah berikut.
• Cari isyarat <body>
• Jika sudah ketemu maka letakkan kode JavaScript SDK berikut ini di bawah isyarat <body>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

• Simpan template Anda
• Sekarang basuk ke Layout
• Klik add a gadget dan pilih widget HTML/JavaScript
• Kemudian masukkan isyarat HTML/JavaScript di bawah ini di dalamnya

<div class="fb-activity" data-site="http://www.d-genera.blogspot.com" data-width="300" data-height="450" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>

Cara Kostumisasi

• Gantilah http://www.d-genera.blogspot.com dengan URL website/blog Anda dengan struktur: http://www.blog-anda.blogspot.com.
• Saya telah menetapkan lebar 300 pixel (300) dan tinggi 450 pixel (450). Silahkan sesuaikan dengan harapan Anda.
• Untuk menghilangkan garis batas biru di plugin, saya telah mengatur garis batas menjadi putih. Jika sidebar Anda mempunyai warna background yang berbeda, silahkan sesuaikan warnanya dengan mengedit potongan #ffffff. Tip: Gunakan Color Generator Tool.
• Lalu simpan widget Anda dan selesai. Silahkan periksa blog Anda maka widget recomendation box sudah muncul.

Menambahkan widget ini niscaya sangatlah gampang tetapi bila Anda mempunyai kesulitan, silahkan tanyakan di kotak komentar di bawah ini. Saya berharap dengan menambahkan plugin ini sanggup meningkatkan traffic blog Anda sehingga blog Anda menjadi ramai pengunjung. Mohon kritik dan sarannya...Terimakasih.

Read More

Cara Memasang Widget Recent Posts Dari Feedburner Di Blogger

Anda mungkin telah melihat widget recent post yang terpasang di sidebar beberapa blog tapi paling sering widget ini memakai aba-aba JavaScript sehingga akan meningkatkan waktu buka halaman website/ blog Anda. Kali ini saya akan menyebarkan tutorial bagaimana cara menambahkan widget Recent Post yang ditawarkan FeedBurner ke dalam blog Anda dengan rapi, menarik, unik, dan yang paling penting loading blog cepat.

Biarkan saya memberitahu Anda bahwa FeedBurner juga memakai JavaScript, tapi itu sudah diubahsuaikan saat dipasang di dalam blog Anda dan tidak memperberat loading blog alasannya ialah JavaScript ini tidak secara pribadi terhubung ke blog Anda. Jadi 50% dari waktu loading dibagi oleh FeedBurner.

Widget FeedBurner Recent Post

FeedBurner menyerupai yang Anda semua tahu ialah layanan web untuk mengirimkan feed blog Anda. Setelah Anda mendaftar FeedBurner maka beliau akan menyediakan Anda beberapa widget menyerupai Rotating Headlines Banner, Subscription Email form menyerupai yang Anda lihat di sidebar, feed counter, dan yang paling penting ialah Widget Recent Posts menyerupai yang ada di sidebar saya.

Berikut ini langkah-langkah yang harus Anda lakukan:

• Buat dulu Akun Feedburner Anda, saya harap Anda sudah memilikinya.
• Login ke akun Feedburner Anda dan klik tombol Publicize menyerupai gambar di bawah ini.

• Kemudian klik BuzzBoost yang ada di sidebar kiri.

• Pada halaman yang muncul, Anda akan melihat formulir sederhana menyerupai ini.

Isilah formulir dengan informasi yang relevan. Biarkan saja semua item tidak usah dicentang. Pada "Number of items to display" silahkan Anda isi dengan berapa link yang akan Anda munculkan nanti dan saya mengisikan angka 8 tapi 6 juga sudah cukup. Pada "Open links in" pilihlah Same Window. Kemudian klik tombol Save yang ada di bab bawah.

• Langkah selanjutnya, copy semua aba-aba yang ada di bab atas menyerupai pada gambar ini.

• Selanjutnya Login ke akun blogger Anda
• Masuk ke tab Layout dan klik Add a Gadget 

• Kemudian pilihlah HTML/JavaScript.

• Sekarang Paste aba-aba tadi ke dalam widget dan berilah judul Recent Posts
• Selesai

Semoga tutorial singkat ini sanggup membantu Anda, kalau ada yang kurang dimengerti silahkan tuliskan pertanyaan Anda dalam kotak komentar yang ada di bawah ini.

Read More

Cara Memasang Widget Footer Multi Kolom Di Blogger - Tampilan Menarik

Saya sebelumnya telah menyebarkan tutorial wacana cara menambahkan widget footer 3 kolom di blog dengan mudah, dan hari ini saya akan menyebarkan tutorial memasang widget footer multi kolom yang canggih di blog. Widget ini sanggup menjadi 3 kolom, empat kolom, atau banyak kolom tergantung yang Anda inginkan. Selanjutnya widget footer ini mempunyai beberapa dampak CSS yang ditambahkan ke dalamnya yang membuatnya lebih baik. Marilah ikuti serangkaian langkah gampang berikut ini untuk memasangnya.

Cara Menambahkan Widget Multi Kolom di Blogger!

Pertama-tama kita akan menambahkan instruksi CSS dalam template blogger Anda dan lalu tambahkan instruksi HTML-nya. Kaprikornus tanpa membuang banyak waktu mari kita pribadi menuju langkah-langkahnya.

• Login dulu ke akun Blogger Anda
• Klik Tab Template (pada sajian drop down)
• Backup dulu template Anda bila perlu
• Klik Edit HTML
• Carilah instruksi ]]></b:skin> (gunakan Ctrl + F untuk memudahkan pencarian)

• Kemudian letakkan instruksi berikut ini di bawah kode ]]></b:skin>

/*----- GNR MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

• Kemudian cari instruksi </body> dan paste instruksi berikut ini sempurna di atas instruksi </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

• Simpan Template Anda dan selesai

Sekarang Anda masuk ke Tab Layout dan tambahkan widget Anda yang gres di Footer yang telah Anda buat menyerupai gambar ini.

Anda sanggup mengamati bahwa ada empat kolom secara default dan Anda sanggup menambahkan atau mengurangi jumlah kolom vertikal dengan mengikuti langkah-langkah di bawah ini:

Cara Kostumisasi Widget!

Saya akan membahasnya secara sederhana. Saya pikir untuk warna dan ukuran keseluruhan sudah tepat. Satu-satunya hal yang perlu Anda sesuaikan dengan Template Anda yaitu lebar widget dan jumlah kolom vertikal.

• Untuk mengurangi atau menambah lebar keseluruhan widget, Anda tinggal perlu mengubah width: 960px;
• Jika Anda ingin mengurangi jumlah widget menjadi tiga, maka cukup hapus bab instruksi ini:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

• Jika Anda ingin menambahkan ekstra kolom, maka tambahkan instruksi berikut di atas kode <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahwa lowerbar# yaitu mengacu pada jumlah kolom. Kaprikornus kalau Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# menjadi lowerbar5.

Setelah Anda menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%; menjadi width: 17%;.

Anda ulangi langkah 3 untuk memperbanyak jumlah kolom yang Anda inginkan. Tapi 3, 4, dan 5 kolom itu yaitu standar. Jika lebih dari itu maka akan terlihat jelek, jadi pertimbangkan itu.

Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk membagikan ini dengan teman-teman Anda kalau Anda menyukainya. Terimakasih.

Read More

Cara Menambahkan Widget Komentar Disqus Ke Dalam Blogger

Salah satu duduk masalah paling umum yang dihadapi blogger ialah moderasi komentar. Jika Anda ingin serius di dunia blogging, Anda akan melakukannya dengan baik untuk mendapat suatu set platform komentar yang baik sebab Anda perlu satu pengelola komentar di blog Anda dan itu akan menghabiskan banyak waktu Anda. Google Plus commenting system ialah salah satu yang baik, tetapi ada salah satu sistem komentar Blogger yang paling terkenal dikala ini yaitu Disqus yang dipakai di seluruh dunia.

Mengapa Menggunakan Disqus?

• Pemberitahuan dari email untuk setiap komentar
• Custom comment avatar
• Moderasi melalui email atau mobile
• Anda sanggup dengan gampang mengirim komentar, suara, bahkan mengembangkan komentar ke jejaring sosial
• Anda sanggup dengan gampang berlangganan komentar

Menambahkan Disqus ke dalam blog Blogger

• Pertama, Login ke akun Disqus Anda. Jika Anda belum punya silahkan buat terlebih dahulu.
• Klik opsi Add Disqus to your site yang berada di atas.
• Silahkan isi profil situs Anda secara lengkap.

• Klik Finish Registration, dan pilih Blogger sebagai platform Anda pada layar berikutnya.

Sekarang kita telah menciptakan akun Disqus, saatnya untuk mengintegrasikan dengan blog Blogger Anda.

• Klik pilihan Add [Your Blog Name] to my Blogger site
• Sekarang klik tombol Add Widget pada layar selanjutnya. Sekarang Anda telah berhasil menambahkan Dusqus commenting system di blog Anda. Ini akan muncul secara otomatis di bawah postingan blog Anda

Sekarang Anda bebas untuk memulai sebuah akun Disqus gres atau mengimpor komentar dari blog yang sudah ada. Selamat mencoba dan menikmati layanan Disqus untuk meningkatkan frekuensi komentator blog Anda. :)

Read More

Dua Cara Menemukan Section Id Dan Widget Id Di Blogspot

Beberapa orang menanyakan bagaimana menemukan ID Gadget atau ID Widget dari Blogger. Karena untuk mengedit instruksi widget kita perlu mengetahui lokasinya di template. Jadi, kami pikir tutorial ini akan sangat membantu dalam hal ini. Kami akan membuatkan dua cara untuk mencari dan menemukan widgetid dan sectionid sehingga baik pengguna Windows dan Macintosh merasa perlu. Elemen halaman Section disebut sebagai bab Layout di dashboard Blogger. Widget sebagian besar disebut sebagai gadget di bab Layout dengan link berwarna biru. Melalui tutorial ini Anda juga akan memahami bagaimana untuk dengan udah menemukan widget dalam template Blogger Anda melalui ID mereka.

Apakah Widgetid atau Sectionid Itu?

Widgetid

Setiap widget yang Anda buat dalam Layout mempunyai nomor identifikasi yang unik yang kita sebut sebagai "ID". Widget ID ini selalu berupa alfanumerik dan merupakan satu-satunya instruksi yang membantu kita mengontrol penampilan widget.

Sectionid

Setiap widget selalu ditambahkan di dalam section. Dalam kata lain setiap section yaitu wadah yang menampung widget. Bagian-bagian terkenal dari blog Anda yaitu Header, Sidebar, Footer dan Main. Bagian ini juga diidentifikasi secara unik memakai ID mereka yang kita sebut Section ID. Kita sanggup memakai Section ID untuk memodifikasi tampilan semua widget di dalamnya.

Menemukan Section ID dan Widget ID - Metode 1

Setiap widget yang Anda tambahkan ke Layout mempunyai link edit. Jika Anda mengarahkan kursor mouse Anda di atasya, browser Anda akan menampilkan tooltip di bab bawah layar Anda yang menampilkan isu penting yang terkait dengan link tersebut. Informasi-informasi yang terkandung dalam setiap link yaitu sebagai berikut:

Gambar 1. Link Edit

Gambar 2. Tooltip

• Blog ID: Anda sanggup menciptakan sampai 100 blog di Blogger. Setiap blog diidentifikasi memakai ID ini.
• Widget Type: Ini yaitu nama resmi yang dipakai untuk widget blogger menyerupai Header, Main, Popular Posts, Label, dan lain-lain.
• Widget ID
• Section ID

Seperti yang ditunjukkan pada gambar kedua di atas, nilai yang ada di sebelah widgetid yaitu HTML3 yang meruakan Kode Gadget ID dan nilai di sebelah sectionid yaitu sidebar dimana itu yaitu Kode Section ID Anda.

Section ID sanggup dengan gampang ditemukan kini alasannya yaitu Blogger telah memperbaharui Layout dengan menyorot karakter tebal di setiap bab Kode ID.

Sectionid pada gambar di atas yaitu main.

Sectionid pada gambar di atas yaitu sidebar.

Metode ini sanggup bekerja pada pengguna Windows dan MAC dan pada browser Safari/ Opera/ Firefox/ dan Chrome.

Menemukan Section ID dan Widget ID - Metode 2

Metode ini mungkin hanya sanggup bekerja pada pengguna Windows alasannya yaitu saya bukan pengguna browser Safari milik MAC dan tidak tahu apakah Safari sanggup memunculkan jendela popup menyerupai pada Windows.

Kali ini Anda klik link Edit pada widget Anda, maka jendela popup akan terbuka. Maximize jendelanya untuk melihat URL secara lengkap pada address kafe dari IFRAME popup.

Dari URL di atas Anda sanggup melihat widgetid yaitu HTML5 dan sectionid yaitu sidebartab1.

Sangat gampang kan!

Mencari Lokasi Widget di Template Blogger

Nah, Anda telah mencar ilmu bagaimana menemukan widgetid, kini saatnya untuk menemukan lokasi widget dalam template blogspot Anda. Misalkan kita ingin menemukan widget dengan widgetid HTML5.

• Login ke Blogger
• Pilih Template > klik Edit HTML
• Klik drop down sajian "Jump to widget"
• Drop down sajian berisi semua daftar widget ID. Pada kasus kami yaitu HTML5.

• Anda akan dibawa ke lokasi di mana kawasan DOM HTML untuk widget Anda terlampir pada tag <b:widget>.

Anda sanggup melebarkan instruksi ini dan mengedit konten Widget menyerupai pada Headline, style konten tersembunyi di dalam tag <data:content/>. Lakukanlah hal-hal menakjubkan sesuai impian Anda menyerupai menyembunyikan widget dari render dalam perangkat mobile atau menyembunyikan widget pada halaman tertentu saja. Anda sanggup melaksanakan apa saja dengan itu.

Penutup!
Apapun yang saya kami di atas mudah-mudahan sanggup membantu Anda menemukan lokasi dari instruksi widget di dalam template blog Anda sehingga memudahkan untuk melaksanakan editing tampilannya. Apabila ada kritik dan saran silahkan luapkan di kolom komentar. Kami akan dengan bahagia hati menerimanya.

Read More

Cara Memunculkan Dan Menyembunyikan Widget Di Blogger

Blogger Conditional Statements dapa dipakai untuk mengontrol tampilan elemen HTML pada halaman tertentu untuk mengatur gaya yang berbeda pada Page yang berbeda. Beberapa pertanyan yang paling sering diajukan adalah: Bagaimana cara menampilkan Blogger Widget pada Homepage saja? Bagaimana saya sanggup menampilkan widget hanya pada Sub-Halaman saja? Bagaimana cara menyembunyikan widget pada halaman statis? Bagaimana menampilkan widget hanya pada halaman terpilih? Untuk menjawab semua pertanyaan ini, mudah-mudahan tutorial ini akan menjadi hidangan enak untuk Anda. Yang benar-benar penting untuk mengontrol tampilan widget di Blogger memakai Blogger Conditional Statements. Beberapa widget kadang hanya dimaksudkan untuk homepage saja, halaman kontak, about me, atau halaman statis lainnya.

Jadi, bagaimana kita mengatur hal tersebut untuk menampilkan elemen HTML atau widget dan di mana menyembunyikannya? Caranya sangatlah sederhana. Nah, mari kita eksklusif membahas bagaimana mengelola widget pada halaman yang berbeda di blogger.

Widget HTML/ JavaScript yakni yang paling banyak dipakai untuk menambahkan widget yang Anda kostumisasi untuk Blogger dan sebagian besar widget ini sanggup dikelola dengan mudah. Karena Anda sering menyisipkan beberapa instruksi widget di dalam widget HTML/ JavaScript sehingga satu-satunya hal suplemen yang perlu Anda lakukan dalam rangka mengontrol widget yakni menyertakan instruksi antara dua potongan instruksi menyerupai yang ditunjukkan di setiap instruksi di bawah ini.

Cara Menampilkan Widget/ HTML Hanya pada Homepage
Cukup melampirkan instruksi di dalam widget HTML/ JavaScript di antara instruksi di bawah ini, di mana WIDGET CODE GOES HERE adalah instruksi widget yang ingin Anda tampilkan.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
WIDGET CODE GOES HERE
</b:if>

Cara Menyembunyikan Widget di HomePage
Menggunakan mekanisme yang sama dengan langkah di atas:

<b:if cond='data:blog.pageType == "item"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menampilkan Widget  Hanya di Halaman Statis

<b:if cond='data:blog.pageType == "static_page"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menyembunyikan Widget di Halaman Statis

<b:if cond='data:blog.pageType != "static_page"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menampilkan Widget pada Posting Tertentu

<b:if cond='data:blog.url == "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menyembunyikan Widget pada Posting Tertentu

<b:if cond='data:blog.url != "URL OF Selected Post"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menampilkan HTML pada Posting Pertama dari Homepage
Jika Anda ingin menampilkan konten HTML di posting pertama dari situs Anda dan tidak pada setiap posting yang ditampilkan pada homepage, gunakanlah syntax berikut.

<b:if cond='data:post.isFirstPost'>
WIDGET CODE GOES HERE
</b:if>

Cara Menampilkan Widget pada Halaman Index
halaman index meliputi halaman label/ search, halaman arsip dan homepage. Untuk menampilkan widget atau HTML pada halaman ini gunakanlah syntax di bawah ini.

<b:if cond='data:blog.pageType == "index"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menyembunyikan Widget pada Halaman Index

<b:if cond='data:blog.pageType != "index"'>
WIDGET CODE GOES HERE
</b:if>

Cara Menampilkan Widget pada Halaman Search
Halaman Search pada Blogger meliputi semua halaman Label dan halaman pencarian yang ditampilkan saat pengguna melaksanakan pencarian memakai search box. Untuk menampilkan widget atau HTML pada halaman search, gunakalah syntax di bawah ini.

<b:if cond='data:blog.searchLabel'>
WIDGET CODE GOES HERE
</b:if>

Bagaimana Mengontrol Widget Resmi Blogger?
Prosedur yang sama sanggup diterapkan pada widget resmi milik Blogger menyerupai About Me, Archives, Pool, dll. Untuk mengontro widget tersebut lakukan ini:

• Login ke akun Blogger Anda
• Masuk ke Template > Edit HTML
• Backup template Anda bila perlu untuk menghindari kesalahan
• Carilah judul widget yang ingin Anda kontrol
• Kode widget tersebut akan terlihat menyerupai di bawah ini

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>
LARGE CHUNK OF WIDGET CODE
</b:includable> </b:widget>

Setelah menemukan kawasan judul widget (WIDGET-TITLE-HERE) Anda akan melihat dua instruksi yang sama menyerupai yang saya tunjukkan dengan warna biru tebal. Anda hanya perlu menambahkan instruksi kontrol dengan cara berikut. Sebagai teladan bila Anda ingin menampilkan widget di Homepage, lakukanlah hal ini:

<b:widget id='HTML' locked='false' title='WIDGET-TITLE-HERE' type='Profile'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
LARGE CHUNK OF WIDGET CODE
</b:if>
</b:includable> </b:widget>

Oke, itulah tadi tutorial untuk mengontrol widget di blog Anda. Mudah-mudahan bermanfaat dan berkhasiat bagi Anda. 

Read More