Menghilangkan Link Pada Judul Posting/Artikel

Sudah lama tidak posting karena banyak urusan di luar dunia blogger, rasanya jari-jari gatal karena lama tak mengetik, pada postingan kali ini tutorial blogger yang akan saya buat tentang menghilangkan link pada judul artikel. Apa harus kita praktekan trik ini kedalam template ? Harus, menurut pengalaman saya setelah mengedit link judul artikel menjadi mati, tak trasa artikel yang baru tak buat, sudah masuk ke si mbah google, sepertinya karena judul link yang mati ini, tetapi sangat berguna untuk melakukan trik ini pada template yang menggunakan readmore pada homepage. Langsung saja tutorialnya tanpa basa basi,

Langkah - Langkahnya ! 

  • Login ke blogger kalian,
  • Pilih "Template" - "Edit HTML",
  • Jangan lupa centang "Expand Widgets Template",
  • Gunakan ctrl-F untuk mencari kode <h2/> atau <h1/> sesuaikan dengan template kalian,
Untuk memperjelas kode HTML, silahkan cari kode seperti di bawah ini,
Kode dengan <h2/> untuk judul artikel,


<b:if cond='data:post.title'>
<h2 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>


Berikutnya, kode dengan <h1/> untuk judul artikel,

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>


Selanjutnya, jika sobat sudah menemukan kode seperti di atas,
Silahkan dengan kode-kode di bawah ini, sesuaikan dengan template kalian, <h2/> atau <h1/>

Silahkan ganti kode yang sudah sobat temukan dengan kode di bawah ini,
Kode dengan <h2/> untuk judul artikel,


<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h2>

Selanjutnya, kode dengan <h1/> untuk judul artikel,



<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h1>


Saya rasa sekian dulu tutorial untuk Menghilangkan Link Pada Judul Posting/Artikel,
Semoga artikel ini bermanfaat..



Selamat Mencoba.

Cara Memasang Social Bookmark di Bawah Judul Artikel/Posting

Pada tutorial kali ini Kang Koisine akan membahas tentang penerapan Social Bookmark pada blogspot dengan artikel yang berjudul "Cara Memasang Social Bookmark di Bawah Judul Artikel/Posting". Rasanya sangat kurang sekali jika blog tidak dilengkapi dengan aksesoris yang satu ini, sebut saja Social Bookmark. Social Bookmark ini sangat penting pada blog, selain membagikan artikel ke beberapa jejaring sosial, Social Bookmark ini juga mengaruh terhadap rank atau serp, Mengapa ? Kita ambil salah satu contoh jejaring sosial facebook. Umumnya artikel pada blog kadang kala kita membaginya ke facebook, dan siapa saja yang melihat artikel yang telah kita bagikan ke facebook berarti mereka akan mengklik artikel tersebut apabila artikel menarik dan buat penasaran, nah disinilah letak seonya, karena artikel yang diklik itu melalui facebook dan pastinya facebook mempunyai rank yang tinggi yang bisa membantu blog kita.

Social Bookmark yang akan saya bagikan ini tampilannya menarik dan sama seperti apa yang kalian lihat di bawah judul artikel, dan sub social bookmark ini meliputi facebook share, twitter share, digg share, stumble share, dll. Sebelumnya, Social Bookmark ini telah diterapkan oleh O-om.com yang diletakan sama di bawah judul artikel, apa kalian tertarik dan ingin mempraktekannya ?

Untuk kalian yang ingin tahu tampilan Social Bookmarknya, lihat gambar di bawah ini,


Kita mulai dengan langkah awal,

  • Login ke BLOGGER kalian,
  • Masuk ke "Edit Template",
  • Beri centang "Expand Widget Templates"
  • Gunakan ctrl-F untuk mencari kode di bawah ini,
]]></b:skin>
  • Letakan kode CSS berikut ini sebelum/diatas kode di atas,

