Showing posts with label Design Blogger. Show all posts
Showing posts with label Design Blogger. Show all posts

Membuat Pesan Pembuka Ramadhan Ketika Masuk Blog Terbaru 2016

Membuat Pesan Pembuka Spesial Ramadhan - Banyak cara untuk menyambut bulan suci ramadhan yang penuh berkah ini, bagi para blogger kita dalam menyambut bulan suci ramadhan bisa lakukan update posting spesial islamiyah atau hanya memberi kalimat ucapan saja di blog nya seperti blog saya ini sekaligus memang bisa untuk memeprcantik blog,

Untuk Pesan Pembuka Ramadhan ini akan menutupi layar pada browser di lengkapi tombol (Continue Reding) untuk menutup nya, contoh nya seperti blog saya ini saya udah menggunakannya, oke langsung saja ikuti langkah-langkah memsang nya

Membuat Box Pesan Pembuka Spesial Ramadhan 2016 Saat Masuk Blog
Baca JugaCara Mengembalikan File Yang Terhapus Permanen

Langkah-Langkah
  1. Masuk ke dasboard blogger > Template > Edit HTML
  2. Masukan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>
    #welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;} #welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;} .welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;} .welcomeclose:hover {background-color:#aaa} #welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(http://webneel.com/wallpaper/sites/default/files/images/06-2013/14%20ramadan%20wallpaper.jpg) no-repeat top center;}
  3. Selanjutnya masukan kode ini di atas tag </body>
    <div id='welcomeoverlay'/> <div id='welcomebox'> <p>&#8220;Marhaban Ya Ramadhan 1437 H / 2016 &#8221;<br/> Saya, Oka Rizky Nirlandi selaku Admin Blog ini mengucapkan<br/> &quot;Pucuk selasih bertunas menjulang, dahannya patah tolong betulkan, puasa Ramadhan kembali menjelang, salah dan khilaf mohon dimaafkan. Selamat Menunaikan Ibadah Puasa Pengunjung Setia Blog ORN. &quot;</p> <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div> </div>
  4. Simpan Template 
Keterangan : Pada kode HTML untuk di tag </body> jangan lupa untuk kalian edit dulu dari nama admin nya atau kata-kata nya gan, saya anggap kalian sudah mengerti cara mengedit script HTML, agan juga bisa mau ganti gambar background gambra nya bisa di edit di CSS nya ganti URL gambra nya

Cara Modifikasi Bulletlist di Sidebar Blogger Dengan Gambar

Selamat pagi sahabat blogger, sudah lama saya tidak update  berkaitan tentang blog, pada kesempatan kali ini saya akan memberikan tutorial Cara Mengganti/Mengubah Default Icon Bullet list di Blog Dengan Gambar para bogger biasanya menganti bullet list agar lebih menarik beda dari yang lain bisa denga font Awesome atau Gambar, setiap template biasa nya sudah memodifikasi bullet list pada sidebar dan postingannya dengan icon awesome panah sperti template EVO MAGZ milik mas sugeng,



tetapi ada juga template yang bullet lits pada sidebar nya masih bawaan contoh template yang saya gunakan ini awalnya bawaan bahkan suka tidak muncul juga bullet list bawaan nya, kemudian saya ganti denga gambar. Gimana menurut sobat keren tidak? Jika kalian tertarik untuk memodifikasi nya, silakan ikuti langkah-langkah di bawah ini. Mudah kok gan pemula aja pasti bisa,

