AjatShare Blogger

Cara Membuat Widget Label Sendiri Untuk Blogger

noreply@blogger.com (ajatshare) — Sat, 29 Mar 2014 03:31:00 +0700

Oke sobat AjatShare semua tidak perlu panjang lebar langsung ke pokok pembahasan yaitu bagaimana kita dapat menerapkan widget ini di situs blogger kita.

Langkah # 1: Menambahkan Widget
Untuk menambahkan widget buka Blogger dashboard → Tata Letak → Tambah gadget → Label Widget.
Dan kemudian menambahkan widget label
Ingat Ini: Tambahkan label daftar gaya saja tidak menambahkan label cloud.

Langkah # 2: Menyesuaikan Widget
Buka dari Blogger dashboard → Editor Template → Html Editor
Sekarang tambahkan kode css di bawah ini dan letakan sebelum kode "]]></b:skin>"

.Label {display: block;width: 100%;background: #FDFDFD;margin: 0 auto;padding: 10px;}
.Label h2 {display: table;margin: 0 auto 5%;line-height: 1.5em;font-style: normal;font-size: 22px;letter-spacing: 0.5px;padding-bottom: 0%;border-bottom:1px solid #C4C4C4;text-align: center;font-weight: normal;color: #5A5A5A;}
.Label .widget-content {
 padding: 5px 5px;
 margin: 0;
 font-family: 'Arial', arial, serif;
 }
.Label ul {list-style-type: none;margin: 0 0px;padding: 0;
 }
.Label ul li {float: left;width: 42.5%;margin: 0 0 5px 5px;color: #616060;text-decoration: none;padding: 6px;display: block;text-align: left;font-family: 'Arial', arial, serif;text-indent: 0px;font-size: 13px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}

Simpan template dan lihat hasilnya.
Selamat! Anda telah berhasil menambahkan widget label Anda

3 Jenis Widget Popular Post Menggunakan CSS3 untuk Blogger

noreply@blogger.com (ajatshare) — Sat, 29 Mar 2014 03:06:00 +0700

Widget Popular Post merupakam bagian dari situs/blog. Yang menampilkan daftar update reguler suatu artikel yang paling banyak dibaca di situs Anda yang diperuntukan bagi pengunjung Anda. Karena widget ini berfungsi sebagai alat navigasi bagi pengunjung terhadap halaman web/blog anda. Blogspot juga menyediakan widget popular post bagi pengunjung, tetapi secara default itu sangat membosankan, maka saya coba membuat 3 koleksi widget popular Post terbaik menurut saya dengan menggunakan properti CSS3.

- Buka Blog masuk Dashboard → Template → Html Editor
- Cari (menekan Ctrl + F) "]]></b:skin>"
- Copy paste kode CSS dibawah ini tepat di atasnya.

.popular-posts img{display:none}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
 list-style-type: none;
 margin:0 0 5px 0px;
 padding:5px 5px 5px 20px !important;
 border: 1px solid #dcdcdc;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }
.popular-posts ul li:hover {
 background:#FF8040;
 }
.popular-posts ul li a {
 text-decoration:none;
 font:14px Georgia, verdana;
 color:#222222;
 }
.popular-posts ul li a:hover {
 text-decoration:none;
 color:#fff;
 }

.popular-posts{margin-left:-20px}
.popular-posts li{background:#fff}
.popular-posts ul {
 padding-left: 0px;
 counter-reset: popcount;
 }
.popular-posts img{display:none!important}
.popular-posts ul li:before {
 list-style-type: none;
 margin-right: 15px;
 padding: 0.3em 0.6em;
 counter-increment:popcount;
 content:counter(popcount);
 font-size: 16px;
 background: #ff2e00;
 color: #ffffff;
 position: relative;
 font-weight: bold;
 font-family: georgia;
 float: left;
 border: 2px solid #dddddd;
 box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
 border-bottom: 1px dashed #dddddd;
 }
.popular-posts ul li:hover {
 border-bottom: 1px dashed #696969;
 }
.popular-posts ul li a {
 text-decoration:none; color:#5A5F63;
 }
.popular-posts ul li a:hover {
 text-decoration:none;
 }

.PopularPosts h2{
 padding-right:.4em;
 padding-left:1em
 } 
.popular-posts ul {  padding-left: 0; 
 counter-reset: trackit;/*setting counter-reset*/
 }
.popular-posts ul li {  
 border-bottom: 1px solid #f0f0f0;  
 list-style: none outside none !important;  
 margin-left: 0 !important;  
 overflow: hidden;  
 padding: 10px 0 !important;  
 transition: all 0.25s linear 0s;
 counter-increment: trackit;/*setting counter-increment*/
 }
.PopularPosts ul li:before{
 content: counters(trackit, ".");
 padding: 0 .1em 0 0;
 font-size: 20px;
 font-weight: bold;
 color: #C4C4C4;
 float:left;
 margin-right:10px;
 }
.PopularPosts li:first-child{
 border-top:1px solid #f0f0f0
 }
.PopularPosts li:nth-child(odd)
 {background:#f5f5f5}
.PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  
 display: none!important}
.PopularPosts a, .PopularPosts a:hover{
 color:#959595;
 font-size:.9rem
 }
#PopularPosts1 li{
 padding-right: 1em !important;
 padding-left: 1em !important;
 }
.widget.PopularPosts{padding:1.2em 0em !important}

Memasang Meta Tag SEO Friendly Terbaru 2014 serta Valid HTML5

noreply@blogger.com (ajatshare) — Wed, 26 Mar 2014 14:52:00 +0700

Dalam artikel terdahulu saya pernah membahas tentang Cara Membuat Meta Tag SEO Friendly Valid HTML5 yang sudah terbukti keampuhannya untuk menjadikan blog kita SEO 100% saat di periksa di chkme. Namun seiring dengan perkembangan update alogaritma terbaru dari Google yang secara drastis merubah cara pembacaan mesin pencari google terhadap blog kita dan editor blogger.com sendiri mengalami perubahan khususnya untuk "Description" dan "keywords",
blogger menyediakan fasilitas otomatisasi untuk penempatan description dan keywords, jadi kita tidak perlu lagi membuat meta tag secara manual dalam template.
Kenapa harus dilakukan otomatisasi selain google sendiri menyarankan seperti itu juga ada segi positifnya yaitu kita akan terhindar dari "Duplicate" description, keywords dan content.

Kelebihan dari Meta Tag SEO Friendly Terbaru 2014 serta Valid HTML5
1. SEO Meta Tag
2. Mendukung HTML5 Validation
3. Support Mobile version
4. Responsive
5. SEO Title Tag
6. Facebook Open Graph

Seperti biasa buka Account blogger anda. -> Edit HTML -> lalu cari kode "<head>" dan letakan meta tag di bawah ini tepat dibawah kode "<head>"

<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link expr:title='data:blog.title + " - Atom"' href='/feeds/posts/default' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>


<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
</b:if>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.metaDescription != ""'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
 <meta expr:content='data:blog.title' name='keywords'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
 <link href='https://plus.google.com/GOOGLE-PLUS-ID/about' rel='author'/>
 <link href='https://plus.google.com/GOOGLE-PLUS-ID/posts' rel='publisher'/>
 <b:if cond='data:blog.metaDescription != ""'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
 <meta expr:content='data:blog.pageName' name='keywords'/>
 </b:if>
</b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
<b:else/>
<meta content='index,follow' name='robots'/>
</b:if>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='GOOGLE-VERIFIED-ID' name='google-site-verification'/>
<meta content='BING-VERIFIED-ID' name='msvalidate.01'/>
<meta content='ALEXA-VERIFIED-ID' name='alexaVerifyID'/>
<meta content='blogger' name='generator'/>
<meta content='all' name='googlebot'/>
<meta content='YOUR-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='index, follow' name='robots'/>
<meta content='5' name='revisit-after'/>


<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:blog.isMobile'>
 <title><data:blog.pageTitle/> Mobile Version</title>
<b:else/>
 <title><data:blog.pageTitle/></title>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
 <title>Archive for <data:blog.pageName/></title>
 <meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
 <b:if cond='data:blog.pageType == "error_page"'>
 <title>Page Not Found</title>
 <b:else/>
 <b:if cond='data:blog.pageType == "item"'>
 <b:if cond='data:blog.isMobile'>
 <title><data:blog.pageName/></title>
 <b:else/>
 <title><data:blog.pageName/> | <data:blog.title/></title>
 </b:if>
 <b:else/>
 <title><data:blog.pageName/></title>
 </b:if>
 </b:if>
</b:if>
</b:if>


<b:if cond='data:blog.pageType == "item"'>
<meta content='YOUR-FACEBOOK-ID' property='fb:admins'/>
<meta content='YOUR-FACEBOOK-APP-ID' property='fb:app_id'/>
<b:if cond='data:blog.url'>
 <meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
 <meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
 <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiERwxGrBycV_a1bQz-zR_V86BMAiATe7cMkp8i5jhpPznQKYCd4Ck0aL8f_rcI-kKzsR3jql1hY-ca6-VDy0bMrx22VN1TJfkY9z4hjrNTP7zc2okMOhIJxcHxz875xBACCyirazp__A/s120-c/default.png' property='og:image'/>
</b:if>
</b:if>

Keterangan:
- Ganti GOOGLE-PLUS-ID dengan Google-Plus-ID anda
- Ganti GOOGLE-VERIFIED-ID dengan Verifikasi Google-Webmaster-ID anda
- Ganti BING-VERIFIED-ID dengan Verifikasi Google-Analytics-ID anda
- Ganti ALEXA-VERIFIED-ID dengan Verifikasi Alexa-ID anda
- Ganti YOUR-NAME dengan nama anda
- Ganti YOUR-FACEBOOK-ID dengan Facebook-ID anda
- Ganti YOUR-FACEBOOK-APP-ID dengan Facebook-App-ID anda

Demikianlah posting saya hari ini mengenai Meta Tag SEO Friendly Terbaru 2014 serta Valid HTML5, semoga artikel sederhana ini bisa memberikan manfaat. Jika ada keterangan yang kurang dimengerti jangan sungkan untuk menanyakan di kolom komentar.

Cara Membuat Floating Social Sharing Horizontal Bar Untuk BlogSpot

noreply@blogger.com (ajatshare) — Tue, 11 Mar 2014 02:43:00 +0700

Situs Jaringan Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang para blogger lebih suka berbagi artikel dengan memanfaatkan jejaring sosial. Hal ini penting untuk setiap blogger dan webmaster untuk mengintegrasikan Social Sharing atau tombol Like di Blog mereka, sehingga pengunjung mereka dapat berbagi cerita di website jejaring sosial terbaik, hal tersebut dilakukan untuk membangun pembaca setia. Ada unlimited Social Share widget yang tersedia di berbagai blog, tetapi itu kurang dalam tombol penghitung. Sekarang saya akan berbagi jenis sosial media yang sama dari Widget untuk Blogger yang terdiri dari Facebook , Twitter , Google Plus, Pinterest , Digg dan Stumbleupon.

Fitur Floating / Scrolling Berbagi Sosial Horizontal Bar Untuk Blogger :

- Fitur yang paling mengesankan dari widget ini adalah, gulungan bersama dengan layar seperti sebuah bar
kecil yang lengket.
- Widget ini mulai bergulir sejak ditempatkan di blog Anda dan mengapung sampai bagian komentar .
- Memiliki Facebook Like , Twitter Berbagi , Google+ 1 , Stumble it , Pin itu dan tombol Digg .
- Menggunakan script code Jquery dan CSS sehingga akan terlihat cantik dan sangat ringan.

Cara Install Ini di Blogger BlogSpot Blog :

Langkah-langkah untuk membuat widget tersebut sobat cukup ikuti petunjuk seperti yang disebutkan di bawah ini.

LANGKAH # 1 : Menambahkan Plugin Jquery Pada Template Blogger :

- Kembali ke Blogger.com >> Blog Anda >> Template
- Sekarang Backup template Anda .
- Kemudian pilih Edit HTML >> Lanjutkan
- Jangan lupa untuk Klik / Centang Expand Template Widget kotak .
- Cari kode </head> dan tepat di atasnya copypaste HTML follow + JavaScript + kode CSS.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'> /*
<![CDATA[*/
#mblSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
#mblSocialFloat td{padding:4px;margin:0;border:none;}
#mblSocialFloat td iframe{max-width:82px;width:82px !important;} #mblSocialFloat.mblFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>

<script type='text/javascript'>
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0; jQuery(document).ready(function(b){
var a=b("#mblSocialFloat");a.wrap('
<div id="mblSocialPlaceholder"></div>')
.closest("#mblSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#mblSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("mblFloatSocial"):a.removeClass("mblFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script src='https://asb-project.googlecode.com/svn/trunk/mbl_blogger_pinit.js' type='text/javascript'/>

<script type='text/javascript'>
/*<![CDATA[*/
// Twitter
(function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
// Google + (plus)
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Stumbleupon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
// Digg 
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
 /*]]>*/
</script>
</b:if>

LANGKAH # 2 : Menambahkan Tombol Horizontal Social Sharing di Template Blogger :

Sekarang saatnya menambahkan potongan terakhir dari kode, Cari kode <data:post.body/> dan sebelum / di atasnya paste coding berikut .

<!-- AjatShare.blogspot.com Floating Social Bar -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='mblSocialFloat' id='mblSocialFloat'>
<table class='mblSocialFloat' width='100%'>
<tr>
<td>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</td>
<td>
<iframe allowTransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</td>
<td>
<div class='w2bPinitButton' expr:id='&quot;w2bPinit-&quot; + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'> 
<data:post.body/>
<script type='text/javascript'>
w2bPinItButton({ 
url:&quot;<data:post.url/>&quot;, 
thumb: &quot;<data:post.thumbnailUrl/>&quot;, 
id: &quot;<data:post.id/>&quot;, 
defaultThumb: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY_RxHVRn8z1nZObKd1KZF-RTHAG5OtZIwiQHFfY_Y-QU4dNY0EQR9qpilQHS_8jHhSzmbVB6B4udf6skMwaDqt4oQ93dV0ij4DwRlH6dSVkqeMMn42XCCM3proEJ7UPwCzJXFQd-nSP3p/s1600/w2b-no-thumbnail.jpg&quot;, 
pincount: &quot;horizontal&quot; 
}); 
</script> 
</div>
</td>
<td>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</td>
<td>
<su:badge expr:location='data:post.url' layout='1'/>
</td>
<td>
<a class='DiggThisButton DiggCompact'/>
</td>
</tr>
</table>
</div>
</b:if>

Sekarang semuanya selesai, jangan lupa Simpan Template Anda.

Jika menghadapi masalah ketika menambahkan widget ini jangan ragu untuk bertanya pada kolom komentar.

Widget ini diciptakan oleh My Blogger Lab dan terima kasih khusus kepada Harish Dasari untuk membantu kami. Jangan lupa untuk menghubungkan kembali jika Anda ingin berbagi tutorial ini.

Sumber

Bagaimana Cara Termudah Memasang Google Analytics di Blogger

noreply@blogger.com (ajatshare) — Wed, 5 Mar 2014 12:55:00 +0700

Google Analytics adalah alat terbaik untuk melacak statistik situs Anda. Meskipun pihak ketiga menyediakan alat yang sama untuk mengetahui statistik tetapi Google Analytics bekerja lebih efisien dan memberikan laporan yang lebih akurat. Pengguna Blogger dapat menggunakan alat ini untuk mendapatkan laporan pelacakan persis seperti milik Google dan ini merupakan nilai tambah bagi pengguna Blogger. Meskipun Blogger memiliki alat Stat yang memberikan ringkasan singkat dari statistik tapi Google Analytics mencakup statistik situs secara menyeluruh. Jadi saya sarankan Anda menginstal Google Analytics di Blogger.

Bagaimana Anda dapat menginstal ini di Blogger ?
Anda hanya perlu mengambil dua langkah sederhana untuk menginstal alat ini di Blogger .

Langkah 1: Join Google Analytics

Ø Buka Google Analytics dan Masuk dengan Akun Google Anda
Ø Klik pada tombol Sign Up seperti yang ditunjukkan pada screenshot di bawah ini

Setelah itu Anda akan diminta untuk mengisi formulir yang akan terlihat seperti ini :

Isi formulir ini dengan rincian situs Anda dan kemudian klik pada "Get Tracking ID", di mana Anda akan diminta untuk menerima Syarat Layanan Google Analytics. Jadi klik
"I Accept".
Sekarang Anda telah berhasil bergabung dengan Google Analytics.

Langkah 2: Instalasi Google Analytics di Blogger Site

Anda dapat menginstal alat ini di Blogger dalam dua cara sederhana. Ikuti langkahnya di bawah ini:

Instalasi Oleh Analytics Web ID Properti :
Anda akan mendapatkan ID Tracking setelah Terdaftar di Google Analytics yang akan entah bagaimana seperti ini :
UA - 41218074-1
Ø Copy paste kode ID Tracking di atas
Ø Masuk ke Blogger Dashboard dan klik pada Settings dan kemudian masuk ke tab Lainnya
Ø Anda akan menemukan halaman di mana di bagian bawah Anda akan menemukan Analytic Lokasi Google sehingga paste ID Tracking di sana dan klik Save Settings .

Instalasi dengan Tracking Code:

<script type="text/javascript">
Var _gaq = _gaq | | [ ] ;
_gaq.push ( [ ' _setAccount ' , ' UA - XXXX - Y ' ] ) ;
_gaq.push ( [ ' _trackPageview ' ] ) ;

( function ( ) {
    Var ga = document.createElement ( ' naskah '); ga.type = ' text / javascript ' ;
Ga.async = true ;
    Ga.scr = ( 'http : ' document.location.protocol == ' http://ssl ' : ? ' Http://www ' )
+ ' .google-analytics.com/ga.js ' ;
   Var s = document.getElementryByTagName ( ' naskah ' ) [ 0 ] ;
s.parentNode.insertBefore ( ga, s ) ;
} ) ( ) ;
< / script >

Ø Pergi ke Blogger Dashboard kemudian
Ø Untuk Template dan klik Edit HTML
Ø Cari < / body> tag di sana dan paste kode di atas tepat di atas ini < / body> tag
Ø Ganti kode yang berwarna merah dengan ID Pelacakan dan
Ø Klik Save Template .
Sekarang Anda telah selesai dengan ini .

Catatan : Anda akan harus menunggu selama 2 sampai 3 jam setelah menginstal Google Analytics , maka akan mulai bekerja dan melacak statistik situs Anda.

Tips untuk menjamin keamanan blog Anda dari hacker

noreply@blogger.com (ajatshare) — Fri, 28 Feb 2014 17:55:00 +0700

Hacker selalu mencari situs rentan dan blog yang bisa mereka hack. Jika Anda merasa bahwa blog Anda aman dari hacker, Anda harus berpikir dua kali. Hal ini tidak mungkin bagi hacker mereka bisa masuk ke situs anda dengan sangat aman. Hal ini tidak hanya kebutuhan Anda tetapi tugas Anda untuk mengambil langkah-langkah yang tepat untuk memastikan bahwa website Anda adalah aman. Baca terus untuk mengetahui beberapa tips terbaik untuk menjaga blog Anda dari hackers:

1. Gunakan hosting yang aman: Jika Anda serius tentang blog Anda, penting untuk membeli hosting dari penjual yang bereputasi. Hosting oleh penjual yang tidak sah dapat dikompromikan pada beberapa aspek keamanan yang paling penting. Hosting gratis harus digunakan hanya ketika Anda menggunakannya untuk tujuan personal branding.

2. Backup data blog anda: mentimpan data blog sebagai cadangan jika nanti dikenudian hari diperlukan lagi. Ada banyak penyedia layanan yang menyediakan online back up untuk blog Anda, data dan situs web. Carilah penyedia layanan yang menawarkan jangkauan maksimum dan fitur dengan harga yang wajar.

3. Periksalah blog sistem anda: Salah satu dari sekian banyak yang mungkin bisa membuat blog Anda rusak adalah dalam sistem Anda sendiri. Jika sistem Anda tidak terjamin, dapat menjadi sumber kemungkinan terinfeksinya kode blog Anda. File yang terinfeksi bisa melalui upload ke blog. Gunakanlah antivirus yang berkualitas untuk memastikan bahwa tidak ada malware pada sistem Anda.

Mencegah lebih baik daripada mengobati dan pasti ada tidak banyak yang dapat Anda lakukan setelah blog Anda telah di-hack. Reputasi Anda di mata pembaca Anda yang dipertaruhkan sementara ada kemungkinan resiko kehilangan pembaca Anda. Lebih baik aman daripada menyesal.

Cara Membuat Sidebar Widget Melayang "Sticky" di Blogger

noreply@blogger.com (ajatshare) — Thu, 27 Feb 2014 04:55:00 +0700

Membuat Sidebar Widget melayang di layar yang keren memang menarik perhatian . Cara tersebut dikenal sebagai " Sticky " widget melayang yang menempel pada layar dibagian atas saat mouse digulirkan. Dengan menggunakan widget melayang di sidebar cukup berguna bagi kita . Lalu bagaimana cara membuat widget sidebar melayang "Sticky" di Blogger.

Ingat : ini bekerja dengan cukup baik dengan segala macam widget yang ada di sidebar Anda . Cara ini bukan hanya dapat digunakan pada kotak berlangganan email . Anda dapat menggunakannya untuk promosi item Anda , galeri , posting populer , foto Instagram , yang pada dasarnya segala sesuatu yang Anda inginkan .

Langkah # 1 : Menambahkan Widget Baru :
Hal pertama yang perlu Anda lakukan adalah menambahkan widget baru pada sidebar Anda. Pergi ke Blogger.com >> Tata Letak >> Tambah Gadget >> Tambahkan HTML / JavaScript >> dan nama widget sebagai "My Gadget Sticky".

Langkah # 2 : Instalasi "Sticky" Plugin :
Setelah menambahkan widget baru di blog Anda. Sekarang pergi ke Template >> Edit HTML >> dan cari kode </body> dan tepat di atasnya copy paste kode JavaScript berikut .

<script>
/*<![CDATA[*/
// Sticky Plugin

(function($) {    var defaults = {
            topSpacing: 0,
            bottomSpacing: 0,
            className: 'is-sticky',
            center: false
        },
        $window = $(window),
        $document = $(document),
        sticked = [],
        windowHeight = $window.height(),
        scroller = function() {
            var scrollTop = $window.scrollTop(),
                documentHeight = $document.height(),
                dwh = documentHeight - windowHeight,
                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
            for (var i = 0; i < sticked.length; i++) {
                var s = sticked[i],
                    elementTop = s.stickyWrapper.offset().top,
                    etse = elementTop - s.topSpacing - extra;
                if (scrollTop <= etse) {
                    if (s.currentTop !== null) {
                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
                        s.currentTop = null;
                    }
                }
                else {
                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
                    if (newTop < 0) {
                        newTop = newTop + s.topSpacing;
                    } else {
                        newTop = s.topSpacing;
                    }
                    if (s.currentTop != newTop) {
                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
                        s.currentTop = newTop;
                    }
                }
            }
        },
        resizer = function() {
            windowHeight = $window.height();
        };
    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
    if (window.addEventListener) {
        window.addEventListener('scroll', scroller, false);
        window.addEventListener('resize', resizer, false);
    } else if (window.attachEvent) {
        window.attachEvent('onscroll', scroller);
        window.attachEvent('onresize', resizer);
    }
    $.fn.sticky = function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
            var stickyElement = $(this);
            if (o.center)
                var centerElement = "margin-left:auto;margin-right:auto;";
            stickyId = stickyElement.attr('id');
            stickyElement
                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
                .css('width', stickyElement.width());
            var elementHeight = stickyElement.outerHeight(),
                stickyWrapper = stickyElement.parent();
            stickyWrapper
                .css('width', stickyElement.outerWidth())
                .css('height', elementHeight)
                .css('clear', stickyElement.css('clear'));
            sticked.push({
                topSpacing: o.topSpacing,
                bottomSpacing: o.bottomSpacing,
                stickyElement: stickyElement,
                currentTop: null,
                stickyWrapper: stickyWrapper,
                elementHeight: elementHeight,
                className: o.className
            });
        });
    };
})(jQuery);
/*]]>*/
</script>
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script type='text/javascript'>
  $(document).ready(function(){
    $("#mblfloater").sticky({topSpacing:0});
  });
</script>

Langkah # 3 : Membuat Widget "Sticky" di Blogger :
Setelah menambahkan kode JavaScript , Anda harus mencari nama widget Anda. Seperti disebutkan di atas widget tersebut kita beri nama "My Gadget Sticky".

Catatan : Untuk mengaktifkan kotak pencarian klik di mana saja di template editor dan tekan " CTRL + F " . Sekarang untuk menemukan "My Gadget Sticky" Anda akan dapat melihat kode yang mirip dengan yang berikut ini .

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
  <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  </b:includable>
</b:widget>

Sekarang setelah menemukan kode seperti yang disebutkan di atas, tinggal mengganti dengan coding berikut .

<b:widget id='HTML32' locked='false' title='My Sticky Gadget' type='HTML'>
  <b:includable id='main'>
  <div id='mblfloater'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>  </div>
  </b:includable>
</b:widget>

Ingat: ID dari widget Anda harus unik . Misalnya, jika Anda menggunakan id = 'HTML32' dalam salah satu widget Anda maka Anda tidak dapat menggunakan ID yang sama untuk yang lain.

Jika sudah selesai Simpan Template untuk menyelesaikan proses tersebut. Untuk Demonya bisa anda lihat di Sidebar Widget Sosial Media dalam blog ini.

Saya berharap semoga artikel ini bisa membantu Anda dalam menciptakan sebuah widget sidebar melayang "Sticky" di situs Blogger Anda.

Cara membuat JSON Search Box Widget Untuk Blogger

noreply@blogger.com (ajatshare) — Fri, 7 Feb 2014 23:02:00 +0700

Pada kesempatan kali ini saya akan berbagi tips widget tentang penambahan kotak pencarian ke blog blogger dengan menggunakan JSON yang mengambil konten blogger ke XML dan hasil pencarian ditampilkan pada halaman aktif yang sama. Blogger menyediakan halaman pencarian normal untuk menemukan konten yang menggunakan parameter q ( misalnya - http://ajatshare.blogspot.com/search?q=programming ). Dengan Advanced JSON kotak pencarian pengunjung dapat mencari setiap permintaan yang berkaitan dengan blog Anda dan hasil pencarian akan ditampilkan dalam popup menggunakan event onsubmit dengan menggunakan CSS sederhana. Jadi mari kita mulai bagaimana cara untuk menambahkan widget kotak pencarian yang keren ini!

Langkah 1 : Buka dashboard Blogger Anda dan pilih blog .
Langkah 2 : Arahkan ke >> Template >> Edit HTML
Langkah 3 : Klik di manapun dalam kode dan tekan Ctrl + F dan mencari < / body>
Langkah 4 : Copy kode yang diberikan di bawah dan tempatkan di atas / sebelum < / body>

<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
   url: "http://ajatshare.blogspot.com",   // Search Site URL
   numPost: 100,     // Jumlah hasil pencarian
   summaryPost: true,    // enable-disable Search Result Summary
   summaryLength: 400,    // Panjang dalam kata-kata
   resultTitle: "SEARCH RESULTS FOR", // Judul kontainer
   noResult: "No result",    // Tidak ada hasil
   resultThumbnail: true,    //enable-disable Thumbnail (gambar)
   thumbSize: 110,    // Ukuran gambar dalam px
   fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqy2fu8cr-XnUTMilMHAJcoUHsLK9uz5149K1DzcjAl5_vMkG2nmuVKJnTWkBXkslp3FFknFFMcyTDxzG1UHFG6oCpD6pDgBrBX-drvM8FDihouodXkvzzVvTWcfXJ_Oc00eXAJCuE375/s1600/no-img.jpg" //No Thumbnail
};
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script src='https://ajatshare.googlecode.com/svn/trunk/search-box.js' 
type='text/javascript'/>
<style>
#feed-input {border: 0 none;width: 150px;height: 28px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;}
#feed-input:focus{width:170px;margin-left:0px;}
#search-btn {background: none repeat scroll 0 0 #359BED;border: 0 none;color: #FFFFFF;padding: 6px 10px;height: 30px;cursor: pointer;}
#search-container { height:auto; overflow:auto; border-radius: 10px; margin-top:8px; margin-bottom: 3%; background-color: #6984BB; padding:10px 10px 0; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); -moz-box-shadow:1 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4); display:none;}
#search-container mark { background-color:transparent; color:black; font-weight:bold;}
#search-container a { text-decoration:none; color:#0D3E71; font-weight:bold; font-size:15px; display:block;}
#search-container a:hover { color:#39914E;}
#search-container h4 { width : 500px; margin:0 0 10px; font-family: &#39;Segoe UI Light&#39;, &#39;Open Sans&#39;, Verdana, Arial, Helvetica, sans-serif; color:#FFF; text-align: left;}
#search-container ol { background:transparent; border:none; margin:0 0 10px; padding:0 0;}
#search-container li { margin:10px 0 1px; padding:0px 8px 0px 0px; list-style:none; background-color:white; overflow:hidden;
 word-wrap:break-word; border-radius:3px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; border:1px solid #ccc;}
#search-container li img { display:block; float:left; margin:5px 5px ;}
#search-container li p { font-size: 11px; text-align: left;}
#search-loader { left:5px; z-index:999; background-color: #6984BB; width: 10%; color:white; padding:3px 5px; margin-bottom: 10px; font-size: 13px; -webkit-border-radius:0 0 3px 3px; -moz-border-radius:0 0 3px 3px; border-radius:0 0 3px 3px; display:none;}
#search-container li p { margin:0; padding:5px 0px;}
#search-container li:hover { background:#FAF4D7;}
#search-container .closebtn {font-size: 25px;color: #A8A8A8;padding-bottom: 10px;text-align: center;position: absolute;right: 25px;top: 25px;font-family: arial;}
</style>

Langkah 5 : Setelah berhasil menempatkan CSS dan JavaScript di atas, salin kode di bawah ini dan tempat di mana Anda ingin menampilkan Kotak Pencarian di blog Anda. Anda bahkan dapat Tambah Gadget di panel tata letak Anda dengan menambahkan Gadget "HTML/JavaScript".

<form action="/search" onsubmit="return updateScript();">
<input id="feed-input" name="q" placeholder=" Search Site " size="40" type="text" />
<input id="search-btn" onkeyup="resetField();" type="submit" value="Search" />
</form>

Langkah 6: Sekarang langkah terakhir dan yang paling penting! Menempatkan hasil pencarian kontainer di blog sobat di mana hasil pencarian akan muncul! .
Cari dan temukan posisi yang tepat di mana harus diletakan kode di bawah ini. Periksa posisi yang paling tepat dengan mencari di kotak pencarian di atas.

<div id='search-container'/>
<div id='search-loader'>Loading...</div>

LIVE DEMO - Cara membuat JSON Search Box Widget Untuk Blogger

Catatan:
Lakukanlah perubahan warna dan sesuaikan dengan warna templatenya, dan inilah kode warna yang harus diganti atau dirubah.

- Latar belakang Search Container:
mengubah warna background - #search-result-container
- Warna Text Search Kontainer Judul :
warna perubahan - #search-result-container h4
- Latar belakang Search Results :
mengubah warna background - #search-result-container li
- Warna Teks Hasil Pencarian Judul :
warna perubahan - #search-result-container a

Template V6 Blue HTML5 CSS3 Versi AjatShare

noreply@blogger.com (ajatshare) — Thu, 6 Feb 2014 15:06:00 +0700

Karena begitu banyak pertanyaan dan permintaan template yang bersumber dari artikel saya sebelumnya mengenai Template Full Responsive and Valid CSS3/HTML5, maka dari itu untuk menjawab dan memberikan template tersebut di atas sekaligus melunasi janji saya kepada semua sobat AjatShare bahwa saya akan share template di atas dengan melakukan perubahan besar baik dari segi visualisasi maupun optimasi dan tentunya penambahan fitur-fitur baru yang kesemuanya itu didasarkan kepada pendekatan seo dan optimasi on page seperti yang diinginkan Google Webmaster Tools - GWT.

Terlebih dulu saya akan menjelaskan sedikit tentang Template "V6_Blue_Template_HTML5_Responsive" asli sebelum direvisi. Template ini di design oleh Kang Kapuk dengan fituratau spesifikasi seperti di bawah ini:

- SEO friendly
- Valid HTML5
- Simply and very elegant design xD
- Fast Loading
- Valid microdata (google richsnippet)
- Responsive design
- Easy navigation
- High quality home paga image thumbnail
- Mobile template

Kelebihan dari Template ini setelah dilakukan revisi adalah sbb:

- Super Seo Friendly
- Optimasi Seo On Page
- Super Fast Loading 0.5 ms dari GTMetrix
- Mendapat Nilai Great B dan A dari GTMetrix
- Pure Valid HTML5 validator.w3.org dan validator.nu
- Pure Valid CSS3 jigsaw.w3.org/css
- Minify HTML, kode html sudah di compress
- Minify CSS, kode css sudah di compress
- Menu DropDown dengan CSS
- Typogrphy Included
- Emoticon dalam posting dan kolom komentar
- Code and Pre Highlighter Code
- Halaman statis full page
- h2 to h1, judul posting jadi judul blog
- meta tag seo friendly valid html5
- meta heading h1 h2 h3
- Permalink seo friendly
- Future widget label

LIVE DEMO DOWNLOAD

Adapun perubahan yang perlu sobat lakukan jika memakai template ini adalah:

by AjatShare

meta tag

Catatan: Jangan melakukan perubahan dalam isi template selain yang tersebut di atas, karena bisa menyebabkan tempalate error atau tidak valid lagi.
Jika sobat ingin menambahkan widget baru pastikan bahwa widget tersebut tidak menyebabkan error pada validasi ataupun optimasi.

Cara Agar Kata Kunci Yang Kita Buat Menjadi SEO Friendly

noreply@blogger.com (ajatshare) — Thu, 23 Jan 2014 17:28:00 +0700

Artikel ini sengaja saya kutip dari blog LimsWeb ditulis oleh LIMS yang menerangkan bahwa Teknik Agar Kata Kunci Yang Kita Buat Menjadi SEO Friendly itu tidaklah mudah, perlu pemikiran yang matang untuk menembak jitu sebuah keyword dari search engine.

Berikut ini ada beberapa teknik yang mungkin bisa berguna :

1. Kata kunci dalam URL

Kata kunci dalam URL dari situs web. Saya berpendapat hal ini membantu dalam posisi website pada kata kunci tersebut. Sebagai contoh: Untuk pencarian “cara membuat blog” domain http://www.caramembuatblog.com , mungkin berada pada posisi yang baik.

2. Kata kunci dalam judul atau “title”

Ini adalah salah satu yang paling penting karena isi tag “Judul” akan ditampilkan di search engine.
Keyword dalam konten atau posting
Merupakan pertimbangan penting dalam menentukan relevansi kata kunci. Selain itu kita juga harus mempertimbangkan keyword density atau kepadatan kata kunci.
Selengkapnya silahkan anda baca Cara Optimasi Meta Tag.

3. Kata kunci dalam teks link

Juga penting karena menentukan subjek halaman yang sedang diakses.

4. Kata kunci dalam header tag h1 h2 h3 …

Hal ini penting untuk mengukur apa yang bisa digunakan pada header tag h1 h2 h3 … .
Untuk penerapan dan keterangan lebih jauh lagi silahkan baca Mengatur Heading Tag h1 h2 h3 Agar Seo.

5. Kata Kunci pada awal postingan

Kata kunci di awal, dari berbagai referensi yang saya baca, akan memberikan posisi yang baik pada mesin pendari.

6. Kata kunci dalam atribut alt

Spider tidak dapat membaca gambar dan diagram, sehingga spider akan mengindeks atribut alt pada gambar, seperti nama gambar,dll
Selengkapnya untuk mengatur Tag Atibut Alt silahkan baca Cara Agar Tag Image Bisa Mendapat Ranking di SE.

7. Kata kunci dalam meta tags

Hal ini juga penting, untuk menempatkan keyword pada meta tags description dan keyword. Saya mengibaratkan ketika sobat masuk perpustakaan dan mencari buku berjudul jejak – jejak ekonomi syariah , maka sobat akan memilih rak dengan kategori ekonomi kemudian mencari buku tersebut. Begitu juga google, Secara sederhana saya berpendapat bahwa spider akan mengindeks meta tags deskripsi kemudian judul posting.
Selengkapnya silahkan anda baca Cara Memasang Meta Tag Agar Seo.

8. Kepadatan kata kunci

Adalah kedekatan antara kata kunci. Misalnya dalam membuat posting. Kepadatan kata kunci adalah rasio dari sebuah kata atau frase untuk total kata dalam teks. Misalnya, untuk sebuah teks dari 100 kata, jika sebuah kata muncul 5 kali, kepadatan adalah 5%.

9. Frase kata kunci

Ini adalah konsep penempatan kata kunci yang membentuk frase kunci. Misalnya, “belajar seo”, “belajar seo bagi pemula”, “ seo untuk pemula”,

10. Kata kunci sekunder

Mengoptimalkan kata kunci sekunder untuk mendukung kata kunci utama berdasarkan kompetensi . Misalnya jika kata kunci utama “ cara membuat facebook”. Kita dapat memilih keyword sekunder misalnya “cara mudah membuat facebook” ,”cara bikin fb baru”. Kemudian keyword tersebut kita tempatkan dalam postingan.

11. Sintaksis kata kunci

Jika kita membuat kesalahan mengetik kata kunci dalam blog kita, mungkin akan berpengaruh dalam pencarian di search engine. Sehingga sebelum memposting artikel, sebaiknya kita memilih judul yang tepat dan teliti dulu apakah terjadi kesalahan penulisan, karena ketika sudah diposting meski sudah diedit, url tidak akan berubah. Misalnya kamu membuat judul posting “ cara membuat facebook”, namun salah ketik jadi “ cara membuwat faceboook”.

Demikian Informasi mengenai Membuat Kata Kunci Menjadi SEO Friendly semoga berguna dan bisa bermanfaat buat kita semua.

Sumber : Membuat Kata Kunci Menjadi SEO Friendly | LimsWeb

Cara Membuat Daftar Isi atau Sitemap dengan Tampilan Berbeda

noreply@blogger.com (ajatshare) — Mon, 20 Jan 2014 14:47:00 +0700

Pada kesempatan siang ini kembali Ajatshare akan membagikan tips cara membuat daftar isi atau sitemap dengan tampilan berbeda dari biasanya. Mungkin sebagian sobat Ajatshare ada yang pernah melihat tampilan tersebut dan memang betul sekali daftar isi atau sitemap ini dipakai pakai dalam blog DTE yang scriptnya dibuat oleh Taufik Nurrohman.

Dan yang akan saya share adalah script aslinya jadi tampilan tidak seperti yang di DTE silahkan sobat edit kembali dan sesuaikan dengan blog masing-masing, untuk lebih jelasnya dapat dilihat pada live demo di bawah ini:

Urutkan artikel berdasarkan:
Filter artikel berdasarkan kategori:
Cari dengan kata kunci:

Bagi sobat yang ingin mengganti sitemap yang lama dengan sitemap yang keren ini, silahkan ikuti petunjuknya di bawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Centang Expand Template Widget.
4. Cari kode berikut kode ]]></b:skin> atau <style>
5. Copy dan paste kode berikut tepat di bawahnya

#table-outer {
  padding:7px 10px;
  margin:30px 30px 0;
}
#table-outer table {
  width:80%;
  margin:0;
}
#table-outer form {font:inherit;}
#table-outer td {padding:2px 2px;}
#table-outer label {
  font-weight:bold;
  color:#999;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
  display:block;
  text-align:right;
  margin:0 10px 0 0;
  padding:4px 0 0;
}
#table-outer select[disabled] {opacity:.4;}
#post-searcher {
  display:block;
  margin:0;
  padding:0;
}
#table-outer input,#table-outer select {
  width:100%;
  background-color:#111;
  border:none;
  display:block;
  margin:0;
  padding:5px 5px;
  font-size:70%;
  text-transform:uppercase;
  color:#777;
  outline:none;
  -webkit-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -moz-box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  box-shadow:inset 0 1px 3px black,0 1px 0 #444;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {background-color:#090909;}
#feed-container {
  display:block;
  clear:both;
  margin:0 30px;
  padding:0;
  list-style:none;
  overflow:hidden;
  position:relative;
  border:1px solid #3c3c3c;
  border-top:none;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
#feed-container:after {
  content:"";
  display:block;
  width:1px;
  height:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  background-color:#3c3c3c;
}
#feed-container li {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid #3c3c3c;
  color:#999;
  width:50%;
  float:left;
  display:inline;
}
#feed-container li .inner {
  margin:15px 16px;
  height:116px;
  overflow:hidden;
  word-wrap:break-word;
  text-overflow:ellipsis;
}
#feed-container li a {
  text-decoration:none;
  color:#5687B8;
}
#feed-container li a:hover {
  text-decoration:none;
  color:#eee;
}
#feed-container li a.toc-title {font-weight:bold;}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
  margin:0 10px 5px 0;
  padding:5px;
  background-color:#222;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius:0;
  float:left;
}
#result-desc {
  margin:0 30px;
  padding:0;
  border-bottom:4px solid #303030;
}
#result-desc span,#result-desc div {
  display:block;
  margin:0;
  padding:5px 10px 7px;
  color:#D64D52;
}
#result-desc div {color:inherit;}
#feed-nav {
  margin:10px 30px 0;
  text-align:center;
  font-weight:bold;
  text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
  background-color:#111;
  padding:0;
  color:#999;
  text-decoration:none;
  display:block;
  height:30px;
  line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
  background-color:black;
  color:white;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
