logo blog

Crayon Syntax Highlighter For Blogger

Crayon Syntax Highlighter For Blogger
memasang Crayon Syntax Highlighter di blogger

Crayon Syntax Highlighter untuk Blogger

Cara memasang Crayon Syntax Highlighter di blogger, biasanya Crayon Syntax Highlighter ini dipakai di WordPress tapi di blog saya ini akan berbagi cara memasang Plugins Crayon Syntax Highlighter di blogger

Crayon Syntax Highlighter mendukung beberapa bahasa pemerograman seperti..
HTML CSS PHP SQL XML VB Python Javascript
Dan Yang Lainnya

Nah di sini saya tidak share seemua scripnya, tapi hanya sebagian yang biasa dipakai untuk share tutorial, berbagi script di blog tentang css, html, javascript, supaya tidak terlalu berat.

Dan bagi kalian yang lebih suka yang simple, kemaren saya baru share Prism Syntax Highlighter Simple yang lumayan simple tidak neko-neko... barang kali kalian pengen mencobanya :)

Untuk yang ingin memasang Crayon Syntax Highlighter ini, silahkan ikuti langah demi langkah cara pemasangannya....

  • Login dulu ke Blogger.com
  • Masuk ke Tab Templates, Edit HTML
  • Selanjutnya Cari Kode </head> Atau </body>
  • Kalo sudah ketemu, masukan Script dibawah ini tepat d atas salah satu kode yang di cari tadi...!
  • 
    <!--Crayon Syntax Highlighter For Blogger-->
    <link href='https://rawgit.com/mastamvan/backup/crayonhighlighter/crayon-min.css' rel='stylesheet' type='text/css'/>
    <script src='https://rawgit.com/mastamvan/backup/crayonhighlighter/shCore.js' type='text/javascript'></script>
    <script src='https://rawgit.com/mastamvan/backup/crayonhighlighter/shBrushPython.js' type='text/javascript'></script>
    <script src='https://rawgit.com/mastamvan/backup/crayonhighlighter/shortcodes.js' type='text/javascript'></script>
    <script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true; 
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf'; 
    SyntaxHighlighter.all(); 
    </script>
    <!--Crayon Syntax Highlighter For Blogger-->
    
    Crayon Syntax Highlighter ini memerlukan ajaq jquery lubis di template kalian, jika belum ada... masukan script berikut di atas </head>
    
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    

    Cara Pemasangan Crayon Syntax Highlighter ke Postingan

  • Silahkan agan buat postingan baru...
  • Lalu pilih Bilah / Mode HTML pada postingan. Contoh Lihat Gambar....
  • Membuat Prism Syntax Highlighter Simple Di Blog
  • Lalu agan masukan script di situ dengan pembungkus pre code.. contoh.....
    
    [code hl="1, 4, 7"]
    Taro Script Agan Disini
    [/code]
    
    
    Jika Tidak Bekerja, silahkan rubah jadi seperti ini...
    
    <div class='post' >
    [code hl="1, 4, 7"]
    Taro Script Agan Disini
    [/code]
    </div>
    
  • Perlu Di Ingat!!

    Kalo memasukan script ke postingan di mode HTML agan harus mem parse atau di konversi terlebih dahulu kode tersebut..
    Karena kalo tidak di parse / konversi nanti scriptnya akan bekerja dan tidak akan tampil..

    Untuk Mem parse kode HTML / Javascript bisa menggunakan tools yang sudah saya sediakan... Cara Parse Atau Konversi Kode HTML
  • Setelah itu agan tinggal lanjutkan menulis kata-kata lainnya.
  • Kalo sudah, tinggal save dan lihat hasilnya. #Thank
okeh, cukup sekian dan terimakasih, semoga artikel tentang Cara Memasang Crayon Syntax Highlighter di Blogger ini bermanfaat bagi kita semua ya :)

