Cara Mengeposkan Artikel dengan HP (Ponsel) untuk Blogger

Sahabat Mazinu yang ingin update sebuah artikel atau postingan lewat HP (Ponsel), disini mazinu akan memberikan Tutorialnya cara update Arikel dengan HandPhone kalian. Ini cara mengepostkan artikel biasa mazinu praktekkan menggunakan Opera Mini di HP Samsung yang mazinu pakai. Jika kalian ingin mempraktekkannya Cara Mengeposkan Artikel dengan HP (Ponsel) untuk Blogger ini silahkan simak tutorialnya dibawah ini.

Cara Mengeposkan Artikel dengan HP (Ponsel) untuk Blogger
1. Buka akun blogger kalian.
2. Kemudian buka = Poskan Artikel dengan HP
3. Tuliskan Artikel yang ingin kalian Postkan, jika sudah selesai klik Terbitkan Entri.

Cukup mudah dan gampang untuk dipraktekkan, semoga Cara Mengeposkan Artikel dengan HP (Ponsel) untuk Blogger yang mazinu postingkan ini bermanfaat untuk kalian.

Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger

Pada kesempatan hari ini mazinu akan memberikan tutorial Blogger tentang Bagaimana Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger. Bagi sahabat mazinu yang ingin Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger silahkan simak tutorial yang mazinu berikan tentang Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger ini.

Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger
1. Buka Akun Blogger kalian.
2. Pilih Tata Letak - Tambahkan Gadget - Add HTML / Java Script.
3. Kemudian isikan dengan kode sript Tulisan mengetik sendiri dibawah ini.

<script language="JavaScript">
    var text="Terimakasih atas kunjungannya di mazinubersahabat.blogspot.com jangan lupa Ctrl+D dan Ctrl+S ya? Ditunggu kedatangannya kembali :)";
    var delay=10;
    var currentChar=1;
    var destination="[none]";
    function type()
    {
    //if (document.all)
    {
    var dest=document.getElementById(destination);
    if (dest)// && dest.innerHTML)
    {
    dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
    currentChar++;
    if (currentChar>text.length)
    {
    currentChar=1;
    setTimeout("type()", 5000);
    }
    else
    {
    setTimeout("type()", delay);
    }
    }
    }
    }
    function startTyping(textParam, delayParam, destinationParam)
    {
    text=textParam;
    delay=delayParam;
    currentChar=1;
    destination=destinationParam;
    type();
    }
    </script>
    <b></b>
    <br />
    <div 0px="" 10px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: white;">
    </div>
    <script language="JavaScript">
    javascript:startTyping(text, 50, "textDestination");
    </script>

4. Ganti kode warna merah dengan tulisan yang kalian kehendaki.
Cukup Mudah bukan? Nih mazinu juga memberikan Trik untuk memasang Tulisan Mengetik sendiri di Bawah artikel postingan kalian. Caranya :

Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Bawah Postingan
1. Buka Template - Edit Html
2. Copykan code dibawah ini tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;script language=&quot;JavaScript&quot;&gt;
  var text=&quot;Terimakasih atas kunjungannya di mazinubersahabat.blogspot.com jangan lupa Ctrl+D dan Ctrl+S ya? Ditunggu kedatangannya kembali :) &quot;;
var delay=20;
var currentChar=1;
var destination=&quot;[none]&quot;;
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// &amp;&amp; dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+&quot;&lt;blink&gt;_&lt;/blink&gt;&quot;;
currentChar++;
if (currentChar&gt;text.length)
{
currentChar=1;
setTimeout(&quot;type()&quot;, 5000);
}
else
{
setTimeout(&quot;type()&quot;, delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
&lt;/script&gt; &lt;div 0px=&quot;&quot; 12px=&quot;&quot; arial=&quot;&quot; color:=&quot;&quot; ff0000=&quot;&quot; font:=&quot;&quot; id=&quot;textDestination&quot; margin:=&quot;&quot; style=&quot;background-color: none;&quot;&gt;&lt;/div&gt; &lt;script language=&quot;JavaScript&quot;&gt;
javascript:startTyping(text, 50, &quot;textDestination&quot;);
&lt;/script&gt;
</b:if>

3. Simpan dan Lihat Hasilnya nanti seperti ini :

Mazinu rasa cukup mudah untuk dipraktekkan Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger ini. Semoga Cara Membuat Tulisan Mengetik Sendiri Tanpa Tabel di Blogger yang mazinu postingkan ini bermanfaat untuk kalian.

2 Cara Membuat Tombol Back To Top Terbaik di Blog

Hay sahabat +mazinu mazure ! Kali ini mazinu akan berbagi tentang cara membuat Tombol Back To Top atau lebih dikenal dengan Tombol Kembali Ke atas, yaa jadi fungsinya memasang back to top button itu agar pengunjung bisa langsung menuju ke atas dalam sekali klik. Nahhh langsung saja mazinu kasih tips dan caranya membuat tombol back to top.

Cara Membuat Tombol Back To Top Terbaik

Tombol Back To Top yang Pertama

• Login terlebih dahulu ke akun blog kalian
• Masuk ke bagian layout / tata letak
• Tambah gadget
• Pilh add HTML / Java script
• Lalu simpan kode dibawah ini :

<a href='#' style='display:scroll;position:fixed;bottom:15px;right:15px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy9-xR2M3kUOC-peykDBOe1Btia7bXlmR701pUHyheRwmGpRWEu0TR8UsTx-zM2t9vw-S-7yIZhIp983UGiwRajy2UuaZ9onbpS1vcxAX7o5dyqOclzAVlzfopmfusrTqQlw-pOPngx1kn/s1600/navigate-up-icon.png'/></a>

*) kode yang berwarna biru ganti dengan kata-kata yang ingin ditampilkan
*) kode yang berwarna ungu ganti dengan url gambar yang ingin ditampilkan