/* SET FACEBOOK LIKE AND BOOKMARK ON POST */
.icn-bm {float:right; padding-top:9px; border:none; padding-right:10px}
.icn-bm h4{color:#333; font-family:'Helvetica Neue',Arial,sans-serif; font-size:16px !important; font-weight:bold}
.icn-sh{padding-top:2px}
.icn-sh img{width:16px; height:16px; border:none; margin:0 3px}
.fb-like{background:#FFFFD7;padding-left:10px; background-image:none; border:1px solid #FFFF00; margin-bottom:15px; padding-top:10px}
.fb-like iframe{margin-bottom:5px}
.fb-like h4{color:#333; font-family:'Helvetica Neue',Arial,sans-serif; font-size:16px !important; font-weight:bold}

  •  Gunakan ctrl-F lagi untuk mencari kode di bawah ini,
<data:post.body/>
  • Letakan kode HTML di bawah ini sebelum kode di atas,
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='icn-bm '>
<!--FECEBOOK LIKE AND SOCIAL BOOKMARK-->
<h4>Do you want to share?</h4>
<div class='icn-sh'>
<a href='/feeds/posts/default/' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmco8at3fEtChomfTo0DomPETW4BeOxYN_88vbJym4v3fjkZ2EuzXY9mUv-n2q3VGE89RDU9pDO3Efz2c4Yzx_Gf1Yx4LgN-K6tSp52TlzpdwUxnH2E8KRD0zazilPqeLcc-0261Z30k0/s400/feed.png' width='16'/></a>
<a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEVAwI6HPvljl5LLqHO_XMvRIwVnCBRadpdmXfLXcbkx5KnCkCQEFHMyTShJJ4duRAWPQQ_Zcyx_MhM_0ah5KLTaHkX1lKZ7HIfci0rkHLwssLiE_dBHSGuAlom_0IVMIJw3aEJm7VCTU/s400/facebook.png' width='16'/></a>
<a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share on Twitter'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSZmjzM6kFWENYNvQn0MzBcBT3pF64nb5by7Wx6V6PclB5JHTG5kfraa3rweVmn1nskZgKnF7PtBK8TsKWQY81E3rxSHFSVdeY04wxnYvVjWyPh5AlULLN10Hu8rTtrp6erjzTZDRF6A/s400/twitter.png' width='16'/></a>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid2ziqovaKtVGKJZZE3d3YA_RmAg7AwLaVrDtPpRnUmBcOPv5qgGQUKVO-ihNlyUOy3OwIdvcKHjy5GLbubljafMTLo4cjAgbj-FPyvdUoDMkrHqkE2UXQivRcnaqAxK_39kezmmnRpsWB/s400/delicious.png' width='16'/></a>
<a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6h3tpuDK2Z2Kiyg3ToQbdA_c3-VjfrV72AJFExeoEOdPdA8Oq4dZ6Hn2VBAxWUfnD760IaE9MRqy9H9522SnLzaXL1KpGOI_Wnbct4dOf-2l5IRIgHLJ1q-lm44TtyPrlBX664QJFYug/s400/digg.png' width='16'/></a>
<a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'><img alt='' border='0' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi771aavmZbcKZnw1wY_TlkU95290wnh-X6zDhKPsXQS-lH3O6pnbbzQtS7jhF2fL6YsrZhyphenhyphenXQF-Y-Wi7Jza3NfJ9-Ndqh3S0li5Nh6tgv19qBdwa7cJuBxgQW94vnR7V7BF0Kc21cfjUW2/s400/stumbleupon.png' width='16'/></a>
</div></div>

<div class='fb-like' style='clear: none;'>
<h4>Do you like this story?</h4>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_counter addthis_pill_style'/>
<script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=sodiyc' type='text/javascript'/>
<!-- AddThis Button END -->

</div></div>
</b:if>
<!--END FECEBOOK LIKE AND SOCIAL BOOKMARK--> 

Note :
Jika sobat menggunakan fitur "Readmore" carilah kode <data:post.body/> dan pilih yang kedua,
  • Terakhir, Simpan Template.
Sekian tutorial dari saya, semoga bermanfaat,

Penulis : Kang Koisine

Cara Membuat Text Style Untuk Judul Blog

Cara Membuat Text Style Untuk Judul Blog - Kali ini saya akan membuat postingan atau tutorial blogger sesuai dengan request sobat blogger yang meruquest melalui soutmix, dia merequest cara membuat Text Style untuk Judul Blog, contoh gambarnya seperti di bawah ini,





Biasanya judul pada header blog menggunakan font standar, nah pada postingan ini Kang Koisine ingin berbagi trik untuk mengedit dan membuat Text Style untuk Judul blog,

Begini caranya,

Note : Backup dahulu template sobat untuk mengurangi kesalahan yang terjadi.
  • Langsung masuk ke "Edit Template" jangan lupa ceklist "Expand Template Widget",
  • Setelah itu, silahkan sobat cari kode #Header 1 atau kode yang mirip seperti di bawah ini,
#header h1 {
  font-size:……..
  dan el-el
}
  • Selanjutnya, ganti kode yang sudah sobat temukan dan ganti dengan kode di bawah ini,
#header p {margin:3px 0 20px}
#header h1 {
font: bold 1.75em "Trebuchet MS", Arial, Helvetica, sans-serif;
letter-spacing: -1px; padding: 2px 0 0 0px;
margin: 0; background: inherit;
}
h1 .red{ color: #DF5900;background: inherit;}
Note : Silahkan gunakan inspirasi sobat untuk mengubah kode di atas agar semakin menarik.

  • Selanjutnya, cari kode html yang mirip seperti di bawah ini,
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
  • Selanjutnya, ganti kode yang sudah sobat temukan dan ganti dengan kode html di bawah ini,
<div id='header-inner'>
<div class='logo'>
        <h1><a href='http://www.blogsobat.blogspot.com/' title='tulisan sobat'>tulisan sobat <span class='red'>tulisan sobat</span><sup>tulisan sobat</sup></a></h1>
            <p>tulisan sobat</p>
      </div>
</div>
Note : Silahkan sobat ganti tulisan yang berwarna merah.
  • Terakhir, Save Template.
Untuk kode, silahkan sobat cari kode yang mirip seperti kode yang sudah tertera di atas, kode akan berbeda pada setiap template,

Terima Kasih..

Cara Membuat Textarea dengan Background Kertas

Cara Membuat Textarea dengan Background Kertas - biasanya Textarea sangat berguna untuk sobat yang suka membuat tutorial yang mengutamakan script atau kode Html yang panjang. Berbeda dengan Textarea yang satu ini, textarea ini menggunakan tampilan dan background yang menarik jadi enak untuk dilihat,


Cara membuatnya,
  • Login ke Blogger,
  • Selanjutnya, Template - Edit Template HTML,
  • Gunakan ctrl-F untuk mencari kode seperti di bawah ini,
]]></b:skin>
  •  Selanjutnya, letakan kode HTML di bawah ini sebelum kode yang sudah sobat temukan,