Jangan lupa tinggalkan jejak anda di kolom komentar ya :), barang kali ada yang mau ditanyakan okeh :)

Cara Agar Blog Tidak Bisa di Copas Kecuali Pada Bagian Tertentu

Cara Agar Blog Tidak Bisa di Copas Kecuali Pada Bagian Tertentu
artikel tidak bias di copas

Membuat Artikel Blog Tidak Bisa di Copas Kecuali Bagian Tertentu

Cara Membuat Artikel Di Blog Tidak Bisa Di Copy Paste / copas, kecuali pada bagian tertentu, bagaimana cara agar blog tidak bisa di copas /atau copy paste.., tapi bagaimana juga supaya pada bagian tertentu bisa di copy, sperti tag post pre, post code, blockquote..?

Pada kesempatan yang berbahagia ini saya akan berbagi css untuk memprotek suppaya artikel di postingan blog kalian tidak bisa di copy paste kecuali pada bagian tertenu yang akan bisa di copas.

Biasanya cara ini dilakukan oleh orang-orang yang share tutorial blogger, orang yg suka berbagi script, kalo orang yang suka berbagi artikel tentang pengetahuan sbaiknya jangan ya...

kalo dipasang nanti kasian bagi anak sekolah yang ingin mencopy artikel kalian misal buat tugas sekolah...

Karena percuma nanti kalo mereka tidak bisa copy paste, kemungkinan besar akan malas mengunjungi blog kalian...

Oke lah tanpa basa basi lagi, kita langsung saja ke tutorial cara membuat blog tidak bisa di copy paste...
  • Login dulu ke Blogger.com
  • Masuk ke Tab Templates, Edit HTML
  • Selanjutnya Cari Kode ]]></b:skin> Atau </style>
  • Kalo sudah ketemu, masukan CSS dibawah ini tepat d atas salah satu kode yang di cari tadi...!
  • 
    /* ---Kode Agar Blog Tidak Bisa Di Copy Paste---*/
    .post-outer {
    -webkit-touch-callout:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    }
    /* ---Kode Agar Bagian tertentu Bisa Di Copy Paste---*/
    .post blockquote,.post pre,.post code{
      -webkit-touch-callout:text;
      -khtml-user-select:text;
      -webkit-user-select:text;
      -moz-user-select:text;
      -ms-user-select:text;
    }
    
    Jika ingin menambahkan kolom atau bagian tertentu bisa di copy paste, silahkan masukan id dari bagian tertentu ke kode css yang ke 2.

    Contoh, kalian inginagar komentar bisa di copy paste, tinggal tambahkan id atau class ke script yang ke 2 menjadi...
    
    /* ---Kode Agar Bagian tertentu Bisa Di Copy Paste---*/
    .comment_body p, .post blockquote,.post pre,.post code{
      -webkit-touch-callout:text;
      -khtml-user-select:text;
      -webkit-user-select:text;
      -moz-user-select:text;
      -ms-user-select:text;
    }
    
  • Kalau sudah jangan lupa di save ya :3 kalo tida nanti scriptnya g bakalan ada :v

Cukup sekian dan terimakasih, semoga artikel tentang cara agar artikel di blog tidak bisa di copas, kecuali pada bagian tertentu ini bermanfaat bagi kita semua ya :)

Tinggalkan jejak kalian di kolom komentar, supaya saya bisa dengan mudahnya mengunjungi blog kalian :)

cara mengcopy artikel yang tidak bisa dicopy di google chrome


cara mengcopy blog yang tidak bisa di copy di mozilla

Menu List Converter Text To HTML

Menu List Converter Text To HTML
Menu List Converter Text To HTML

Cara Mudah Membuat Menu List Dengan Converter Text To HTML

Membuat menu atau List dengan mudah tanpa mengetik kode htmlnya kali ini saya akan berbagi sebuah tools yang fungsinya untuk mempermudah ketika kita ingin membuat postingan dalam mode html dan ingin memberikan menu / list seperti UL Unordered List, OL Ordered List atau select Select Menu.

