31 Oktober 2013

Generator Kode Warna HTML : Color Wheel Untuk Blogger

Generator Kode Warna HTML untuk web/blog
I'm Blogger :  Bagi yang hobi dengan desain template jelas sangat akrab dengan code yang satu ini.

Namun tidaklah mungkin, kita harus menghapal seluruh code html untuk dapat bermain warna yang maksimal. Mungkin jika, hanya warna-warna dasar, seperti merah, kuning, hijau, biru, putih dan hitam, kita masih dapat mengingat, namun ketika sudah berbicara tentang kombinasi warna, jelas harus ada alat bantu.

Tampilan template blog sebagian besar bermain dengan warna agar terilhat menarik. Dalam dunia online/web, penempatan/pemasangan warna biasanya menggunakan code HTML. Memang, sebenarnya juga bisa menggunakan image, namun kurang efektif dan jelas menambah beban loading blog.

Kode Warna HTML sendiri, digunakan untuk mendeskripsikan dan melakukan spesifikasi dari warna-warna yang di inginkan dalam perancangan halaman web/blog. Untuk mempermudah seorang blogger dalam memilih warna yang akan digunakan untuk elemen-elemen web/blog-nya, diperlukan  tool berupa generator kode warna HTML.

Berikut adalah  Color Wheel for Blogger:


30 Oktober 2013

Responsive Thesis Template For Blogger Blogspot V2

Responsive Thesis Template For Blogger Blogspot V2
Responsive Thesis Template For Blogger Blogspot V2
Responsive thesis template for blogger blogspot V2 adalah penyempurnaan daripada template thesis responsive untuk blogspot yang dikeluarkan pertamakali oleh andrianovitcrew. Template yang mengusung desain, clean, minimalis, visitor friendly ini juga dirancang khusus untuk memaksimalkan SEO blogger blogspot.

Sesuai dengan janjinya, walau belum lama realese Responsive thesis template for blogger blogspot,
andrianovitcrew telah melakukan update terbaru template yang terkenal SEO Killer ini. Pada V2 ini, ada banyak penyempurnaan telah dilakukan.

Menurut dia,pada awal pembuatan Responsive thesis template for blogger blogspot yang pertama masih terlalu banyak bugs yang perlu disempurnakan lagi. Sehingga, setelah melakukan beberapa kali ujikaji dari template thesis untuk blogger (blogspot) yang pertama, akhirnya telah siap direlease responsive thesis template untuk blogger blogspot yang kedua (V2).
Responsive thesis template for blogger blogspot ini, adalah gabungan antara beban loading halaman yang sangat cepat dengan optimasi SEO dan juga rich microdata. 
Berikut berbagai kelebihan dari Responsive thesis template untuk blogger blogspot v2 ini: 

Minimalis ,clean design, visitor friendly

Desain template thesis yang kedua ini terinspirasi dari thesis 'social triggers' dimana demo asli dari templatenya bisa dilihat di http://diythemes.com/demo/?skin=thesis_social_triggers.

Desain yang bersih dan rapi sehingga memudahkan pembaca dalam menjelajahi blog  dan juga membuat visitor betah untuk berlama-lama di blog kita.tapi perlu diingat juga "Konten is the King"

Seo heading tags

Susunan heading tags yang benar dan sejatinya sudah seo friendly sangat disukai oleh mesin pencari (google). Untuk menambah pengetahuan atau sekedar referensi tentang bagaimana susunan heading tags yang benar bisa dibaca disini.Tak lupa juga Heading h1, h2, h3, h4, h5 dan juga h6 pun tersusun secara sempurna di dalam template ini (banyak dari pembuat template blogspot yang mengabaikan hal ini).

Fast Loading Page

Kecepatan loading yang benar-benar sangat cepat diterapkan di responsive template thesis V2 ini. Dalam hal ini, anda bisa test di http://developers.google.com/speed/pagespeed/insights/ atau di http://gtmetrix.com/. Untuk memaksimalkan kecepatan template ini, sengaja tidak memasang jquery, soalnya jquery itu bikin loading blog jadi super berat.   

Responsive Web desain