#feedContainer li {
  float:none;
  display:block;
  width:auto;
  height:auto;
}
#feedContainer:after {
  display:none
}
}

Copy dan paste kode berikut diantara kode <body>.....</body> atau di widget

<div id="table-outer">
  <table border="0">
    <tbody>
    <tr>
      <td><label for="feed-order">Urutkan artikel berdasarkan:</label>
      </td>
      <td><select id="feed-order">
        <option selected="selected" value="published">POSTING TERBARU</option>
        <option value="updated">POSTING DIPERBAHARUI</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
      </td>
      <td><select disabled="disabled" id="label-sorter">
        <option selected="selected">MEMUAT...</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><label for="feed-q">Cari dengan kata kunci:</label>
      </td>
      <td><form id="post-searcher">
        <input id="feed-q" type="text" />
        </form>
      </td>
    </tr>
    </tbody>
  </table>
</div> 
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<header id="result-desc"></header>
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKdTZGbmdhUkUtbTA" type="text/javascript"></script>

Social Share Unlocker Popup untuk Blogger

noreply@blogger.com (ajatshare) — Fri, 10 Jan 2014 14:57:00 +0700

Hari ini saya akan menunjukkan bagaimana Anda dapat menambahkan Social Share Unlocker Popup untuk Blogger. Setelah menambahkan kode di blog Anda, Anda akan melihat satu waktu popup yang akan meminta Anda untuk baik Seperti, Google +1 atau Ikuti Anda untuk melihat isi dari blog. Timer dapat disesuaikan sesuai dengan kebutuhan Anda secara default adalah 60 detik. Anda juga dapat membuat closeable blog dan menambahkan tombol silang dengan mengutak-atik pengaturan. Kotak ini bekerja pada jQuery dan juga terlihat elegan.