Baca juga : Membuat Back To Top Sederhana Di Blog
Sebelum melakukan cara ini di sarankan untuk mem-backup template sobat masing-masing agar tidak acak-acakan  atau  terjad hal yang tidak diingkan.
Langkah-Langkah
  1. Seperti bisa login ke blogger > Template > Edit HTML
  2. Tekan CTRL - F untuk pencarian kode Masukan kata kunci sidebar li jika tidak ada, coba yang sama namanya atau mendekati namanya nya yang penting ada tulisan sidebar sama li Karena setiap template mungkin berbeda-beda
  3. Jika sudah ketemu kurang lebih kodenya sperti ini di template sobat
    sidebar li { margin:0; padding:0 0 2px 0; text-indent:0px; line-height:1.5em; }
  4. ganti kode di atas dengan dengan kode di bawah ini

    .sidebar li { font-size: 12px; background: transparent url(http://3.bp.blogspot.com/-iHyDInZidks/T-CQPj0yjcI/AAAAAAAAO5c/8tIQkJQtS98/s1600/star_bullet.png) no-repeat left top; bo rder-bottom: none; line-height:1.25em; padding-left:1.5em; padding-right:1.5em; }

  5. Jika sudah KLIK SIMPAN TEMPLATE dan lihat hasilnya
Sekian dari saya semoag bermnafaat bagi kalian semua, tolong tinggalkan jejak komentar ya mohon maaf bila ada kesalahan kata-kata maupun bahasanya tidak mengerti :) wassalam

Cara Menampilkan Rating Bintang di Hasil Pencarian Google

Kalau kita sering browsing pasti pernah liat kan salah satu blog yang di hasil pencarian google ada rating bintang nya, pasti kita berpikir bahwa blog yang ada rating nya itu blog yang profesional dan artikelnya berkulitas, padahal mah semua blog juga bisa memasangnya, rating ini sangat berguna sekali karena dapat menarik perhatian pengunjung bila atikel blog kita ada bintangnya di hasil pencarian google dan muncul di  urutan 5 besar, pasti lebih banyak yg mengunjungi artikel kita walupun artikel kita berada di urutan 4 di mesein penelusuran google.

Cara Menampilkan Rating Bintang di Hasil Pencarian Google

keren bukan? jadi serasa blog kita itu paling profesional :D tapi google tidak menjamin rating ini terus muncul di pencarian google, atau bahasa sederhana nya kadang muncul kadang tidak.
oke, kita langsung saja, simak cara pemasanganya cara buat rating bintang di blog
  1. Pergi ke dasbor blogger masiang-masing > ke halaman Template >  klik Edit HTML
  2. Cari kode ini <data:post.body/> Gunakan CTRL + F agar mudah mencarinya.
  3. kemudian letakan kode di bawah ini tepat di bawah kode di <data:post.body/>
    Biasanya kode <data:post.body/> ini lebih dari 1. Apabila ada dua maka pilih kode yang kedua. Apabila lebih dari dua silahkan coba satu persatu
  4. 
    <div style='-moz-border-radius: 10px; -webkit-border-radius: 10px;-o-border-radius: 10px; background-color: none; border-bottom: 2px solid #eea956; border-left: 15px solid #eea956; border-right: 15px solid #eea956; border-top: 2px solid #eea956; height: auto; margin: 10px 0px; padding: 10px; font-size: x-small; text-align: left; width: auto;'> <div class='hreview'> <span class='item'> <span class='fn'><data:post.title/></span></span> &#8226; <span class='reviewer'><data:post.author/></span> &#8226; <span class='rating'>4.5</span> </div></div>
    
    

  5. Klik "Simpan Template"

Setelah mengklik simpan template, coba cek salah satu artikel di blog anda, jika berhasil maka akan muncul tulisan di bawah postingan, contoh seperti ini

Cara Menampilkan Rating Bintang Di Hasil Pencarian Google

nah sekarang sudah selesai, untuk mengecek apakah rating bintang nya sudah muncul sebagai rich snippets, kalian bisa ngecek nya disini Google Structured Data Testing Tool kemudian masukan salah satu URL artikel blog anda klik "pertinjau" dan lihat hasilnya

akan seperti ini :
Cara Menampilkan Rating Bintang di Hasil Pencarian Google

Google Structured Data Testing Tool hanyalah untuk mereview rich snippets atau struktur struktur yang ada blog sobat yang akan di tampilkan di hasil penelusuran google. Bila ada bintangnya jadi rating bintang berhasil di pasang sebagai rich snippets, coba kalian buat artikel baru kemudain coba cek artikel anda di pencarian google, dengan kata kunci site:namablog.blogspot.com (yang saya tandai merah ganti dengan url blog sobat) lihat apakah artikel yang agan buat tadi ada ratingnya atau tidak? bila tidak coba coba tunggu beberpa hari. Kita juga harus tahu bahwa google tidak menjamin rating bintang tersebut terus muncul biasanya kadang muncul kadang tidak.


Demikian postingan tentang Cara Menampilkan Rating Bintang di Hasil Pencarian Google ini, semoga bermanfaat dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. kalau msih ada yang bingun atau yang mau ditanyakan silakan tulis di komentar

Membuat Syntax Highlighter Blogger

Sebelum kita membahas cara membuat syntax highlighter di blog ada baiknya kita mengenali dulu itu Syntax Highlighter? yaitu upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, dan masih banyak lagi. Biasanya para blogger menggunakan Blockquote untuk maneruh script pada postingan, Benar kan? kalau saya sarankan menggunakan syntax saja bro karena menurut saya syntax berguna agar script yang di bagikan di postingan menjadi menarik dan profesional, Bagaimana? Tertarik Menggunakan Syntax?
Langkah-langkah 

  • Dasbor > Template > Edit HTML
  • Tambahkan kode CSS ini tepat di atas ]]></b:skin>