• Klik "Save", dan selesai.

Tombol Back To Top yang kedua 

• Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahkan HTML/JavaScript. Terus copy kode di bawah ini:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihhp8KFZDcXn7vyThNTlIqU4DbE6Trv9955Y0Xmheu5UcgQihx_FDwtQggrW3zKoKKL0aQX6KbanTAYnw2zZ4jMpIvWv5IW5XiXYDs_aBPQ3vTHCC0rmrfjxMnLHZpU-1Cw6QrM_CGPKwn/s1600/back+to+top10.gif" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
 
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

• Ganti Kode warna Pink dengan URL Gambar kalian!
• Kalau Tidak Mau ganti Tidak apa-apa, itu juga sudah bagus kok,, yang nantinya hasilnya seperti ini :

 

• Keren bukan? Jika sudah. Simpan!

Okeh, Itu tadi cara membuat tombol Back To Top yang sudah mazinu berikan untuk kalian, semoga dengan kalian memasang tombol back to top di blog kalian menjadi keren dan tampil terbaik!

Cara Memasang dan Membuat Scroll pada Blog Archive [Arsip Blog]

Hay sobat mazinu? Disini mazinu akan berbagi tutorial kepada kalian mengenai Bagaimana Cara Memasang atau Membuat Scroll pada Archive Blog kita, yang biasanya di kenal dengan Scroll Naik-Turun, dengan kita memasang Scroll di Blog maka tidak akan memakan banyak tempat untuk Archive Blog kita, sehingga semua isi / konten (daftar isi) pada blog kita bisa di baca dan di lihat oleh pengunjung blog dengan tampilan yang dinamis, Nah, Kalian ingin tahu caranya bukan? yang hsilnya nanti seperti ini :

Atau kalian bisa melihatnya pada sidebar mazinu,, karena mazinu sendiri juga memasang! Yok langsung saja ikuti tutorial dibawah ini :

Cara Memasang Scoll pada Archive Blog

• Login ke Blogger
• Di halaman Dasbor, pilih Template
• Kemudian pilih Edit HTML
• Cari kode ini : <div id='ArchiveList'> lebih cepatnya gunakan CTRL+F
• Setelah ketemu taruh kode <div style='overflow:auto; width:ancho; height:200px;'> ini tepat diatasnya kode <div id='ArchiveList'>
• Kemudian beri kode tambahan </div> sebelum kode <b:include name='quickedit'/>
• Selesai!
  Catatan : Sebelum kalian menggunakan tutorial ini sebelumnya kalian harus tambahkan HTML/Java Script - Blog Archive pada Tata Letak kalian!
• Jika masih bingung kalian bisa melihat tata letak yang benar seperti dibawah ini :

<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

Semoga Bermanfaat artikel yang saya post mengenai Cara MemasangScroll pada Archive Blog ini!

Cara Menampilkan Jumlah Komentar dan Postingan di Blog

Hay sobat mazinu, kali ini mazinu akan berbagi tutorial blogger mengenai bagaimana cara Menampilkan Jumlah Komentar dan Postingan di Blog. Jika kalian ingin membuat di blog kalian akan tampil jumlah komentar (comment) dan postingan (post) kalian silahkan ikuti tutorial yang mazinu berikan dibawah ini! Mmmh,, sebelumnya mazinu beri screnshot hasilnya nanti seperti dibawah ini :

Naahhh ingin sekali membuatnya bukan? Yuk ikuti tutorial dibawah ini :

Cara Menampilkan Jumlah Komentar dan Postingan di Blog 

• Buka Akun Blog kalian
• Masuklah ke Rancangan / Design
• Pilihlah Add Widget / Tambah Gadge.
• Pilih lagi Add HTML/JavaScript.
• Copylah Script di bawah ini :