Widget ini akan sangat efektif dalam meningkatkan kontra sosial Anda dan menyebarkan blog Anda. Secara keseluruhan CSS telah baik kode untuk membuat desain terlihat cantik. Anda dapat melihat demo live plugin ini dengan mengklik tombol di bawah ini.

LIVE DEMO - Social Share Unlocker Popup untuk Blogger

Setelah Anda telah melihat demo kita dapat melanjutkan dengan tutorial mengenai bagaimana Anda dapat menambahkan Social Share Unlocker Popup ke blog blogger Anda.

Langkah 1 : Menambahkan kode

Pertama pergi ke Blog Judul → Template → Edit HTML dan cari kode < / body> dan paste kode di bawah ini diberikan tepat di atas itu.

<script type='text/javascript'>
//<![CDATA[
TITLEKN='AjatShare';FBKN='https://www.facebook.com/mangsudradjat';
TWITTERKN='https://twitter.com/ajatshare';
URLKN='https://plus.google.com/109703640991842154536';
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<link href="https://googledrive.com/host/0B-qFC4Ni6GSKbHI3LXlMSzFVVXM" rel="stylesheet" type="text/css"/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKLUU3TkZoVHZtUDg" type="text/javascript"></script>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){                         
$().KN3IN1({
   timeout: 60,
   wait: 0,
closeable: false });
});
//]]></script>