/* Syntax Highlighter */ pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#2f3741;border-left:4px solid #40627E;font-size:11px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;line-height:1.4em;position:relative;white-space:pre;word-wrap:normal;white-space:pre;overflow:auto} pre.line-number{background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left;padding-left:54px;border-left:none} pre.line-number:after{content:"";width:35px;height:8px;background-color:#39424e;bottom:0;left:0;position:absolute} pre[data-codetype="CSS"]{border-left-color:#5fbbba} pre[data-codetype="HTML"]{border-left-color:#4fc1eb} pre[data-codetype="JavaScript"]{border-left-color:#ff6c60} pre[data-codetype="JQuery"]{border-left-color:#99c262} pre.line-number[data-codetype]:before{content:attr(data-codetype);display:block;margin:-11px -13px 10px -54px;padding:8px 12px;font-family:Oswald,Arial,Sans-serif;font-size:12px;text-transform:uppercase;background-color:#41749f;color:white} pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e} pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb} pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60} pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262} code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14} #comments code{color:#bbbb6d} pre code{padding:0!important;color:#a3a49a;background:none!important;border:none!important;display:block} pre .line-number{float:left;margin:0 1em 0 -1em;color:#61686d;background-color:#39424e;text-align:right;min-width:2.5em;padding-right:4px} pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic} pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C} pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F} pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425} pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3} pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#D94CEA} pre .deletion{color:#dc322f} pre .tex .formula{background:#073642}
  • Kemudian tambahkan kode jQuery ini tepat diatas kode </body>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/> <script> hljs.initHighlightingOnLoad(); </script>

Cara penggunaan
Dan jangan lupa, postingan juga harus di mode Edit HTML bukan mode COMPOSE , Untuk menulis di postingan, gunakan kode seperti dibawah ini