/* scroll ----------------------------------------------- */ .scrollboxs{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnStABwnZNHZYF_EimrUnSu1KEFE_N7T8RVYAhkzuLxHdVMEBp1DWc_DhnwqpJDMc4mOGcX99E7nQ_nTNtUEF0gqx5ZaG-UnfsuQP0l1UHY4ZpHsDbyv2HAxUJTRk9eNnx6PL75fvDH6c/s1600/papers.jpg) repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#cccccc'); color: #940f04; color:rgba(0,0,0,0.9); border:1px solid rgba(0,0,0,0.5); -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-border-bottom-left-radius:10px; -webkit-box-shadow: 3px 3px 5px #000000; -moz-box-shadow: 3px 3px 5px #000000; -webkit-border-bottom-left-radius:10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); text-decoration: none; padding: 3px; overflow: auto; width: auto; height: 150px; padding-top:3px; padding-bottom:3px; } .scrollboxs a, .scroll:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_xZ2dOIJCC98SRC4vkPMme_Z2pFF2utcdhb7JO5fjr1DaZiqd3fx9j1g7jVxb_W1yE2eUU_vxC6GuDlX0c-2SP7EIDmcVC6nilKeqS5bGvxv5mtVw3VOOBJNoWJJ3YokqyLXxqmmWXVM/s1600/papers.jpg) repeat; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#f3f3f3'); color:#000; color:rgba(0,0,0,0.9); border:1px solid rgba(0,0,0,0.5); -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -webkit-border-bottom-right-radius:10px; -moz-border-radius-topleft:10px; -webkit-border-top-left-radius:10px; -moz-border-radius-bottomleft:10px; -webkit-box-shadow: 3px 3px 5px #2E2E2E; -moz-box-shadow: 3px 3px 5px #2E2E2E; -webkit-border-bottom-left-radius:10px; text-shadow:1px 1px 0px rgba(255,255,255,0.8); text-decoration: none; padding: 3px; overflow: auto; width: auto; height: 150px; padding-top:3px; padding-bottom:3px; }
Keterangan :

width: auto; - Lebar Textarea, bisa diubah sebagai contoh 200px;  
height: 150px; - Tinggi Textarea, bisa diubah

Selanjutnya untuk pemanggilannya gunakan Html Posting atau HTML di posting
Dan kode pemanggilannya sebagai berikut,

<div class"scrollboxs">masukan text atau kode html disini</div>
Selamat mencoba.

Cara Membuat Link atau Tulisan Tampil Disamping Sidebar

Cara Membuat Link atau Tulisan Tampil Disamping Sidebar - Di hari yang penuh rahmat ini Kang Koisine akan berbagi tutorial seputar bloogspot, nah saya akan membahas cara tulisan atau link tampil disamping judul sidebar, sebagai contoh - kalian bisa lihat pafa Widget Followers pada blog ini, atau seperti gambar di bawah ini,