<script style="text/javascript">function numberOfPosts(json) {document.write('Jumlah Posts : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}function numberOfComments(json) {document.write('Jumlah Komentar : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><ul><li><script src="http://mazinubersahabat.blogspot.com//feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li><li><script src="http://mazinubersahabat.blogspot.com//feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

Keterangan : Silahkan kalian ganti script yang mazinu beri warna merah dengan URL Blog kalian!
Semoga artikel yang mazinu posting tentang Cara Menampilkan Jumlah Komentar dan Postingan di Blog ini bermanfaat untuk kalian!

Cara Menghitung Jumlah Pengunjung Berdasarkan Bendera Negara di Blog (Memasang Flag Counter)

Hay sobat mazinu? Kemarin saya sudah memberikan cara Mendaftar dan Memasang DMCA PROTECTOR di Blog, Naahh,, untuk hari ini mazinu akan berbagi tutorial Blogger kepada kalian mengenai Bagaimana Cara Menghitung Jumlah pengunjung di blog dengan Cara memasang Widget Flag Counter yang berfungsi untuk menghitung jumlah pengunjung blog kalian berdasarkan Negara asal masing-masing,, yang hasilnya nanti seperti punya saya yang ada di sidebar! Yah,, seperti ini lah :

Nahh kalian ingin tahu caranya buka?? yuk ikuti cara yang mazinu berikan :

Cara Menghitung Jumlah Pengunjung Berdasarkan Bendera Negara di Blog

• Kalian kunjungi situs http://flagcounter.com
  Nanti kalian akan melihat tampilan seperti ini :

• Seperti pada gambar diatas, nati kalian bisa mengatur tampilan dari flag counter tersebut sesuka kalian. Berikut beberapa keterangan menu editing yang di berikan :

1. Top Countries : menampilkan jumlah pengunjung tiap negara dengan bendera negara asal pengunjung.
2.  Flag Map : menamplkan pengunjung dalam bentuk map aatau peta dunia
3. Mini Counter : menampilan counter dalam bentuk mini berupa pagaview blog.
4. Maximum Flag to Show : Jumlah bendera yang akan di tampilkan
5. Column of Flags : Jumlah kolom untuk counter
6. Label on Top of Counter : Nam dari counternya. bisa di ganti sesuai keinginan.
7. Background Color : Warna latar belakang
8. Text Color : warna teks.
9. Border color : Warna garis tepi.
10. Show Country Codes : Menampilkan kode setiap negara, misalnya amerika dengan kode US.
11. Show Pageview Count : Menampilkan jumlah pageview atau jumlah penelusuran halaman di satu blog
12. Show Number of Flags : Menampilkan seluruh jumlah bendera asal pengunjung.

• Setelah selesai ngeditnya, klik tulisan GET YOUR FLAG COUNTER Kemudian kalian akan melihat tampilan jendela baru yaitu verivikasi email,, kalian klik Skip aja ya? tidak usah diisi tidak apa-apa. Maka kalian akan mendapatkan Kode yang diberikan,, Lihat gambar :

• Kemudian kalian ambil kodenya (yang paling atas), setelah itu pasang ke HTML/Javascript pada Blog kalian.
• Caranya :Klik rancangan - Elemen laman - Tambah gadget - HTML/Javascript
  Masukkan kode kedalam kotak yang di sediakan kemudian klik save.

Semoga artikel tentang  Cara Menghitung Jumlah Pengunjung Berdasarkan Bendera Negara di Blog (Memasang Flag Counter) ini bermanfaat untuk kalian!

Cara Mendaftar dan Manfaat DMCA PROTECTED di Blog

Mungkin sahabat mazinu bertanya-tanya kenapa kok hampir disetiap Blog/Web pasti ada DMCA PROTECTED nya! Hayoo,, mungkin kalian tahu sebabnya?? Nah perlu kalian ketahui bahwasannya apabila kita memasang DMCA PROTECTED di web/blog kita maka web/blog kita akan terlindungi dari pencurian konten atau artikel kita :D Maka mazinu sarankan untuk kalian Untuk memasang DMCA PROTECTED di web / blog kalian,, yaaa,, untuk mencegah terjadinya copas yang tidak mencantumkan Link sumbernya dari orang-orang yang tidak bertanggung jawab!! Hmm,, Udah tahu kan manfaatnya? Sekarang tinggal mazinu memberikan Cara Mendaftarkan Blog kita ke DMCA PROTECTED.

Silahkan disimak Tutorial Berikut :
Cara Mendaftar DMCA PROTECTED di Blog

• Buka situs DMCA
• Lihat pada bagian  Website Protection
• Silahkan Pilih Get Protected
• Pilih badge yang digunakan dalam blog. (pilih sesuai selera kalian)
• Jangan lupa untuk mengisi formulir di sebelah kanan sebelum menggunakan badgenya!!
• Setelah ketemu badge yang kita sukai centang Add this Badge to Blogger 
• Selesai, silakan memasukan ke dalam elemen halaman blog kalian!

Mungkin itu sedikit Tutorial yang mazinu tuliskan untuk kalian,, semoga Artikel Cara Mendaftar dan Manfaat DMCA PROTECTED di Blog ini bermanfaat untuk kalian!!

Cara Membuat Menu Drop Down dibawah atau diatas Header

Sahaba mazinu tentunya ingin mempercantik blog bukan? Nah pada kesempatan ini mazinu akan memberikan tutorial blogger kepada kalian mengenai Bagaimana Cara Membuat Menu Drop Down dibawah atau diatas Header? Emm,, dengan kita menampilkan menu drop down atau menu Naik Turun dibawah Header atau diatas header, tepatnya yaitu pada judul Blog kita tentunya blog kita akan lebih keren dan lebih elegan dengan memasang widget satu ini. Mazinu kemarin juga memasang menu drop down,, dan mazinu yakin insyaalloh pasti berhasil, karena sebelumnya sudah saya praktekkan! Jika kalian tertarik membuat Menu + Sub menu yang dibuat Drop Down silahkan ikuti petunjuk atau cara mazinu ini ya? yang hasilnya nanti seperti ini :

MAAF CARA INI BELUM BISA DIGUNAKAN. MASIH DALAM PERBAIKAN :)

Woauuuww,, setelah kalian meliha gambar diatas tentunya kalian tertarik untuk membuatnya bukan?
naahh berikut caranya :

Cara Membuat Menu Drop Down dibawah atau diatas Header

• Kalian harus login terlebih dahulu ke blogger
• Klick Design, dan Edit HTML
• Cari kode ]]></b:skin> {untuk memudahkan mecari kodenya klick Ctrl + F} dan letakkan kode berikut tepat Diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVSu1PoodCnrvzMcLLbMCOLNJzAST_GCEDPpCEVPBnqf92nGHj6OKvm5nqleSk0UapK0gGghiR8vpJjT1xcW-W67Y626InAuzwKD7flZ3j1feAZAdKckYPkd_O9jg-xDCldc9g-cBQF8/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMfViwJDqWib9IaNX1G1knjita3yp7Cd2eSEzC8F9DsfcQx7Py3GwpuCEPe22n-wAwyiDj62B0JQD-x6dXMGRn-hqGd4VX8Lyj3KCkeIVjTnqUuqtpjyQGMzaIRFHVStgQyGRPMV9ychs/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} 