Dengan Menu List Converter Text to Html ini, kalian hanya perlu menuiskan kalimatnya saja tanpa menulis htmlnya, kanlian juga bisa menambahkan id atau class pada menu tersebut.

Apa Itu Unordered list adalah suatu metode mengurutkan daftar dengan menggunakan simbol atau special character pada html.

Apa itu Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka, abjad dan angka romawi pada html.

Nah bagi kalian yang ingin mencoba menggunakan tools menu list converter ke html ini, silahkan klik button dibawah ini...



Cukup sekian dan terimakasih, sudah mengunjungi artikel tentang Tools menu atau list converter to html ini, jika ada yang mau ditanyakan silahkan bertanya di kolom komentar ya :)

Jangan lupa mampir ke artikel lainnya tentang tools online yang ada di blog saya ini :)




ok Thank atas kunjungannya, smpai jumpa lagi di postingan yang akan datang ya :)

Membuat Prism Syntax Highlighter Simple Di Blog

Membuat Prism Syntax Highlighter Simple Di Blog
Membuat Prism Syntax Highlighter Simple Di Blog

Cara Membuat Prism Syntax Highlighter

Simple Prism Syntax Highlighter untuk blogger Kali ini saya akan berbagi sebuah pembungkus kode atau script di blog yang biasa di sebut dengan tag pre dan code atau bahasa latinnya Prism Syntax Highlighter :3

Prism Syntax Highlighter yang akan saya bagikan ini cukup lumayan simple, khusus buat orang yang suka tampilan yang simple seperti saya :3

Sebelumnya asya juga sudah pernah share Prism Syntax Highlighter yang lumayan tidak simple, karena di tutorial yang itu ditambahkan title untuk membedakan antara tag HTML, CSS, Javascript, jQuery.

Barang kali kalian pengen melihatnya silahkan kunjungi link ini.... Memasang Syntax Highlighter Pre Code Di Blogger

Buat kalian yang ingin mencoba Syntax Highlighter Pre Code ini, silahkan ikuti tutorial singkat di blog mas tamvan ini :v ...

  • Login dulu ke Blogger.com
  • Masuk ke Tab Templates, Edit HTML
  • Selanjutnya Cari Kode ]]></b:skin> Atau </style>
  • Kalo sudah ketemu, masukan CSS dibawah ini tepat d atas salah satu kode yang di cari tadi...!
  • 
    pre {overflow: auto;max-height: 450px;margin: 10px 0 !important;padding: 20px;}code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Roboto,sans-serif!important;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
    
  • Lanjut... Sekarang kalian cari kode </head>
  • Kalo sudah ketemu, masukan Javascript dibawah ini tepat d atasnya...!
  • 
    <script type='text/javascript'>//<![CDATA[
            $(document).ready(function(){
              $("pre code").addClass('language-markup');
              $("pre code").addClass('language-css');
              $("pre code").addClass('language-javascript');
            });
            //]]></script>
    
  • Masih lanjut gan, kita kasih style warna pada kode-kode tertentu dengan javascript berikut ini.
  • Cari kode </body>
  • Lalu masukan Javascript berikut diatasnya.
  • 
    <script src='https://rawgit.com/mastamvan/backup/master/prism.min.js' type='text/javascript'></script>
    
    Sebenarnya agan mau pasang di atas </head> juga bisa..!
  • Save template....
  • Cara Memasukan Script Ke dalam Syntax Highlighter Di Postingan

  • Silahkan agan buat postingan baru...
  • Lalu pilih Bilah / Mode HTML pada postingan. Contoh Lihat Gambar....
  • Membuat Prism Syntax Highlighter Simple Di Blog
  • Lalu agan masukan script di situ dengan pembungkus pre code.. contoh.....
    
    <pre><code>
    Scriptnya Disini
    </code></pre>
    
  • Perlu Di Ingat!!

    Kalo memasukan script ke postingan di mode HTML agan harus mem parse atau di konversi terlebih dahulu kode tersebut..
    Karena kalo tidak di parse / konversi nanti scriptnya akan bekerja dan tidak akan tampil..

    Untuk Mem parse kode HTML / Javascript bisa menggunakan tools yang sudah saya sediakan... Cara Parse Atau Konversi Kode HTML
  • Setelah itu agan tinggal lanjutkan menulis kata-kata lainnya.
  • Kalo sudah, tinggal save dan lihat hasilnya. #Thank