Bagaimana caranya ?

Backup dahulu template sobat untuk mengurangi kesalah.
  • Sekarang, masuk ke "Layout",
  • Tambahkan gadget dengan memilih "Add Gadget",
  • Silahkan cari dan klik "Javascript/HTML",
  • Usahakan pada judul sidebar dikosongkan dan sisipkan beberapa kode di bawah ini kedalam "Javascript/HTML", atau untuk lebih jelas lihat gambar di bawah ini,

  • Kode pertama, Link dengan Icon atau Background,

<style type="text/css"> .pasang-link{ font-size:11px; float:right; font-weight:bold; background:url(alamat gambar) right 0px no-repeat; padding-right:20px; } </style> <h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>
    • Kode kedua, hanya Link saja yang ditampilkan,

    <style type="text/css"> .pasang-link{ font-size:11px; float:right; font-weight:bold; } </style> <h2><span class="pasang-link"><a href="URL">Link Title</a></span>Title Sidebar</h2>
      • Kode ketiga, hanya tulisan saja,

      <style type="text/css"> .pasang-link{ font-size:11px; float:right; font-weight:bold; } </style> <h2><span class="pasang-link">Text Here</span>Title Sidebar</h2>
        Silahkan sesuaikan dari ketiga kode di atas sesuai dengan sobat.

        Selamat Mencoba..

        Download Template Ala Blogjuragan Gratis

         Download Template Ala Blogjuragan - sekilas kita lihat dari gambar disamping template yang digunakan oleh Blog Juragan - blog yang isisnya tentan tutorial seo, sudah tersedia secara gratis di sini. Sekarang kalian sudah bisa menggunakan template yang sama persis seperti blog juragan, selain ramah dengan pengunjung, template ini juga mengutamakan SEO Friendlynya dan memudahkan artikel masuk ke mesin pencari.


        Apa saja fitur-fitur dari template Blogjuragan ini :

        - SEO Friendly
        - Visitor Friendly
        - Dilengkapi dengan Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
        - Dilengkapi dengan dinamic metatag deskripsi dan keyword otomatis (metatag wajib untuk menghindari duplikat meta deskripsi &amp;amp; keyword)
        - Quicklink ke kotak komentar
        - Sudah dipersenjatai Autoreadmore
        - Dilengkapi dengan tambahan beberapa Meta tag untuk mempermudah robot menjelajah blog sobat.
        - Loading yang cepat
        - Konsep minimalis &amp;amp; simple
        - dll.

        Silahkan sobat download templatenya : Via Ziddu

        Silahkan sobat lihat demo dari template Blogjuragan : Lihat Disini

        Author Template : Kang Gricit

        Note : Untuk link download, silahkan sobat pilih salah satu saja.

        Selamat Mencoba.

        Cara Membuat Pageviews Berbeda Setiap Artikel

        Cara Membuat Pageviews Berbeda Setiap Artikel - Pageviews adalah jumlah rataan yang menghitung berapa jumlah pengunjung yang datang pada suatu blog. Cara kerja pengitungan Pageviews ini yaitu apabila ada 120 pengunjung yang datang ke blog, maka jumlah Pagviews pada blog akan bertambah sebesar 120 sesuai dengan pengunjung yang datang, tetapi saya tidak akan membahas pageviews pada blog, saya akan membahas Pageviews pada artikel atau jumlah pengunjung yang membaca artikel pada blog, contoh gambarnya seperti di bawah ini,










        Angka 18 menjelaskan, bahwa jumlah pengunjung yang membaca artikel pada blog ada 18 pengunjung, nah sekarang Bagaimana memasangnya ?

        Caranya adalah,

        Backup dahulu template sobat untuk mengurangi kesalahan yang terjadi.
        • Silahkan sobat masuk ke "Edit HTML" - jangan lupa ceklist " Expand Template Widget",
        • Selanjutnya, cari kode html seperti di bawah ini,
        <data:post.body/>
        •  Selanjutnya, letakan kode di bawah ini sebelum atau sesudah kode yang sudah sobat temukan,
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='hit-counter'>
        &lt;a href=&#39;http://csharpdotnetfreak.blogspot.com&#39; rel=&#39;follow&#39;&gt;
        <script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> &lt;/a&gt;
        </div></b:if>
        Sebelum, berarti sobat meletakan widget Pageviews di atas artikel atau di bawah judul artikel.
        Sesudah, berarti sobat menaruh widget Pageviews di bawah artikel.

        Dengan memasang widget ini sobat dipermudahkan untuk melihat berapa jumlah reader yang membaca artikel pada blog sobat.

        Selamat Mencoba.