Sebelumnya, apa itu responsive web desain??
Responsive Web Desain adalah sebuah pendekatan yang menunjukkan bahwa desain dan pengembangan harus menanggapi perilaku dan lingkungan pengguna berdasarkan pada ukuran, platform dan orientasi layar. Praktik ini meliputi penggunan perpaduan grid fleksibel dan layout, gambar dan CSS media query. Sebagaimana pengguna saat ini yang beralih dari laptop ke tablet, website secara otomatis harus menyesuaikan resolusi, ukuran gambar dan kemampuan scriptingnya. Dengan kata lain, website harus memiliki teknologi untuk secara otomatis merespon preferensi pengguna yang didasarkan pada resolusi layar gadget yang digunakan (komputer pc, laptop, netbook,tablet, smart phone dan mobile phone).
Hal ini yang merupakan salah satu kelebihan dari template thesis untuk blogspot yang mana sebelumnya belum ada yang bikin (responsive thesis untuk blogger blogspot ). Responsive desain disini termasuk juga pada bagian komentar. Biasanya pada template yang mengaku 'responsive' ternyata tidak support pada bagian komentar.

Rich Microdata Dan Mark Up schema (schema.org)

Lengkapnya microdata dan mark up schema dari schema.org juga melengkapi sempurnanya template thesis for blogger blogspot V2 ini.

Seo Breadcrumb

Breadcrumb bisa dikatakan sangat special. Breadcrumb yang Ter-index oleh google, juga dilengkapi dengan microdata breadcrumb sekaligus.

Tidak adanya error di rich snippet google testing tool.

Hal ini meliputi 'Error: Missing required field updated ', 'Error: Missing required hCard author' Dan error lainya yang mana tak bisa disebutkan satu persatu disini. Untuk membuktikan masalah ini bisa di test di http://www.google.com/webmasters/tools/richsnippets.

Seo meta tags (dynamic seo meta tags)

Cukup satu kali setting untuk mengaktifkanya ( ini sudah termasuk seo post meta tags, seo label meta tags, seo search meta tags dan lain lain.

Halaman dengan lebar penuh (full width) di halaman statis (single page)dan halaman error (error page).

Bertujuan untuk membedakan mana itu halaman statis dan mana itu halaman post.

Block link aktif di area komentar

Ini bertujuan untuk mencegah para spammer yang sering menanam backlink secara semena-mena.

Javascript manipulasi komentar

Visitor/orang yang komentar di blog secara otomatis bisa memasukkan gambar/video youtube/tag 'pre'/tag 'code' ataupun juga tag 'blockquote' di dalam komentar. Ini sangat berguna bagi blog yang sering memberikan posting tentang tutorial .

Search Widget menggunakan Quick search dengan Json Blogger

Melakukan pencarian di dalam blog secara cepat tanpa meninggalkan halaman yang sedang dikunjungi.

Valid sebagai HTML5 template

Hanya valid untuk homepage alias halaman utama saja .

Jikalau widget popular post disertakan dengan gambar thumbnail dan snippet, maka akan mengakibatkan error saat validitas. Tapi jangan takut, asal rajin editing code HTML template tips nya ada disini.
Untuk halaman post ataupun halaman statis, memang sedikit susah untuk membuat valid HTML5. Banyak sekali faktor yang membuat error di halaman selain homepage (halaman utama). Untuk check validitas html5 dapat dilakukan di http://validator.w3.org/. Memang, platform blogger (blogspot) di desain untuk xhtml bukan nya HTML5. Di dalam template ini memang telah sengaja dilengkapi beberapa 'blogspot hacks' supaya bisa valid HTML5.

More Features Responsive Thesis Template For Blogger Blogspot V2
  • Support social sharing dan juga social network widget
  • Support email subscription widget
  • Support about author widget
  • Support Ads ( iklan )
  • Custom Tips, Info Dan Warning Block di postingan
  • Related Post widget
  • SEO comment system
  • Custom Error Page 404 
VIEWDEMO    |    DOWNLOAD




29 Oktober 2013

Metro Blogger Template with 4 column footer

Metro blogger Template- A Unique Stylish Blogger Template
Metro Blogger Template
Metro is a free blogger template custom design with 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Blue, Custom Navbar, Fixed, Gray, Page Number, Responsive, and now you can download Metro blogger template for free  in All About Blogspot Templates.

Template Author  :   Ozynetwork
Designer     :  Ozynetwork.com
     
Metro blogger Template- A Unique Stylish Blogger Template. Two Column Metro Style template with 4 column footer. Highly Customized Navigation and sidebar menus. Author Box with Related posts and subscription box.

Almost everything from head to toe is customized and we haven’t left a single item in customization. Some of the features are very impressive like Metro Style Navigation Menu, Metro Style Post titles and Metro Social Subscription widget. This is a free of cost template but in order to thanks the Author you must keep the credit link.

DEMOVIEW   |    DOWNLOAD

What More Metro Blogger Template?

Beside these fantastic features, Blogger Metro blogger Template has many other exciting features which you will definitely like. After reviewing the features, we will now take a look over the customization part.

Installation
1) Open Your Blogger dashboard and click on  template and Edit Html.
2) Now open the file we provided it to you and copy all the data from that file and paste it there.
3) Save your template and the installation process in over.