<pre><code>...Masukan Kode Disini...</code></pre>

    Sampai disini dulu tutorial Membuat  Syntax Highlighter blogger, Semoga tutorial ini bermanfaat bagi blog anda agar lebih profesional, terimakasih jangan lupa tingalkan komnntar ya

    Sumber : http://www.ficripebriyana.com/2014/06/cara-membuat-syntax-highlighter-di-blog.html

    Membuat Contact Form Blogger Terbaru

    Sebelumnya saya sudah membuat artikel tentang Membuat Back To Top Sederhana Di Blog, kali ini saya akan memberikan tutorial terbaru yaitu Membuat Contact Form  Blogger Terbaru contact form yang akan share mungkin berbeda sekali dengan yang lain karena perkiran saya, hanya saya yang menggunakan form contact saya ini perbedaan nya hanya saat eksekusi pesan yang akan dkirim tidak akan langsung ke email tetapi ke halaman  file .txt web  yang akan kita buat nantinya menggunakan hosting, cara pembuatnya sama seperti fake login phising, saya hanya mengambil script merekam name, email, message saja untuk pembuatan contact form blogger ini pada saat pengunjung meng-klik Send ,Widget Contact Form ini khusus di halaman statis 
    Membuat Contact Form  Blogger Terbaru

    Script Eksekusi
    Bingung cara masuk ke link downloadnya? solusinya [Klik Disini]

    Langkah-Langkah Membuat Web Eksekusi :
    1. Anda harus buat web dulu di hosting, hosting mana saja seterah mau gratis maupun berbayar saya anggap kalian semua sudah bisa membuat web sendiri di hosting, kalo belum bisa kalian cari dulu tutorialnya di google dan tutorial cara upload script
    2. Setelah jadi membuat web nya di hosting sebelum di upload scriptnya edit dulu script nya yang tadi sudah di download,  buka file .zip nya untuk mengedit
    Yang harus diedit sebelum meng-upload script : 
    •  index.php, kalian buka file index.php file nya ada dua kalian edit semua ubah tulisan http://namablog.blogspot.com ganti dengan nama blog masing-masing 
    • succes.php, kalian buka file succes.php di dalamnya ada tulisan
      http://namablog.blogspot.com ganti dengan nama blog masing-masing
    • Setelah selesai diedit, tinggal upload script contact form nya ke hosting masih dalam bentuk .zip oke, setelah di upload sekarang web eksekusi dan penyimpanan pesan nya sudah jadi.
    Langkah-Langkah Membuat Contact Form :
    1. Pergi ke  dasbor blogger masing-masing
    2. Buat laman baru di blog anda, untuk membuat form contact nya,
      pertama Dasbor > Laman > Laman Baru
      Kemudian  ubah ke versi HTML, masukan script dibawah ini
    3. 
      Pengunjung yang terhormat, kami mengharapkan partisipasi anda dalam memberi masukan, pertanyaan, saran, serta kritik yang membangun. Agar kami bisa lebih baik dalam pelayanan serta fitur-fitur yang berguna bagi pengunjung di hari-hari mendatang.<br />
      <br />
      Silakan menghubungi kami dengan mengisi kolom di bawah ini :
      <br />
      <br />
      
      <center>
      <form action="http://okarizkynirlandi.com/contact/send.php" method="post">
      <table>
              <tbody>
      <tr>
                <td>Name&nbsp;<span style="color: red;">*</span></td>
                <td>:</td>
                <td><input name="name" required="true" type="text" /></td>
            </tr>
      <tr>
                <td>Email&nbsp;<span style="color: red;">*</span></td>
                <td>:</td>
                <td><input name="email" required="true" type="text" /></td>
             </tr>
      <tr>
                <td valign="top">Message&nbsp;<span style="color: red;">*</span></td>
                <td valign="top">:</td>
                <td><textarea cols="70" name="message" required="true" rows="6"></textarea></td>
            </tr>
      <tr>
              <td></td>
               <td colspan="5"><input class="submit" name="submit" size="18" type="submit" value="Send" />
               <input class="reset" name="reset" size="18" type="reset" value="Reset" /></td>
               </tr>
      </tbody></table>
      </form>
      </center>
      


    Perhatikan kode diatas terdapat link http://okarizkynirlandi.com/contact/send.php yang saya tandai merah itu kalian harus di ganti dengan domain web yang kalian bikin tadi di hosting. Untuk melihat pesan yang dikirmkan pengunjung lewat contact form yang kalian buat tadi bisa anda lihat di http://domain-web-anda/contact/database.txt itu adalah halaman penyimpanan nya, bila ingin di balas pesannya hubungi email pengunjung yang tertera di halaman penyimpanan :)
    Admin Mohon maaf karena tidak ada link DEMO nya
    Baca Juga : Cara Menampilkan Rating Bintang di Hasil Pencarian Google

    Kesimpulanya jadi kita gak usah ribet-ribet buka email  hanya  untuk melihat apa yang dikirmkan pengunjung lewat contac form seperti contoh contact form yang biasa kita temukan, untuk melihatnya hanya pergi ke halaman penyimpanan /database.txt web masing-masing yang tadi kalian buat disitu sudah keluar pesan yang dikirmkan pengunjung lewat contact form kita.

    Itu saja tutorial yang saya buat hari ini kurang lebih nya mohon maaf bila ada penulisan kata-kata. jika sobat blogger masih bingung bisa tanyakan via komentar

    Membuat Back To Top Sederhana Di Blog

    Back to top berfungsi untuk mengembalikan posisi kembali keatas dari bawah, jadi sangat memudahkan pengunjung kembali ketas tanpa menggunakan scroll. kebanyakan pengunjung itu males naik keatas dengan scroll mungkin alesannya karena lama :D jadi back to top ini sara penting bagi suatu blog

    Membuat Back To Top Sederhana Di Blog

    Langkah-Langkah
    1. Login blogger > Tmplate > Edit HTML
    2. Cari kode </body> gunakan Ctrl+F
    3. lalu copy kode dibawah ini, kemudain paste tepat diatas kode </body>

       <a href='#' style='position: fixed;bottom:5px;right:0px;' title='Back to  Top'><imhttp://s27.postimg.org/45t1dtdwf/1448184664_back_on_top.png' style='border: none;' width='50'/></a>
      

    4. Simpan template
    Baca Juga : Cara Modifikasi Bulletlist di Sidebar Blogger Dengan Gambar

    itu saja tutorial yang saya berikan malem ini semoga bermanfaat, tunggu update artikel selanjutnya. Bila sobat suka dengan artikel blog ini, silakan langganan upadate artikel blog ini gratis langsun dikirim via email :)

    Cara Membuat Link Sumber Otomatis Saat Blog Di Copas

    selamat siang sahabat blogger, terimakasih sudah berkunjung ke blog baru saya, ini adalah artikel perdana di blog baru saya  artikel yang akan saya share adalah Cara Membuat Link Sumber Otomatis Ketika Artikel Di Copas. Script ini sangat berguna sekali bagi para blogger yang tidak ingin artikelnya di copas tanpa link sumber, karena saat pengunjung memngcopy artikel sobat, otomatis saat di paste akan muncul link sumber. Keren bukan

    Baca Juga : Membuat Syntax Highlighter Blogger

    Berikut Cara Caranya
    1. loggin ke blogger masing masing
    2. Klik Template > edit HTML
    3. cari kode </head> pada kotak template agar lebih mudah gunakan Ctrl+F
    4. copy script di bawah ini lalu pastekan tepat di atas </head>

    <script type='text/javascript'>
    
    function addLink() {
    
    var body_element = document.getElementsByTagName('body')[0];
    
    var selection;
    
    selection = window.getSelection();
    
    var pagelink = "<br/><br/>Sumber :<a href='"+document.location.href+"'>"+document.location.href+"</a><br/>"; // change this if you want
    
    var copytext = selection + pagelink;
    
    var newdiv = document.createElement('div');
    
    newdiv.style.position='absolute';
    
    newdiv.style.left='-99999px';
    
    body_element.appendChild(newdiv);
    
    newdiv.innerHTML = copytext;
    
    selection.selectAllChildren(newdiv);
    
    window.setTimeout(function() {
    
    body_element.removeChild(newdiv);
    
    },0);
    
    }document.oncopy = addLink;
    
    </script>
    
    

    Terakhir simpan template sobat, dan lihat hasilnya :)
    oke, sampai sini saja tutorial saat ini, semoga bermanfaat