• Kode warna merah diatas silahkan rubah sesuai selera anda!
• Selanjutnya kalian cari kode berikut:
  <header>  : untuk menempatkan menu di atas nama blog
  </header> : untuk menempatkan menu di bawah nama blog
• Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://mazinubersahabat.blogspot.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhDCkwewcT420gSRh3iOBV5m74rHT3YwQplfcL-nccV9efR0iDt0bUn_AftcKNyE1qRqgHFNCpGeik5O6AjaJbN7nP1sRGKo-sjUEnIVfLoniGNnz-d1ATagkCA6KZMn3-mfPZ5ivcQxI/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 3</a></li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='http://mazinubersahabat.blogspot.com/' target='new'>Menu</a></li>
<li><a class='trigger'>Menu Drop Down</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Menu Blog</a>
<ul>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://mazinubersahabat.blogspot.com/'>Blog 4</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://mazinubersahabat.blogspot.com/' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://mazinubersahabat.blogspot.com/'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCj07X3Y08y913S-Dd-JIEGHqxTaqixdcxnfz9YTA2ESQ1OXiFFCnxyr-5Mw9-vYBmHXtP41ZVC4ILfcasvlkAeRR0_tMATl-7vW8iS32Vm-a7u4NBlppKtmAH0KY0Ovg8sSuHwb2Baw/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWK6WUPzXefe8_QnIgvbHzneQkRDN1HgoPvIkMxbHN_k-xIqA_IVmtIoLlUF6Qmt2dh1OiPl_DiHPk3qkhO6qWoFCT_J19SUkQbVsvrJDDonZA6oydYnabGSKQfvC09uKEc4N-jvauEn8/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

• Kode yang mazinu beri warna orange adalah URL tujuan,, silahkan ganti sesuai yang kalian kehendaki!
• Simpan dan Lihat Hasilnya!

Semoga Artkel yang saya tulis ini mengenai Cara Membuat Menu Drop Down dibawah atau diatas Header ini bermanfaat untuk kalian!

6 Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Hay sobat mazinu, disini mazinu akan memberikan tips blogger kepada kalian tentang bagaimana cara membuat kotak pencarian atau search box di blog kalian. Nahh,, disini mazinu mempunyai banyak pilihan model dan warna kotak pencarian, dari yang simple sampai yang keren dan berkualitas. Nah, silahkan kalian pilih salahsatu diantara banyak pilihan dibawah ini :

Kotak Pencarian 1
Caranya :
1. Login ke akun Blogge
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.

Kotak Pencarian 2
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :

<form action="http://mazinubersahabat.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Keterangan :
Ganti http://mazinubersahabat.blogspot.com/ dengan nama blog Kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.

7. Lalu Save dan Lihat hasilnya!