Terimakasih sudah berkunjung dan membaca artikel di blog saya tentang Cara Membuat Prism Syntax Highlighter Simple Di Blog ini, semoga bermanfaat.

Jangan lupa tinggalkan jejak anda di kolom komentar biar nanti saya mudah bekunjung ke blog kalian :) Okeh Sampai Jumpa Kawan :v

Open Graph New Meta Tag Author Facebook Url

Open Graph New Meta Tag Author Facebook Url
article Open Graph Object Type

article Open Graph Object Type author share link facebook


How to Add Facebook Author Tag in Blogger Cara mengganti meta tag author dengan Open Graph Meta Tag Url Facebook. Bagi kalian yang biasanya menemui meta tag url dari artikel yang di share ke sosial media seperti facebook biasanya hanya sebuah nama, nah di sini saya akan menggantinya dengan url yang bisa di klik atau ada link url di dalamnya.

Apa keuntugannya? Lumayan sih keuntungannya, bisa nanti kalian memasukan link fanspage facebook lalian jadi orang-orang akan tau dan memudahkan untuk memfollownya.!

Kalian juga tidak perlu menghapus meta tag author bawaan yang biasanya di isi dengan url google plus atau nama kalian.

Nah bagi kalian yang ingin mengganti meta tag author dengan yang terbaru ini Open Graph met tag author, silahkan ikuti tutorial berikut ini.

  • Login dulu ke Blogger.com
  • Masuk ke Tab Templates, Edit HTML
  • Selanjutnya Cari <head>
  • Lalu masukan script dibawah ini tepat di bawah kode <head>
  • 
    <meta content='https://www.facebook.com/tejasukmana99' property='article:author'/>
    
  • Silahkan ganti url facebook https://www.facebook.com/tejasukmana99 dengan url facebook kalian.
  • Setelah di pasang save template. done

  • Setelah memasang script Open Graph New Meta Tag Author di atas lalu agan share artikel ke sosial media facebook, hasilnya blm bisa tampil. Script ini biasanya bekerja setelah pemasangan kurang lebih 24 jam.
    Tunggu saja, nanti juga berubah menjadi super hero :v.
Cukup sekian dan terimakasih, semoga artikel tentang Open Graph New Meta Tag Author Facebook Urlini bermanfaat.

Jangan lupa share dan komentarnya, untuk meninggal kan jejak. supaya saya bisa berkunjung juga ke blog agan

Cara Mudah Download File Torrent Dengan IDM

Cara Mudah Download File Torrent Dengan IDM
cara memindahkan download dari utorrent ke idm

cara memindahkan download dari utorrent ke idm

cara convert torrent to idm dengan ZbigZ simple mudah dan cepat.

Bagi kalian yang males menginstal Utorrent atau download file menggunakan Utorrent tapi ingin menggunakan idm [ internet download manager ]. Maka disini saya akan berbagi caranya menconvert file yang tadinya harus di download menggunakan utorent akan dirubah secara online menjadi di diwnload menggunakan IDM.

