Cara Gampang Simple Pre Code Dengan Seleksi Di Blog

   Halo sahabat kali ini aku akan sharing bagaimana cara melaksanakan simple pre code di blog kalian masing-masing.Bagi sahabat yang sering menyebarkan tutorial blogger tentunya sudah tidak abnormal lagi tetang penerpan code HTML, CSS atau lain-lain . Dan sebagai wadah menerapkan code-code tersebut pada postingan sahabat perlu membungkus kode-kode terbungkus dengan tag pre

Berikut adalh pola cod HTML yang telah terbungkus tag pre

<pre><code><button>pressme</button></code></pre>

begitulah pola code yg telah di bungkus oleh tag pre kini mari kita buat

Memasang prism Syntax Highligher di Blogger

Nah disii aku akan mencoba sharing scrip sederhana yang dapat sahabat terapkan di blog

OK langkah-langkahnya menyerupai berikut :

1.Buka Blogger > Templates > KLik edit HTML > Simpan code css di bawah ini sebelum code ]]></b:skin> atau </style>

/* CSS Simple Pre Code */ pre {     background: #fff;     white-space: pre;     word-wrap: break-word;     overflow: auto; }  pre.code {     margin: 20px 25px;     border: 1px solid #d9d9d9;     border-radius: 2px;     position: relative;     box-shadow: 0 1px 1px rgba(0,0,0,.08); }  pre.code label {     font-family: sans-serif;     font-weight: normal;     font-size: 13px;     color: #444;     position: absolute;     left: 1px;     top: 16px;     text-align: center;     width: 60px;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     pointer-events: none; }  pre.code code {     font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;     display: block;     margin: 0 0 0 60px;     padding: 15px 16px 14px;     border-left: 1px solid #d9d9d9;     overflow-x: auto;     font-size: 13px;     line-height: 19px;     color: #444; }  pre::after {     content: "double click to selection";     padding: 0;     width: auto;     height: auto;     position: absolute;     right: 18px;     top: 14px;     font-size: 12px;     color: #aaa;     line-height: 20px;     overflow: hidden;     -webkit-backface-visibility: hidden;     transition: all 0.3s ease; }  pre:hover::after {     opacity: 0;     visibility: visible; }  pre.code-css code {     color: #0288d1; }  pre.code-html code {     color: #558b2f; }  pre.code-javascript code {     color: #f57c00; }  pre.code-jquery code {     color: #78909c; }

2.Langkah berikutnya tambahkan scrip di bawah ini sebelum tag pentup </body>

<script type='text/javascript'> //<![CDATA[ //Pre Auto Selection $('i[rel="pre"]').replaceWith(function() {     return $('<pre><code>' + $(this).html() + '</code></pre>'); }); var pres = document.querySelectorAll('pre,kbd,blockquote'); for (var i = 0; i < pres.length; i++) {   pres[i].addEventListener("dblclick", function () {     var selection = getSelection();     var range = document.createRange();     range.selectNodeContents(this);     selection.removeAllRanges();     selection.addRange(range);   }, false); } //]]> </script> 

Scrip diatas berfungsi menyeleksi otomatis kalau sahabat melaksanakan doble click pada area yg di bungkus tag pre

3.Langkah berikutnya simpan template anda

Untuk penerapan di postingan silahkan terapkan aba-aba di bawah ini

<pre class='code code-html'><label>HTML</label><code>... code html  yg ingin dalam block ...</code></pre>  <pre class='code code-css'><label>CSS</label><code>... aba-aba CSS code yg ingin dalam block ...</code></pre>  <pre class='code code-javascript'><label>JS</label><code>... aba-aba JavaScript code yg ingin dalam block ...</code></pre>  <pre class='code code-jquery'><label>Jquery</label><code>... aba-aba jQuery code yg ingin dalam block ...</code></pre>

scrip diatas akan membungkus aba-aba dengan warna putih kalau anda ingin merubah warnanya menjadi hitam ganti ccs diatas dengan css di bawah ini:

/* CSS Simple Pre Code */ pre {     background: #333;     white-space: pre;     word-wrap: break-word;     overflow: auto; }  pre.code {     margin: 20px 25px;     border-radius: 4px;     border: 1px solid #292929;     position: relative; }  pre.code label {     font-family: sans-serif;     font-weight: bold;     font-size: 13px;     color: #ddd;     position: absolute;     left: 1px;     top: 15px;     text-align: center;     width: 60px;     -webkit-user-select: none;     -moz-user-select: none;     -ms-user-select: none;     pointer-events: none; }  pre.code code {     font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;     display: block;     margin: 0 0 0 60px;     padding: 15px 16px 14px;     border-left: 1px solid #555;     overflow-x: auto;     font-size: 13px;     line-height: 19px;     color: #ddd; }  pre::after {     content: "double click to selection";     padding: 0;     width: auto;     height: auto;     position: absolute;     right: 18px;     top: 14px;     font-size: 12px;     color: #ddd;     line-height: 20px;     overflow: hidden;     -webkit-backface-visibility: hidden;     transition: all 0.3s ease; }  pre:hover::after {     opacity: 0;     visibility: visible; }  pre.code-css code {     color: #91a7ff; }  pre.code-html code {     color: #aed581; }  pre.code-javascript code {     color: #ffa726; }  pre.code-jquery code {     color: #4dd0e1; }

Demikianlah penerapan simple pr code di postingan blog biar bermanfaat

sumber : /search?q=simple-pre-code-dengan-seleksi

All In One Seo Pack 2016 Terbaru Untuk Blogspot Blogger

    Halo teman kali ini aku akan membagikan tips meta tag keywords di blog Anda, sehingga akan menciptakan bots pencarian perihal blog Anda. Meta tag deskripsi juga penting bagi blogger. Meta tag deskripsi menunjukkan ringkasan dari halaman Anda atau postingan di hasil pencarian.

Meta tag description merupakan yang paling penting untuk mengindeks postingan Anda di search engine. Meta title dan meta tag deskripsi yaitu yang paling penting bagi blogger seo. Meta tag description Blogger adalah   <meta name=”description” content="XXXX”>. <meta name = "description" content = "XXXX"> ini yaitu meta tag description untuk blogger dan juga untuk menempatkannya sesudah <head> ibarat meta tag title. Jangan khawatir, di bawah ini aku akan menjelaskan kepada Anda, bagaimana cara menambahkan meta tag di blogger. All in One SEO Pack 2016 Terbaru Untuk Blogspot Blogger sanggup membantu Anda untuk hasil pencarian yang lebih baik.

Ok,langsung saja pertama pergi ke Blogger Dashboard > Edit HTML kemudian pastekan code di bawah ini sesudah <head>

<!-- All in One SEO Pack for blogger by msdesignbd.com --> <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/GOOGLE+ID/posts' rel='publisher'/> <link href='https://plus.google.com/GOOGLE+ID/about' rel='author'/> <link href='https://plus.google.com/GOOGLE+ID' 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='Sylhet, Bangladesh' name='geo.placename'/> <meta content='YOUR-NAME' name='Author'/> <meta content='general' name='rating'/> <meta content='Bangladesh' 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/Msubel.np' property='article:author'/> <meta content='https://www.facebook.com/Msdesign.rtml' property='article:publisher'/> <meta content='FACEBOOK-APP-ID' property='fb:app_id'/> <meta content='FACEBOOK-ADMIN-ID' property='fb:admins'/> <meta content='@msubelbd' name='twitter:site'/> <meta content='@msubelbd' name='twitter:creator'/> <!-- End of All in One SEO Pack for blogger by msdesignbd.com -->

Lalu gantilah beberapa tulisanseperti di bawah ini :

1. YOUR, KEYWORDS, HERE: Type your main keywords. 
2. GOOGLE+ID: 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. Sylhet, Bangladesh: Your state and country name.
7. YOUR-NAME: Blog's Admin name.
8. Bangladesh: Your country name.
9. english: Your content language
10. Msubel.np: Facebook user name.
11. Msdesign.rtml: Facebook page user name.
12. FACEBOOK-APP-ID: Facebook app id. (make here)
13. FACEBOOK-ADMIN-ID: Your Facebook ID. (find here) 
14. @msubelbd: Your Twitter username (replace 2 times).

 Sekian tips dari aku kalau anda menemukan problem silahkan berkometar terimakasih telah berkunjung di namikazesites dan jangan lewatkan hal menarik lainnya di namikazesites.

referensi : /search?q=all-in-one-seo-pack-2016-untuk-blogspot 

Bisnis Sampingan Tanpa Modal Dan Sanggup Duit Lewat Ngeblog

 kita seluruh tentu sanggup berasumsi konyol bila mendengar ada perjuangan sampingan tanpa modal duit. mana ada perjuangan tanpa modal ? ? eitss.. namun tunggulah dulu, janganlah berasumsi bahwa untuk membuahkan uang mesti juga mengorbankan duit yang kita punyai sebagai modal utama. kita kemudian sanggup membuahkan duit walau tanpa modal, perumpamaannya melewati situs (blog) gratisan. sesuatu situs (blog) sanggup membuahkan duit, niscaya setelah banyak blogger yang telah membuktikannya.



dari hobi menulis atau sharing ide serta pengalaman di situs (blog) sanggup memperoleh pendapatan tidaklah wacana yang tidak mungkin. setelah banyak bukti cuma dikarenakan ngeblog lantas memperoleh pendapatan yang lumayan. lantas langkah sanggup duit dari ngeblog dengan lekas bagaimana ? ? niscaya seluruhnya tidak instan, perlu kerja keras untuk memperoleh laba dari situs (blog).

di antara langkah ialah memanfaatkan atau sediakan area ( space ) dari blognya untuk menampilkan iklan maupun ikuti lomba situs (blog). tersebut disini langkah'>cara-cara untuk memperoleh duit dari aktivitas ngeblog yang terhitung didalam perjuangan sampingan tanpa modal :

a. memperlihatkan iklan pada situs (blog) kita. dengan banyak catatan atau content yang telah kita bikin serta kita publikasikan di situs (blog) sanggup mendatangkan traffick atau pengunjung. sampai situs (blog) kita sanggup untuk menampilkan iklan. bagaimana agency iklan akan untuk menempatkan iklan di situs (blog) kita ? janganlah cemas, kita sanggup menggunakan pihak ke tiga, umumnya beberapa blogger menempatkan iklan dari agency iklan online, semisal ada ; kliksaya. com, kumpulblogger. com, adsensecamp. com, sitti. co. id, idblognetwork. com & google adsense. jumlah duit yang diperoleh dari situs (blog), dihitung berdasarkan jumlah klik iklan yang ditampilkan atau dikenal dengan arti ppc atau pay per click.

b. aktif ikuti lomba situs (blog). dunia blogging semakin ramai, serta banyak kegiatan-kegiatan online yang menggunakan situs (blog). di antara yang sanggup dipakai untuk memperoleh duit dari situs (blog) ialah ikuti lomba situs (blog). makin hari makin banyak lomba situs (blog) yang berhadiah cukup lumayan. lomba situs (blog) umumnya ada 2 type, yakni lomba situs (blog) untuk search engine optimeninggalon & kreatianeka ragamitas menulis. umumnya lomba yang diadakan ialah type lomba situs (blog) yang menutut kreatianeka ragamitas blogger didalam wacana menulis.

lalu apakah dengan ngeblog sanggup memperoleh uang ? setelah niscaya dapat, bagaimana langkah memperoleh duit dari situs (blog) ? ada bermacam langkah, berdasarkan pengalaman sebagian blogger dan pengamatan, diatas ialah langkah positif didalam memperoleh duit atau pendapatan dari ngeblog. tetapi, apakah blogger sanggup kita buat jadi profesi terus untuk memperoleh pendapatan ?

cuma sedikit yang berani serta akan. tetapi tidak ada salahnya kita untuk jadikan aktivitas yang membuahkan banyak faedah di sela-sela waktu senggang kita. seluruhnya itu niscaya bergantung semangat apa yang mendasari didalam kita untuk ngeblog, yang terang kreatianeka ragamitas, keunikan jadi wacana terutama. apabila kita berasumsi ngeblog ialah sesuatu hobi, atau aktianeka ragamitas sampingan, baiknya kita lakoni dengan sungguh-sungguh serta gunakan hati. jikalau kita sanggup memperoleh duit dari situs (blog), tersebut bonusnya, bila kemudian tidak memperoleh juga tak lagi kurangi motianeka ragamasi ngeblog kita. seluruh bergantung tingkat keseriusan kita. salam usaha.