Navigation
1) Click on Template >> Edit Html.
2) Press CTRL+F and search for
<div class='mblmetromenu'>
3) Edit the Menus and Put the links.

Author Box1) Click on Template >> Edit HTML
2) Press CTRL+F and search for
<div class='auth-panel'>
3) Edit the Author panel and you are done.

Meta Tags1) Press CTRL+F and search for
<!--meta tags-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>Mtro|A stylish blogger template</title>
2) Edit the Keywords, Meta Description and Title for your blog and you are done!

Happy blogging BROO.

Cara pasang Auto Read More Otomatis #Terbaru

Cara pasang Auto Read More Otomatis #Terbaru
All About Blogspot templates : Fungsi Read More tanpa hosting file .JS, memang agak berbeda dengan versi Read More biasanya. Bila sebelumnya  kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Atau penggunaan fungsi pemenggalan kalimat bawaan blogger seperti dibawah gambar ini:

Cara pasang Auto Read More Otomatis #Terbaru
Fungsi Read More Standar dengan pemenggalan artikel bawaan blogger
Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas. Artikel ini dibuat menjawab pertanyaan zhoe_haemy pada artikel "Cara merubah ukuran, jenis font dan warna pada judul post" sehubungan dengan fitur readmore pada blognya tidak berfungsi.

Fungsi Read More berikut ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Atau bisa juga disebut saja dengan fasilitas image thumbnail.

Tidak hanya itu, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Bahkan kita dapat memodifikasi ukuran image yang akan ditampilkan di home page blog anda. Hebat bukan??? Yah.. anggap hebat lah....

   NOTE!!    Bagi anda yang sudah memasang Read More versi lama atau auto read more-nya tidak berfungsi, sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna biru di dalam Quote dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>

<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>

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

OK, jika sudah tinggal lanjutkan langkah-langkah berikut ini:

Pertama : silahkan langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head>. Setelah itu, jangan lupa di simpan terlebih dahulu.
<!-- Auto read more script Mulai -->
<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430; //panjang tulisan tanpa gambar
summary_img = 340; //panjang tulisan dengan gambar
img_thumb_height = 200; // tinggi gambar thumbnail
img_thumb_width = 200; // lebar gambar thumbnail
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script Berakhir -->

Kedua : Lalu cari Kode : <data:post.body/> dan Ganti Dengan Kode di Bawah Ini :
<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya</a>
</b:if>
</b:if>
<!-- Auto read more Berakhir -->


Ketiga : Save Template!. Selesai.

Cara Memodifikasi Auto Read More.


  • Thumbnail_mode : setting menjadi "yes" untuk menampilkan Thumbnail pada Auto Read More dan Setting menjadi "no" untuk menghilangkan Thumbnail pada Auto Read More. Temen - temen Blogger juga bisa merubah settingan lain seperti panjang tulisan seperti yang sudah saya jelaskan pada Comment di sebelah setiap barus Kode.
  • Pada kode kedua, para Blogger juga Bisa merubah Teks "Baca Selengkapnya" sesuai dengan Keinginan.
Demikian tutorial sederhana Cara pasang Auto Read More Otomatis #Terbaru. Terima Kasih. Semoga Bermanfaat !.

27 Oktober 2013

Cara membuat link terbuka di tab baru otomatis

Cara membuat link terbuka di tab baru otomatis
All About Blogspot Templates : Target Blank - adalah code yang berfungsi sebagai perintah agar link yang ketika di clik akan membuka secara otomatis di tab baru.