Setelah menambahkan kode berikut Langkah 2 untuk pengaturan.

Langkah 2 : Pengaturan

Mengubah teks warna merah dengan nama pengguna Anda dari Facebook dan Twitter . Ubah URL dengan yang di mana Anda ingin mendapatkan Google +1.
Ganti 60 dengan tidak ada yang Anda inginkan . detik Anda ingin popup untuk muncul .
Mengubah false ke true jika Anda ingin popup menjadi closeable dan menambahkan tombol silang dalam popup.

Setelah mengkonfigurasi kode simpan template . Anda selesai sekarang . Sekarang Anda bisa mendapatkan lebih banyak saham sosial setiap kali pengunjung baru dan unik mengunjungi blog Anda dengan menambahkan ini Popup Social Share Unlocker plugin Blogger.

Cara Membuat Widget Recent Comments dengan Animasi Melayang

noreply@blogger.com (ajatshare) — Fri, 10 Jan 2014 13:14:00 +0700

Halo sahabat AjatShare, Kali ini saya akan posting mengenai widget Recent Comments awalnya dikodekan oleh Danish Harish dan kemudian diedit oleh banyak rekan-rekan blogger. Sama seperti mereka, saya pun telah telah malakukan perubahan dalam widget ini dan menambahkan animasi melayang-layang di dalamnya.