Kotak Pencarian 3
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2ah7js-rK-ceGAceX0MfXD8Joh9h-MNgKvp2L_gX9EGzYwV66QCsDj7igB-cAwE-xBU4-OwldCjXBZJUgeb1IRir35F1Da7LXk3vMWD-moD28J3XyqIbjL4MmomlkecdV21WNinjlDU_/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Keterangan : Ganti Tulisan warna merah sesuai keinginan kalian, itu berfungsi untuk menampilkan tulisan ditengah-tengah kotak komentarnya!

Dan Hasilnya nanti seperti ini :

Kotak Pencarian 4
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

 <form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRCc-QJImw9HioiwWMvwzIVXV3nBxs9J1IlscP3R5-PEQEKCkmf7i0Em3fYGBh4YS9ukJAlxh7BcKsAavJoUpTf64DYpEELcsHxvBnYCgKX3lKkwrI8ViBiolmQ8jF4Vjvt7njoP6hFvU/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB : Ganti warna merah sesuai dengan selera dan kebutuhan kalian yang  nanti tulisan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!

Yang hasilnya nanti seperti ini :

Kotak Pencarian 5
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNccjT9qA0ILc6WvJn__thRHC0e5PwHSinzZcR4DBxBsYjEnUAtZuAwMohPq2aY_JXmviRo5AsKL1wcKb2vL3NqzPDZf5JOcUYvPVy-vu4RwldsQQklxoeOWGmOe6cwq8Hv-Gex7yErQe/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

Keterangan :
Ganti Warna Merah dengan berbagai macam pilihan style dibawah ini :

Gaya Pencarian warna hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNccjT9qA0ILc6WvJn__thRHC0e5PwHSinzZcR4DBxBsYjEnUAtZuAwMohPq2aY_JXmviRo5AsKL1wcKb2vL3NqzPDZf5JOcUYvPVy-vu4RwldsQQklxoeOWGmOe6cwq8Hv-Gex7yErQe/s1600/impoint.blogspot.com-green.png

Gaya Pencarian warna merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJPE_8atgE4lUPth2khhL5Q2UeBo7_WQCVuc8zgEjV3aikyFbG368W8WRo7URdf29SvbTLCFX7QipSjWMMPRo1UoUmsWlm09j_y4BUyZTXDPYBikJnW4wJIqZlQpzLFO-m7SXrU5UOdF9/s1600/impoint.blogspot.com-red.png

Gaya pencarian warna biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbz8IirFGyFKdCyj8HdRdqXC9rkoXBljyUpKGUkk3RMXwR-NKlH0G7b7eq8j61-hxrqNaAw9szhjBOAaT7u_oatt3ImzRMabtx1WbU4IKAxKEV2sN6uw9Nc57qwjJI9lypKj_CFEyS2HrS/s1600/impoint.blogspot.com-blue.png

Gaya Pencarian warna orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4Ls7xzndcOOK8ANW6sY58Aic7YAFjNhyphenhyphenwh-AzCNK-Y7ApVd_tykXP37L64HFgcimyVbviY8TAXerueGHAUsdPTJZ5vIaznXnT9eBDEyHZzXAZTMkp1L4ya-53Mor6WmZf75-SSL1FXb2/s1600/impoint.blogspot.com-orange.png

Dan salah satu contoh hasilnya nanti seperti ini :

Kotak Pencarian 6
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi726Ap2RO9xCUFEzURPy9Oai8tQNKsqFqWo-DRcpgX9jBdgLXUdSljVD0Xij_o49ETh7dgraGHQN_aNvrgJgiX6_VeZBTQ3IIFh9fy3G2rIkobNNc72CBq5NVyNxBMeDLo91Ad-juezVAg/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>
</div></center>

Yang hasilnya nanti seperti ini :

Keterangan :
Silahkan kalian ganti warna merah diatas dengan kode dibawah ini, untuk mengganti tipe dan style selera kalian,,

http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG26h66CjB0SdhbPQ_e5Ar2oKDPhddriW8ZXA62uogERsfYDFq1AyTGsgAybOg2Q6HUKUPjONu7rEtaTuhMMOjoSeqnXfmR6cPNRScvvw6r1eHOLR106JSA7Z5oiD0jK9NUSy5tun65qs0/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNK8LTNiOTXpTOatLKRcXdkzxYO4oQ-IsI4ftfDlwj0-q52VuNkCvJshR0VWlU49-UWd9BYlcK3gLXKJ2U3F7olnQicVubyyY5DCjN3HB-sKVInu-1S0nXKJAKRBPzO5I34uMN4fRqLt97/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz8lwhhd2eblyU0xBlB7StoJZW25r5WQ9tIToejfShLQWAN9KKUEZcGvM-f7FE2ELtreB4QxnDDLJe9tRzY4ryw6RaNByaPCJ0mQxAyLm3OsCueJP52NVx0_reR1Zn9lMbthCPjwZaT4l5/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKXUG5w0dSX2DzVaK2VFC3tQVrHijT1GDHE4wiqCzNdFsOQfio_HUkhT3o2C_LUzi0qt6lbreLCd0kuRTHlYvN3TZJqqzUU_3PDD4axi8olXN-LIGv2wFtfiGgm_jpK_R0YgGWRaD61vC/s1600/lostsector-search-box-yellow.png