Ada banyak manfaat fungsi  <target="_blank"> tersebut. Diantaranya, yakni; memperkecil nilai bounce rate, karena visitor banyak meng-klik blog Anda tanpa meninggalkan laman sebelumnya. Sehingga juga berfungsi melangsingkan rangking Alexa.

Dalam hal ini, ada beberapa tips yang bisa dilakukan. 
Pertama : Seluruh link yang ada pada blog akan terbuka di tab baru secara otomatis ketika di clik visitor. Caranya dengan melakukan edit template HTML berikut ini:

1. Masuk dashboard blogger blog Anda,
2. Klik Template => Edit HTML =>
3. Cari kode </head> untuk lebih mempermudah gunakan  CTRL+F.

4. Setelah ketemu kode </head>, masukkan kode dibawah ini tepat diatasnya.
<base target="_blank"/>
5. Save Template.
Kedua : Editing code target blank secara manual. Cara ini hanya memfungsikan salah satu atau beberapa link yang dikehendaki saja yang terbuka secara otomatis pada tab baru. 
 Dari cara kedua ini, dapat dilakukan dengan 2 cara. 

1. Editing link yang berada di halaman postingan. Caranya dapat dilakukan langsung seperti gambar dibawah ini: 
edit link di halaman postingan
Cara membuat link terbuka di tab baru di halaman postingan

2. Menggunakan fungsi code <target="_blank"> 

Cara 2 adalah cara yang agak rumit sedikit ketimbang cara 1. Yaitu dengan menggunakan kode HTML:

Apabila link biasa, maka kodenya seperti ini:

<a href='http://redaksiexpo2012.blogspot.com'>Blogspot Templates</a>
Sedangkan untuk link dengan fungsi menggunakan code perintah <target="_blank"> 
<a href='http://redaksiexpo2012.blogspot.com'target="_blank">Blogspot Templates</a>
Apa yang beda kedua code tersebut?
Yups, di kode HTML buka link baru, ada tambahan kode target="_blank". Tepatnya setelah "http://contohlink.com/".

Jadi, untuk membuat link open new tab, silahkan tambahkan kode target="_blank" tepat setelah kode "http://contohlink.com/".

Walau sedikit rumit, pada cara ke 2 ini kita dapat melakukan edit link tertarget/tertentu. Termasuk link berada didalam widget blog di dalam code HTML. Sedangkan link pada halaman lainnya berfungsi normal.

Demikian Cara membuat link terbuka di tab baru otomatis semoga bermanfaat

Fasteseo - Seo Responsive Blogger Template

Fasteseo - Seo Responsive Blogger Template
ALL ABOUT BLOGSPOT TEMPLATES : Satu lagi template blogspot karya +Fajri Andaviar saya share disini. Sebelumnya adalah, BeriMagz : Responsive Blogger Template. Menurut dia, tema blog ini juga Responsive banget. Tidak hanya itu, selain tampilannya elegant juga sangat SEO Friendly.

Sesuai dengan namanya, Fasteseo - Seo Responsive Blogger Template. Di desain penuh warna agar terlihat Fresh serta dilengkapi berbagai fitur yang fungsional.

DemoView   |    DownLoad

 Features Fasteseo - Seo Responsive Blogger Template :


  •     100% SEO di Chkme.com
  •     Iklan disisi Header
  •     Halaman Error 404
  •     Breadcrumbs siap
  •     Menu Navigasi Sticky (Menempel) dengan kotak pencarian
  •     Read More otomatis siap
  •     Menu dibawah header dengan Font Awesome
  •     Widget Popular Posts yang telah di Desain
  •     Widget Label Cloud yang telah di Desain
  •     Catatan kaki terindex Google
  •     Artikel terkait Vertikal
  •     Post Next dan Prev
  •     Threaded Comment
  •     Autor Comment
  •     Dan Lainnya

Instalasi Fasteseo Template :

Setelah upload template, ada beberapa sentuhan modifikasi yang berhubungan dengan indentitas blog anda.
  • Cari kode YOUR-GOOGLE-URL , dan ganti semua kode tadi dengan URL Google+ Sobat.
  • Cari kode YOUR-ALEXA-ID , dan ganti dengan ID Alexa Blog Sobat.
  • Cari NameBlog dan NamaBlog , dan ganti semua kode tadi dengan nama Blog Sobat.
  • Cari kode YOUR DESCRIPTION HERE , dan ganti dengan deskripsi Blog Sobat.
  • Cari kode Keywords1, Keywords2, Keywords3 , dan ganti semua kode tadi dengan Keywords Blog Sobat.