Okeh sudah jangan basa basi lagi, kita lanjut ke tutorialnya saja Download File Torrent Menggunakan IDM
  • Pertama siapkan terlebih dahuli link file torrentnya.
  • Contoh d sini saya akan download file IDM di situs [kat.cr].
  • Silahkan copy file link download torrentnya di menu magnet link, contoh lihat gambar. Cara Mudah Download File Torrent Dengan IDM
  • Setelah di copy, silahkan masuk ke situs .https://zbigz.com/
  • Lalu pastekan link file torrent yang sudah di copy tadi ke kolom yang tersedia. Contoh : Cara Mudah Download File Torrent Dengan IDM Klik [GO]
  • Selanjutnya pilih [Free] saja. Cara Mudah Download File Torrent Dengan IDM
  • Tunggu Proses Convert selesai, kalo sudah selesai tampilannya seperti ini..... Cara Mudah Download File Torrent Dengan IDM
  • Silahkan pilih atau klik bagian [ZIP.] sebelah tong sampah. Nanti akan ada tampilan seperti ini lagi, silahkan pilih free. Cara Mudah Download File Torrent Dengan IDM
  • Tunggu sampai IDM keluar, nanti hasilnya seperti ini. silahkan mulai mendownload filenya. Cara Mudah Download File Torrent Dengan IDM
  • Done, sudah, selamat sampai tujuan. Tinggal nunggu koneksi terputus :v

Ok. cukup sekian dan terimakasih, semoga artikel tenteng Cara convert file download uttorent menjadi idm menggunakan ZbigZ onlineini bermanfaat bagi kita semua.

Jangan lupa tinggalkan jejak kalian di kolom komentar.

Ramalan Jodoh Atau Pasangan Hidup berdasarkan Tanggal Lahir

Ramalan Jodoh Atau Pasangan Hidup berdasarkan Tanggal Lahir
Ramalan Jodoh Atau Pasangan Hidup berdasarkan Tanggal Lahir

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir


Tools Primbon untuk meramal atau melihat pasangan dan jodoh kita berdasarkan tangal lahir dan kecocokan nama, buat kalian yang ingin iseng melihat apa prediksi kecocokan kalian dengan pasangannya apakah cocok atau tidaknya bisa coba tools yang satu ini :3

Tapi bukan cocok atu tidaknya lah, tools ini lebih ke mengetahui karakter, kecocokan, melihat weton kalian, sebutan untuk pasangan kalian..

Tools primbon ini bisa mengetahui apa Ramalan Primbon Jodoh Kmu Menurut Kecocokan Weton

Nah langsung saja buat kalian yang ingin mencoba tools ini, silahkan masukan data kalian di tools berikut..

Ramalan Jodoh Online
Nama Anda:
Tgl. Lahir Anda :
Nama Pasangan :
Tgl. Lahir Pasangan :


Tapiii....Perlu di Ingat..!
Semuanya kembali lagi kepada sang pencipta. Karena segala sesuatunya sebelum itu terjadi sudah direncanakan matang-matang oleh allah SWT. Manusia tidak bisa menentukan Takdirnya sendiri, namun bisa mengubahnya mulai dari sekarang.!

Pengertian Primbon...
Primbon adalah semacam perhitungan atau ramalan bagi Suku Jawa. Primbon biasanya membicarakan tentang watak manusia dan hewan berdasarkan ciri fisik, perhitungan mengenai tempat tinggal (Mirip Seperi ilmu feng sui), baik-buruknya waktu kegiatan seperti upacara perkawinan, pindah rumah, acara adat, dan lainnya..WIKIPEDIA

Jangan lupa mampir ke primbon jawa lainnya ya :)

  • Cara Mengetahui Zodiak Kita Lewat Tanggal Lahir Dengan Tools

  • Cara Melihat Watak Dan Sifat Menurut Neptu Kelahiran Dengan Tool

  • Auto Like Dan Follow Instagram Terbaru 2016 Work 100% No Spam



Cukup sekian dan terimakasih sudah mengunjungi blog saya tentang cara meramal jodoh dan pasangan hidup kita berdasarkan tanggal lahir Semoga artikel ini bermanfaat.