Okeh,, mazinu rasa cukup tentang artikel yang saya tulis mengenai 6 Cara Membuat Kotak Pencarian Paling Keren di Blog ini, semoga bermanfaat buat kalian!

Cara Menghilangkan Border atau Bingkai Gambar di Blog

Hay Sahabat? Masih tetap di tutorial Blogger. Nah, pada kali ini mazinu akan menjelaskan kepada kalian tentang cara Menghilangkan Border atau Bingkai Gambar di Blog, mazinu sendiri sebetulnya juga sedikit risih melihat gambar di blog saya atau di dalam postingan saya terlihat gambar/foto yang tidak sesuai jika diberi border/bingkai, sebagai perimbangan coba kalian lihat gambar di bawah ini :

Bagaimana? Bagusan tanpa bingkai atau bagus menggunakan bingkai? emmh, kalau menurut mazinu pasti bagusan gambar tanpa bingkai! Betul gak?
Okeh, kalau begitu langsung saja mazinu berikan tutorialnya :

• Login dulu ke Blogger kalian
• Klik Template
• Selanjutnya, klik Costumize untuk masuk ke halaman Blogger Template Designer
• Kemudian klik Advanced - Bawa scrollingnya ke bawah sampai ketemu kata Add CSS
  Maka akan muncul tampilan seperti ini :

 

• Untuk selanjutnya masukkan Kode Script ini pada kolom tersebut (lihat gambar diatas, klik untuk memperbesar)

.post-body img, .post-body .tr-caption-container, .Profile img,
.Image img, .BlogList .item-thumbnail img {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}

• Klik aply to Blog atau Terapkan ke Blog
• Selesai !

Cukup Mudah bukan? silahkan kalian praktekan sendiri! semoga artikel tentang Cara Menghilangkan Border atau Bingkai Gambar di Blog yang mazinu posting ini bermanfaat!

Cara Membuat Translate Bendera Negara di Blog

Sahabat mazinu ingin memiliki translate atau penerjemah bendera di blog bukan??
Nah, pada kesempatan ini mazinu akan berbagi kepada kalian tentang tutorial Blogger mengenai Cara Membuat Translate Bendera Negara di Blog silahkan ikuti petunjuk saya dibawah ini :

• Buka Akun Blog kalian
• Masuklah ke Rancangan / Design
• Pilihlah Add Widget / Tambah Gadge. 
• Pilih lagi Add HTML/JavaScript.
• Copylah Script di bawah ini :

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="English"><img align="absbottom" alt="English" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM0oCJc8L6HdagYPyjaM6y7x7RrfjJzajKsg9oo_PJnA8dKRwqg4_y8Dbef5iHc_tpL5yJ28TMQvPvKcHl0QqXSm_UbddSfdGDF3xiQtmMM6kpEfQpxU17PJoRO1gKG2TtUw8CY2a7xik/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="English" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="French"><img align="absbottom" alt="French" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirDOQdKtqqvld1UBCLTvAruod3haKouWtvWObooAq5DolCBmDP7nDRXtcXL_QCBTyreM3KgjZHxG5GDorh6f-W39maox-mhfCuW3p3hHivfirHQCHnKWLcvkGBhrySB8loAjTkHhcrrs8/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="French" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="German"><img align="absbottom" alt="German" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLKpA8vKvXki9XPUE0tr_X4WoZxSkbX2dk-dnHQkEtZVdqGS-4Hv3mBeWFEHj4U02SSFeYLaUIfD5jcvEZoYQFu8nduyadWyQ12xCiIVjcRg6McpNIoCkBKvSgTktPgMnVG4MfmpcO8lz/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="German" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Spain"><img align="absbottom" alt="Spain" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8nxV4ZWkVrtyY2GBsZJgi9ijnVbP2d3510ZTiaAhHTKCH8c8Z_0jzsG9KyDboadufL6n6ocHW3X718XIof-2wfiFUFXXiApn2fR-2VoP2SZq80jDYp1i0TxV85KcW3F6TfdvJQCaFhJJ-/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Spain" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Russian"><img align="absbottom" alt="Russian" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT1tL1EOxAFGvRPPMtD1rjlTvPMqZ-qe8x21_pMnLFf4CskIAhYCLQI89DMmm9nYz9tUFDWRStFXpJMXrVXeMkoLowI6uQ0kAOZRb8FK8V4z-u2ToX3c1MTfeZRi4rotohFEJKT1F9D_4/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Russian" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Japanese"><img align="absbottom" alt="Japanese" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgne98nwA7y0SJ0gDDehSUtgAXp13uOeMMaF9Td6Iv_B-B02y518tnXqOU6jQWwSg5-FqD9Vp8IfQway5Scjn5bZuCVF8iEeg1hwiBbGA93LU_9JBv4Tu-oJfcoca7a84yc3PqrSUPSRH3A/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Japanese" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Arabic"><img align="absbottom" alt="Arabic" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh64SvqTEYi6foTBEGbBh42ZJxZe7VQtNgfDmAERw4PM7XPjDQ7Kk0BxNdgkQcbZOECwEJqsDvg8CMJdqCDpvbUnayUtgGI0IPnXMyzjO5upVvvv3bypHk9OfzvbyJL3X7sVnLV6cCBZgE/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Arabic" width="24" /></a>