Mengganti Menu Navigasi Fixed/Float : Cari kode berikut :
<nav id='nav'>
<ul class='menunav' id='navinti'>
<li class='mhome'><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Download</a></li>
  <li><a href='/404'>404</a></li>
<li class='dgnsub'><a href='#'>Kebijakan</a>
<ul class='sub-menu hidden'>
  <li><a href='#'>Privacy Police</a></li>
  <li><a href='#'>Disclaimer</a></li>
  <li><a href='#'>Terms Of Service</a></li>
</ul>
</li>
Lalu ganti # (Tanda Pagar) dan title menu sesuai kebutuhan dan keinginan anda.

Mengganti Menu di bawah Header : Cari kode dibawah ini:
<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><i class='icon-home' style='margin-right: 5px;'/>Home</a></li>
<li><a href='#'><i class='icon-html5' style='margin-right: 5px;'/>Blogger</a>
<ul>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>SEO</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Tips &amp; Trick</a></li>
</ul>
</li>
<li><a href='/'><i class='icon-rocket' style='margin-right: 5px;'/>Info Fakta</a>
<ul>
<li><a href='#'>Umum</a></li>
<li><a href='#'>Sejarah</a></li>
<li><a href='#'>Misteri</a></li>
<li><a href='#'>Unik</a></li>
<li><a href='#'>Lelucon</a></li>
<li><a href='#'>Hiburan</a></li>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Gaya Hidup</a></li>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Wisata</a></li>
</ul>
</li>
<li><a href='/'><i class='icon-facebook-sign' style='margin-right: 5px;'/>Jejaring Sosial</a>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google</a></li>
<li><a href='#'>Heello</a></li>
<li><a href='#'>Myspace</a></li>
<li><a href='#'>Instagram</a></li>
<li><a href='#'>Pinterest</a></li>
</ul>
</li>
  <li><a href='#'><i class='icon-music' style='margin-right: 5px;'/>Musik</a></li>
</ul>
<li><a href='#'><i class='icon-laptop' style='margin-right: 5px;'/>Tekno</a>
<ul>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Software</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-suitcase' style='margin-right: 5px;'/>Informasi</a>
<ul>
<li><a href='#'>Olahraga</a></li>
<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Islam</a></li>
<li><a href='#'>Dunia</a></li>
</ul>
</li>
<li><a href='#'><i class='icon-coffee' style='margin-right: 5px;'/>More</a>
<ul>
<li><a href='#'>Teknik Komputer Jaringan</a></li>
<li><a href='#'>Games</a></li>
<li><a href='#'>Film</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
  </li>
</div>

Ganti # (Tanda Pagar) dan judul menu sesuai keinginan anda.


26 Oktober 2013

Cara Menghilangkan Link Aktif pada Komentar Blog

Cara Menghilangkan Link Aktif pada Komentar Blog
All About Blogspot Templates -Artikel ini sebenarnya saya posting karena sedikit terganggu dengan adanya spammer pada kolom komentar, dengan menyimpan link aktif/hidup.

Memang, banyak blogger sering dipusingkan dengan adanya spammer pada komentar. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Untuk itu, kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan aktif pada komentar.

Tutorial ini saya dapat dari salah satu blog milik blogger Indonesia, Kang Ismet. Yakni tentang cara menghilangkan link aktif pada komentar blogspot.

Ada beberapa cara untuk menghilangkan link aktif/link hidup pada komentar tersebut, diantaranya dengan melakukan pemasangan code CSS dan JavaScript pada template blog.

1. Dengan CSS (Not Recommended)

Untuk menyembunyikan link dengan CSS, simpan kode ini di atas ]]></b:skin>
#comments p a{ display: none !important;}
Akan tetapi menurut Kang Ismet, cara ini tidak direkomendasikan, karena masih terbaca di browser, otomatis masih terbaca sebagai link oleh Mesin Pencari.
2. Dengan JavaScript (Recommended)

Sebetulnya ada banyak javaScript untuk menghilangkan link hidup pada komentar ini, namun pada kesempatan ini saya akan share 2 JavaScript saja. Dan setelah saya coba, sangat efektif dan berhasil dengan baik.