Demo live widget ini dapat dilihat dengan mengklik tombol di bawah ini.

LIVE DEMO - Cara Membuat Widget Recent Comments dengan Animasi Melayang

Setelah Anda telah melihat demo , untuk menambahkan widget ini di blog blogger Anda ikuti petunjuk yang diberikan di bawah ini.

Menambahkan Widget

Untuk menambahkan widget ini di blog Anda terlebih dahulu pergi ke Blog Judul → Tata Letak → Tambah Widget → HTML / JavaScript. Tambahkan kode di bawah ini diberikan.

<style type="text/css" scoped>
ul.allbloggertricks_recent{list-style:none;margin:0;padding:0;}
.allbloggertricks_recent li{background:none!important;display:block;clear:both;overflow:hidden;list-style:none;border:1px solid transparent;border-radius:9px;max-height:100px;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-property:0;-moz-transition-property:0;-o-transition-property:0;transition-property:transform;margin:0 0 6px!important;padding:3px!important}
.allbloggertricks_recent li:hover{border:1px solid #ddd;
-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg) }
.allbloggertricks_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.allbloggertricks_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>

<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='Your Name';
//]]>
</script><a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKTEdlU1NNSTZnb2c" type="text/javascript"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=allbloggertricks_recent&amp;&amp;max-results=50">
</script>

Tambahkan kode di atas dan ikuti petunjuk di bawah ini:

Menyiapkan Widget

Setelah menambahkan kode memeriksa konfigurasi widget.
numComments - Menunjukkan jumlah maksimum komentar untuk ditampilkan di widget.
showAvatar - Ubah ke false jika Anda ingin menyembunyikan avatar di widget.
avatarSize - Ukuran avatar di widget diukur dalam pixel.
roundAvatar - Ubah ke false jika Anda tidak ingin avatar menjadi berbentuk bulat.
karakter - Jumlah karakter untuk menunjukkan di komentar.
defaultAvatar - Gambar yang akan digunakan bila komentar tidak memiliki avatar.
adminBlog - Ganti Nama Anda dengan nama admin sehingga komentarnya dapat disembunyikan.

Setelah membuat semua perubahan jangan lupa untuk menyimpan template. Sekarang Anda dan pengunjung Anda dapat melihat widget komentar mengagumkan di dalam blog blogger Anda.

Cara Membuat Daftar Isi atau Sitemap yang Responsive

noreply@blogger.com (ajatshare) — Fri, 10 Jan 2014 12:00:00 +0700

Menambahkan Sitemap atau Daftar Isi di blog ini sangat dianjurkan untuk semua blogger baik baru atau lama. Peta Situs ini membantu pembaca untuk menavigasi blog dengan mudah dan juga membantu blog kita dengan menurunkan tingkat bouncing nya ( jumlah kunjungan yang terdiri dari hanya satu tampilan halaman ). Dari teman saya sangat baik + Chandeep J telah bekerja di widget Sitemap untuk membuatnya lebih menarik dengan diberinama Responsif Sitemap Widget untuk Blogger

Responsif Sitemap Widget untuk Blogger

Widget ini diberi kode oleh Chandeep dari BlogTipsnTricks . Widget sitemap ini responsif dan dapat digunakan lebih atau kurang dalam setiap template blogger tanpa masalah besar . Widget terlihat menarik dan eye catching juga. Sebuah demo kerja langsung dapat dilihat dengan mengklik tombol di bawah ini :

LIVE DEMO - Cara Membuat Daftar Isi atau Sitemap yang Responsive

<script src="https://googledrive.com/host/0B-qFC4Ni6GSKQnE2b0o5V25tcnc" type="text/javascript"></script>
<script src="URL Blog Anda/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; }
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; }
.ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; }
.ct-columns-3 p a:hover { background: #555; color: #fff; }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }</style>

Untuk menambahkan widget Sitemap ini ke dalam blog cukup ikuti petunjuk di bawah ini .

Pergi ke Blog Judul → Page → New → Halaman Halaman Kosong → HTML dan paste kode di bawah ini diberikan dalam editor posting . Lalu ganti tulisan warna merah dengan URL Blog Anda.

Cara Membuat Thumbnail otomatis dan Fungsi Read More pada Blogger

noreply@blogger.com (ajatshare) — Wed, 8 Jan 2014 13:12:00 +0700

Ikuti langkah-langkah :
1 . Pergi ke " Design" klik "Edit HTML "
2 . Centang pada " Expand Template Widget "
3 . Cari kode ini

<data:post.body/>

4 . Ganti dengan kode di bawah ini

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

5 . Sekarang , cari < / head> dan paste bagian kode berikut tepat sebelumnya :

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<a style="display:none" href="http://ajatshare.blogspot.com">Blogger Widgets</a>
<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(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>

LIVE DEMO - Cara Membuat Thumbnail otomatis dan Fungsi Read More pada Blogger

Keterangan:
summary_noimg = 430 ; tinggi posting tanpa gambar
summary_img = 340 ; tinggi posting dengan gambar
img_thumb_height = 100; tinggi gambar thumbnail
img_thumb_width = 120 ; lebar gambar thumbnail

Typography Icon Set

noreply@blogger.com (ajatshare) — Mon, 6 Jan 2014 13:45:00 +0700

Typography (gaya penulisan) dalam sebuah artikel akan membuat nyaman pengunjung blog dalam membaca artikel yang disajikan penulis, karena blog akan terlihat rapi dan lebih profesional. Cara pembuatan ini hanya menggunakan CSS yang kemudian diterapkan pada posting artikel.

Icon set

This is a sample file1 message.
Use Your message goes here!.

This is a sample kfile2 message.
Use Your goes here!.

This is a sample search message.
Use Your message goes here!.

This is a sample zoom- message.
Use Your message goes here!.

This is a sample zoom+ message.
Use Your goes here!.

This is a sample error message.
Use Your message goes here!.

This is a sample tick message.
Use Your message goes here!.

This is a sample book message.
Use Your goes here!.

This is a sample map message.
Use Your message goes here!.

This is a sample tag message.
Use Your message goes here!.

This is a sample stats message.
Use Your goes here!.

This is a sample star message.
Use Your message goes here!.

This is a sample ribbon message.
Use Your message goes here!.

This is a sample nav message.
Use Your goes here!.

This is a sample graph message.
Use Your message goes here!.

This is a sample flash message.
Use Your message goes here!.

This is a sample location message.
Use Your goes here!.

This is a sample locationminus message.
Use Your message goes here!.

This is a locationplus cd message.
Use Your message goes here!.

This is a sample bulb message.
Use Your message goes here!.

/*icons*/
.gkfile1,
.gkfile2,
.gksearch,
.gkzoomminus,
.gkzoomplus,
.gkerror,
.gktick,
.gkbook,
.gkmap,
.gktag,
.gkstats,
.gkstar,
.gkribbon,
.gknav,
.gkgraph,
.gkflash,
.gklocation,
.gklocationminus,
.gklocationplus,
.gkbulb {
background-position: 0 8px !important;
background-repeat: no-repeat !important;
min-height: 38px !important;
padding: 0 0 2px 62px !important;
}

LIVE DEMO - Typography Icon Set

Langkah 2 : Untuk penerapan ke dalam template ikuti petunjuk sesuai dengan gambar di atas.

Typography Boxes Styles

noreply@blogger.com (ajatshare) — Sat, 4 Jan 2014 14:41:00 +0700

Boxes Style

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orci non tortor accumsan at accumsan tortor congue.

This is a sticky. Use Your clip note goes here! to create a clip note!

This is a download box. Use Your download goes here! to create a download box!

This is a grey box. Use Your content goes here! to create a grey box!

This is a hilite box. Use Your content goes here! to create a hilite box!

Langkah 1 : Simpan kode ini di atas ]]></b:skin>

/* Warning message */
.box-info,.box-tips,.box-warning, .box-list, 
.box-download{ border: 1px solid #eee;clear:both; display: 
block;line-height: 22px; min-height: 38px; padding: 10px 12px 12px 68px;
 margin: 15px 0;}