Ingat tools ini bikinan manusia, tetap percaya akan kebesaran allah, jangan terlalu percaya terhadap sebuah aplikasi atau tool.. okeh (y)

All In One Seo Pack 2016 For Blogger

All In One Seo Pack 2016 For Blogger
All In One Seo Pack 2016 For Blogger

Meta tag all in one seo friendly for blogger


All in one meta tag seo pack 2016 for blogger. Kali ini saya akan berbagi meta tag seo friendly all in one buat blogger, bagi kalian yang ingin mengganti meta tag pada template kalian dengan script ini silahkan di copy saja langsung :v . all in one seo pack ini saya copy dari blog msdesign. Tanpa basa basi kita lanjut saja...
  • Cara mengganti meta tag template blog dengan meta tag All In One Seo Pack 2016
  • Login dulu ke Blogger.com
  • Masuk ke Tab Templates, Edit HTML
  • Selanjutnya Cari <head>
  • Silahkan agan sesuaikan atau hapus sebagian code yang ada antara kode <head> sampai </head> dengan kode Seo Packdibawah ini.
  • Tapi kalau kalian ingin mengganti semuanya silahkan hapus semuanya lalu ganti dengan kode di bawah ini. Tapi kalau ada script CSS atau Javascript jangan di hapus, seperti kode
    <link href='xxx.css' rel='stylesheet'/>
    <script src='xxx.js'/>

<!-- All in One SEO Pack for blogger -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<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.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</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:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='YOUR, KEYWORDS, HERE' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<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></b:if></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/></b:if>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/+MasTamvan/posts' rel='publisher'/>
<link href='https://plus.google.com/+MasTamvan/about' rel='author'/>
<link href='https://plus.google.com/+MasTamvan' rel='me'/>
<meta content='GOOGLE-WEBMASTER-CODE' name='google-site-verification'/>
<meta content='BING-WEBMASTER-CODE' name='msvalidate.01'/>
<meta content='ALEXA-VERIFY-CODE' name='alexaVerifyID'/>
<meta content='Garut, Indonesia' name='geo.placename'/>
<meta content='YOUR-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='Indonesia' name='geo.country'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta name="language" content="english"/>
<meta content='https://www.facebook.com/link Facebook' property='article:author'/>
<meta content='https://www.facebook.com/Link Fanspage' property='article:publisher'/>
<meta content='FACEBOOK-APP-ID' property='fb:app_id'/>
<meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/>
<meta content='@Teja_7x' name='twitter:site'/>
<meta content='@Teja_7x' name='twitter:creator'/>
<!-- End of All in One SEO Pack for blogger -->