Simpan salah satu JavaScript ini di atas </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('#comments p').find('a').contents().unwrap();});
//]]>
</script>
Hasilnya, Anchor Link akan menjadi teks biasa. Artinya komentar yang menggunakan link aktif akan dilumpuhkan menjadi teks biasa.
Atau kita dapat mengunakan JavaScript berikut, dan cara tersebut yang saya pakai saat ini.
<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script> 


Hasilnya, akan terlihat seperti gambar dibawah ini:

Cara Menghilangkan Link Aktif pada Komentar Blog

Dengan kata lain, teks komentar akan diubah dengan kata-kata peringatan.

Demikian tips Menghilangkan Link Aktif pada Komentar Blog, semoga bermanfaat dan terimakasih atas kunjungan.

25 Oktober 2013

Cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js

Cara membuat SyntaxHighlighter pada Blogger dengan Highlight.js
All About Blogspot Templates : Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah. Gunanya, untuk memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).

Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Untuk mengaktifkan fitur ini dibutuhkan javascript yang dapat ditempatkan pada code HTML Template Blog. Pada postingan kali ini, saya ingin share cara membuat syntaxhighlighter, menggunakan Highlight.js dari Softwaremaniacs.

Caranya: copy dulu kode javascript di bawah ini atau lebih aman download disini.

Langkah 1 : Menyimpan JavaScript

Simpan JavaScript ini di atas </head> dalam tamplate blog.

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Langkah 2 : Pilih CSS

Code CSS dalam hal ini, berfungsi menampilkan style SyntaxHighlighter dimaksud.  


Ada banyak pilihan CSS yang bisa digunakan, sebelum anda memilih, terlebih dahulu dapat melihat-lihat demo DISINI.

Untuk Pilihan CSS, anda bisa download DISINI.

Atau salah satu contoh Default CSS SyntaxHighlighter:
/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
  color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
  color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
  color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
  color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
  color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
  font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
  font-style: italic;
}
pre .nginx .built_in {
  font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}


Langkah 3 : Simpan CSS tersebut di atas ]]></b:skin> 

Langkah 4 : Cara Penggunaan

Untuk menggunakan Highlight.js ini, sangat simple, kita tidak perlu menentukan bahasanya, anda tinggal tulis seperti ini :
<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Responsive Blogger Template : BeriMagz

Responsive Blogger Template : BeriMagz
All About Blogspot Templates : Blogger template ini saya dapat dari blog milik +Fajri Andaviar di http://fajriandaviar.blogspot.com. Menurut dia, theme blog ini memiliki fitur yang responsive sekaligus juga ringan (fast loading). Menurut saya, template ini keren dan layak untuk di share kepada para blogger.

Template magazine responsive ini bernama: BeriMagz 

DemoView   |    DownLoad

Tertarik? Berikut tutorial untuk mengganti fitur BeriMagz Blogger Template: 

1. Untuk Mengganti Menu Atas
<div id='top-menuwrapper'>
<div id='top-menuwrap'>  
<div id='top-menu'>
<ul>
<li><a href='/' style='background:#D12F2F'><i class='icon-home icon-2x'
style='margin-bottom:9px'/></a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>  
</ul>
</div></div></div>

2. Untuk Mengganti Menu di Bawah Header Cari Code Berikut:

<nav id='menu'>
<input type='checkbox'/>
  <label><i class='icon-reorder'/><span>Navigation</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a class='dropdown' href='#'>Drop Menu</a>
<ul class='menus'>
 <li><a href='#'>Drop Menu 1</a></li>
 <li><a href='#'>Drop Menu 2</a></li>
 <li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a class='dropdown' href='#'>Drop Menu 1</a>
<ul class='menus'>
 <li><a href='#'>Drop Menu 1</a></li>
 <li><a href='#'>Drop Menu 2</a></li>
 <li><a href='#'>Drop Menu 3</a></li>
</ul>
</li>
       </ul>
    </nav>

3. Untuk mengganti List Social, cari kode berikut:

<div class='social-tooltip'>
<ul>
<li class='pinterest'><a href='/'><i class='icon-pinterest'/></a></li>
<li><a class='twitter' href='/'><i class='icon-twitter'/></a></li>
<li><a class='linkedin' href='/'><i class='icon-linkedin'/></a></li>
<li><a class='facebook' href='/'><i class='icon-facebook'/></a></li>
<li><a class='gplus' href='/'><i class='icon-google-plus'/></a></li>

24 Oktober 2013

Work Mag : Responsive Premium Blogspot Template (Premium)

Work Mag : Responsive Premium Blogspot Template (Gratis)
Work Mag Is a New Blogger Template. Its High User Friendly Blogger Template. If You Blogger User This is a best Template For You, Mobile, Desktop And Tablet Friendly User Interface. Simple And Clean Color’s, Navigation Menu, Image Slider and Tabs Wight Ready Template.


DEMOVIEW    |    DOWNLOAD


Work Mag TEMPLATE INFORMATIONS
Platform Type : Blogger.com
Template Name : Work Mag
Author name : coolbthemes
 Designer URL : http://www.coolbthemes.com

Features :

  •     Responsive Template Design
  •     Auto Blog Post summarize And “Read More” Button
  •     Auto Image Crop With Thumbnail (Home Page and Label Page Only)
  •     Css And HTML Base Menu With Drop down
  •     Auto Date Show At Header Right side
  •     Tabs Widgets ready (Powered By Jquery)
  •     Image Slider (Powered By Jquery)
  •     Simple User Friendly Search Box
  •     Auto Pagination Added To Post Footer
  •     Social Icons Collection(Placed Post Footer)
  •     Social Share Widget (Placed Post Footer)
  •     Custom Error 404 Page With Search Box (Official 404 Page)
  •     Related Post Widget (Placed Post Footer)
  •     Ads Banner Ready
  •     Meta Keywords And Description Support (Official Meta Description Support)
  •     Random Post Selector
  •     Recent Post By Label
  •     4 Column Footer Area
  •     Flicker Image Gallery
  •     Official “FOLLOW BY EMAIL” Widget

Cara membuat Tag Pre pada postingan

Cara membuat Tag Pre pada postingan
All About Blogspot Templates | Pre Tag - Sebelumnya saya pernah menulis tentang Cara membuat Highlight pada Script/Kode di Postingan. Dan oleh sahabat blogger saya +Djangkaru Bumi, dipertanyakan apakah sama dengan blockqoute? Awalnya saya mau jawab Iya.. biar urusannya selesai. Namun akhirnya saya memilih untuk menunda memberi jawaban. Lalu gentayangan mencari tutorial yang relevan.. :D

Dari hasil blogwalking, langkah saya terhenti pada blog Kang Ismet. Dan ternyata disana ada jawabannya. Sekalian saya share..

Mirip? Mungkin, akan tetapi ada perbedaan besar antara Blockqoute, Highlight.js, dan Pre Tag. Tentang highlight mungkin sudah dibahas sebelumnya. Untuk saat ini, yang menjadi topik utama yakni tentang PRE Tag. Dan apa bedanya dengan Blockquote? Mana yang lebih baik digunakan untuk menulis kode/script? Serta Tips Bagaimana Cara membuat kode warna-warni?

Tertarik? Oke.. kita lanjut dan langsung ke inti pembahasan. 
PRE artinya pre-formatted atau secara mudahnya, apabila teks ditulis dalam tag pre maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break atau tab.
Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. Berbeda dengan tag pre, spasi akan tetap.

Sebagai gambaran, untuk lebih memahaminya coba copy kode ini pada postingan (mode HTML).  Dan kemudian dilihat hasilnya pada mode Compose.


<pre>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>

<p>
ini     adalah contoh
  tag pre
    coba      tulis
      seperti
  ini di
blog sobat
</pre>
Maka ketika dilihat melalui mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag p hasilnya akan lurus atau berjejer ke bawah.

Perbedaan  pre dan blockquote

Banyak yang menggunakan blockquote untuk berbagi kode. Termasuk saya... he... he... Lihat artikel-artikel sebelumnya. Untuk menjawab pertanyaan "Mana yang lebih baik untuk berbagi kode? blockquote atau pre?" Sebelum melangkah pada jawaban, silahkan simak pengertian blockquote. 
Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca. Contohnya ini.. anda akan lebih tertarik pada paragraf ini, daripada di atasnya atau yang lain.
Kalau melihat pengertian blockquote, tentunya kurang pas untuk berbagi kode, secara bahasa pun sudah dimengeri blockquote merupakan 'blok kutipan'. Sebenarnya sah-sah saja kita menggunakan blockquote sebagai tempat kode.