<a class="google_translate" href="http://www.blogger.com/post-create.g?blogID=7490537618574143540#" rel="nofollow" target="_blank" title="Chinese Simplified"><img align="absbottom" alt="Chinese Simplified" border="0" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4xk5WTL5QLFjK8Yh9Zu5ZNC_f7QojpOYvOdbA3NSMCwkcgJKv59Jq9XZKo8l_yK7lmLGj73pxSdE6KgWxOKliQkAdK-32Mx61IBVIwSia6Y2x1bKWkniABls1GbBWTKd0aMOK04Ueg9I/?imgmax=800" style="cursor: pointer; margin-right: 10px;" title="Chinese Simplified" width="24" /></a></div>

• Simpan dan Lihat hasilnya!
• Yang hasilnya nanti seperti ini :

Semoga  artikel yang mazinu buat tentang Cara Membuat Translate Bendera Negara di Blog ini bermanfaat :)

Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan Blog

Hae sahabat mazinu? Pada tutorial kali ini, mazinu akan memberikan tutorial kepada kalian tentang Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan Blog kita. Silahkan kalian periksa blog kalian di Template - Costumize - Advanced, Apakah disana sudah terdapat setting atau pengaturan untuk judul postingan? Kalau memang tidak ada, silahkan kalian ikuti langkah di bawah ini :

Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan Blog

• Login di Blogger
• Di menu drop down, klik template - Edit HTML
• Backup template kalian dahulu
• Cari kode yang seperti ini :

.post h3 {text-shadow: 1px 1px 3px #fff;
margin:.25em 0 15px;border-bottom:1px dashed $bordercolor;
padding:1px 0px 4px;
font:normal normal 24px Oswald;
font-weight:normal;
line-height:1.4em;
color:#333;
font:$titlefont;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
font:normal normal 24px Oswald;color:#333;
}
.post h3 strong, .post h3 a:hover {
  color:#c22400;
}

• Kalau kalian sudah menemukan kode seperti itu, hapus kode itu dan ganti dengan kode berikut :

.post h3 { margin: .25em 0 0; padding: 0 0 4px; color: $titlecolor; font: $posttitlefont; }
.post h3 a, .post h3 a:visited, .post h3 strong { text-decoration: none; color: $titlecolor; }
.post h3 strong, .post h3 a:hover { color: $titlehovercolor; }