Customization:

  1. YOUR, KEYWORDS, HERE: Type your main keywords. 
  2. +MasTamvan: Your Google Plus profile id (replace 3 times
  3. GOOGLE-WEBMASTER-CODE:  Google webmaster tools verification code.
  4. BING-WEBMASTER-CODE: Bing webmaster tools verification code.
  5. ALEXA-VERIFY-CODE: Alexa Verify code.
  6. Garut, Indonesia: Your state and country name.
  7. YOUR-NAME: Blog's Admin name.
  8. Indonesia: Your country name.
  9. english: Your content language
  10. link Facebook: Facebook user name.
  11. Link Fanspage: Facebook page user name.
  12. FACEBOOK-APP-ID: Facebook app id. (make here)
  13. FACEBOOK-ADMIN-ID: Your Facebook ID. (find here
  14. @Teja_7x: Your Twitter username (replace 2 times).
Script Seo Pack di atas akan bekerja dalam waktu 72 Jam untuk memperbaharui struktur bawaan meta tag template sobat

Cukup sekian dan terimakasih telah membaca artikel tentang all in one seo pack, semoga artikel ini bermanfaat bagi kalian dan saya juga tentunya. Jangan lupa komentarnya ya :)

Mengatasi meta tag author dan deskripsi tidak tampil ketika di share

Mengatasi meta tag author dan deskripsi tidak tampil ketika di share
meta tag author, tag deskripsi, no image

Mengatasi Meta tag author, deskripsi dan no image


Mengatasi meta tag author, deskripsi dan no image ketika di share ke sosial media seperti facebook. Bagi kalian yang sedang mengalami masalah seperti deskripsi blog ketika di share tidak tampil, authornya ga ada, imagenya ga tampil, disini saya akan memberikan tutorial cara mengatasinya.

Dan bagi kalian juga yang meengalami masalah yang sama namun berbeda, seperti deskripsinya bertulisan xxxxxx dan author /atau oleh:xxxxx

di sini saya akan berikan tutorial cara mengganti tulisan xxxxx tersebut dengan nama atau link kalian sendiri.

Okeh langsung saja Memasang meta tag author, deskripsi, image .
Buat kalian yang memang belum terpasang meta deskripsi, author dan image.
  • Login ke Blogger.com
  • Lalu masuk ke tab Template Terus EditHTML
  • Setelah itu cari kode <head>
    Gunakan CTRL + F untuk mencarinya
  • Setelah itu masukan script meta tag dibawah ini di bawah kode <head>
    
    <!--Meta Image-->
    <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='https://3.bp.blogspot.com/-f0E4uzRnLdM/VgekzKtL4HI/AAAAAAAAAKk/UwbrGDXmqXc/s1600/mas-tamvan.png' property='og:image'/>
    </b:if>
    </b:if>
    <!--Meta Deskripsi-->
    <meta content='XxXxX' name='description'/>
    <!--Meta Author-->
    <link href='https://plus.google.com/XxXxX/posts' rel='publisher'/>
    <link href='https://plus.google.com/XxXxX/about' rel='author'/>
    <link href='https://plus.google.com/XxXxX' rel='me'/>
    
    Silahkan ganti kata XxXxX dengan ketentuan sebagai berikut.
    1. name='description' ganti XxXxX dengan deskripsi blog sobat.
    2. rel='publisher' ganti XxXxX dengan id google plus sobat.
    3. about' rel='author' ganti XxXxX dengan id google plus sobat.
    4. rel='me' ganti XxXxX dengan id google plus sobat.
  • Nah untuk kalian yang di templatenya sudah ada meta author, deskripsi, dan image. Cukup ganti XxXxX dengan ketentuan yang ada di atas.

Ok cukup sekian dan terimakasih, semog artikel dari saya tentang Memasang meta tag author, deskripsi, image ini bermanfaat.

Jika ada yang tidak dimengerti atau ingin ditanyakan silahkan bertanya di kolom komentar ya :)

Menu Navigation Bar OkayNav

Menu Navigation Bar OkayNav
Menu Navigation Bar Okay Nav

Menu Navigation Bar Okay Nav


Menu Bar OkayNav ini sangat cocok buat blog yang kebanyakan pengunjungnya dari mobail, karena Navigation bar OkayNav ini sudah responsive / mobail friendly yang tentunya akan memudahkan para pengunjung untuk melihat daftar menu atau kategori dari website tersebut.

Nah bagi kalian yang ingin melihat tampilan dari Menu OkayNav bisa klik link dibawah ini.

Jika kalian tertarik dengan menu OkayNav ini silahkan ikuti tutorial pemasangannya dibawah ini.
  • Login ke Blogger.com
  • Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 
  • Lalu masukan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style> 