Tapi kalau dibandingkan, lebih baik menggunakan tag pre daripada blockquote untuk kode. Berikut ini kelebihan tag pre dibanding blockquote :

1. Struktur HTML lebih mudah difahami, lihat gambar :
Perbedaan  pre dan blockquote
Lihat yang di tandai dengan garis merah, jelas mana pembuka dan penutup. Anda akan melihat susunan otomatis apabila menulis kode menggunakan Notepad++ atau Macromedia DreamWeaver. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, sedikit lebih susah untuk memahami struktur HTML-nya.

2. Standar huruf menggunakan monospace.
Artinya, tanpa CSS pun tag pre akan mempunya hurup monospace, dimana hurup 'W' akan sama dengan huruf 's' atau lainnya dalam segi ukuran. lebih jelasnya baca disini.

3. Bisa disisipi SyntaxHighlighter (Kode warna warni).

Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.

Mungkin masih banyak kelebihan lainnya, silahkan bisa anda cari dan temukan.

Bagaimana Cara Menulis Kode dengan Tag PRE?

Untuk penulisan standar seperti ini
<pre>
isi kode
</pre>
Apabila menggunakan syntaxhighlighter, ada beberapa tambahan seperti :
<pre><code>
isi kode
</code></pre>

atau

<pre lang="css">
isi kode
</code>

dan lain-lain

 Tag pre Details


1. Browser Support :
  •     Netscape 2, 3, 4, 6, 7 dst
  •     Chrome 1 dst
  •     Firefox 1 dst
  •     Internet Explorer 2, 3, 4, 5, 6 dst
  •     Opera 3, 4, 5, 6, 7, 8 dst
  •     Safari 1 dst
  •     WebTV / MSNTV
  •     AvantGo Palm OS
  •     AvantGo Windows CE
  •     HTML 3.2, 4.0
  •     XHTML 1.0
  •     XHTML Text Module, XHTML Legacy Module


2. Atribut
  •     align (optional)
  •     class (optional)
  •     dir (optional)
  •     id (optional)
  •     lang (optional)
  •     onclick (optional)
  •     ondblclick (optional)
  •     onkeydown (optional)
  •     onkeypress (optional)
  •     onkeyup (optional)
  •     onmousedown (optional)
  •     onmousemove (optional)
  •     onmouseout (optional)
  •     onmouseover (optional)
  •     onmouseup (optional)
  •     style (optional)
  •     title (optional)
3. Contents:Teks. Beberapa tag yang valid pada tag pre tag:
a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

4. Valid Context :blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.

23 Oktober 2013

AndroidMag Blogspot Template

AndroidMag Blogger Template Platform: Blogger / Blogspot
Template Name: AndroidMag Blogger Template
Platform: Blogger / Blogspot
Release date : 27, March 2013
Author : www.templateism.com
License : Creative Commons Attribution 3.0

 VIEWDEMO   |   DOWNLOAD


Features of AndroidMag Blogger Template:

  1. Android Theme: This theme is not affiliated with Google (Android). The main idea behind this theme is to help all smartphone lovers, and to motivate them to blog on Android niche.
  2. Multi-drop down menu: After receiving lots of request, we finally included a Multi drop down menu in this theme. To provide more flexibility, we have not used any jQuery file. In fact, everything works on CSS.
  3. SEO-Friendly: Like our previous themes, we have added an SEO plugin in this template. This plugin would help you in increasing your SEO score. It is already optimized for on-page SEO, so there is no need to do is manually.
  4. Author Box: We have also added an automatic author box, which would automatically derive the name of the author and would display his details at the end of the posts.
  5. Related Posts: This theme also has a built in related posts gadget which would appear at the end of every posts. It automatically fetches the most related articles and displays them in a systemic order.
  6. More Features: Web 2.0, Magazine Style, lime green and dark green color Scheme, threaded commenting system, custom label wrapper, three Columns footer, and much more.
 

From the Designer's Desk:

We hope this theme would help you in giving a new shape to your website. We have added almost all gadgets, so there is no need to do lots of editing. If you liked this template, then do share it with your friends.