• Selanjutnya, cari kode /* Variable definitions
• Kalau sudah ketemu, letakkan kode berikut di bawahnya :

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="titlehovercolor" description="Post Title Hover Color"
type="color" default="#c60" value="#cc6600">
<Variable name="posttitlefont" description="Post Title Font"
type="font" default="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 18px 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">

• Kalau di template kalian, ada salah satu dari kode di atas, hapus saja salah satu (Untuk menghindari kode yang sama).
• Selanjutnya, simpan template!

Semoga artikel tentang Cara Merubah Font, Ukuran, dan Warna pada Judul Postingan Blog ini bermanfaat! salam Mazinu :)

Cara Membuat Gambar Membesar saat disentuh Kursor di Blog

Pada kali ini mazinu akan jelaskan kepada kalian tentang Bagaimana cara agar Gambar yang ada di Blog kita apabila disentuh oleh kursor maka gambar tersebut akan membesar.
Sahabat Mazinu ingin tahu caranya??
Jika Sahabat ingin memasangnya silahkan disimak langkah-langkah berikut ini :

• Masuk ke akun blogger kalian.
• Pilih Template > Edit HTML.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard
• Jika sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

• Simpan, dan Lihat hasilnya!

Semoga Artikel tentang Cara Membuat Gambar Membesar saat disentuh Kursor di Blog diatas bermanfaat buat kalian!

Cara Membuat Link Sumber Otomatis Muncul Saat Artikel akan di Copy-Paste (copas)

Sebelumnya mazinu ingin tanya,, apakah kalian rela jika artikel hasil jerih payah ketikan kita sendiri di copas oleh orang yang tidak bertanggug jawab?? hmm?? mazinu yakin, pasti sebagian besar dari kalian menjawab tidak rela,, begitu pula dengan mazinu sendiri,, naahh oleh karena itu mazinu menuliskan artikel untuk sahabat mazinu tentang Cara Membuat Link Sumber Otomatis Muncul Saat Artikel akan di Copy-Paste, Intinya adalah Link kita akan muncul pada saat artikel kita di Copas oleh orang lain. Saya rasa artikel ini cukup bermanfaat buat blog kalian,, silahkan disimak tuorialnya

Cara Membuat Link Sumber Otomatis Muncul Saat Artikel akan di Copy-Paste

• Login ke Blog.
• Klik Template - Edit html
• Copy dan paste kode dibawah ini, tepat diatas kode <body>

 <script type='text/javascript'> if(document.location.protocol==&#39;http:&#39;){ var Tynt=Tynt||[];Tynt.push(&#39;cXIEhKYVSr4lJ5adbi-bpO&#39;);Tynt.i={&quot;ap&quot;:&quot;Sumber Artikel Dari: &quot;}; (function(){var s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;http://infonetmu.googlecode.com/files/sumber-otomatis.js&#39;;var h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})(); } </script>

• Setelah selesai, simpan template!
• Semoga bermanfaat! 

Dan sedikit pemberitahuan kepada kalian,, Script diatas bisa kalian gunakan dan pasti berhasil,, asal mengikuti petunjuk yang mazinu tuliskan,, tapi di "Blog Untuk Sahabat" tidak memakai script diatas karena mazinu yakin bahwa sahabat mazinu tidak ada yang seenaknya sendiri main copas tanpa menyertakan Link Blog mazinu!

Cara Membuat Permalink agar SEO di Blogger

Oke, mazinu kali ini akan menuliskan artikel tentang cara membuat permalink,, selain permalink itu bisa membuat blog kita menjadi SEO,, menurut mazinu permalink juga sangat bermanfaat bagi para pengunjung blog kita untuk mencopy link sumber artikel kita,, misal  : pengunjung kita ada yang ingin mencopy artikel kita, maka pandangan mata pengunjung blog kita langsung tertuju pada permalink Blog kita,, dan pastinya pengunjung akan melihat dan mengerti Link Blog yang mereka baca,, sehingga apabila pengunjung mencantumkan sumber link artikel blog (link aktif), maka artikel kita akan mendapatkan Back Link yang sangat bagus untuk optimasi di SE. okeh tanpa panjang lebar langsung saja mazinu berikan tutorialnya,,

Cara Membuat Permalink agar SEO di Blogger

• Pertama buka Blogger.com & Login.
• lalu masuk ke Dashboard > Template > Edit HTML.
• Kemudian cari kode ]]></b:skin> kemudian taruh kode dibawah ini tepat diatas kode ]]></b:skin> jika kalian tidak menemukan ]]></b:skin> cari saja dengan kode </b:skin> sama saja!

.permalink-xpresscommunity{border:1px solid #efefef;padding:5px;background:transparent;-moz-border-radius:5px;border-radius:5px;-webkit-border-radius:5px}

• Kemudian cari code: <data:post.body/> jika kode sudah ketemu taruh kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div class='permalink-xpresscommunity' style='padding:5px 5px 5px 5px; overflow: auto; width: auto; height: auto; text-align: justify;'>
<small>Anda sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan anda bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>. Anda boleh menyebarluaskan atau mengcopy artikel <strong><data:blog.pageName/></strong> ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.</small></div>
</b:if>

• Simpan dan Lihat hasilnya!
• Semoga artikel tentang Cara Membuat Permalink agar SEO di Blogger yang mazinu tulis diatas bermanfaat buat kalian sahabat mazinu!
• Dan silahkan kalian kreasikan sendiri model tulisannya sesuai keinginan kalian,, sebagai contoh lihat Permalink punya mazinu dibawah ini.

Semoga Bermanfaat! Nanti hasilnya seperti ini :

Mungkin disini sahabat mazinu ada yang ingin memasang Permalink seperti punya mazinu di Blog kalian, disini mazinu akan share juga Permalink yang menurut mazinu paling keren, bagus dan memuaskan hati saya,, karena permalink ini hasil editing buatan mazinu dengan tabel 2 kolom dan script Font Blink diatasnya. Sehingga terlihat simple dan menarik dilihat mata. Nahh jika kalian ingin memasang script permalink seperti punya mazinu silahkan copas kodenya dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table class='tableizer-table'>
<tbody>
<tr class='tableizer-firstrow'><th><blink><center>PERHATIAN</center></blink></th></tr>
  <tr><td><center>Apabila kalian ingin menyebar luaskan artikel tentang <span itemprop='itemreviewed'><b><data:post.title/></b></span> ini dimohon untuk menyertakan Link Sumber ke halaman ini : <br/> <strong><data:post.url/></strong><br/>Karena artikel ini Dilindungi oleh : <a href='http://www.dmca.com/Protection/Status.aspx?ID=54befa25-3bf5-4a96-a5d3-82fa3af7b11b' target='_blank'><b>DMCA PROTECTED</b></a><br/>Terimakasih atas pengertiannya. Salam Sukses!</center></td></tr>
</tbody></table>
</div>
</b:if>

Apabila kalian ingin menyebarluaskan alias ingin kalian publikasikan script ini di blog kalian tolong cantumkan link sumbernya ya? Terimakasih.