.box-info{ background: #F8F8F8 
url('https://dl.dropboxusercontent.com/u/58902557/typography/info.png') 
no-repeat 12px 8px; color: #222}
.box-tips{ background: #7CADDE 
url('https://dl.dropboxusercontent.com/u/58902557/typography/tips.png') 
no-repeat 12px 8px; color: #fff;}
.box-warning{ background: #db6161 
url('https://dl.dropboxusercontent.com/u/58902557/typography/warning.png')
 no-repeat 12px 8px; color: #fff;}
.box-list { background: #F7FCF9 
url(https://dl.dropboxusercontent.com/u/58902557/typography/sticky-big.png)
 no-repeat 16px 14px;}
.box-download { background: #F8F8F8 
url(https://dl.dropboxusercontent.com/u/58902557/typography/download-big.png)
 no-repeat 16px 14px;}
.box1 { margin: 15px 0; padding: 10px 15px !important; background-color: #329579; color: #fff}
.box2 { margin: 15px 0; padding: 10px 15px !important; background-color: #ffffdd; color: #006699;}

LIVE DEMO - Typography Boxes Styles

Langkah 2 : Untuk penerapan ke dalam template ikuti petunjuk sesuai dengan gambar di atas.

Breadcrumbs SEO Friendly dan Valid HTML5

noreply@blogger.com (ajatshare) — Thu, 2 Jan 2014 01:54:00 +0700

Selamat malam sobat AjatShare. Pada malam ini kita akan membahas tentang Breadcrumbs SEO Friendly dan Valid HTML5. Mungkin sobat banyak yang sudah tau tentang Breadrumbs. Kabarnya dengan adanya Breadcrumbs akan menambah nilai tambah SEO untuk blog dan website yang sobat punya. Jika Breadcrumbs yang seo friendly sudah biasa dan sudah banyak dishare oleh sobat blog lainnya, namun kali ini kita akan bica tentang Breadcrumbs SEO Friendly dan Valid HTML5.

LIVE DEMO - Breadcrumbs SEO Friendly dan Valid HTML5

Langkah 1 : Simpan kode ini di atas ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'> &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span> </b:loop> &#187;
<span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187;
<span>Unlabelled</span> &#187;
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187;
<span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Apabila sobat sudah menerapkan breadcrumbs pada artikel sebelumnya, silahkan cari kode seperti ini:

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'>
<a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a>
</span>
<b:loop values='data:post.labels' var='label'> &#187;
<span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>

ganti dengan kode berikut ini :

<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a>
</span>
<b:loop values='data:post.labels' var='label'> &#187;
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

Selamat mencoba...

sumber : kangismet.net

Membuat Dropdown Menu Animasi Responsive Dengan CSS3

noreply@blogger.com (ajatshare) — Wed, 1 Jan 2014 23:56:00 +0700

Navigasi menu dropdown dengan fade in dan animasi cantik untuk geser sub menu ke atas. CSS animasi menu ini berjalan baik di semua browser modern termasuk Internet Explorer.

Menu ini juga memiliki border-radius dan box-shadow yang dapat terlihat sempurna dalam IE9 +

Untuk browser Safari yang digunakan pada handphone, iPad dll sub menu dapat ditutup dengan menekan layar dimana saja. Untuk lebih jelasnya silahkan coba Live Demo di Bawah ini:

LIVE DEMO - Membuat Dropdown Menu Animasi Responsive Dengan CSS3

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#url">Services</a>
    <ul>
      <li>
        <span><a href="#">Printing &amp; Framing</a>
        <span><a href="#">Photo Editing</a>
        <span><a class="last" href="#">Storage &amp; Backup</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contacts</a>
    <ul>
      <li>
        <span><a href="#">Support</a>
        <span><a href="#">Sales</a>
        <span><a href="#">Buying</a>
        <span><a href="#">Photographers</a>
        <span><a href="#">Stockist</a>
        <span><a class="last" href="#">General</a>
        </span></span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Stores Location</a>
    <ul>
      <li>
        <span><a href="#">South West Region</a>
        <span><a href="#">North East Region</a>
        <span><a class="last" href="#">Central Region</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contact Us</a>
    <ul>
      <li>
        <span><a href="#">Email Addresses</a>
        <span><a href="#">By Post</a>
        <span><a class="last" href="#">Telephone Numbers</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url"> Sales </a>
    <ul>
      <li>
        <span><a href="#">Digital SLR Cameras</a>
        <span><a href="#">Interchangeable Lenses</a>
        <span><a href="#">Flash Guns &amp; Accessories</a>
        <span><a href="#">Professional Tripods</a>
        <span><a class="last" href="#">Filters &amp; Lens Hoods</a>
        </span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</div>

/* Responsive Nav Menu Copyright @ ajatshare.blogspot.com */
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s; 
-moz-transition: 0s 0.75s; 
-ms-transition: 0s 0.75s; 
-o-transition: 0s 0.75s; 
transition: 0s 0.75s; 
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}

Menu support untuk IE7, IE8, IE9 Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch dan iPad.

Dropdown Navigation Menu Responsive Cross Browser

noreply@blogger.com (ajatshare) — Wed, 1 Jan 2014 23:10:00 +0700

Dropdown Navigation Menu Responsive Cross Browser dengan animasi yang cakep yang dapat tampil sempurna di Firefox 4, Opera, Safari, Chrome, iPad, iPhone dan iPod Touch. Browser membuka sub menu dengan alay,.. maksudnya delay ,.. :D untuk mencegah dropdowns tertutup, jadi ketika mouse bergerak (ke sub menu atau lainnya) yang punya sedikit jarak, akan menjaga drop down sub menu tidak tertutup secara tiba-tiba.

Drop down menu akan menghasilkan popup tab “close x” saat tampil di Touch iPad, iPhone dan iPod di atas top level menu yang dapat dimanfaatkan untuk menutup struktur menu. Untuk lebih jelasnya silahkan coba Live Demo di bawah ini:

LIVE DEMO - Dropdown Navigation Menu Responsive Cross Browser

<div class="menus">
  <ul>
    <li><a href="#url">Home</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Contact Us</a>
    <ul>
      <li><a href="#url">Email</a></li>
      <li><a href="#url">Telephone</a></li>
      <li><a href="#url">Online Form</a></li>
      <li><a href="#url">Snail Mail Address</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Resort</a>
    <ul>
      <li><a href="#url">Ski Hire Facilities</a></li>
      <li><a class="fly" href="#url">Main Ski Slopes</a>
      <ul>
        <li class="p1"><a href="#url">Beginners Slopes</a></li>
        <li><a href="#url">Intermediate Slopes</a></li>
        <li><a class="fly" href="#url">Advanced Skills</a>
        <ul>
          <li class="p1"><a href="#url">Local</a></li>
          <li><a href="#url">Nearby</a></li>
          <li><a href="#url">With instructor</a></li>
          <li><a href="#url">Snow boarding</a></li>
        </ul></li>
        <li><a href="#url">Expert</a></li>
      </ul></li>
      <li><a href=#url">Night Life</a></li>
      <li><a class="fly" href="#url">Restaurants</a>
      <ul>
        <li class="p1"><a href="#url">Snow Hotel</a></li>
        <li><a href="#url">The Snowman</a></li>
        <li><a href="#url">Ice Cavern</a></li>
        <li><a href="#url">Ski Inn</a></li>
      </ul></li>
      <li><a class="fly" href="#url">Car Hire</a>
      <ul>
        <li class="p1"><a href="#url">From Airport</a></li>
        <li><a href="#url">In Resort</a></li>
        <li><a href="#url">Multiple Resorts</a></li>
      </ul></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Surrounding Area</a>
    <ul>
      <li><a href="#url">Where to go</a></li>
      <li><a href="#url">What to do</a></li>
      <li><a href="#url">Places of interest</a></li>
      <li><a href="#url">Parks &amp; Museums</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Information</a>
    <ul>
      <li><a href="#url">Money Exchange</a></li>
      <li><a href="#url">Resort Information</a></li>
      <li><a href="#url">Language</a></li>
      <li><a href="#url">Short Breaks</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
</div>

/* Copyright http://ajatshare.blogspot.com */
.menus {height:50px; position:relative;}
.menus ul {padding:0; margin:0; list-style:none; width:150px; float:left;}
.menus ul ul {position:absolute; z-index:-1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul ul ul {position:absolute; left:150px; top:0;}
.menus ul ul ul.rgt {position:absolute; left:auto; right:150px; top:0;}
.menus ul li {float:left; width:150px; position:relative; z-index:10; 
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
}
.menus ul ul li {
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menus ul ul ul li {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul li a {display:block; width:139px; height:29px; padding-left:10px; background:#006699; font:normal 12px/29px arial, sans-serif; color:white; text-decoration:none; margin-bottom:1px; margin-right:1px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menus ul li a.fly {background:#006699 url(http://zifana.com/wp-content/uploads/2013/07/arrow-over.gif) no-repeat right center;}
.menus ul li:hover > a {background-color:#86A9D9; color:#fff;}
.menus ul li:hover > a.fly {background:#86A9D9 url(http://zifana.com/wp-content/uploads/2013/07/arrow.gif) no-repeat right center;}
.menus ul ul li {margin-top:-30px;}
.menus ul ul li.p1 {margin-top:0;}
.menus ul ul ul {margin-left:-150px;}
.menus ul li:hover > ul > li {margin-top:0;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul ul li:hover > ul {margin-left:0;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menus ul li.close {margin-top:-30px; z-index:-1;}

@media (max-width:768px){
/* for iPhone, iPod Touch and iPad */
.menu ul li:hover + li.close {margin-top:-60px; z-index:0;}
}

Menu support untuk IE7, IE8, IE9 Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch dan iPad.

Hal Terlarang yang Perlu Dihindari Dalam Melakukan teknik SEO

noreply@blogger.com (ajatshare) — Wed, 25 Dec 2013 23:40:00 +0700

Sampai hari ini, Search Engine sudah terbukti memberikan banyak keuntungan di Internet, bukan hanya trafik website, banyak keuntungan lainnya yang dapat dirasakan jika Anda berhasil mengoptimalkan mesin pencari sebagai Business Partner Anda dalam berbisnis online.

Sebelumnya saya sudah membahas tentang Cara mendapatkan posisi teratas pada hasil pencarian. Tulisan tersebut lebih memicu terhadap penyajian website agar Search Engine-Friendly sehingga dapat mencapai posisi teratas pada hasil pencarian.

Hal tersebut dapat Anda rasakan jika Anda berhasil menggunakan teknik SEO dengan benar. Dengan berkembangnya teknologi-teknologi Search Engine tersebut, ada beberapa hal yang harus Anda ketahui karena berbahaya jika Anda memaksa untuk melakukannya.

Kali ini, saya coba berbagi beberapa teknik yang "TERLARANG" dalam melakukan praktek SEO untuk meningkatkan trafik website Anda dan "JANGAN" gunakan salah satu teknik ini karena akan sangat berdampak buruk pada website Anda.

Men-duplikasi

Hal pertama yang paling banyak kita jumpai adalah duplikasi artikel oleh "sang duplikator" (plagiarisme). Pada tahun 2011 lalu, Google memperbaharui Algoritma Google Panda yang menargetkan para webmaster atau pemiliki website yang melakukan teknik terlarang ini. Copy dan Paste artikel atau tulisan blog orang lain adalah aksi plagiarisme yang akan berbuah sanksi atau hukuman oleh Google Panda, hal ini akan berdampak pada ranking Anda.

Inilah sebuah indikasi yang mengharuskan Anda untuk membuat original konten yang berkualitas dengan tulisan tangan Anda sendiri atau membuat kerjasama dengan para penulis. Cara ini lebih efisien daripada Anda harus mencuri hasil karya cipta seseorang yang memiliki bad-feedback atau dampak yang buruk dalam menggunakan teknik SEO ini.

No Spinning Article

Spinning Article menggunakan "Generator Konten Otomatis" juga merupakan hal terlarang dalam teknik SEO. Memang teknik ini sangat populer dalam beberapa tahun terakhir yang dilakukan dengan cara menggabungkan beberapa artikel yang sama menjadi satu artikel dengan harapan meningkatkan baclink.

Yang salah pada teknik ini biasanya akan menghasilkan konten yang tidak berkualitas, selain teknik ini buruk terhadap SEO, reputasi website Anda pun akan berdampak negatif.

Jadi berhentilah melakukan teknik ini, karena mau bagaimanapun, raksasa mesin pencari selalu mengupdate teknologinya dan yang pasti selalu lebih canggih dari trick apapun yang akan kita gunakan untuk bermain-main dengan mereka.

Membuat Persamaan (exact-match) Anchor Text

Setelah update teknologi terbaru Penguin 2.0 sekitar pertengahan tahun 2013, aturan penggunaan anchor text telah berubah. Penggunaan Anchor Text banyak disalahgunakan untuk meningkatkan posisi hasil pencarian dengan menggunakan keywords berdasarkan trend yang terbukti berfungsi dengan baik untuk menempatkan posisi hasil pencarian website mereka oleh para Internet Marketer ini, padahal informasi yang terdapat pada halaman tersebut tidak relevan dengan keyword yang dibuat. Cara ini sangat salah, dan itulah salah satu fokus Google Penguin.

Google menganggap teknik ini mengambil keuntungan yang tidak seharusnya dilakukan pada sistem, karena itulah website yang menggunakan teknik ini telah mendapatkan hukuman yang pantas oleh Google.

Pada kenyataannya, banyak website yang telah terkena sanksi dan di-banned oleh Google Penguin dan rata-rata website tersebut menggunakan "money keyword" sebagai anchor text yang mendatangkan inbound hampir 60% berdasarkan penelitian yang dilakukan oleh Microsite Masters.

Contoh Exact-Match

Misalnya seperti ini, Anda memiliki sebuah artikel dengan topik "Teknik SEO untuk pemula", tapi pada bagian akhir artikel atau biasanya diletakkan pada bagian bawah halaman keyword-keyword yang tidak berhubungan misalnya "Cara mendapatkan uang di Internet" tapi dengan link yang mengarahkan pada halaman topik tersebut. Biasanya lebih dari satu keyword atau label seperti berikut yang sama sekali tidak berhubungan dengan artikel yang Anda tulis ataupun dengan website yang Anda miliki.

Jika Anda menggunakan teknik ini, hentikan mulai sekarang, sebelum Anda juga merasakan hukuman dan reputasi yang buruk untuk website Anda.

Membangun Backlink yang Tidak Relevant dan Berkualitas Buruk

Salah satu cara yang kita ketahui untuk mendapatkan Page Rank yang tinggi adalah dengan memiliki banyak backlink dari website lain. Tetapi pada teknologi terbaru Google Panda dan Penguin, banyak backlink yang mengarahkan ke website yang Anda miliki tidak selalu menghasilkan Page Rank yang tinggi. Apalagi jika backlink yang banyak tersebut berasal dari website yang tidak sesuai dengan Niche atau kategori website Anda.

Misalnya Anda mendapat 1.000 backlink dari website "Jasa pembuatan website", padahal kategori website Anda adalah "Penjualan mesin penggiling". Backlink dari website yang berkualitas buruk pun akan menjatuhkan reputasi website Anda, hal ini lah yang harusnya membuat Anda berhati-hati dalam membangun backlink untuk meningkatkan SEO anda.

Tidak perlu memiliki banyak backlink, karena walaupun hanya memiliki backlink yang sedikit tapi jika berasal dari website yang berkualitas (memiliki page rank tinggi) dan sesuai dengan niche website Anda, perhitungan ini akan memberikan anda keuntungan lebih daripada memiliki banyak backlink tapi tidak sesuai.

Jika ingin aman, berhati-hatilah terhadap teknik ini, karena Google telah menyatakan lampu merah terhadap hal ini.

Berkomentar di Blog lain secara Brutal (SPAM)

Salah satu teknik yang paling banyak digunakan untuk mempromosikan website dan membangun backlink adalah dengan mengomentari tulisan blog lain dan menyisipkan link ke website Anda. Hingga saat ini, masih banyak yang belum mengetahui bahwa teknik ini akan berdampak buruk pada cara yang anda lakukan atau bahkan website anda akan dianggap SPAM.

Biasanya "comment spamming" hanya memberikan komentar yang singkat, contohnya "artikel yang berguna, kunjungi website saya spam.com", padahal spammer tersebut tidak membaca detail apa isi dari halaman yang sedang dia buka.

Banyak software ditawarkan pada anda dengan tema biasanya "Bulk Blog Commenting" atau "Auto blog comment poster", tapi jika anda ketahui teknik ini sangat berbahaya, jadi sangat tidak disarankan.

Nge-blog dengan cara yang tidak tepat

Teknik terlarang lainnya adalah "Nge-Blog Brutal", maksudnya menggunakan Blogging Network seperti Blogger, Typepad, Squidoo, atau Hubspot yang bertujuan untuk menciptakan banyak backlink dari Blog Network yang memiliki Page Rank tinggi tersebut, teknik ini sekarang tidak seperti dulu dan akan merugikan anda.

Pada dasarnya, Blog Network tersebut tidak memperbolehkan anda membuat artikel atau post yang sudah pernah anda publish di website lain (bahkan di website anda sendiri). Tapi banyak para Internet marketing menyalahgunakan aturan dan ketentuan yang berlaku pada website-website tersebut sehingga mem-publish artikel yang sama ke beberapa Blog Network yang berharap mendapat akumulasi backlink yang baik, padahal sebaliknya.

Sebaiknya anda tetap mem-publish artikel yang berkualitas dan menarik, karena teknik ini sekarang sudah tidak "musim" lagi dan dianggap berbahaya oleh google. Tapi hal terjeleknya adalah, website anda dianggap tidak professional yang tentu saja akan menghancurkan reputasi anda. Bayangkan jika website yang anda miliki adalah website perusahaan???

SPAMMING di Social Media

Memang ini adalah kontroversi jika anda membaca artikel saya tentang Menggunakan Social Media untuk Meningkatkan SEO, dan memang cara ini terbukti sangat memberikan keuntungan jika dilakukan dengan cara yang benar.

Seperti apa cara yang salah?

Misalnya anda adalah salah satu website Berita Online yang memiliki interval update yang sangat cepat (katakan per 30 menit). Biasanya para webmaster akan menggunakan teknik Syndications untuk posting semua konten terbaru website anda secara otomatis ke social media. Tapi pernahkah Anda sadari, cara ini secara logika akan membombardir feed para follower anda? Awalnya mereka menjadi fans anda karena website anda memberikan informasi yang bermanfaat, tapi apakah semua informasi yang kita sajikan bermanfaat untuk mereka? tentu saja posting social media dalam interval waktu yang terlalu singkat akan membuat informasi yang anda berikan menjadi "Sampah social media', dan jeleknya anda akan terus kehilangan followers atau likers anda.

Itulah beberapa Teknik Terlarang yang harus Anda hindari dalam meningkatkan SEO website Anda. Jika Anda masih menggunakan cara yang sudah ketinggalan ini, hentikan sebelum anda merasa kerugian yang sangat fatal.

sumber: http://sidikhanrei.com/id/blog/seo/2013/10/21/10-116/beberapa_teknik_seo_terlarang_yang_harus_dihindari

Pengertian dan Pengenalan Javascript

noreply@blogger.com (ajatshare) — Wed, 25 Dec 2013 22:06:00 +0700

Apa itu JavaScript?

JavaScript adalah bahasa “Scripting”, bukan bahasa pemrograman.
JavaScript didisain untuk membuat halaman HTML menjadi lebih interaktif.
JavaScript biasanya disisipkan langsung pada halaman HTML.
Client Side scripting.
Apakah JavaScript sama dengan Java? TIDAK. JavaScript dan Java sangat berbeda baik itu dari bahasa maupun dari konsep dan disainnya.
JavaScript bersifat Case Sensitive.

Penggunaan JavaScript

Menggunakan tag HTML <script>

Contoh

<script type="text/javascript">
...
...
</script>

Penempatan JavaScript

Ditempatkan pada tag <head>
Ditempatkan pada tag <body>
Ditempatkan pada tag <head> dan <body>
Sebagai file external.

Penggunaan JavaScript External

File contoh1.js

document.write("<h2>Text ini ditulis dengan JavaScript</h2>");

File contoh1.html

<head>
<script type=“text/javascript”src=“contoh1.js”></script>
</head>

Variabel
Aturan penulisan Variabel :

Nama variabel bersifat Case Sensitive
Harus dimulai dengan huruf atau karakter underscore.

Deklarasi Variabel dengan statement var

var nama;
var nama="ajatshare";

Variabel yang tidak dideklarasikan

nama="ajatshare";
x=y+5;

Mengenal dan Memahami Tag Conditional serta Penerapannya pada Template

noreply@blogger.com (ajatshare) — Sat, 14 Dec 2013 16:48:00 +0700

Bagi sobat AjatShare yang suka/gemar gonta-ganti template atau sobat ingin belajar mengedit template, disini saya akan coba berbagi sedikit ilmu tentang penggunaan Tag Conditional yang khusus berhubungan dengan tampilan widget pada template kita.
Kenapa kita harus mengenal dan memahami pengertian tag conditional tersebut, karena dengan memahami fungsi dari tag conditional akan memudahkan kita untuk menempatkan widget di bagian halaman tertentu sesuai dengan yang kita inginkan.
Tag Conditional yang akan saya bahas di bawah ini selain untuk menempatkan widget di halaman tertentu juga bisa digunakan untuk menempatkan kode html yang berhubungan dengan tampilan template kita.

Keterangan:
Lambang " == " Menampilkan widget hanya di halaman .......
Lambang " != " Menampilkan widget di semua halaman kecuali .....

1. Halaman Muka (Home Page)
Menampilkan widget hanya di halaman depan saja (homepage)
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..... masukan kode widget disini .....
</b:if>

Menampilkan widget disemua di halaman kecuali halaman depan (homepage)
<b:if cond='data:blog.url =! data:blog.homepageUrl'>
..... masukan kode widget disini .....
</b:if>

2. Halaman Arsip (Archive Page)
Menampilkan widget hanya di halaman Archive saja.
<b:if cond='data:blog.pageType == "archive"'>
..... masukan kode widget disini .....
</b:if>

Menampilkan widget disemua di halaman kecuali halaman Archive.
<b:if cond='data:blog.pageType =! "archive"'>
..... masukan kode widget disini .....
</b:if>

3. Halaman Posting (Post Page)
Menampilkan widget hanya di halaman posting.
<b:if cond='data:blog.pageType == "item"'>
..... masukan kode widget disini .....
</b:if>

Menampilkan widget disemua di halaman kecuali halaman posting.
<b:if cond='data:blog.pageType =! "item"'>
..... masukan kode widget disini .....
</b:if>

4. Halaman Posting Tertentu (Item Post Page)
Menampilkan widget hanya di postingan tertentu saja.
<b:if cond='data:blog.pageType == "alamat-postingan"'>
..... masukan kode widget disini .....
</b:if>

Menampilkan widget disemua di halaman kecuali halaman tertentu.
<b:if cond='data:blog.pageType =! "alamat-postingan"'>
..... masukan kode widget disini .....
</b:if>

5. Halaman Statis (Static Page)
Menampilkan widget hanya di halaman staticpages.
<b:if cond='data:blog.pageType == "static_page"'>
..... masukan kode widget disini .....
</b:if>

Menampilkan widget disemua di halaman kecuali halaman staticpages.
<b:if cond='data:blog.pageType =! "static_page"'>
..... masukan kode widget disini .....
</b:if>

Berikut Ini Cara Penerapan Kode Tersebut Pada Widget :

Kita ambil salah satu contoh, Misalkan sobat lihat di blog saya ini ada widget dengan judul "Paling Banyak Dibaca" pada sidebar kanan bawah dan sekarang kita coba membuat widget tersebut hanya tampil pada halaman posting saja, berikut caranya:

1. Silahkan login akun Blogger.com
2. Pilih menu Rancangan dan Pilih Edit/HTML
3. Setelah Itu Centang Expand Template Widget
4. Untuk menghindari terjadinya kesalahan silahkan Download Lengkap Template
5. Kemudian cari Translate gunakan Ctrl+f
6. Lalu kita cari dan perhatikan kode widget seperti ini :

<b:widget id='PopularPost1' locked='false' title='Paling Banyak Dibaca' type='HTML'> 
  <b:includable id='main'> <!-- only display title if it's non-empty --> 
    <b:if cond='data:title != &quot;&quot;'> 
      <h2 class='title'> <data:title/> </h2> 
    </b:if> 
    <div class='widget-content'> <data:content/> </div> 
    <b:include name='quickedit'/> 
  </b:includable> 
</b:widget>

7. Kode di atas adalah kode Widget PopularPost apabila kita akan menampilkan widget PopularPost tersebut hanya di halaman posting saja, maka sisipkan Tag Conditional pada kode widget tersebut seperti yang dicontohkan di bawah ini.

<b:widget id='PopularPost1' locked='false' title='Paling Banyak Dibaca' type='HTML'> 
  <b:includable id='main'>  
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- only display title if it's non-empty --> 
      <b:if cond='data:title != &quot;&quot;'> 
        <h2 class='title'> <data:title/> </h2>  
      </b:if> 
      <div class='widget-content'> <data:content/> </div> 
      <b:include name='quickedit'/> 
    </b:if> 
  </b:includable> 
</b:widget>

atau bisa juga seperti di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
  <b:widget id='PopularPost1' locked='false' title='Paling Banyak Dibaca' type='HTML'> 
    <b:includable id='main'> <!-- only display title if it's non-empty --> 
      <b:if cond='data:title != &quot;&quot;'> 
        <h2 class='title'> <data:title/> </h2> 
      </b:if> 
      <div class='widget-content'> <data:content/> </div> 
      <b:include name='quickedit'/> 
    </b:includable> 
  </b:widget>
</b:if>

Demikianlah penjelasan yang sederhana ini mengenai Mengenal dan Memahami Tag Conditional serta Penerapannya pada Template.

Cara Membuat Kotak Pesan Admin (Author Box) Di Blog

noreply@blogger.com (ajatshare) — Wed, 4 Dec 2013 11:12:00 +0700

Author box atau Kotak Pesan Admin biasanya digunakan sebagai tanda pengenal seorang penulis dari sebuah blog, atau berupa penyampaikan pesan singkat dari penulis. Kotak pesan tersebut terdapat gambar dari penulis blog serta ucapan terima kasih kepada penunjung yang telah berkunjung dan membaca artikel pada blog. Kotak Admin pada dasarnya ditempatkan dibawah postingan blog. Berikut langkah-langkah membuat Author Box pada blog sobat :

LIVE DEMO - Cara Membuat Kotak Pesan Admin (Author Box) Di Blog

1. Login ke Blogger
2. Masuk ke Rancangan lalu pilih Edit HTML
3. Centang Expand Template Widget.
4. Cari kode berikut kode

]]></b:skin>

5. Copy dan paste kode berikut di atas kode ]]></b:skin>

.admin-author{display:block;width:auto;background:#F5F5F5;border:1px solid #ccc;padding:0;margin:0px;font:normal 12px Arial, Sans-Serif;color:#222;}
.admin-author .kontainer{padding:5px;}
.admin-author h4{background:#C0C0C0;border:none;border-bottom:1px solid #C0C0C0;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.admin-author h4 a{color:#FEEA83;}
.admin-author img{width:80px;height:70px;margin:0 10px 0 0;float:left;border:0px;padding:2px;
background:#E6E6FA;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}

6. Cari Kode berikut :

<div class='post-footer'>

7. Copy dan pastekan kode berikut di atasnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='
admin-author'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ AjatShare</h4>
<div class='kontainer'>
<img height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Tntb_WgGL47hpsikbiCS2wzX0YbzN072o3Qzn1m9QcwuFk_hAcfHNfjmsS145mkUte7iY8rlO10HswgR4bpzDNj2Q40MXUmQARWDdkC44U3RGTDbuVPvEpLFTFhXghrYXZ_mKU52_Z29/s1600/Picture+004.jpg' width='80'/>
Anda sedang membaca sebuah artikel yang berjudul <b><a expr:href='data:post.url'><data:post.title/></a></b>, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan tulis di kotak komentar <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://ajatshare.blogspot.com' target='_blank'>:: Terima Kasih ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

8. Klik Save dan lihat hasilnya... Keterangan : Text yang berwarna merah ganti dengan url gambar sobat. Text yang berwarna orange adalah pesan

6 Kunci Sukses Google Webmaster Tools untuk Meningkatkan Strategi SEO Anda

noreply@blogger.com (ajatshare) — Wed, 27 Nov 2013 11:52:00 +0700

Kebanyakan para pakar seo bergantung pada Google Webmaster Tools (GWT) untuk menganalisis aspek-aspek teknis dari sebuah situs web. Para pakar seo ini fokus pada data statistik seperti crawl stats (merangkak), page error (kesalahan halaman) dan rich snippets (potongan kaya).

Selain analisis teknis, saya sarankan menggunakan GWT untuk pebaikan dasar SEO on-page anda. Berikut adalah 6 cara mudah menggunakan Alat Webmaster untuk meningkatkan SEO pada halaman website anda.

1. HTML Improvements (Perbaikan HTML)

Di bawah Search Appearance, Anda akan menemukan HTML Improvements (Perbaikan HTML). Laporan ini memberikan gambaran tentang masalah apapun dengan meta deskripsi situs Anda dan tag judul, bersama dengan catatan setiap konten yang tidak diindeks.

Dalam dunia SEO, kita tahu bahwa itu penting untuk memiliki deskripsi meta tag judul yang unik dan dioptimalkan. Laporan ini memungkinkan Anda untuk dengan mudah mengidentifikasi tag / meta description masalah judul dan memprioritaskan-nya.

Sebagai contoh, dalam gambar di atas, Anda dapat melihat bahwa 634 halaman memiliki tag judul duplikat. Jika di klik pada link "Duplicate title tags", dan akan dibawa ke layar daftar semua 634 halaman, maka cara tsb dapat dengan cepat dan mudah untuk mengidentifikasi judul halaman yang perlu diperbarui.

2. Content Keywords (Konten Keywords)

Di bawah Index Google, Anda akan menemukan Content Keywords. Alat ini memungkinkan Anda untuk menentukan situs anda bukan tentang apa yang anda pikirkan, tapi bagaimana Google melihat situs anda.

Hal ini menunjukkan kata kunci yang digunakan di situs Anda, bersama dengan variasi kata kunci dan signifikansi. Data ini membantu Anda dengan cepat menentukan apakah Anda membutuhkan lebih banyak konten yang dibuat sekitar kata kunci tertentu, tema dan topik. Hal ini juga menunjukkan halaman mana yang kata kunci ingin dimunculkan.

3. Structured Data (Data Terstruktur)

Data terstruktur adalah cara untuk membantu menjelaskan isi dari website Anda ke mesin pencari, dalam beberapa kasus dapat membantu peringkat dan lalu lintas. Jika data situs anda telah terstruktur, GWT memiliki fitur yang menunjukkan jenis data terstruktur bahwa Google mampu mendeteksi pada situs Anda, bersama dengan URL yang mengandung masing-masing jenis. Anda dapat menemukan laporan ini di bawah Search Appearance > Structured Data.

Catatan: Alat ini hanya mencakup tingkat entitas teratas yang ditemukan pada halaman. Misalnya, jika halaman Anda berisi schema.org / Acara pada gilirannya berisi schema.org / Place, hanya item acara saja yang akan dihitung.

4. Data Markup Helper

Dalam Sumber lain, Structured Data Markup Helper (Data Terstruktur Markup Helper) memungkinkan Anda untuk menandai bidang data untuk events, products dan lainnya pada situs Anda.

Jika Anda tidak yakin darimana untuk memulai markup terstruktur, caranya mudah cukup menggunakan point-and-klik tool. Yang menyenangkan pada bagian ini adalah anda tidak perlu melakukan perubahan HTML. Anda cukup mengarahkan Mouse highlights ke Tag pada setiap bagian kata kunci dari data halaman yang sesuai dengan situs Anda.

5. Sitemaps (Peta Situs)

Peta Situs memungkinkan Anda untuk melihat semua Sitemaps yang telah Anda tambahkan (atau Google ditemukan) bersama dengan statistik seperti tanggal terakhir itu diproses dan jumlah halaman yang disampaikan dan diindeks. Statistik ini dapat dilihat oleh content-type, meaning Web, video, gambar dan berita.

Fitur lain yang baik adalah pilihan sitemap test (tes sitemap), masukan URL ke sitemap, dan Google akan memindai dan dengan cepat mendeteksi kesalahan yang perlu diperbaiki.

6. Removing URLs (Menghapus URL)

Jika anda ingin menghapus URL dari indeks Google, Anda dapat menggunakan fitur URL Remove di Webmaster Tools. Ini bisa menjadi alat yang sangat kuat, tetapi menggunakan dengan hati-hati! Hanya menggunakan alat ini jika Anda ingin menghapus secara permanen URL.

Jika Anda tidak sengaja menampilkan informasi rahasia seperti nomor kartu kredit, Anda dapat meminta penghapusan dipercepat dari URL. Anda akan menemukan alat ini di bawah "Google Index" di navigasi kiri.

Webmaster Tools sangat cepat dan mudah untuk memperbaiki SEO On-Page

Saya merasakan bahwa alat ini sangat membantu saya untuk upaya peningkatan SEO dan mengurangi waktu analisis. Enam fitur diatas hanyalah sebagian alat yang ditawarkan Google Webmaster Tools. Saya berharap Anda bisa mengeksplorasi cara-cara di mana GWT dapat membantu Anda menerapkan efektifitas program SEO on-page

sumber: http://searchengineland.com/6-ways-google-webmaster-tools-can-improve-your-seo-strategy-175876