html{font-size:62.5%;-webkit-tap-highlight-color: transparent ;font-family:@font-family-base}okynav{font-family:'Roboto',sans-serif;font-size:1.4rem;line-height:1.42857143;color:#555;background-color:#f7f7f7}
.okayNav a{text-decoration:none}
.okayNav ul{margin:0;padding:0;list-style:none}navokay{-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#3E454C;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;height:7rem;padding:0 15px;position:fixed;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;top:0;width:100%;max-width:939px;margin:0 auto}
.site-logo{transition:color 200ms cubic-bezier(.55,0,.1,1);color:#30acff;font-size:3rem}
.ok-navokay__logo:hover{color:#546edb}.okayNav-loaded{overflow-x:hidden}
.okayNav:not(.loaded){visibility:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.okayNav ul{float:left}.okayNav a{color:#fff;font-size:1.4rem;font-weight:bold;position:relative;z-index:1}
.okayNav__nav--visible{overflow:hidden;white-space:nowrap}
.okayNav__nav--visible li{display:inline-block}
.okayNav__nav--visible a{display:block;transition:color 200ms cubic-bezier(.55,0,.1,1);padding:15px}
.okayNav__nav--visible a:hover{color:#546edb}
.okayNav__nav--invisible{background:#2C3135;position:fixed;top:70px;bottom:0;overflow-y:scroll;-webkit-overflow-scrolling:touch}
.okayNav__nav--invisible a{background:#2C3135;width:240px;display:block;padding:15px}
.okayNav__nav--invisible.nav-left{left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.okayNav__nav--invisible.nav-right{right:0;-webkit-transform:translateX(100%);transform:translateX(100%)}
.okayNav__nav--invisible.transition-enabled{transition:transform 400ms cubic-bezier(.55,0,.1,1),-webkit-transform 400ms cubic-bezier(.55,0,.1,1)}
.okayNav__nav--invisible.nav-open{-webkit-transform:translateX(0);transform:translateX(0)}
.okayNav__menu-toggle{position:relative;transition:transform 400ms cubic-bezier(.55,0,.1,1),-webkit-transform 400ms cubic-bezier(.55,0,.1,1);cursor:pointer;width:40px;height:20px;float:left;z-index:1;top:15px}
.okayNav__menu-toggle.okay-invisible{position:absolute;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}
.okayNav__menu-toggle span{background:#fff;display:block;position:absolute;margin:auto;height:4px;width:4px;border-radius:50%;left:0;right:0;pointer-events:none}
.okayNav__menu-toggle span:nth-child(1){top:0}
.okayNav__menu-toggle span:nth-child(2){top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.okayNav__menu-toggle span:nth-child(3){bottom:0}
.okayNav__menu-toggle.icon--active{-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.okayNav__menu-toggle.icon--active span{background:#546edb}

  • Nah Selanjutnya masukan HTML dibawah ini tepat di atas kode <header> atau di bawah kode content-wrapper, atau sesuaikan dengan template blog sobat.

<okynav>
<navokay id="navokay">
  <a href="/"><img src="https://1.bp.blogspot.com/-SNPuENtPwOI/VyZudbh4yZI/AAAAAAAAEiU/FL4aTkSz3YAoBqzhMg0A8IvfAP-FCISzwCLcB/s400/logo.png" alt="Logo"/></a>

  <nav role="navigation" id="nav-main" class="okayNav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Testimonials</a></li>
    </ul>
  </nav>
<div class="clear"></div>
</navokay>
</okynav>
<script>
var navigation = $('#nav-main').okayNav();
</script>

  • Lalu masukan javascript dibawah ini tepat di atas kode </head>

<script src="https://googledrive.com/host/0BxJIMw9AiETsZjVnQTJ0ZXhNZVk"></script>

  • Selesai, tinggal save template.
Menu OkayNav ini memerlukan ajax jquery, kalo di template agan belum dipasang, silahkan pasang ajax jquery di atas </head>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
Pasang juga css reset dibawah ini tepat diatas kode </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css' rel='stylesheet' type='text/css'>
Kalau tampilannya masih berantakan, mungkin javascript atau css bentrok dengan yang sudah ada pada template anda.

Terimakasih, semoga bermanfaat.
Cukup sekian dan terimakasih, semoga artikel tentang Menu OkayNavini bermanfaat.
.